2
* @page Examples-js Examples with Javascript Bindings.
4
* Here is a list of Elementary JS Examples.
6
* @ref bg_js_example_02
8
* @ref calendar_js_example_01
10
* @ref calendar_js_example_03
12
* @ref clock_js_example
14
* @ref datetime_js_example
16
* @ref icon_js_example_01
18
* @ref separator_js_example_01
23
* @page bg_js_example_02 elm.Bg - Image background using Javascript Binding
24
* @dontinclude bg_example_02.js
26
* This is the second background example and shows how to use the
27
* Elementary background object to set an image as background of your
30
* The first part consists of including the necessary modules and for
31
* this we'll use the Node.js require() function. In this example, we
32
* are working solely with elm module.
36
* Next step is creating an Elementary window with Win_Standard
37
* without a parent, which is the type used for all of our
38
* examples. Here we also set the title that will appear at the top of
39
* our window and then the autohide state for it.
41
* The autohide works automatically handling "delete,request" signals
42
* when set to @p true, hidding the window, instead of destroying it.
47
* Our background will have an image, that will be displayed over the
50
* To do so, first we create the background that will display our
55
* Then, before loading this image, we set the load size of the
56
* image. The load size is a hint about the size that we want the
57
* image displayed in the screen. It's not the exact size that the
58
* image will have, but usually a bit bigger. The background object
59
* can still be scaled to a size bigger than the one set here. Setting
60
* the image load size to something smaller than its real size will
61
* reduce the memory used to keep the pixmap representation of the
62
* image, and the time to load it. Here we set the load size to 20x20
63
* pixels, but the image is loaded with a size bigger than that (since
66
* @skipline load_size_set
68
* Now we load our image from it's directory, using file_set. Notice
69
* that the second argument of the file_set() function is @c null,
70
* since we are setting an image to this background. This function
71
* also supports setting an Eet file as background, in which case the
72
* @c key parameter wouldn't be @c null, but be the name of the Eet
77
* To better understand, the function @c size_hint_weight_set for JS
78
* bindings originated from C bindings function
79
* evas_object_size_hint_weight_set, that is EFL Evas type function.
80
* With this function we set the hints for an object's weight. The
83
* @li x - Double ranging from 0.0 to 1.0 use as horizontal hint.
85
* @li y - Double ranging from 0.0 to 1.0 use as vertical hint.
87
* This is not a size enforcement in any way, it's just a hint that
88
* should be used whenever appropriate. This is a hint on how a
89
* container object should resize a given child within its area.
91
* Containers may adhere to the simpler logic of just expanding the
92
* child object's dimensions to fit its own or the complete one of
93
* taking each child's weight hint as real weights to how much of its
94
* size to allocate for them in each axis. A container is supposed to,
95
* after normalizing the weights of its children (with weight hints),
96
* distribute the space it has to layout them by those factors – most
97
* weighted children get larger in this process than the least ones.
99
* @skipline weight_set
101
* @note Default weight hint values are 0.0, for both axis.
103
* Now we add the background as a resize_object to win informing that
104
* when the size of the win changes so should the background's
105
* size. And finally we make background visible.
110
* Now we only have to set the size for our window and make it
116
* The full code for this example can be found at @ref
119
* This example will look like this:
121
* @image html screenshots/bg_example_02.png
122
* @image latex screenshots/bg_example_02.eps width=\textwidth
123
* @example bg_example_02.js
127
* @page calendar_js_example_01 Calendar - Simple creation with Javascript Binding
128
* @dontinclude calendar_example_01.js
130
* As a first example, let's just display a calendar in our window,
131
* explaining all steps required to do so.
133
* The first part consists of including the necessary modules and for
134
* this we'll use the Node.js require() function. In this example, we
135
* are working solely with elm module.
139
* Next step is creating an Elementary window with Win_Standard
140
* without a parent, which is the type used for all of our
141
* examples. Here we also set the title that will appear at the top of
142
* our window and then the autohide state for it.
144
* The autohide works automatically handling "delete,request" signals
145
* when set to @p true, hidding the window, instead of destroying it.
148
* @until autohide_set
150
* Now, the exciting part, let's create the calendar with the JS
151
* binding method, passing our window object as parent.
155
* To better understand, the function @c size_hint_weight_set for JS
156
* bindings originated from C bindings function
157
* evas_object_size_hint_weight_set, that is EFL Evas type function.
158
* With this function we set the hints for an object's weight. The
161
* @li x - Double ranging from 0.0 to 1.0 use as horizontal hint.
163
* @li y - Double ranging from 0.0 to 1.0 use as vertical hint.
165
* This is not a size enforcement in any way, it's just a hint that
166
* should be used whenever appropriate.
168
* This is a hint on how a container object should resize a given
169
* child within its area.
171
* Containers may adhere to the simpler logic of just expanding the
172
* child object's dimensions to fit its own or the complete one of
173
* taking each child's weight hint as real weights to how much of its
174
* size to allocate for them in each axis. A container is supposed to,
175
* after normalizing the weights of its children (with weight hints),
176
* distribute the space it has to layout them by those factors – most
177
* weighted children get larger in this process than the least ones.
179
* @skipline weight_set
181
* @note Default weight hint values are 0.0, for both axis.
183
* Now we add the calendar as a resize-object to win informing that
184
* when the size of the win changes so should the calendar's
185
* size. And finally we make our calendar and window visibles.
190
* Our example will look like this:
192
* @image html screenshots/calendar_example_01.png
194
* @image latex screenshots/calendar_example_01.eps width=\textwidth
196
* See the full source code @ref calendar_example_01.js here.
198
* @example calendar_example_01.js
202
* @page calendar_js_example_03 Calendar - Years restrictions with Javascript Binding
203
* @dontinclude calendar_example_03.js
205
* This example explains how to set max and min year to be displayed
206
* by a calendar object. This means that user won't be able to see or
207
* select a date before and after selected years. By default, limits
208
* are 1902 and maximum value will depends on platform architecture
209
* (year 2037 for 32 bits); You can read more about time functions on
212
* Next step is creating an Elementary window with Win_Standard
213
* without a parent, which is the type used for all of our
214
* examples. Here we also set the title that will appear at the top of
215
* our window and then the autohide state for it.
217
* The autohide works automatically handling "delete,request" signals
218
* when set to @p true, hidding the window, instead of destroying it.
221
* @until autohide_set
223
* Now let's create the calendar with the JS binding method, passing
224
* our window object as parent.
228
* To better understand, the function @c size_hint_weight_set for JS
229
* bindings originated from C bindings function
230
* evas_object_size_hint_weight_set, that is EFL Evas type function.
231
* With this function we set the hints for an object's weight. The
234
* @li x - Double ranging from 0.0 to 1.0 use as horizontal hint.
236
* @li y - Double ranging from 0.0 to 1.0 use as vertical hint.
238
* This is not a size enforcement in any way, it's just a hint that
239
* should be used whenever appropriate.
241
* This is a hint on how a container object should resize a given
242
* child within its area.
244
* Containers may adhere to the simpler logic of just expanding the
245
* child object's dimensions to fit its own or the complete one of
246
* taking each child's weight hint as real weights to how much of its
247
* size to allocate for them in each axis. A container is supposed to,
248
* after normalizing the weights of its children (with weight hints),
249
* distribute the space it has to layout them by those factors – most
250
* weighted children get larger in this process than the least ones.
252
* @skipline weight_set
254
* @note Default weight hint values are 0.0, for both axis.
256
* Now we add the calendar as a resize-object to win informing that
257
* when the size of the win changes so should the calendar's
262
* Straigh to the point, to set the limits for years you need only to
263
* call min_max_year_set(). First value is minimum year, second is
264
* maximum. If first value is negative, it won't apply limit for min
265
* year, if the second one is negative, won't apply for max year.
266
* Setting both to negative value will clear limits (default state):
268
* @skipline min_max_year_set
270
* Finally we just have to make calendar and window visible.
275
* Our example will look like this:
277
* @image html screenshots/calendar_example_03.png
278
* @image latex screenshots/calendar_example_03.eps width=\textwidth
280
* See the full source code @ref calendar_example_03.js here.
282
* @example calendar_example_03.js
286
* @page datetime_js_example Datetime Example with Javascript Binding
287
* @dontinclude datetime_example.js
289
* This example places three Elementary Datetime widgets on a window,
290
* each of them exemplifying the widget's different usage.
292
* The first part consists of including the necessary modules and for
293
* this we'll use the Node.js require() function. In this example, we
294
* are working with elm and efl modules.
299
* Next step is creating an Elementary window with Win_Standard
300
* without a parent, which is the type used for all of our
301
* examples. Here we also set the title that will appear at the top of
302
* our window and then the autohide state for it.
304
* The autohide works automatically handling "delete,request" signals
305
* when set to @p true, hidding the window, instead of destroying it.
308
* @until autohide_set
310
* Now we construct the elm background and for this we use the JS
311
* method below, setting win as it's parent.
315
* To better understand, the function @c size_hint_weight_set for JS
316
* bindings originated from C bindings function
317
* evas_object_size_hint_weight_set, that is EFL Evas type function.
318
* With this function we set the hints for an object's weight. The
321
* @li x - Double ranging from 0.0 to 1.0 use as horizontal hint.
323
* @li y - Double ranging from 0.0 to 1.0 use as vertical hint.
325
* This is not a size enforcement in any way, it's just a hint that
326
* should be used whenever appropriate. This is a hint on how a
327
* container object should resize a given child within its area.
329
* Containers may adhere to the simpler logic of just expanding the
330
* child object's dimensions to fit its own or the complete one of
331
* taking each child's weight hint as real weights to how much of its
332
* size to allocate for them in each axis. A container is supposed to,
333
* after normalizing the weights of its children (with weight hints),
334
* distribute the space it has to layout them by those factors – most
335
* weighted children get larger in this process than the least ones.
337
* @skipline weight_set
339
* @note Default weight hint values are 0.0, for both axis.
341
* Now we add the background as a resize_object to win informing that
342
* when the size of the win changes so should the background's
343
* size. And finally we make it visible.
348
* @remarks If a color it's not setted the default color will be used.
350
* A box arranges objects in a linear fashion, governed by a layout
351
* function that defines the details of this arrangement. The box will
352
* use an internal function to set the layout to a single row,
353
* vertical by default.
355
* Now let's create the box with the JS binding method, passing our
356
* window object as parent. Using Evas weight_set function again to
357
* hint on how a container object should resize a given child within
363
* Then we add the box as a resize-object to win informing that when
364
* the size of the win changes so should the box's size. Remember
365
* always to set the box visibility to true.
370
* The first of them is <b>"only Date display"</b>. We will create it
371
* using the JS method below. The weight hint works with datetime the
372
* same as it did with background and box.
377
* Now we have to The function @c size_hint_align_set for JS bindings
378
* originated from C bindings function
379
* evas_object_size_hint_align_set, that is EFL Evas type
380
* function. With this function we set the hints for an object's
381
* alignment. The parameters are:
383
* @li x - Double ranging from 0.0 to 1.0 use as horizontal alignment
386
* @li y - Double ranging from 0.0 to 1.0 use as vertical alignment
389
* These are hints on how to align an object inside the boundaries of
390
* a container/manager. Accepted values are in the 0.0 to 1.0 range,
391
* used to specify "justify" or "fill" by some users. In this case,
392
* maximum size hints should be enforced with higher priority, if they
393
* are set. Also, any padding hint set on objects should add up to the
394
* alignment space on the final scene composition.
396
* For the horizontal component, 0.0 means to the left, 1.0 means to
397
* the right. Analogously, for the vertical component, 0.0 to the top,
398
* 1.0 means to the bottom. This is not a size enforcement in any way,
399
* it's just a hint that should be used whenever appropriate.
403
* @note Default alignment hint values are 0.5, for both axis.
405
* An important feature for the datetime is the setting of what we
406
* want it to display. We can achieve that by using:
408
* @p field_visible_set (elm.Elm_Datetime_Field_Type.fieldtype_, visible_)
412
* @li @p fieldtype_: type of the field, supports 6 fields:
414
* @p year: Indicates Year field.
416
* @p month: Indicates Month field.
418
* @p date: Indicates Date field.
420
* @p hour: Indicates Hour field,
422
* @p minute: Indicates Minute field.
424
* @p ampm: Indicates AM/PM field.
426
* @li @p visible_: @p true field can be visible, @p false otherwise.
428
* @attention Setting this API True does not ensure that the field is
429
* visible, apart from this, the field's format must be present in
430
* Datetime overall format. If a field's visibility is set to False
431
* then it won't appear even though its format is present in overall
432
* format. So if and only if this API is set true and the
433
* corresponding field's format is present in Datetime format, the
436
* @note By default the field visibility is set to @p true.
438
* For this first datetime we are setting the hour, minute and am/pm
439
* to not be visible, doing this we'll display in our datetime the
440
* year, month and date.
442
* @note Hour format 12hr(1-12) or 24hr(0-23) display can be selected
443
* by setting the corresponding user format. The corresponding Month
444
* and AM/PM strings are displayed according to the system’s language
450
* When using the elm box the packing method of the subobj - datetime
451
* in this case - should be defined. There are four possible methods:
453
* @li @c pack_start(subobj_) - Add an object to the beginning of the
454
* pack list. Pack @c subobj_ into the box obj, placing it first in
455
* the list of children objects. The actual position the object will
456
* get on screen depends on the layout used. If no custom layout is
457
* set, it will be at the top or left, depending if the box is
458
* vertical or horizontal, respectively.
460
* @li @c pack_end(subobj_) - Add an object at the end of the pack
461
* list. Pack @c subobj_ into the box obj, placing it last in the list
462
* of children objects. The actual position the object will get on
463
* screen depends on the layout used. If no custom layout is set, it
464
* will be at the bottom or right, depending if the box is vertical or
465
* horizontal, respectively.
467
* @li @c pack_before(subobj_, before_) - Adds an object to the box
468
* before the indicated object. This will add the @c subobj_ to the
469
* box indicated before the object indicated with @c before_. If
470
* before is not already in the box, results are undefined. Before
471
* means either to the left of the indicated object or above it
472
* depending on orientation.
474
* @li @c pack_after(subobj_, after_) - Adds an object to the box
475
* after the indicated object. This will add the @c subobj_ to the box
476
* indicated after the object indicated with @c after_. If after is
477
* not already in the box, results are undefined. After means either
478
* to the right of the indicated object or below it depending on
481
* In this and most examples we use pack_end by choice and
482
* practicality. In this part of the code we also make datetime
488
* For our second datetime, we'll also set the size hints weight and
489
* align, but in this case, the fields year, month and date will be not
490
* visible, and thus displaying in our datetime the hour, minute and
491
* AM/PM. Finally we choose it's packing method and set the visibility
492
* of datetime to @p true.
497
* For our third and last datetime, we setted the weight and align as
498
* before, chose our packing method and made it visible. Note that in
499
* this case we didn't exclude any type of field leaving all
500
* visible. Beeing this datetime the last one, here we'll also set win
506
* See the full @ref datetime_example.js .
508
* This example should look like:
510
* @image html screenshots/datetime_example.png
511
* @image latex screenshots/datetime_example.eps width=\textwidth
513
* @example datetime_example.js
517
* @page clock_js_example Clock widget example with Javascript Binding.
518
* @dontinclude clock_example.js
520
* This code places five Elementary clock widgets on a window, each of
521
* them exemplifying a part of the widget's API. Before explaining
522
* each clock to be more didatical let's start with the basics.
524
* The first part consists of including the necessary modules and for
525
* this we'll use the Node.js require() function. In this example, we
526
* are working with elm and efl modules.
531
* Next step is creating an Elementary window with Win_Standard
532
* without a parent, which is the type used for all of our
533
* examples. Here we also set the title that will appear at the top of
534
* our window and then the autohide state for it.
536
* The autohide works automatically handling "delete,request" signals
537
* when set to @p true, hidding the window, instead of destroying it.
540
* @until autohide_set
542
* A box arranges objects in a linear fashion, governed by a layout
543
* function that defines the details of this arrangement. The box will
544
* use an internal function to set the layout to a single row,
545
* vertical by default.
547
* Now let's create the box with the JS binding method, passing our
548
* window object as parent.
552
* To better understand, the function @c size_hint_weight_set for JS
553
* bindings originated from C bindings function
554
* evas_object_size_hint_weight_set, that is EFL Evas type function.
555
* With this function we set the hints for an object's weight. The
558
* @li x - Double ranging from 0.0 to 1.0 use as horizontal hint.
560
* @li y - Double ranging from 0.0 to 1.0 use as vertical hint.
562
* This is not a size enforcement in any way, it's just a hint that
563
* should be used whenever appropriate. This is a hint on how a
564
* container object should resize a given child within its area.
566
* Containers may adhere to the simpler logic of just expanding the
567
* child object's dimensions to fit its own or the complete one of
568
* taking each child's weight hint as real weights to how much of its
569
* size to allocate for them in each axis. A container is supposed to,
570
* after normalizing the weights of its children (with weight hints),
571
* distribute the space it has to layout them by those factors – most
572
* weighted children get larger in this process than the least ones.
574
* @skipline weight_set
576
* @note Default weight hint values are 0.0, for both axis.
578
* Then we add the box as a resize-object to win informing that when
579
* the size of the win changes so should the box's size. Remember
580
* always to set the box visibility to true.
585
* We create each clock with the JS binding method, passing our
586
* window object as parent. The first of them is the pristine clock,
587
* using the defaults for a clock, which are military time with no
592
* When using the elm.Box the packing method of the subobj - clock
593
* in this case - should be defined. There are four possible methods:
595
* @li @c pack_start(subobj_) - Add an object to the beginning of the
596
* pack list. Pack @c subobj_ into the box obj, placing it first in
597
* the list of children objects. The actual position the object will
598
* get on screen depends on the layout used. If no custom layout is
599
* set, it will be at the top or left, depending if the box is
600
* vertical or horizontal, respectively.
602
* @li @c pack_end(subobj_) - Add an object at the end of the pack
603
* list. Pack @c subobj_ into the box obj, placing it last in the list
604
* of children objects. The actual position the object will get on
605
* screen depends on the layout used. If no custom layout is set, it
606
* will be at the bottom or right, depending if the box is vertical or
607
* horizontal, respectively.
609
* @li @c pack_before(subobj_, before_) - Adds an object to the box
610
* before the indicated object. This will add the @c subobj_ to the
611
* box indicated before the object indicated with @c before_. If
612
* before is not already in the box, results are undefined. Before
613
* means either to the left of the indicated object or above it
614
* depending on orientation.
616
* @li @c pack_after(subobj_, after_) - Adds an object to the box
617
* after the indicated object. This will add the @c subobj_ to the box
618
* indicated after the object indicated with @c after_. If after is
619
* not already in the box, results are undefined. After means either
620
* to the right of the indicated object or below it depending on
623
* In this and most examples we use pack_end by choice and
624
* practicality. In this part of the code we also make clock
630
* The second clock shows the am/pm time, that we also create with
631
* the JS binding method, passing our window object as
632
* parent. Setting show_am_pm to true and again choosing the packing
633
* method and making clock visible.
638
* The third one will show the seconds digits, which will flip in
639
* synchrony with system time. Note, besides, that the time itself is
640
* @b different from the system's -- it was customly set with
646
* In both fourth and fifth ones, we turn on the <b>edition
647
* mode</b>. See how you can change each of the sheets on it, and be
648
* sure to try holding the mouse pressed over one of the sheet
649
* arrows. The forth one also starts with a custom time set:
654
* The fifth, besides editable, it has only the time @b units
655
* editable, for hours, minutes and seconds. For this we used
656
* edit_mode_set with the parameter digedit that sets indentifiers for
657
* which clock digits should be editable, when a clock widget is in
658
* edition mode. Values may be OR-ed together to make a mask,
661
* Possible values for digedit:
663
* @li @p default: Default value. Means that all digits are
664
* editable, when in edition mode.
666
* @li @p hour_decimal: Decimal digit of hours value should
669
* @li @p hour_unit: Unit digit of hours value should be
672
* @li @p min_decimal: Decimal digit of minutes value should
675
* @li @p min_unit: Unit digit of minutes value should be
678
* @li @p sec_decimal: Decimal digit of seconds value should
681
* @li @p sec_unit: Unit digit of seconds value should be
684
* @li @p all: All digits should be editable;
686
* Finishing this example we should set win to be visible.
691
* See the full @ref clock_example.js, whose window should look
694
* @image html screenshots/clock_example.png
695
* @image latex screenshots/clock_example.eps width=\textwidth
696
* @example clock_example.js
700
* @page separator_js_example_01 Separator with Javascript Binding
701
* @dontinclude separator_example_01.js
703
* Separator is a very thin object used to separate other objects,
704
* which can be vertical or horizontal.
706
* This example shows how to create a window and separate in two
707
* parts, each one will be filled with a background color to show the
708
* division. The @a separator is used to visually mark the division
711
* The first part consists of including the necessary modules and for
712
* this we'll use the Node.js require() function. In this example, we
713
* are working with elm and efl modules.
718
* Next step is creating an Elementary window with Win_Standard
719
* without a parent, which is the type used for all of our
720
* examples. Here we also set the title that will appear at the top of
721
* our window and then the autohide state for it.
723
* The autohide works automatically handling "delete,request" signals
724
* when set to @p true, hidding the window, instead of destroying it.
727
* @until autohide_set
729
* Now let's create the background with the JS binding method, passing
730
* our window as parent.
734
* To better understand, the function @c size_hint_weight_set for JS
735
* bindings originated from C bindings function
736
* evas_object_size_hint_weight_set, that is EFL Evas type function.
737
* With this function we set the hints for an object's weight. The
740
* @li x - Double ranging from 0.0 to 1.0 use as horizontal hint.
742
* @li y - Double ranging from 0.0 to 1.0 use as vertical hint.
744
* This is not a size enforcement in any way, it's just a hint that
745
* should be used whenever appropriate. This is a hint on how a
746
* container object should resize a given child within its area.
748
* Containers may adhere to the simpler logic of just expanding the
749
* child object's dimensions to fit its own or the complete one of
750
* taking each child's weight hint as real weights to how much of its
751
* size to allocate for them in each axis. A container is supposed to,
752
* after normalizing the weights of its children (with weight hints),
753
* distribute the space it has to layout them by those factors – most
754
* weighted children get larger in this process than the least ones.
756
* @skipline weight_set
758
* @note Default weight hint values are 0.0, for both axis.
760
* Now we add the background as a resize-object to win informing that
761
* when the size of the win changes so should the background's size
762
* and setting it's visibility. You can change the background's color
763
* using color_set, if not, the default color will be used.
768
* To put a box in the window we also need to set it's parent. By
769
* default, box object arranges their contents vertically from top to
770
* bottom. By calling this function with horizontal as @a true, the
771
* box will become horizontal, arranging contents from left to right.
776
* The value that we set EFL Evas function size_hint_weight_set
777
* expands the box to cover all win's area and adding it as a
778
* resize_object to win informing that when the size of the win
779
* changes so should the box's size. In the end we make the box
785
* Now we create a retangle, like before, we just need to setting it's
786
* parent. After created, we set the color to show the difference
787
* between the next rectangle and define the minimun size of each side
788
* by using size_hint_min_set(minimum width, minimum height).
793
* As in the background, the value we set EFL Evas function
794
* size_hint_weight_set expands the background to cover all area
795
* defined in size_hint_min_set. We also need to expand the rectangle
796
* to fill the area if the win's size change, if not, win can change
797
* it's size and the rectangle will only fill it's own previous area.
801
* Now we have to The function @c size_hint_align_set for JS bindings
802
* originated from C bindings function
803
* evas_object_size_hint_align_set, that is EFL Evas type
804
* function. With this function we set the hints for an object's
805
* alignment. The parameters are:
807
* @li x - Double ranging from 0.0 to 1.0 use as horizontal alignment
810
* @li y - Double ranging from 0.0 to 1.0 use as vertical alignment
813
* These are hints on how to align an object inside the boundaries of
814
* a container/manager. Accepted values are in the 0.0 to 1.0 range,
815
* used to specify "justify" or "fill" by some users. In this case,
816
* maximum size hints should be enforced with higher priority, if they
817
* are set. Also, any padding hint set on objects should add up to the
818
* alignment space on the final scene composition.
820
* For the horizontal component, 0.0 means to the left, 1.0 means to
821
* the right. Analogously, for the vertical component, 0.0 to the top,
822
* 1.0 means to the bottom. This is not a size enforcement in any way,
823
* it's just a hint that should be used whenever appropriate.
827
* @note Default alignment hint values are 0.5, for both axis.
829
* Now we only need to set the visibility of the rectangle and add our
830
* retangle to box with the packing method of the subobj - rectangle
831
* in this case. There are four possible methods:
833
* @li @c pack_start(subobj_) - Add an object to the beginning of the
834
* pack list. Pack @c subobj_ into the box obj, placing it first in
835
* the list of children objects. The actual position the object will
836
* get on screen depends on the layout used. If no custom layout is
837
* set, it will be at the top or left, depending if the box is
838
* vertical or horizontal, respectively.
840
* @li @c pack_end(subobj_) - Add an object at the end of the pack
841
* list. Pack @c subobj_ into the box obj, placing it last in the list
842
* of children objects. The actual position the object will get on
843
* screen depends on the layout used. If no custom layout is set, it
844
* will be at the bottom or right, depending if the box is vertical or
845
* horizontal, respectively.
847
* @li @c pack_before(subobj_, before_) - Adds an object to the box
848
* before the indicated object. This will add the @c subobj_ to the
849
* box indicated before the object indicated with @c before_. If
850
* before is not already in the box, results are undefined. Before
851
* means either to the left of the indicated object or above it
852
* depending on orientation.
854
* @li @c pack_after(subobj_, after_) - Adds an object to the box
855
* after the indicated object. This will add the @c subobj_ to the box
856
* indicated after the object indicated with @c after_. If after is
857
* not already in the box, results are undefined. After means either
858
* to the right of the indicated object or below it depending on
861
* In this and most examples we use pack_end by choice and
867
* Once we have our first rectangle in the box we create and add our
868
* separator. Using the same approach, we setting it's parent. Since
869
* our box is in horizontal mode it's a good idea to set the separator
870
* to be horizontal too. Finishing with the visibility and packing
876
* After all this, we just need to create another rectangle, setting
877
* the color, size hints, make rect2 visible and packing in the
878
* box. Don't forget to set the win's visibility as @p true.
883
* The full code for this example can be found at @ref separator_example_01.js .
885
* This example will look like:
887
* @image html screenshots/separator_example_01.png
888
* @image latex screenshots/separator_example_01.eps width=\textwidth
890
* @example separator_example_01.js
895
* @page icon_js_example_01 Icon Example with Javascript Binding
896
* @dontinclude icon_example_01.js
898
* This example is as simple as possible. An icon object will be added
899
* to the window over a blank background, and set to be resizable
900
* together with the window. All the options set through the example
901
* will affect the behavior of this icon.
903
* The first part consists of including the necessary modules and for
904
* this we'll use the Node.js require() function. In this example, we
905
* are working with elm and efl modules.
910
* Next step is creating an Elementary window with Win_Standard
911
* without a parent, which is the type used for all of our
912
* examples. Here we also set the title that will appear at the top of
913
* our window and then the autohide state for it.
915
* The autohide works automatically handling "delete,request" signals
916
* when set to @p true, hidding the window, instead of destroying it.
919
* @until autohide_set
921
* Now we construct the elm icon and for this we use the JS method
922
* below, setting it's parent. An icon object is used to display
923
* standard icon images ("delete", "edit", "arrows", etc.) or images924
* coming from a custom file (PNG, JPG, EDJE, etc.), on icon contexts.
928
* Now we can set the standard "home" icon, chosen for this example.
932
* An interesting thing is that after setting this, it's possible to
933
* check where in the filesystem is the theme used by this icon, and
934
* the name of the group used, using file_get. Note that when a
935
* function get returns two parameters, they are therefore stored in a
936
* array, following the same order as the function.
941
* We can also get the name of the standard icon that we setted
947
* We can now go setting our options.
949
* no_scale_set() is used just to set this value to true as we don't
950
* actually want to scale our icon, just resize it.
952
* resizable_set() is used to allow the icon to be resized to a size
953
* smaller than the original one, but not to a size bigger than it.
955
* smooth_set() will disable the smooth scaling, so the scale
956
* algorithm used to scale the icon to the new object size is going to
957
* be faster, but with a lower quality.
959
* fill_outside_set() is used to ensure that the icon will fill the
960
* entire area available to it, even if keeping the aspect ratio. The
961
* icon will overflow its width or height (any of them that is
962
* necessary) to the object area, instead of resizing the icon down
963
* until it can fit entirely in this area.
965
* This is the code for setting these options:
967
* @until fill_outside
969
* However, if you try this example you may notice that this image is
970
* not being affected by all of these options. This happens because
971
* the used icon will be from elementary theme, and thus it has its
972
* own set of options like smooth scaling and fill_outside
973
* options. You can change the "home" icon to use some image (from
974
* your system) and see that then those options will be respected.
976
* To better understand, the function @c size_hint_weight_set for JS
977
* bindings originated from C bindings function
978
* evas_object_size_hint_weight_set, that is EFL Evas type function.
979
* With this function we set the hints for an object's weight. The
982
* @li x - Double ranging from 0.0 to 1.0 use as horizontal hint.
984
* @li y - Double ranging from 0.0 to 1.0 use as vertical hint.
986
* This is not a size enforcement in any way, it's just a hint that
987
* should be used whenever appropriate. This is a hint on how a
988
* container object should resize a given child within its area.
990
* Containers may adhere to the simpler logic of just expanding the
991
* child object's dimensions to fit its own or the complete one of
992
* taking each child's weight hint as real weights to how much of its
993
* size to allocate for them in each axis. A container is supposed to,
994
* after normalizing the weights of its children (with weight hints),
995
* distribute the space it has to layout them by those factors – most
996
* weighted children get larger in this process than the least ones.
998
* @skipline weight_set
1000
* @note Default weight hint values are 0.0, for both axis.
1002
* Now we add the icon as a resize_object to win informing that
1003
* when the size of the win changes so should the icon's
1004
* size. And finally we make icon visible.
1009
* Now we set the size for the window, making it visible in the end:
1014
* The full code for this example can be found at @ref icon_example_01.js
1016
* This example will look like this:
1018
* @image html screenshots/icon_example_01.png
1019
* @image latex screenshots/icon_example_01.eps width=\textwidth
1021
* @example icon_example_01.js