summaryrefslogtreecommitdiff
path: root/pages/develop/tutorials
diff options
context:
space:
mode:
authorXavi Artigas <xavierartigas@yahoo.es>2019-03-06 04:13:37 -0800
committerapache <apache@e5-web1.enlightenment.org>2019-03-06 04:13:37 -0800
commit8266845006060cc7dc7c778e58db5e47fc82a6d2 (patch)
tree4dce82a79c21e7b8aa54d6996cf896744e7e2bcd /pages/develop/tutorials
parent92e530741d1d5fb1ba53b154fdd78f959bf78c4e (diff)
Wiki page hello-world-gui-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/hello-world-gui-cs.md.txt57
1 files changed, 28 insertions, 29 deletions
diff --git a/pages/develop/tutorials/csharp/hello-world-gui-cs.md.txt b/pages/develop/tutorials/csharp/hello-world-gui-cs.md.txt
index 2ecdb9fc9..f837757a1 100644
--- a/pages/develop/tutorials/csharp/hello-world-gui-cs.md.txt
+++ b/pages/develop/tutorials/csharp/hello-world-gui-cs.md.txt
@@ -26,10 +26,11 @@ using System;
26public class Example 26public class Example
27{ 27{
28 // Callback to quit the application 28 // Callback to quit the application
29 public static void QuitCb(object sender, EventArgs e) 29 public static void QuitCb(object sender, Efl.Gfx.EntityVisibilityChangedEvt_Args e)
30 { 30 {
31 // Exit the EFL main loop 31 // Exit the EFL main loop
32 Efl.Ui.Config.Exit(); 32 if (e.arg == false)
33 Efl.Ui.Config.Exit();
33 } 34 }
34 35
35#if WIN32 36#if WIN32
@@ -48,12 +49,12 @@ public class Example
48 // button is pressed 49 // button is pressed
49 win.SetAutohide(true); 50 win.SetAutohide(true);
50 // Hook to the Hide event 51 // Hook to the Hide event
51 win.HideEvt += QuitCb; 52 win.VisibilityChangedEvt += QuitCb;
52 53
53 // Create a box container 54 // Create a box container
54 var box = new Efl.Ui.Box(win); 55 var box = new Efl.Ui.Box(win);
55 // Set its minimum size 56 // Set its minimum size
56 box.SetHintMin(new Eina.Size2D(360, 240)); 57 box.SetHintSizeMin(new Eina.Size2D(360, 240));
57 // Set the box as the content for the window 58 // Set the box as the content for the window
58 // The window size will adapt to the box size 59 // The window size will adapt to the box size
59 win.SetContent(box); 60 win.SetContent(box);
@@ -74,7 +75,7 @@ public class Example
74 button.SetText("Quit"); 75 button.SetText("Quit");
75 button.SetHintWeight(1.0, 0.1); 76 button.SetHintWeight(1.0, 0.1);
76 // Set the method to be called when the button is pressed 77 // Set the method to be called when the button is pressed
77 button.ClickedEvt += QuitCb; 78 button.ClickedEvt += (object sender, EventArgs e) => { Efl.Ui.Config.Exit(); };
78 // Add the button to the box container 79 // Add the button to the box container
79 box.DoPack(button); 80 box.DoPack(button);
80 81
@@ -108,16 +109,16 @@ Take a look at the window instantiation:
108 // button is pressed 109 // button is pressed
109 win.SetAutohide(true); 110 win.SetAutohide(true);
110 // Hook to the Hide event 111 // Hook to the Hide event
111 win.HideEvt += QuitCb; 112 win.VisibilityChangedEvt += QuitCb;
112``` 113```
113 114
114This creates a new window, making it a child of the application's Main Loop, and customizes it: 115This creates a new window, making it a child of the application's Main Loop, and customizes it:
115 116
116* Sets the window title to `Hello World`. 117* Sets the window title to `Hello World`.
117* Sets the `autohide` flag to `true` (see the [previous tutorial](hello-world-cs.md)). 118* Sets the `Autohide` flag to `true` (see the [previous tutorial](hello-world-cs.md)).
118* Connects an event handler to the window's `Hide Event`. This event will be emitted whenever the window is closed, because of the `autohide` flag above. 119* Connects an event handler to the window's `Visibility Changed Event`. This event will be emitted every time the window is shown or hidden. In particular, it will be emitted when the window is closed due to the `Autohide` flag above.
119 120
120All event handlers in EFL have the same signature: 121All event handlers in EFL have a common signature:
121 122
122```csharp 123```csharp
123 public static void Handler(object sender, EventArgs e); 124 public static void Handler(object sender, EventArgs e);
@@ -125,21 +126,21 @@ All event handlers in EFL have the same signature:
125 126
126Where `sender` is the object that emitted the event, and `e` contains any additional information, which depends on the type of the event. 127Where `sender` is the object that emitted the event, and `e` contains any additional information, which depends on the type of the event.
127 128
128> **NOTE:** 129If you want to retrieve any additional information, though, you have to use the appropriate `EventArgs` subclass. For instance, in this tutorial:
129> `e` must be typed correctly to be able to extract this information. For example, when connecting to the `Efl.Input.Interface.KeyDownEvt` to be informed of key presses, the event handler signature is: 130```csharp
130> ```csharp 131 public static void QuitCb(object sender, Efl.Gfx.EntityVisibilityChangedEvt_Args e);
131> public static void Handler(object sender, Efl.Input.InterfaceKeyDownEvt_Args e); 132```
132> ``` 133where you can retrieve the new visibility status of the window in the `e.arg` parameter (`true` for window shown or `false` for window hidden).
133> And you can retrieve the pressed key using `e.arg.GetKey()`.
134 134
135This tutorial simply quits the application whenever the window is closed: 135This tutorial simply quits the application whenever the window is hidden:
136 136
137```csharp 137```csharp
138 // Callback to quit the application 138 // Callback to quit the application
139 public static void QuitCb(object sender, EventArgs e) 139 public static void QuitCb(object sender, Efl.Gfx.EntityVisibilityChangedEvt_Args e)
140 { 140 {
141 // Exit the EFL main loop 141 // Exit the EFL main loop
142 Efl.Ui.Config.Exit(); 142 if (e.arg == false)
143 Efl.Ui.Config.Exit();
143 } 144 }
144``` 145```
145 146
@@ -159,7 +160,7 @@ This tutorial uses a *box* container:
159 // Create a box container 160 // Create a box container
160 var box = new Efl.Ui.Box(win); 161 var box = new Efl.Ui.Box(win);
161 // Set its minimum size 162 // Set its minimum size
162 box.SetHintMin(new Eina.Size2D(360, 240)); 163 box.SetHintSizeMin(new Eina.Size2D(360, 240));
163 // Set the box as the content for the window 164 // Set the box as the content for the window
164 // The window size will adapt to the box size 165 // The window size will adapt to the box size
165 win.SetContent(box); 166 win.SetContent(box);
@@ -167,9 +168,9 @@ This tutorial uses a *box* container:
167 168
168A box container can be vertical or horizontal, and by default it is vertical. All widgets inside a vertical box container will have the same width as the container, and their heights will be automatically chosen so that they cover the whole surface of the container from top to bottom (Imagine a stack of pizza boxes neatly fitting inside your oven). By default, all widgets will have the same height, but that can be customized as you will see in a moment. 169A box container can be vertical or horizontal, and by default it is vertical. All widgets inside a vertical box container will have the same width as the container, and their heights will be automatically chosen so that they cover the whole surface of the container from top to bottom (Imagine a stack of pizza boxes neatly fitting inside your oven). By default, all widgets will have the same height, but that can be customized as you will see in a moment.
169 170
170In the initialization method of the box above you can see calls to: 171In the snippet above you can see calls to:
171 172
172* `SetHintMin()`: This sets the **minimum** size for the box. You can resize the window and the box will grow or shrink as needed, but it will never go below this size. 173* `SetHintSizeMin()`: This sets the **minimum** size for the box. You can resize the window and the box will grow or shrink as needed, but it will never go below this size.
173 174
174* `SetContent()`: This method specifies the **one** widget which will be the content of the window (Windows can only have one content set at any given time). If you want to have more than one widget in your window, you will need to wrap them in a container and set that as the content of the window. As shown above, the box container is set as the content of the window. 175* `SetContent()`: This method specifies the **one** widget which will be the content of the window (Windows can only have one content set at any given time). If you want to have more than one widget in your window, you will need to wrap them in a container and set that as the content of the window. As shown above, the box container is set as the content of the window.
175 176
@@ -189,13 +190,13 @@ So far the tutorial has created a window and an invisible container, it is about
189 box.DoPack(label); 190 box.DoPack(label);
190``` 191```
191 192
192This instantiates an `Efl.Ui.Text` object, as a child of the box container. Quite sensibly, this is the widget used to display text on screen. The initialization above is worth a careful look: 193This instantiates an `Efl.Ui.Text` object, as a child of the box container. Quite sensibly, this is the widget used to display text on screen. The snippet above is worth a careful look:
193 194
194* `SetText()`: Specifies the text string to display in the widget. 195* `SetText()`: Specifies the text string to display in the widget.
195* `SetSelectionAllowed()`: This disables selecting the text (by dragging over it with the mouse, for example). Just to showcase a bit the EFL's capabilities. 196* `SetSelectionAllowed()`: This disables selecting the text (by dragging over it with the mouse, for example). Just to showcase a bit the EFL's capabilities.
196* `SetHintWeight()`: This one controls the widget's size, but, instead of setting it explicitly as `SetHintMin()` did, it does so indirectly by giving the widget a **weight**. The container holding this widget decides the size for all its held widgets according to their relative weights (If all widgets have the same weight, they all have the same size. If you double the weight of one of the widgets, its size will be double that of the other widgets). This is a complex topic explained in its own tutorial (*coming soon*). 197* `SetHintWeight()`: This one controls the widget's size, but, instead of setting it explicitly as `SetHintSizeMin()` did, it does so indirectly by giving the widget a **weight**. The container holding this widget decides the size for all its held widgets according to their relative weights (If all widgets have the same weight, they all have the same size. If you double the weight of one of the widgets, its size will be double that of the other widgets). This is a complex topic explained in its own tutorial (*coming soon*).
197 198
198 In the code above, the text widget is given a weight of `1.0` in the horizontal direction and `0.9` in the vertical direction (both directions are treated separately). The effect of this on the final widget size depends on the other widgets' weights, so it is explained in the next section. 199 In the code above, the text widget is given a weight of `1.0` in the horizontal direction and `0.9` in the vertical direction (both directions are treated separately). The effect of this on the final widget size depends on the other widgets' weights, so it is explained in the next section after all widgets have been created.
199 200
200* `SetHintAlign()`: Once the container has allocated space for each widget according to its weight, if the actual widget is smaller, it has room to be aligned. This command controls horizontal and vertical alignment in this way: `0` means left (or top), `1` means right (or bottom), and intermediate values are possible, meaning intermediate positions. For example, `0.5` means centered, as used in the code. 201* `SetHintAlign()`: Once the container has allocated space for each widget according to its weight, if the actual widget is smaller, it has room to be aligned. This command controls horizontal and vertical alignment in this way: `0` means left (or top), `1` means right (or bottom), and intermediate values are possible, meaning intermediate positions. For example, `0.5` means centered, as used in the code.
201 202
@@ -207,8 +208,6 @@ This instantiates an `Efl.Ui.Text` object, as a child of the box container. Quit
207 208
208 Besides being a child of the box object, the text widget also needs to be *packed* into the box with `DoPack()`. 209 Besides being a child of the box object, the text widget also needs to be *packed* into the box with `DoPack()`.
209 210
210It is worth noting that, as hinted in the [previous tutorial](hello-world-cs.md), no variable is needed to store the widget: after its construction, it is already fully initialized (customized) and a reference has been handled to a parent which will take care of its destruction. This results in a very compact way to build user interfaces!
211
212### Adding a Button ### 211### Adding a Button ###
213 212
214Let's now add a button below the text label: 213Let's now add a button below the text label:
@@ -220,7 +219,7 @@ Let's now add a button below the text label:
220 button.SetText("Quit"); 219 button.SetText("Quit");
221 button.SetHintWeight(1.0, 0.1); 220 button.SetHintWeight(1.0, 0.1);
222 // Set the method to be called when the button is pressed 221 // Set the method to be called when the button is pressed
223 button.ClickedEvt += QuitCb; 222 button.ClickedEvt += (object sender, EventArgs e) => { Efl.Ui.Config.Exit(); };
224 // Add the button to the box container 223 // Add the button to the box container
225 box.DoPack(button); 224 box.DoPack(button);
226``` 225```
@@ -232,7 +231,7 @@ This instantiates a button as a child of the box and initializes it so:
232 231
233 > **NOTE**: You could also use `1` and `9` for the weights, or `10` and `90`, to achieve the same results. Remember that the weights are relative. 232 > **NOTE**: You could also use `1` and `9` for the weights, or `10` and `90`, to achieve the same results. Remember that the weights are relative.
234 233
235* It connects the `QuitCb()` event handler to the `Clicked` event. In this way, when the button is pressed, the application will exit. 234* It defines a lambda function to be used as event handler for the `Clicked` event. In this way, when the button is pressed, the application will exit.
236* Adds the button to the box (besides being a child of the box object, the button also needs to be *packed* into the box with `DoPack()`). 235* Adds the button to the box (besides being a child of the box object, the button also needs to be *packed* into the box with `DoPack()`).
237 236
238## Summary ## 237## Summary ##
@@ -241,7 +240,7 @@ At the end of this tutorial you have learned:
241 240
242* How to react to **events** like window a being closed or a button being clicked. 241* How to react to **events** like window a being closed or a button being clicked.
243* How to use **container** widgets to take care of other widget's position and size. 242* How to use **container** widgets to take care of other widget's position and size.
244* How to further customize a widget's position and size using **weight** and **alignment** hints. 243* How to further customize a widget's position and size using **size**, **weight** and **alignment** hints.
245 244
246## Further Reading ## 245## Further Reading ##
247 246