summaryrefslogtreecommitdiff
path: root/pages/develop/tutorials
diff options
context:
space:
mode:
authorXavi Artigas <xavierartigas@yahoo.es>2018-10-19 01:15:14 -0700
committerapache <apache@e5-web1.enlightenment.org>2018-10-19 01:15:14 -0700
commitc2282fd2cece444ea72e108f8a30c65b8431eb4f (patch)
treec87911d8edb1a6ac654ee154d37bc27909d3e25f /pages/develop/tutorials
parent7f27b9c0a8791116dba872e04dee9b5753d2f83a (diff)
Wiki page texteditor-cs.md changed with summary [Grammar corrections from Bryce Harrington] by Xavi Artigas
Diffstat (limited to 'pages/develop/tutorials')
-rw-r--r--pages/develop/tutorials/csharp/texteditor-cs.md.txt36
1 files changed, 18 insertions, 18 deletions
diff --git a/pages/develop/tutorials/csharp/texteditor-cs.md.txt b/pages/develop/tutorials/csharp/texteditor-cs.md.txt
index 2093a48db..5f73ea6f5 100644
--- a/pages/develop/tutorials/csharp/texteditor-cs.md.txt
+++ b/pages/develop/tutorials/csharp/texteditor-cs.md.txt
@@ -121,7 +121,7 @@ public class TextEditor
121 // Creates a new toolbar, with all its buttons 121 // Creates a new toolbar, with all its buttons
122 private void GUIToolbarSetup(efl.ui.IBox parent) 122 private void GUIToolbarSetup(efl.ui.IBox parent)
123 { 123 {
124 // Create an horizontal box container for the buttons 124 // Create a horizontal box container for the buttons
125 efl.ui.IBox bar = new efl.ui.Box(parent, (efl.ui.IBox ebox) => { 125 efl.ui.IBox bar = new efl.ui.Box(parent, (efl.ui.IBox ebox) => {
126 // 0 vertical weight means that the toolbar will have the minimum height 126 // 0 vertical weight means that the toolbar will have the minimum height
127 // to accommodate all its buttons and not a pixel more. The rest of the 127 // to accommodate all its buttons and not a pixel more. The rest of the
@@ -171,7 +171,7 @@ public class TextEditor
171 171
172 // Spacer box to use all available space not required by buttons 172 // Spacer box to use all available space not required by buttons
173 // (It has a default horizontal weight of 1, whereas all buttons have 173 // (It has a default horizontal weight of 1, whereas all buttons have
174 // an horizontal weight of 0). 174 // a horizontal weight of 0).
175 // As a result, it pushes the "Quit" button to the right margin and 175 // As a result, it pushes the "Quit" button to the right margin and
176 // the rest to the left. 176 // the rest to the left.
177 efl.ui.IBox box = new efl.ui.Box(parent); 177 efl.ui.IBox box = new efl.ui.Box(parent);
@@ -274,7 +274,7 @@ A rough sketch of the application's user interface structure is depicted in the
274 274
275The main widget is a vertical container box (`vbox`) with two children: the toolbar and the main text entry. 275The main widget is a vertical container box (`vbox`) with two children: the toolbar and the main text entry.
276 276
277The toolbar is an horizontal container box (`hbox`) full of buttons. If you are looking at the final image above, bear in mind that the toolbar itself is invisible (as are all box containers); only the buttons are visible. 277The toolbar is a horizontal container box (`hbox`) full of buttons. If you are looking at the final image above, bear in mind that the toolbar itself is invisible (as are all box containers); only the buttons are visible.
278 278
279In between the toolbar buttons there's an empty container box (also invisible) to act as a separator: it uses up all available space, effectively pushing buttons on either side to the far ends of the container. See [The Space Box](#The_Spacer_Box) section for details. 279In between the toolbar buttons there's an empty container box (also invisible) to act as a separator: it uses up all available space, effectively pushing buttons on either side to the far ends of the container. See [The Space Box](#The_Spacer_Box) section for details.
280 280
@@ -306,7 +306,7 @@ This structure is not strictly necessary for such a brief example, but it mimics
306 306
307### Building the Text Editor ### 307### Building the Text Editor ###
308 308
309The constructor for the `TextEditor` class builds the User Interface sketched above. The process is split in this tutorial in different sections for clarity. 309The constructor for the `TextEditor` class builds the User Interface sketched above. The process is split in this tutorial into different sections for clarity.
310 310
311First, a window is created as explained in previous tutorials: 311First, a window is created as explained in previous tutorials:
312 312
@@ -359,11 +359,11 @@ Finally, the text entry area is added. This is the main feature of the text edit
359 359
360* `efl.ui.Text.SetEditable()` sets whether the text can be modified by the user or it is only meant for output. If set to `true` all editing facilities (like keyboard input handling and caret positioning) will be enabled. 360* `efl.ui.Text.SetEditable()` sets whether the text can be modified by the user or it is only meant for output. If set to `true` all editing facilities (like keyboard input handling and caret positioning) will be enabled.
361 361
362* `efl.ui.SetScrollable()` selects whether the text area should automatically use scroll bars to accommodate text bigger than the window. If enabled, the caret will always be kept visible when typing. If disabled, when typing off the borders you won't see the new characters. 362* `efl.ui.SetScrollable()` selects whether the text area should automatically use scroll bars to accommodate text longer than can be shown in the window. If enabled, the caret will always be kept visible when typing. If disabled, when typing beyond the edge of the window you won't see the new characters.
363 363
364* `efl.ui.SetHintMin()` sets a minimum size for the text area, as seen in previous tutorials. 364* `efl.ui.SetHintMin()` sets a minimum size for the text area, as seen in previous tutorials.
365 365
366Furthermore, handlers are installed for two events: `ChangedUserEvt` is triggered when the text content changes in response to user actions (for example, a key has been pressed). `ChangedEvt` is triggered when the text content changes for any other reason. 366Furthermore, handlers are installed for two events: `ChangedUserEvt` is triggered when the text content changes in response to user actions (for example, a key has been pressed). `ChangedEvt` is triggered when the text content changes for any other reason (both events are never triggered together).
367 367
368This example uses the same handler for both events (`EditorChangedCb()`), which only records the fact that the text has been edited in an internal variable and refreshes the toolbar. 368This example uses the same handler for both events (`EditorChangedCb()`), which only records the fact that the text has been edited in an internal variable and refreshes the toolbar.
369 369
@@ -379,7 +379,7 @@ The last step when building the User Interface is to refresh the toolbar, so the
379 379
380The user interface has now been built and is ready to be shown once the EFL main loop is executed (by calling `efl.ui.Config.Run()` in `TextEditor.Run()`). 380The user interface has now been built and is ready to be shown once the EFL main loop is executed (by calling `efl.ui.Config.Run()` in `TextEditor.Run()`).
381 381
382The following sections describe in more detail each part of the user interface. 382The following sections describe each part of the user interface in more detail .
383 383
384### Building the Toolbar ### 384### Building the Toolbar ###
385 385
@@ -388,7 +388,7 @@ This is done in the `GUIToolbarSetup()` method:
388```csharp 388```csharp
389 private void GUIToolbarSetup(efl.ui.IBox parent) 389 private void GUIToolbarSetup(efl.ui.IBox parent)
390 { 390 {
391 // Create an horizontal box container for the buttons 391 // Create a horizontal box container for the buttons
392 efl.ui.IBox bar = new efl.ui.Box(parent, (efl.ui.IBox ebox) => { 392 efl.ui.IBox bar = new efl.ui.Box(parent, (efl.ui.IBox ebox) => {
393 ebox.SetHintWeight(1, 0); 393 ebox.SetHintWeight(1, 0);
394 ebox.SetDirection(efl.ui.Dir.Horizontal); 394 ebox.SetDirection(efl.ui.Dir.Horizontal);
@@ -399,7 +399,7 @@ This is done in the `GUIToolbarSetup()` method:
399 } 399 }
400``` 400```
401 401
402As it can be seen, the toolbar is just a regular horizontal box container. Please note the `SetHintWeight(1, 0)` line: Giving a widget a 0 weight means that its parent container will allocate only the minimum room to fit it. The rest of the space will be used by the other children of the container, in this case, the text area. 402As it can be seen, the toolbar is just a regular horizontal box container. Please note the `SetHintWeight(1, 0)` line: Giving a widget a weight of 0 means that its parent container will allocate only the minimum room to fit it. The rest of the space will be used by the other children of the container, in this case, the text area.
403 403
404The rest of this method adds the different buttons by using the helper function `GUIToolbarButtonAdd()` described below. 404The rest of this method adds the different buttons by using the helper function `GUIToolbarButtonAdd()` described below.
405 405
@@ -436,13 +436,13 @@ The rest of the work is done in the initialization method:
436 436
437* The method to call when the button is clicked is set by installing an event handler for the `ClickedEvt` event. 437* The method to call when the button is clicked is set by installing an event handler for the `ClickedEvt` event.
438 438
439* The button is given an horizontal weight of 0, so its parent (the toolbar) will allocate for it the minimum space. 439* The button is given a horizontal weight of 0, so its parent (the toolbar) will allocate for it the minimum space.
440 440
441* The button is added to the toolbar with `DoPack()`. 441* The button is added to the toolbar with `DoPack()`.
442 442
443* Finally, the requested icon is added to the button. Like many other EFL widgets, Buttons are very flexible when it comes to customizing some of its parts. In fact, this example uses an image but any other widget (or combination of widgets) could be put inside the Button. 443* Finally, the requested icon is added to the button. Like many other EFL widgets, Buttons are highly customizable. In fact, this example uses an image but any widget (or combination of widgets) could be put inside the Button.
444 444
445 The price for this flexibility is a bit more involved setup of the widgets. Please read the [Parts tutorial](parts.md) to learn more about this topic (*coming soon*). 445 The price for this flexibility is a bit more setup work. Please read the [Parts tutorial](parts.md) to learn more about this topic (*coming soon*).
446 446
447### The "New" Button ### 447### The "New" Button ###
448 448
@@ -516,7 +516,7 @@ The "Load" button is very similar to the "Save" one:
516 }); 516 });
517``` 517```
518 518
519The operation is the opposite to that of the "Save" button: the text is read from the file and set as the content of the `editorTextBox` with `SetText()`. 519The operation is the opposite of the "Save" button: the text is read from the file and set as the content of the `editorTextBox` with `SetText()`.
520 520
521The `edited` flag is also updated, the toolbar refreshed and a popup message is shown. 521The `edited` flag is also updated, the toolbar refreshed and a popup message is shown.
522 522
@@ -533,7 +533,7 @@ Any widget can act as an spacer, the only thing required of it is that it uses u
533 bar.DoPack(box); 533 bar.DoPack(box);
534``` 534```
535 535
536To ensure that all available space is given to the spacer and not distributed evenly among all sibling buttons, the spacer is given an horizontal weight of 1 (it's the default value, so there is no need to use `SetHintWeight()`) whereas the rest of the buttons have an horizontal weight of 0 (as seen in the [Adding a Button to the Toolbar](#Adding_a_Button_to_the_Toolbar) section). 536To ensure that all available space is given to the spacer and not distributed evenly among all sibling buttons, the spacer is given a horizontal weight of 1 (it's the default value, so there is no need to use `SetHintWeight()`) whereas the rest of the buttons have a horizontal weight of 0 (as seen in the [Adding a Button to the Toolbar](#Adding_a_Button_to_the_Toolbar) section).
537 537
538How a container widget distributes available space among its children is a complex topic explained in more detail in a different tutorial (*coming soon*). 538How a container widget distributes available space among its children is a complex topic explained in more detail in a different tutorial (*coming soon*).
539 539
@@ -543,7 +543,7 @@ Applications typically convey important informational or error messages through
543 543
544![Popup message](/_media/playground/texteditor-app/image02.png) 544![Popup message](/_media/playground/texteditor-app/image02.png)
545 545
546To achieve this EFL uses the `efl.ui.Popup` class and its derivatives, for instance, the `efl.ui.Popup_Alert_Text` used in this tutorial. This class implements a popup which contains text and optional configurable buttons. 546To achieve this EFL uses the `efl.ui.Popup` class and its derivatives, for instance, the `efl.ui.Popup_Alert_Text` used in this tutorial. This class implements a popup that contains text and optional configurable buttons.
547 547
548This is how it's used in this tutorial, in the `ShowMessage()` method: 548This is how it's used in this tutorial, in the `ShowMessage()` method:
549 549
@@ -568,11 +568,11 @@ This is how it's used in this tutorial, in the `ShowMessage()` method:
568 568
569* By default the popup has the width required to display all buttons and a fixed height. If the text does not fit in that area a vertical scroll bar is shown, which can be inconvenient when there's room enough in the window to make a bigger popup dialog. `SetExpandable()` allows extending the popup size beyond its default size if required, so that no scroll bars are needed when the text is large. 569* By default the popup has the width required to display all buttons and a fixed height. If the text does not fit in that area a vertical scroll bar is shown, which can be inconvenient when there's room enough in the window to make a bigger popup dialog. `SetExpandable()` allows extending the popup size beyond its default size if required, so that no scroll bars are needed when the text is large.
570 570
571* `SetButton()` customizes the optional buttons of the popup. Alert popups can have 3 buttons: one for Positive answers, one for Negative answers and a user-defined one. `SetButton()` changes the text and icon of each of these buttons, which are invisible by default until `SetButton()` is called. 571* `SetButton()` customizes the optional buttons of the popup. Alert popups can have 3 buttons: one for Positive answers, one for Negative answers and one that is user-defined. `SetButton()` changes the text and icon of each of these buttons, which are invisible by default until `SetButton()` is called.
572 572
573* When any of the buttons is pressed, the `ButtonClickedEvt` event is emitted. The event argument specifies which button has been pressed, in case there's more than one button enabled (in this example there is no need to check the event argument because there is only one button). 573* When any of the buttons are pressed, the `ButtonClickedEvt` event is emitted. The event argument specifies which button has been pressed, in case there's more than one button enabled (in this example there is no need to check the event argument because there is only one button).
574 574
575* In this tutorial pressing the "OK" button dismisses the popup, which is done by removing the widget in the `ButtonClickedEvt` event handler. To delete a widget, the reference hold by its parent must be removed using `SetParent(null)`. 575* In this tutorial pressing the "OK" button dismisses the popup, which is done by removing the widget in the `ButtonClickedEvt` event handler. To delete a widget, the reference held by its parent must be removed using `SetParent(null)`.
576 576
577### Refreshing the Toolbar ### 577### Refreshing the Toolbar ###
578 578