summaryrefslogtreecommitdiff
path: root/pages/develop/tutorials
diff options
context:
space:
mode:
authorXavi Artigas <xavierartigas@yahoo.es>2019-01-23 05:54:53 -0800
committerapache <apache@e5-web1.enlightenment.org>2019-01-23 05:54:53 -0800
commit1e83485318eada487ef2779c8f0bf4ec12928657 (patch)
treebd565a7c0cd608a84328e0e269c04c9eb6c45248 /pages/develop/tutorials
parentcc41b56d766c5bfa5f1d7c3b4dfe8494f93cdb84 (diff)
Wiki page texteditor-cs.md changed with summary [Adapt to latest EFL# syntax] by Xavi Artigas
Diffstat (limited to 'pages/develop/tutorials')
-rw-r--r--pages/develop/tutorials/csharp/texteditor-cs.md.txt234
1 files changed, 110 insertions, 124 deletions
diff --git a/pages/develop/tutorials/csharp/texteditor-cs.md.txt b/pages/develop/tutorials/csharp/texteditor-cs.md.txt
index ae122b559..9228e1c23 100644
--- a/pages/develop/tutorials/csharp/texteditor-cs.md.txt
+++ b/pages/develop/tutorials/csharp/texteditor-cs.md.txt
@@ -47,11 +47,11 @@ using System;
47 47
48public class TextEditor 48public class TextEditor
49{ 49{
50 private efl.ui.IWin win; // The main window 50 private Efl.Ui.Win win; // The main window
51 private efl.ui.IText editorTextBox; // The main text entry 51 private Efl.Ui.Text editorTextBox; // The main text entry
52 private efl.ui.IButton toolbarButtonNew; // The "New" button in the toolbar 52 private Efl.Ui.Button toolbarButtonNew; // The "New" button in the toolbar
53 private efl.ui.IButton toolbarButtonSave; // The "Save" button in the toolbar 53 private Efl.Ui.Button toolbarButtonSave; // The "Save" button in the toolbar
54 private efl.ui.IButton toolbarButtonLoad; // The "Load" button in the toolbar 54 private Efl.Ui.Button toolbarButtonLoad; // The "Load" button in the toolbar
55 55
56 private bool edited = false; // Document was edited since last save 56 private bool edited = false; // Document was edited since last save
57 57
@@ -62,7 +62,7 @@ public class TextEditor
62 // Quits the application 62 // Quits the application
63 private void GUIQuitCb(object sender, EventArgs ea) 63 private void GUIQuitCb(object sender, EventArgs ea)
64 { 64 {
65 efl.ui.Config.Exit(); 65 Efl.Ui.Config.Exit();
66 } 66 }
67 67
68 // Enables or disables buttons on the toolbar as required 68 // Enables or disables buttons on the toolbar as required
@@ -86,50 +86,46 @@ public class TextEditor
86 // Shows a modal message popup with an "OK" button 86 // Shows a modal message popup with an "OK" button
87 private void ShowMessage(string message) 87 private void ShowMessage(string message)
88 { 88 {
89 new efl.ui.Text_Alert_Popup (win, (efl.ui.IText_Alert_Popup epopup) => { 89 var popup = new Efl.Ui.TextAlertPopup (win);
90 epopup.SetText(message); 90 popup.SetText(message);
91 epopup.SetExpandable(new eina.Size2D(200,200)); 91 popup.SetExpandable(new Eina.Size2D(200, 200));
92 epopup.SetButton(efl.ui.Alert_Popup_Button.Positive, "OK", null); 92 popup.SetButton(Efl.Ui.AlertPopupButton.Positive, "OK", null);
93 epopup.ButtonClickedEvt += 93 popup.ButtonClickedEvt +=
94 (object sender, efl.ui.Alert_Popup.ButtonClickedEvt_Args ea) => { 94 (object sender, Efl.Ui.AlertPopupButtonClickedEvt_Args ea) => {
95 // Dismiss popup when the button is clicked 95 // Dismiss popup when the button is clicked
96 ((efl.ui.IText_Alert_Popup)sender).SetParent(null); 96 ((Efl.Ui.TextAlertPopup)sender).SetParent(null);
97 }; 97 };
98 });
99 } 98 }
100 99
101 // Adds a button to the toolbar, with the given text, icon and click event handler 100 // Adds a button to the toolbar, with the given text, icon and click event handler
102 private efl.ui.IButton GUIToolbarButtonAdd(efl.ui.IBox toolbar, string name, 101 private Efl.Ui.Button GUIToolbarButtonAdd(Efl.Ui.Box toolbar, string name,
103 string iconName, EventHandler func) 102 string iconName, EventHandler func)
104 { 103 {
105 return new efl.ui.Button(toolbar, (efl.ui.IButton ebutton) => { 104 var button = new Efl.Ui.Button(toolbar);
106 ebutton.SetText(name); 105 button.SetText(name);
107 ebutton.ClickedEvt += func; 106 button.ClickedEvt += func;
108 ebutton.SetHintWeight(0, 1); 107 button.SetHintWeight(0, 1);
109 toolbar.DoPack(ebutton); 108
110 109 // Set the content of the button, which is an image
111 // Set the content of the button 110 var image = new Efl.Ui.Image(toolbar);
112 efl.Content.static_cast(ebutton.GetPart("efl.content")).SetContent( 111 image.SetIcon(iconName);
113 // Which is an image 112 button.SetContent(image);
114 new efl.ui.Image(toolbar, (efl.ui.IImage eimage) => { 113
115 eimage.SetIcon(iconName); 114 toolbar.DoPack(button);
116 }) 115 return button;
117 );
118 });
119 } 116 }
120 117
121 // Creates a new toolbar, with all its buttons 118 // Creates a new toolbar, with all its buttons
122 private void GUIToolbarSetup(efl.ui.IBox parent) 119 private void GUIToolbarSetup(Efl.Ui.Box parent)
123 { 120 {
124 // Create a horizontal box container for the buttons 121 // Create a horizontal box container for the buttons
125 efl.ui.IBox bar = new efl.ui.Box(parent, (efl.ui.IBox ebox) => { 122 var bar = new Efl.Ui.Box(parent);
126 // 0 vertical weight means that the toolbar will have the minimum height 123 // 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 124 // to accommodate all its buttons and not a pixel more. The rest of the
128 // space will be given to the other object in the parent container. 125 // space will be given to the other object in the parent container.
129 ebox.SetHintWeight(1, 0); 126 bar.SetHintWeight(1, 0);
130 ebox.SetDirection(efl.ui.Dir.Horizontal); 127 bar.SetDirection(Efl.Ui.Dir.Horizontal);
131 parent.DoPack(ebox); 128 parent.DoPack(bar);
132 });
133 129
134 // "New" button 130 // "New" button
135 toolbarButtonNew = GUIToolbarButtonAdd(bar, "New", "document-new", 131 toolbarButtonNew = GUIToolbarButtonAdd(bar, "New", "document-new",
@@ -174,7 +170,7 @@ public class TextEditor
174 // a horizontal weight of 0). 170 // a horizontal weight of 0).
175 // As a result, it pushes the "Quit" button to the right margin and 171 // As a result, it pushes the "Quit" button to the right margin and
176 // the rest to the left. 172 // the rest to the left.
177 efl.ui.IBox box = new efl.ui.Box(parent); 173 Efl.Ui.Box box = new Efl.Ui.Box(parent);
178 bar.DoPack(box); 174 bar.DoPack(box);
179 175
180 // "Quit" button 176 // "Quit" button
@@ -185,30 +181,28 @@ public class TextEditor
185 public TextEditor() 181 public TextEditor()
186 { 182 {
187 // Create a window and initialize it 183 // Create a window and initialize it
188 win = new efl.ui.Win(efl.App.GetLoopMain(), (efl.ui.IWin ewin) => { 184 win = new Efl.Ui.Win(Efl.App.AppMain);
189 ewin.SetText("Text Editor"); 185 win.SetText("Text Editor");
190 ewin.SetAutohide(true); 186 win.SetAutohide(true);
191 ewin.HideEvt += GUIQuitCb; 187 win.HideEvt += GUIQuitCb;
192 });
193 188
194 // Create a vertical box container 189 // Create a vertical box container
195 efl.ui.IBox box = new efl.ui.Box(win); 190 Efl.Ui.Box box = new Efl.Ui.Box(win);
196 win.SetContent(box); 191 win.SetContent(box);
197 192
198 // Create the toolbar and add it to the box 193 // Create the toolbar and add it to the box
199 GUIToolbarSetup(box); 194 GUIToolbarSetup(box);
200 195
201 // Create the main text entry 196 // Create the main text entry
202 editorTextBox = new efl.ui.Text(box, (efl.ui.IText etext) => { 197 editorTextBox = new Efl.Ui.Text(box);
203 etext.SetFont("Mono", 14); 198 editorTextBox.SetFont("Mono", 14);
204 etext.SetMultiline(true); 199 editorTextBox.SetMultiline(true);
205 etext.SetEditable(true); 200 editorTextBox.SetEditable(true);
206 etext.SetScrollable(true); 201 editorTextBox.SetScrollable(true);
207 etext.SetHintMin(new eina.Size2D(360, 240)); 202 editorTextBox.SetHintMin(new Eina.Size2D(360, 240));
208 etext.ChangedEvt += EditorChangedCb; 203 editorTextBox.ChangedEvt += EditorChangedCb;
209 etext.ChangedUserEvt += EditorChangedCb; 204 editorTextBox.ChangedUserEvt += EditorChangedCb;
210 box.DoPack(etext); 205 box.DoPack(editorTextBox);
211 });
212 206
213 // Initial refresh of the toolbar buttons 207 // Initial refresh of the toolbar buttons
214 GUIToolbarRefresh(); 208 GUIToolbarRefresh();
@@ -218,7 +212,7 @@ public class TextEditor
218 public void Run() 212 public void Run()
219 { 213 {
220 // Start the EFL main loop 214 // Start the EFL main loop
221 efl.ui.Config.Run(); 215 Efl.Ui.Config.Run();
222 } 216 }
223} 217}
224 218
@@ -230,13 +224,13 @@ public class Example
230 public static void Main() 224 public static void Main()
231 { 225 {
232 // Initialize EFL and all UI components 226 // Initialize EFL and all UI components
233 efl.All.Init(efl.Components.Ui); 227 Efl.All.Init(Efl.Components.Ui);
234 228
235 var textEditor = new TextEditor(); 229 var textEditor = new TextEditor();
236 textEditor.Run(); 230 textEditor.Run();
237 231
238 // Shutdown EFL 232 // Shutdown EFL
239 efl.All.Shutdown(); 233 Efl.All.Shutdown();
240 } 234 }
241} 235}
242``` 236```
@@ -288,19 +282,19 @@ To keep this example simple a file selection dialog has not been used. Therefore
288 public static void Main() 282 public static void Main()
289 { 283 {
290 // Initialize EFL and all UI components 284 // Initialize EFL and all UI components
291 efl.All.Init(efl.Components.Ui); 285 Efl.All.Init(Efl.Components.Ui);
292 286
293 var textEditor = new TextEditor(); 287 var textEditor = new TextEditor();
294 textEditor.Run(); 288 textEditor.Run();
295 289
296 // Shutdown EFL 290 // Shutdown EFL
297 efl.All.Shutdown(); 291 Efl.All.Shutdown();
298 } 292 }
299``` 293```
300 294
301The Main method simply initializes EFL, instantiates a `TextEditor` object and relinquishes control to it. The bulk of the work is done by the `TextEditor` class defined in the example. When `texteditor.Run()` returns EFL is shut down and the application finishes. 295The Main method simply initializes EFL, instantiates a `TextEditor` object and relinquishes control to it. The bulk of the work is done by the `TextEditor` class defined in the example. When `texteditor.Run()` returns EFL is shut down and the application finishes.
302 296
303`texteditor.Run()` contains the call to `efl.ui.Config.Run()` which will block until EFL is instructed to quit using `efl.ui.Config.Exit()`, as seen in the [Graphical "Hello World" in C#](hello-world-gui-cs.md) tutorial. 297`texteditor.Run()` contains the call to `Efl.Ui.Config.Run()` which will block until EFL is instructed to quit using `Efl.Ui.Config.Exit()`, as seen in the [Graphical "Hello World" in C#](hello-world-gui-cs.md) tutorial.
304 298
305This structure is not strictly necessary for such a brief example, but it mimics what a more complex application would normally do. 299This structure is not strictly necessary for such a brief example, but it mimics what a more complex application would normally do.
306 300
@@ -314,11 +308,10 @@ First, a window is created as explained in previous tutorials:
314 public TextEditor() 308 public TextEditor()
315 { 309 {
316 // Create a window and initialize it 310 // Create a window and initialize it
317 win = new efl.ui.Win(efl.App.GetLoopMain(), (efl.ui.IWin ewin) => { 311 win = new Efl.Ui.Win(Efl.App.AppMain);
318 ewin.SetText("Text Editor"); 312 win.SetText("Text Editor");
319 ewin.SetAutohide(true); 313 win.SetAutohide(true);
320 ewin.HideEvt += GUIQuitCb; 314 win.HideEvt += GUIQuitCb;
321 });
322``` 315```
323 316
324Then the vertical container box is created and set as the content for the window: 317Then the vertical container box is created and set as the content for the window:
@@ -326,7 +319,7 @@ Then the vertical container box is created and set as the content for the window
326 319
327```csharp 320```csharp
328 // Create a vertical box container 321 // Create a vertical box container
329 efl.ui.IBox box = new efl.ui.Box(win); 322 Efl.Ui.IBox box = new Efl.Ui.Box(win);
330 win.SetContent(box); 323 win.SetContent(box);
331``` 324```
332 325
@@ -341,27 +334,26 @@ Finally, the text entry area is added. This is the main feature of the text edit
341 334
342```csharp 335```csharp
343 // Create the main text entry 336 // Create the main text entry
344 editorTextBox = new efl.ui.Text(box, (efl.ui.IText etext) => { 337 editorTextBox = new Efl.Ui.Text(box);
345 etext.SetFont("Mono", 14); 338 editorTextBox.SetFont("Mono", 14);
346 etext.SetMultiline(true); 339 editorTextBox.SetMultiline(true);
347 etext.SetEditable(true); 340 editorTextBox.SetEditable(true);
348 etext.SetScrollable(true); 341 editorTextBox.SetScrollable(true);
349 etext.SetHintMin(new eina.Size2D(360, 240)); 342 editorTextBox.SetHintMin(new Eina.Size2D(360, 240));
350 etext.ChangedEvt += EditorChangedCb; 343 editorTextBox.ChangedEvt += EditorChangedCb;
351 etext.ChangedUserEvt += EditorChangedCb; 344 editorTextBox.ChangedUserEvt += EditorChangedCb;
352 box.DoPack(etext); 345 box.DoPack(editorTextBox);
353 });
354``` 346```
355 347
356* `efl.ui.Text.SetFont()` sets the font family and size for the text area. The font string has to follow `fontconfig`'s convention for naming fonts, as it is the underlying library used to query system fonts (see the output of the `fc-list` command). Alternatively, you can use the full path to a font file. 348* `Efl.Ui.Text.SetFont()` sets the font family and size for the text area. The font string has to follow `fontconfig`'s convention for naming fonts, as it is the underlying library used to query system fonts (see the output of the `fc-list` command). Alternatively, you can use the full path to a font file.
357 349
358* `efl.ui.Text.SetMultiline()` selects whether the text area will support more than one line of text (`true` is customary for a text editor). 350* `Efl.Ui.Text.SetMultiline()` selects whether the text area will support more than one line of text (`true` is customary for a text editor).
359 351
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. 352* `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 353
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. 354* `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 355
364* `efl.ui.SetHintMin()` sets a minimum size for the text area, as seen in previous tutorials. 356* `Efl.Ui.SetHintMin()` sets a minimum size for the text area, as seen in previous tutorials.
365 357
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). 358Furthermore, 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 359
@@ -377,7 +369,7 @@ The last step when building the User Interface is to refresh the toolbar, so the
377 } 369 }
378``` 370```
379 371
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()`). 372The 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 373
382The following sections describe each part of the user interface in more detail . 374The following sections describe each part of the user interface in more detail .
383 375
@@ -386,14 +378,13 @@ The following sections describe each part of the user interface in more detail .
386This is done in the `GUIToolbarSetup()` method: 378This is done in the `GUIToolbarSetup()` method:
387 379
388```csharp 380```csharp
389 private void GUIToolbarSetup(efl.ui.IBox parent) 381 private void GUIToolbarSetup(Efl.Ui.IBox parent)
390 { 382 {
391 // Create a horizontal box container for the buttons 383 // Create a horizontal box container for the buttons
392 efl.ui.IBox bar = new efl.ui.Box(parent, (efl.ui.IBox ebox) => { 384 var bar = new Efl.Ui.Box(parent);
393 ebox.SetHintWeight(1, 0); 385 bar.SetHintWeight(1, 0);
394 ebox.SetDirection(efl.ui.Dir.Horizontal); 386 bar.SetDirection(Efl.Ui.Dir.Horizontal);
395 parent.DoPack(ebox); 387 parent.DoPack(bar);
396 });
397 388
398 [... Buttons are added to the toolbar ...] 389 [... Buttons are added to the toolbar ...]
399 } 390 }
@@ -405,32 +396,28 @@ The rest of this method adds the different buttons by using the helper function
405 396
406### Adding a Button to the Toolbar ### 397### Adding a Button to the Toolbar ###
407 398
408Let's examine this very compact method to create and customize a button, while adding it to a parent container: 399Let's examine this helper method to create and customize a button, while adding it to a parent container:
409 400
410```csharp 401```csharp
411 private efl.ui.IButton GUIToolbarButtonAdd(efl.ui.IBox toolbar, string name, 402 private Efl.Ui.Button GUIToolbarButtonAdd(Efl.Ui.Box toolbar, string name,
412 string iconName, EventHandler func) 403 string iconName, EventHandler func)
413 { 404 {
414 return new efl.ui.Button(toolbar, (efl.ui.IButton ebutton) => { 405 var button = new Efl.Ui.Button(toolbar);
415 ebutton.SetText(name); 406 button.SetText(name);
416 ebutton.ClickedEvt += func; 407 button.ClickedEvt += func;
417 ebutton.SetHintWeight(0, 1); 408 button.SetHintWeight(0, 1);
418 toolbar.DoPack(ebutton); 409
419 410 // Set the content of the button, which is an image
420 // Set the content of the button 411 var image = new Efl.Ui.Image(toolbar);
421 efl.Content.static_cast(ebutton.GetPart("efl.content")).SetContent( 412 image.SetIcon(iconName);
422 // Which is an image 413 button.SetContent(image);
423 new efl.ui.Image(toolbar, (efl.ui.IImage eimage) => { 414
424 eimage.SetIcon(iconName); 415 toolbar.DoPack(button);
425 }) 416 return button;
426 );
427 });
428 } 417 }
429``` 418```
430 419
431The function contains a single statement, which instantiates an `efl.ui.Button` (as a child of the toolbar) and returns it. 420The function instantiates an `Efl.Ui.Button` (as a child of the toolbar) and returns it after configuration:
432
433The rest of the work is done in the initialization method:
434 421
435* The button's label is set with `SetText()` 422* The button's label is set with `SetText()`
436 423
@@ -529,7 +516,7 @@ A simple mechanism to achieve this in EFL is to insert a **spacer** widget betwe
529Any widget can act as an spacer, the only thing required of it is that it uses up space. To reduce complexity and unwanted side effects, an empty container widget is ideal for the job. For example, a `Box`: 516Any widget can act as an spacer, the only thing required of it is that it uses up space. To reduce complexity and unwanted side effects, an empty container widget is ideal for the job. For example, a `Box`:
530 517
531```csharp 518```csharp
532 efl.ui.IBox box = new efl.ui.Box(parent); 519 Efl.Ui.Box box = new Efl.Ui.Box(parent);
533 bar.DoPack(box); 520 bar.DoPack(box);
534``` 521```
535 522
@@ -543,7 +530,7 @@ Applications typically convey important informational or error messages through
543 530
544![Popup message](/_media/playground/texteditor-app/image02.png) 531![Popup message](/_media/playground/texteditor-app/image02.png)
545 532
546To achieve this EFL uses the `efl.ui.Popup` class and its derivatives, for instance, the `efl.ui.Text_Alert_Popup` used in this tutorial. This class implements a popup that contains text and optional configurable buttons. 533To achieve this EFL uses the `Efl.Ui.Popup` class and its derivatives, for instance, the `Efl.Ui.Text_Alert_Popup` used in this tutorial. This class implements a popup that contains text and optional configurable buttons.
547 534
548This is how it's used in this tutorial, in the `ShowMessage()` method: 535This is how it's used in this tutorial, in the `ShowMessage()` method:
549 536
@@ -551,16 +538,15 @@ This is how it's used in this tutorial, in the `ShowMessage()` method:
551 // Shows a modal message popup with an "OK" button 538 // Shows a modal message popup with an "OK" button
552 private void ShowMessage(string message) 539 private void ShowMessage(string message)
553 { 540 {
554 new efl.ui.Text_Alert_Popup (win, (efl.ui.IText_Alert_Popup epopup) => { 541 var popup = new Efl.Ui.TextAlertPopup (win);
555 epopup.SetText(message); 542 popup.SetText(message);
556 epopup.SetExpandable(new eina.Size2D(200,200)); 543 popup.SetExpandable(new Eina.Size2D(200, 200));
557 epopup.SetButton(efl.ui.Alert_Popup_Button.Positive, "OK", null); 544 popup.SetButton(Efl.Ui.AlertPopupButton.Positive, "OK", null);
558 epopup.ButtonClickedEvt += 545 popup.ButtonClickedEvt +=
559 (object sender, efl.ui.Alert_Popup.ButtonClickedEvt_Args ea) => { 546 (object sender, Efl.Ui.AlertPopupButtonClickedEvt_Args ea) => {
560 // Dismiss popup when the button is clicked 547 // Dismiss popup when the button is clicked
561 ((efl.ui.IText_Alert_Popup)sender).SetParent(null); 548 ((Efl.Ui.TextAlertPopup)sender).SetParent(null);
562 }; 549 };
563 });
564 } 550 }
565``` 551```
566 552