summaryrefslogtreecommitdiff
path: root/pages
diff options
context:
space:
mode:
authorthomasg <thomas@gstaedtner.net>2020-05-22 09:20:02 -0700
committerwww-data <www-data@enlightenment.org>2020-05-22 09:20:02 -0700
commit585a56abfd2a74fff867060a701ae99c38d39bb9 (patch)
treee69610dc51f835af563442d045af8b529db101a6 /pages
parent7542be764d7a21f902ff3ee6316375069c1b8b9a (diff)
Wiki page hello-world-gui.md changed with summary [adapt to API changes (lots of API changes...)] by thomasg
Diffstat (limited to 'pages')
-rw-r--r--pages/develop/tutorials/c/hello-world-gui.md.txt50
1 files changed, 25 insertions, 25 deletions
diff --git a/pages/develop/tutorials/c/hello-world-gui.md.txt b/pages/develop/tutorials/c/hello-world-gui.md.txt
index 5f3ee7c74..dd6c89bf9 100644
--- a/pages/develop/tutorials/c/hello-world-gui.md.txt
+++ b/pages/develop/tutorials/c/hello-world-gui.md.txt
@@ -191,11 +191,11 @@ Next create the box object and add it to the window:
191[...] 191[...]
192 box = efl_add(EFL_UI_BOX_CLASS, win, 192 box = efl_add(EFL_UI_BOX_CLASS, win,
193 efl_content_set(win, efl_added), 193 efl_content_set(win, efl_added),
194 efl_gfx_size_hint_min_set(efl_added, EINA_SIZE2D(360, 240))); 194 efl_gfx_hint_size_min_set(efl_added, EINA_SIZE2D(360, 240)));
195[...] 195[...]
196``` 196```
197 197
198As with the ``EFL_UI_WIN_CLASS`` you saw in the ``win`` creation block, [``EFL_UI_BOX_CLASS``](macros.md##Box) is a macro which establishes that this object will be a box object. The next parameter tells your application what object the box has to go into : in this case inside the ``win`` window you created earlier. The ``efl_content_set()`` function activates the text box within the window. Until you call this function the box will not be visible. The ``efl_gfx_size_hint_min_set()`` function sets the minimum size for the box -- it can be made larger by dragging the corners of the window but it can't be any smaller. 198As with the ``EFL_UI_WIN_CLASS`` you saw in the ``win`` creation block, [``EFL_UI_BOX_CLASS``](macros.md##Box) is a macro which establishes that this object will be a box object. The next parameter tells your application what object the box has to go into : in this case inside the ``win`` window you created earlier. The ``efl_content_set()`` function activates the text box within the window. Until you call this function the box will not be visible. The ``efl_gfx_hint_size_min_set()`` function sets the minimum size for the box -- it can be made larger by dragging the corners of the window but it can't be any smaller.
199 199
200Your program should now look like this: 200Your program should now look like this:
201 201
@@ -226,7 +226,7 @@ _gui_setup()
226 226
227 box = efl_add(EFL_UI_BOX_CLASS, win, 227 box = efl_add(EFL_UI_BOX_CLASS, win,
228 efl_content_set(win, efl_added), 228 efl_content_set(win, efl_added),
229 efl_gfx_size_hint_min_set(efl_added, EINA_SIZE2D(360, 240))); 229 efl_gfx_hint_size_min_set(efl_added, EINA_SIZE2D(360, 240)));
230} 230}
231 231
232EAPI_MAIN void 232EAPI_MAIN void
@@ -245,11 +245,11 @@ If you compile and run this program you should see something like what's shown b
245 245
246The next step is to add the text box and button widgets. 246The next step is to add the text box and button widgets.
247 247
248You can add a text box widget using the ``EFL_UI_TEXT_CLASS`` and insert into your ``box`` object. Insert the following code in your ``_gui_setup()`` function: 248You can add a text box widget using the ``EFL_UI_TEXTBOX_CLASS`` and insert into your ``box`` object. Insert the following code in your ``_gui_setup()`` function:
249 249
250```c 250```c
251[...] 251[...]
252 efl_add(EFL_UI_TEXT_CLASS, box, 252 efl_add(EFL_UI_TEXTBOX_CLASS, box,
253 efl_text_markup_set(efl_added, "Hello World. This is an <b>Efl.Ui</b> application!"), 253 efl_text_markup_set(efl_added, "Hello World. This is an <b>Efl.Ui</b> application!"),
254 efl_text_interactive_selection_allowed_set(efl_added, EINA_FALSE), 254 efl_text_interactive_selection_allowed_set(efl_added, EINA_FALSE),
255 efl_pack(box, efl_added)); 255 efl_pack(box, efl_added));
@@ -265,12 +265,12 @@ To add a button use the following code:
265 efl_add(EFL_UI_BUTTON_CLASS, box, 265 efl_add(EFL_UI_BUTTON_CLASS, box,
266 efl_text_set(efl_added, "Quit"), 266 efl_text_set(efl_added, "Quit"),
267 efl_pack(box, efl_added), 267 efl_pack(box, efl_added),
268 efl_event_callback_add(efl_added, EFL_UI_EVENT_CLICKED, 268 efl_event_callback_add(efl_added, EFL_INPUT_EVENT_CLICKED,
269 _gui_quit_cb, efl_added)); 269 _gui_quit_cb, efl_added));
270[...] 270[...]
271``` 271```
272 272
273The ``efl_text_set()`` adds a *Quit* label to the button and ``efl_event_callback_add()`` defines what event will trigger the button, in this case, being clicked (``EFL_UI_EVENT_CLICKED``). You'll also define what to do if the event is indeed triggered. Here, the program quits by calling the ``_gui_quit_cb()`` callback function you defined earlier. 273The ``efl_text_set()`` adds a *Quit* label to the button and ``efl_event_callback_add()`` defines what event will trigger the button, in this case, being clicked (``EFL_INPUT_EVENT_CLICKED``). You'll also define what to do if the event is indeed triggered. Here, the program quits by calling the ``_gui_quit_cb()`` callback function you defined earlier.
274 274
275Notice how you're using ``efl_pack()`` once again to define how much space the button will take up. Without including any more information EFL shares the available space equally between all widgets. This means that if you compile and run the program you should see something like this: 275Notice how you're using ``efl_pack()`` once again to define how much space the button will take up. Without including any more information EFL shares the available space equally between all widgets. This means that if you compile and run the program you should see something like this:
276 276
@@ -282,32 +282,32 @@ As you can see the text box takes up one half of the space and button takes up t
282 282
283The layout of your window is slightly skewed. In this section you'll learn how to change the space assigned by default to each widget to make your app look better. You'll also discover how to change the alignment of the text in the text box. 283The layout of your window is slightly skewed. In this section you'll learn how to change the space assigned by default to each widget to make your app look better. You'll also discover how to change the alignment of the text in the text box.
284 284
285To change how much relative space each widget takes up, you use *weight hinting*: in other words you can assign a how much proportional space each widget should take up relative to each other and the overall space available in the container. For example you can add an ``efl_gfx_size_hint_weight_set()`` function to your text box and button like so: 285To change how much relative space each widget takes up, you use *weight hinting*: in other words you can assign a how much proportional space each widget should take up relative to each other and the overall space available in the container. For example you can add an ``efl_gfx_hint_weight_set()`` function to your text box and button like so:
286 286
287```c 287```c
288[...] 288[...]
289 efl_add(EFL_UI_TEXT_CLASS, box, 289 efl_add(EFL_UI_TEXTBOX_CLASS, box,
290 efl_text_markup_set(efl_added, "Hello World.<br>This is an <b>Efl.Ui</b> application!"), 290 efl_text_markup_set(efl_added, "Hello World.<br>This is an <b>Efl.Ui</b> application!"),
291 efl_text_interactive_selection_allowed_set(efl_added, EINA_FALSE), 291 efl_text_interactive_selection_allowed_set(efl_added, EINA_FALSE),
292 efl_gfx_size_hint_weight_set(efl_added, 1.0, 1.0), 292 efl_gfx_hint_weight_set(efl_added, 1.0, 1.0),
293 efl_pack(box, efl_added)); 293 efl_pack(box, efl_added));
294 294
295 efl_add(EFL_UI_BUTTON_CLASS, box, 295 efl_add(EFL_UI_BUTTON_CLASS, box,
296 efl_text_set(efl_added, "Quit"), 296 efl_text_set(efl_added, "Quit"),
297 efl_gfx_size_hint_weight_set(efl_added, 1.0, 1.0), 297 efl_gfx_hint_weight_set(efl_added, 1.0, 1.0),
298 efl_pack(box, efl_added), 298 efl_pack(box, efl_added),
299 efl_event_callback_add(efl_added, EFL_UI_EVENT_CLICKED, 299 efl_event_callback_add(efl_added, EFL_INPUT_EVENT_CLICKED,
300 _gui_quit_cb, efl_added)); 300 _gui_quit_cb, efl_added));
301[...] 301[...]
302``` 302```
303 303
304The ``1.0, 1.0`` parameters in both the functions tell Enlightenment to assign the maximum available space on the horizontal and vertical axis. This means they each get 50% of the space and the window looks like what you see above. 304The ``1.0, 1.0`` parameters in both the functions tell Enlightenment to assign the maximum available space on the horizontal and vertical axis. This means they each get 50% of the space and the window looks like what you see above.
305 305
306However if you change ``efl_gfx_size_hint_weight_set()`` for the text box to: 306However if you change ``efl_gfx_hint_weight_set()`` for the text box to:
307 307
308```c 308```c
309[...] 309[...]
310 efl_gfx_size_hint_weight_set(efl_added, 1.0, 0.9), 310 efl_gfx_hint_weight_set(efl_added, 1.0, 0.9),
311[...] 311[...]
312``` 312```
313 313
@@ -315,7 +315,7 @@ then change the function for the button to:
315 315
316```c 316```c
317[...] 317[...]
318 efl_gfx_size_hint_weight_set(efl_added, 1.0, 0.1), 318 efl_gfx_hint_weight_set(efl_added, 1.0, 0.1),
319[...] 319[...]
320``` 320```
321 321
@@ -323,11 +323,11 @@ Enlightenment assigns approximately 90% of the vertical space to the text box an
323 323
324Changing horizontal weights will not change the look of the widgets. As there are no two widgets in your application along the same horizontal axis, both will expand to the maximum available space regardless of the values you assign them. 324Changing horizontal weights will not change the look of the widgets. As there are no two widgets in your application along the same horizontal axis, both will expand to the maximum available space regardless of the values you assign them.
325 325
326To change the alignment of the text in the text box use an ``efl_gfx_size_hint_align_set()`` function with it. For example: 326To change the alignment of the text in the text box use an ``efl_gfx_hint_align_set()`` function with it. For example:
327 327
328```c 328```c
329[...] 329[...]
330 efl_gfx_size_hint_align_set(efl_added, 0.0, 1.0), 330 efl_gfx_hint_align_set(efl_added, 0.0, 1.0),
331[...] 331[...]
332``` 332```
333 333
@@ -337,7 +337,7 @@ Changing the parameters to the following aligns the text to the right as you can
337 337
338```c 338```c
339[...] 339[...]
340 efl_gfx_size_hint_align_set(efl_added, 1.0, 0.0), 340 efl_gfx_hint_align_set(efl_added, 1.0, 0.0),
341[...] 341[...]
342``` 342```
343 343
@@ -374,20 +374,20 @@ _gui_setup()
374 374
375 box = efl_add(EFL_UI_BOX_CLASS, win, 375 box = efl_add(EFL_UI_BOX_CLASS, win,
376 efl_content_set(win, efl_added), 376 efl_content_set(win, efl_added),
377 efl_gfx_size_hint_min_set(efl_added, EINA_SIZE2D(360, 240))); 377 efl_gfx_hint_size_min_set(efl_added, EINA_SIZE2D(360, 240)));
378 378
379 efl_add(EFL_UI_TEXT_CLASS, box, 379 efl_add(EFL_UI_TEXTBOX_CLASS, box,
380 efl_text_markup_set(efl_added, "Hello World. This is an <b>Efl.Ui</b> application!"), 380 efl_text_markup_set(efl_added, "Hello World. This is an <b>Efl.Ui</b> application!"),
381 efl_text_interactive_selection_allowed_set(efl_added, EINA_FALSE), 381 efl_text_interactive_selection_allowed_set(efl_added, EINA_FALSE),
382 efl_gfx_size_hint_weight_set(efl_added, 1.0, 0.9), 382 efl_gfx_hint_weight_set(efl_added, 1.0, 0.9),
383 efl_gfx_size_hint_align_set(efl_added, 0.5, 0.5), 383 efl_gfx_hint_align_set(efl_added, 0.5, 0.5),
384 efl_pack(box, efl_added)); 384 efl_pack(box, efl_added));
385 385
386 efl_add(EFL_UI_BUTTON_CLASS, box, 386 efl_add(EFL_UI_BUTTON_CLASS, box,
387 efl_text_set(efl_added, "Quit"), 387 efl_text_set(efl_added, "Quit"),
388 efl_gfx_size_hint_weight_set(efl_added, 1.0, 0.1), 388 efl_gfx_hint_weight_set(efl_added, 1.0, 0.1),
389 efl_pack(box, efl_added), 389 efl_pack(box, efl_added),
390 efl_event_callback_add(efl_added, EFL_UI_EVENT_CLICKED, 390 efl_event_callback_add(efl_added, EFL_INPUT_EVENT_CLICKED,
391 _gui_quit_cb, efl_added)); 391 _gui_quit_cb, efl_added));
392} 392}
393 393
@@ -425,7 +425,7 @@ Try adding more widgets such as an *About* button to your program. Experiment wi
425In this tutorial you have learned: 425In this tutorial you have learned:
426 426
427* How to create a graphical window with ``efl_add()`` and ``EFL_UI_WIN_CLASS``. 427* How to create a graphical window with ``efl_add()`` and ``EFL_UI_WIN_CLASS``.
428* How to add and position widgets in a window with ``efl_add()``, ``efl_gfx_size_hint_align_set()`` and ``efl_gfx_size_hint_weight_set()``. 428* How to add and position widgets in a window with ``efl_add()``, ``efl_gfx_hint_align_set()`` and ``efl_gfx_hint_weight_set()``.
429* How to exit an application that uses windows cleanly with ``efl_quit()``. 429* How to exit an application that uses windows cleanly with ``efl_quit()``.
430 430
431## Troubleshooting ## 431## Troubleshooting ##