summaryrefslogtreecommitdiff
path: root/doc
diff options
context:
space:
mode:
authorFelipe Magno de Almeida <felipe@expertisesolutions.com.br>2014-12-09 16:41:16 -0200
committerFelipe Magno de Almeida <felipe@expertisesolutions.com.br>2015-12-23 22:23:46 -0200
commit9dbba7412358ac31af2f8e962d30438681b0f097 (patch)
tree91d4a92a3d9e89c8fffad6766b6c8e1b0e85b5f2 /doc
parentb2ad8058c7e56dc2f0942b5291a630ea03a3202d (diff)
efl-js: JavaScript Eolian binding
To configure elementary sources with bindings to use in nodejs add ––with-js=nodejs in configure flags in EFL compilation to generate node files, then compile elementary normally: path/to/efl$ configure --with-js=nodejs path/to/efl$ make path/to/efl$ make install path/to/elm$ configure path/to/efl$ make path/to/efl$ make install To use, you have to require elm: elm = require('elm') The bindings is divided in two parts: generated and manually written. The generation uses the Eolian library for parsing Eo files and generate C++ code that is compiled against V8 interpreter library to create a elm.node file that can be required in a node.js instance. @feature
Diffstat (limited to 'doc')
-rw-r--r--doc/Doxyfile.in2
-rw-r--r--doc/examples-js.dox1022
2 files changed, 1023 insertions, 1 deletions
diff --git a/doc/Doxyfile.in b/doc/Doxyfile.in
index 7c0e86a61..6ad06e39a 100644
--- a/doc/Doxyfile.in
+++ b/doc/Doxyfile.in
@@ -1,7 +1,7 @@
1PROJECT_NAME = Elementary 1PROJECT_NAME = Elementary
2PROJECT_NUMBER = @PACKAGE_VERSION@ 2PROJECT_NUMBER = @PACKAGE_VERSION@
3OUTPUT_DIRECTORY = . 3OUTPUT_DIRECTORY = .
4INPUT = @srcdir@/examples.dox @srcdir@/examples-cxx.dox @top_srcdir@/src/lib @srcdir@/index.doxy @top_srcdir@/src/bin/elm_prefs_cc_handlers.c 4INPUT = @srcdir@/examples.dox @srcdir@/examples-cxx.dox @srcdir@/examples-js.dox @top_srcdir@/src/lib @srcdir@/index.doxy @top_srcdir@/src/bin/elm_prefs_cc_handlers.c
5IMAGE_PATH = @srcdir@/img 5IMAGE_PATH = @srcdir@/img
6OUTPUT_LANGUAGE = English 6OUTPUT_LANGUAGE = English
7GENERATE_HTML = YES 7GENERATE_HTML = YES
diff --git a/doc/examples-js.dox b/doc/examples-js.dox
new file mode 100644
index 000000000..37f867a63
--- /dev/null
+++ b/doc/examples-js.dox
@@ -0,0 +1,1022 @@
1/**
2 * @page Examples-js Examples with Javascript Bindings.
3 *
4 * Here is a list of Elementary JS Examples.
5 *
6 * @ref bg_js_example_02
7 *
8 * @ref calendar_js_example_01
9 *
10 * @ref calendar_js_example_03
11 *
12 * @ref clock_js_example
13 *
14 * @ref datetime_js_example
15 *
16 * @ref icon_js_example_01
17 *
18 * @ref separator_js_example_01
19 *
20 */
21
22/**
23 * @page bg_js_example_02 elm.Bg - Image background using Javascript Binding
24 * @dontinclude bg_example_02.js
25
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
28 * application.
29
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.
33
34 * @skipline require
35
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.
40
41 * The autohide works automatically handling "delete,request" signals
42 * when set to @p true, hidding the window, instead of destroying it.
43
44 * @skip win
45 * @until autohide_set
46
47 * Our background will have an image, that will be displayed over the
48 * background color.
49
50 * To do so, first we create the background that will display our
51 * image.
52
53 * @skipline bg
54
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
64 * it's just a hint).
65
66 * @skipline load_size_set
67
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
73 * key instead.
74
75 * @skipline file
76
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
81 * parameters are:
82
83 * @li x - Double ranging from 0.0 to 1.0 use as horizontal hint.
84
85 * @li y - Double ranging from 0.0 to 1.0 use as vertical hint.
86
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.
90
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.
98
99 * @skipline weight_set
100
101 * @note Default weight hint values are 0.0, for both axis.
102
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.
106
107 * @skip win
108 * @until visible
109
110 * Now we only have to set the size for our window and make it
111 * visible.
112
113 * @skip size_set
114 * @until visible
115
116 * The full code for this example can be found at @ref
117 * bg_example_02.js .
118
119 * This example will look like this:
120
121 * @image html screenshots/bg_example_02.png
122 * @image latex screenshots/bg_example_02.eps width=\textwidth
123 * @example bg_example_02.js
124 */
125
126/**
127 * @page calendar_js_example_01 Calendar - Simple creation with Javascript Binding
128 * @dontinclude calendar_example_01.js
129
130 * As a first example, let's just display a calendar in our window,
131 * explaining all steps required to do so.
132
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.
136
137 * @skipline require
138
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.
143
144 * The autohide works automatically handling "delete,request" signals
145 * when set to @p true, hidding the window, instead of destroying it.
146
147 * @skip Win
148 * @until autohide_set
149
150 * Now, the exciting part, let's create the calendar with the JS
151 * binding method, passing our window object as parent.
152
153 * @skipline Calendar
154
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
159 * parameters are:
160
161 * @li x - Double ranging from 0.0 to 1.0 use as horizontal hint.
162
163 * @li y - Double ranging from 0.0 to 1.0 use as vertical hint.
164
165 * This is not a size enforcement in any way, it's just a hint that
166 * should be used whenever appropriate.
167
168 * This is a hint on how a container object should resize a given
169 * child within its area.
170
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.
178
179 * @skipline weight_set
180
181 * @note Default weight hint values are 0.0, for both axis.
182
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.
186
187 * @skip win
188 * @until win.visible
189
190 * Our example will look like this:
191
192 * @image html screenshots/calendar_example_01.png
193
194 * @image latex screenshots/calendar_example_01.eps width=\textwidth
195
196 * See the full source code @ref calendar_example_01.js here.
197
198 * @example calendar_example_01.js
199 */
200
201/**
202 * @page calendar_js_example_03 Calendar - Years restrictions with Javascript Binding
203 * @dontinclude calendar_example_03.js
204
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
210 * @c ctime manpage.
211
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.
216
217 * The autohide works automatically handling "delete,request" signals
218 * when set to @p true, hidding the window, instead of destroying it.
219
220 * @skip win
221 * @until autohide_set
222
223 * Now let's create the calendar with the JS binding method, passing
224 * our window object as parent.
225
226 * @skipline Calendar
227
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
232 * parameters are:
233
234 * @li x - Double ranging from 0.0 to 1.0 use as horizontal hint.
235
236 * @li y - Double ranging from 0.0 to 1.0 use as vertical hint.
237
238 * This is not a size enforcement in any way, it's just a hint that
239 * should be used whenever appropriate.
240
241 * This is a hint on how a container object should resize a given
242 * child within its area.
243
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.
251
252 * @skipline weight_set
253
254 * @note Default weight hint values are 0.0, for both axis.
255
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
258 * size.
259
260 * @skipline win
261
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):
267
268 * @skipline min_max_year_set
269
270 * Finally we just have to make calendar and window visible.
271
272 * @skip cal.visible
273 * @until win.visible
274
275 * Our example will look like this:
276
277 * @image html screenshots/calendar_example_03.png
278 * @image latex screenshots/calendar_example_03.eps width=\textwidth
279
280 * See the full source code @ref calendar_example_03.js here.
281
282 * @example calendar_example_03.js
283 */
284
285/**
286 * @page datetime_js_example Datetime Example with Javascript Binding
287 * @dontinclude datetime_example.js
288
289 * This example places three Elementary Datetime widgets on a window,
290 * each of them exemplifying the widget's different usage.
291
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.
295
296 * @skip efl
297 * @until elm
298
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.
303
304 * The autohide works automatically handling "delete,request" signals
305 * when set to @p true, hidding the window, instead of destroying it.
306
307 * @skip Win
308 * @until autohide_set
309
310 * Now we construct the elm background and for this we use the JS
311 * method below, setting win as it's parent.
312
313 * @skipline elm.Bg
314
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
319 * parameters are:
320
321 * @li x - Double ranging from 0.0 to 1.0 use as horizontal hint.
322
323 * @li y - Double ranging from 0.0 to 1.0 use as vertical hint.
324
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.
328
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.
336
337 * @skipline weight_set
338
339 * @note Default weight hint values are 0.0, for both axis.
340
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.
344
345 * @skip win
346 * @until visible
347
348 * @remarks If a color it's not setted the default color will be used.
349
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.
354
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
358 * its area.
359
360 * @skipline elm.Box
361 * @until weight_set
362
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.
366
367 * @skip win
368 * @until visible
369
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.
373
374 * @skip datetime
375 * @until weight
376
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:
382
383 * @li x - Double ranging from 0.0 to 1.0 use as horizontal alignment
384 * hint.
385
386 * @li y - Double ranging from 0.0 to 1.0 use as vertical alignment
387 * hint.
388
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.
395
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.
400
401 * @skipline align
402
403 * @note Default alignment hint values are 0.5, for both axis.
404
405 * An important feature for the datetime is the setting of what we
406 * want it to display. We can achieve that by using:
407
408 * @p field_visible_set (elm.Elm_Datetime_Field_Type.fieldtype_, visible_)
409
410 * Parameters are:
411
412 * @li @p fieldtype_: type of the field, supports 6 fields:
413
414 * @p year: Indicates Year field.
415
416 * @p month: Indicates Month field.
417
418 * @p date: Indicates Date field.
419
420 * @p hour: Indicates Hour field,
421
422 * @p minute: Indicates Minute field.
423
424 * @p ampm: Indicates AM/PM field.
425
426 * @li @p visible_: @p true field can be visible, @p false otherwise.
427
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
434 * field is visible.
435
436 * @note By default the field visibility is set to @p true.
437
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.
441
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
445 * settings.
446
447 * @skip hour
448 * @until ampm
449
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:
452
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.
459
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.
466
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.
473
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
479 * orientation.
480
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
483 * visible.
484
485 * @skip pack_end
486 * @until visible
487
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.
493
494 * @skip datetime
495 * @until visible
496
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
501 * to be visible.
502
503 * @skip datetime
504 * @until win.visible
505
506 * See the full @ref datetime_example.js .
507
508 * This example should look like:
509
510 * @image html screenshots/datetime_example.png
511 * @image latex screenshots/datetime_example.eps width=\textwidth
512
513 * @example datetime_example.js
514 */
515
516/**
517 * @page clock_js_example Clock widget example with Javascript Binding.
518 * @dontinclude clock_example.js
519
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.
523
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.
527
528 * @skip efl
529 * @until elm
530
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.
535
536 * The autohide works automatically handling "delete,request" signals
537 * when set to @p true, hidding the window, instead of destroying it.
538
539 * @skip Win
540 * @until autohide_set
541
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.
546
547 * Now let's create the box with the JS binding method, passing our
548 * window object as parent.
549
550 * @skipline elm.Box
551
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
556 * parameters are:
557
558 * @li x - Double ranging from 0.0 to 1.0 use as horizontal hint.
559
560 * @li y - Double ranging from 0.0 to 1.0 use as vertical hint.
561
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.
565
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.
573
574 * @skipline weight_set
575
576 * @note Default weight hint values are 0.0, for both axis.
577
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.
581
582 * @skip win
583 * @until visible
584
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
588 * seconds shown.
589
590 * @skipline Clock
591
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:
594
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.
601
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.
608
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.
615
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
621 * orientation.
622
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
625 * visible.
626
627 * @skip pack_end
628 * @until visible
629
630 * The second clock shows ther 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.
634
635 * @skip Clock
636 * @until visible
637
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
641 * time_set():
642
643 * @skip ck3
644 * @until visible
645
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:
650
651 * @skip ck4
652 * @until visible
653
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,
659 * naturally.
660
661 * Possible values for digedit:
662
663 * @li @p default: Default value. Means that all digits are
664 * editable, when in edition mode.
665
666 * @li @p hour_decimal: Decimal digit of hours value should
667 * be editable;
668
669 * @li @p hour_unit: Unit digit of hours value should be
670 * editable;
671
672 * @li @p min_decimal: Decimal digit of minutes value should
673 * be editable;
674
675 * @li @p min_unit: Unit digit of minutes value should be
676 * editable;
677
678 * @li @p sec_decimal: Decimal digit of seconds value should
679 * be editable;
680
681 * @li @p sec_unit: Unit digit of seconds value should be
682 * editable;
683
684 * @li @p all: All digits should be editable;
685
686 * Finishing this example we should set win to be visible.
687
688 * @skip ck5
689 * @until win.visible
690
691 * See the full @ref clock_example.js, whose window should look
692 * like this picture:
693
694 * @image html screenshots/clock_example.png
695 * @image latex screenshots/clock_example.eps width=\textwidth
696 * @example clock_example.js
697 */
698
699/**
700 * @page separator_js_example_01 Separator with Javascript Binding
701 * @dontinclude separator_example_01.js
702
703 * Separator is a very thin object used to separate other objects,
704 * wich can be vertical or horizontal.
705
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
709 * between two parts.
710
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.
714
715 * @skip efl
716 * @until elm
717
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.
722
723 * The autohide works automatically handling "delete,request" signals
724 * when set to @p true, hidding the window, instead of destroying it.
725
726 * @skip win
727 * @until autohide_set
728
729 * Now let's create the background with the JS binding method, passing
730 * our window as parent.
731
732 * @skipline bg
733
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
738 * parameters are:
739
740 * @li x - Double ranging from 0.0 to 1.0 use as horizontal hint.
741
742 * @li y - Double ranging from 0.0 to 1.0 use as vertical hint.
743
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.
747
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.
755
756 * @skipline weight_set
757
758 * @note Default weight hint values are 0.0, for both axis.
759
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.
764
765 * @skip win
766 * @until visible
767
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.
772
773 * @skip bx
774 * @until horizontal
775
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
780 * visible.
781
782 * @skip weight
783 * @until visible
784
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).
789
790 * @skip rect
791 * @until min_set
792
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.
798
799 * @until weight
800
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:
806
807 * @li x - Double ranging from 0.0 to 1.0 use as horizontal alignment
808 * hint.
809
810 * @li y - Double ranging from 0.0 to 1.0 use as vertical alignment
811 * hint.
812
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.
819
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.
824
825 * @skipline align
826
827 * @note Default alignment hint values are 0.5, for both axis.
828
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:
832
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.
839
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.
846
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.
853
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
859 * orientation.
860
861 * In this and most examples we use pack_end by choice and
862 * practicality.
863
864 * @skip visible
865 * @until pack
866
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
871 * method.
872
873 * @skip separator
874 * @until pack
875
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.
879
880 * @skip rect2
881 * @until win.visible
882
883 * The full code for this example can be found at @ref separator_example_01.js .
884
885 * This example will look like:
886
887 * @image html screenshots/separator_example_01.png
888 * @image latex screenshots/separator_example_01.eps width=\textwidth
889
890 * @example separator_example_01.js
891 */
892
893
894/**
895 * @page icon_js_example_01 Icon Example with Javascript Binding
896 * @dontinclude icon_example_01.js
897
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.
902
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.
906
907 * @skip efl
908 * @until elm
909
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.
914
915 * The autohide works automatically handling "delete,request" signals
916 * when set to @p true, hidding the window, instead of destroying it.
917
918 * @skip win
919 * @until autohide_set
920
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 images
924 * coming from a custom file (PNG, JPG, EDJE, etc.), on icon contexts.
925
926 * @skipline icon
927
928 * Now we can set the standard "home" icon, chosen for this example.
929
930 * @skipline standard
931
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.
937
938 * @skip path
939 * @until console
940
941 * We can also get the name of the standard icon that we setted
942 * before.
943
944 * @skip name
945 * @until console
946
947 * We can now go setting our options.
948
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.
951
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.
954
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.
958
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.
964
965 * This is the code for setting these options:
966
967 * @until fill_outside
968
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.
975
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
980 * parameters are:
981
982 * @li x - Double ranging from 0.0 to 1.0 use as horizontal hint.
983
984 * @li y - Double ranging from 0.0 to 1.0 use as vertical hint.
985
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.
989
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.
997
998 * @skipline weight_set
999
1000 * @note Default weight hint values are 0.0, for both axis.
1001
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.
1005
1006 * @skip resize
1007 * @until visible
1008
1009 * Now we set the size for the window, making it visible in the end:
1010
1011 * @skip size_set
1012 * @until visible
1013
1014 * The full code for this example can be found at @ref icon_example_01.js
1015
1016 * This example will look like this:
1017
1018 * @image html screenshots/icon_example_01.png
1019 * @image latex screenshots/icon_example_01.eps width=\textwidth
1020
1021 * @example icon_example_01.js
1022 */ \ No newline at end of file