summaryrefslogtreecommitdiff
path: root/pages/develop/legacy/tutorial
diff options
context:
space:
mode:
authorVitor Sousa da Silva <vitorsousasilva@gmail.com>2018-01-19 07:39:54 -0800
committerapache <apache@e5-web1.enlightenment.org>2018-01-19 07:39:54 -0800
commit290c82651d6eb44d5bb953307fad3fe59a42679a (patch)
treed27e5160068bb05826b061b25dc2f12a6699e3e8 /pages/develop/legacy/tutorial
parent009799a6375cd3fdf6a173a388dfa3d3a9b0fa13 (diff)
Wiki page javascript_tutorial changed with summary [Restore content mistakenly overwritten] by Vitor Sousa da Silva
Diffstat (limited to 'pages/develop/legacy/tutorial')
-rw-r--r--pages/develop/legacy/tutorial/javascript_tutorial.txt371
1 files changed, 365 insertions, 6 deletions
diff --git a/pages/develop/legacy/tutorial/javascript_tutorial.txt b/pages/develop/legacy/tutorial/javascript_tutorial.txt
index 64d1cdcf6..bc45cb4a4 100644
--- a/pages/develop/legacy/tutorial/javascript_tutorial.txt
+++ b/pages/develop/legacy/tutorial/javascript_tutorial.txt
@@ -1,10 +1,10 @@
1~~Title: C# Tutorial~~ 1~~Title: Javascript Tutorial~~
2==== C# Tutorial ==== 2==== Javascript Tutorial ====
3 3
4WIP 4This Javascript tutorial describes the basic steps to compile and run a Javascript example using EFL with Node.Js
5 5
6<note important> 6<note important>
7The C# bindings are currently in BETA state. 7The Javascript bindings are currently in BETA state.
8</note> 8</note>
9 9
10=== Prerequisite === 10=== Prerequisite ===
@@ -13,8 +13,367 @@ Before you start you may want to read about how to compile the EFL:
13 13
14 * Installed from source: [[develop/efl/start|Get started with EFL]]. 14 * Installed from source: [[develop/efl/start|Get started with EFL]].
15 15
16=== Getting Started === 16=== Dependencies ===
17
18You will need additional dependencies to Javascript Bindings:
19
20 * [[https://nodejs.org|node]] (4.2 or higher)
17 21
18=== Compilation === 22=== Compilation ===
19 23
20=== Example === 24== Efl ==
25To configure efl sources with nodejs bindings add ''//––with-js=nodejs//'' to the configure flags:
26
27<code bash>
28./configure --with-js=nodejs #in efl source path
29</code>
30
31After that, you can compile normally with:
32
33<code bash>
34make
35make install
36</code>
37
38=== Node.Js ===
39
40EFL will install its nodejs modules - named ''efl.node'' - under the ''<prefix>/lib'' path. The default prefix, if not explicitly defined, is ''/usr/local''. In order to nodejs discover these modules, add the previously cited folder to the ''NODE_PATH'' environment variable:
41
42<code bash>
43export NODE_PATH=/usr/local/lib:$NODE_PATH #if necessary replace with your prefix path
44</code>
45
46To check if the path is correctly set, use ''require'' inside nodejs to import the module:
47
48<code javascript>
49~$ node
50> efl = require("efl")
51</code>
52
53====Button Example====
54
55<note tip>
56You can find this example in ''<efl_source>/src/examples/elementary/button_example_00.js''
57</note>
58
59Import Efl module
60<code javascript>
61efl = require('efl');
62</code>
63
64Create a new Window with //auto hide// (the window is automatically hidden when the close button is clicked):
65<code javascript>
66win = new efl.Efl.Ui.Win.Standard(null);
67win.setText("Hello, World!"); // Sets the title
68win.setAutohide(true);
69</code>
70
71Create a new Button (passing the newly created window as parent) and set new label text to button:
72<code javascript>
73btn = new efl.Elm.Button(win);
74btn.setText(null, "Good-Bye, World!");
75</code>
76
77Set button basic size and positions:
78<code javascript>
79btn.setSize(120, 30);
80btn.setPosition(60, 15);
81btn.setHintWeight(1.0, 1.0);
82btn.setHintAlign(1.0, 1.0);
83</code>
84
85The method ''on'' is used to register callback on events. In this case we need to catch the ''clicked'' event, so we register a function (second argument) to print a log message when the button ''btn'' is clicked:
86<code javascript>
87btn.on('clicked', function () { console.log('clicked'); } );
88</code>
89
90To finish, it is necessary to show all elements, using the ''setVisible(true)'' method:
91<code javascript>
92btn.setVisible(true);
93win.setSize(240, 60);
94win.setVisible(true);
95</code>
96
97Once finished this setup, the ''efl.node'' module automatically integrates with the nodejs main loop without requiring you to call it explicitly.
98
99====Twitter Example====
100
101<note tip>
102You can find the complete twitter example in ''<efl_source>/src/examples/twitter_example_01.js''
103</note>
104
105This is a more complex example, with edje theming and some external requirements. We need to install the ''request'' and ''twitter'' nodejs modules, using the ''npm'' (node.js package manager) to automatically download and install all necessary files:
106<code bash>
107npm install request
108npm install twitter
109</code>
110<note tip>''npm'' is installed by default with Node.js</note>
111
112Import all modules and initialize the necessary variables to connect to the twitter API
113<code javascript>
114efl = require('efl');
115
116// Standard node modules
117util = require('util');
118fs = require('fs');
119path = require('path');
120
121// 3rd pardy modules, requiring install with npm
122request = require('request'); //need "npm install request"
123twitter = require('twitter'); //need "npm install twitter"
124
125// Twitter access keys
126var twit = new twitter({
127 consumer_key: 'ZbSM93w5Sp2cyZ2SG0XuCvoHV',
128 consumer_secret: 'g8N7EEQLpdKPnAsS9hWuQV29FYjBkhH62jhZzXyYymDw87DKye',
129 access_token_key: '222611263-pPhKKjYh59uuNLP0b86sP7aAtLhdecjVQaEsCDCv',
130 access_token_secret: 'l7ccNKXTVv6cymfSD1gQH61tmfixkdna2QmOjPtpVxSHD'
131});
132
133user_acount = 'EnlightenmentKo' // our target twitter account to be shown
134</code>
135
136Create a new Window (as in the previous example):
137<code javascript>
138win = new efl.Efl.Ui.Win.Standard(null);
139win.setText("Twitter App");
140win.setAutohide(true);
141</code>
142
143Create and show two //boxes// widget containers, one to be the top level box and another to work like a list, with the individual tweets.
144
145<code javascript>
146box = new efl.Efl.Ui.Box(win);
147box.setHintWeight(1.0, 1.0);
148win.setContent(box);
149box.setVisible(true);
150
151tweet_box = new efl.Efl.Ui.Box(win);
152tweet_box.setHintWeight(1.0, 1.0);
153tweet_box.setHintAlign(-1.0, -1.0);
154tweet_box.setPackPadding(0.0, 30.0, true); // Give some space between the tweets
155box.packEnd(tweet_box);
156</code>
157
158The default box orientation is horizontal. In order to resemble the original timeline appearance, we need to make it horizontal. This is made in two steps, first we "cast" the box to an ''Efl.Orientation'' object and then we actually set the orientation.
159
160<note important>
161This explicit cast is currently required as ''Efl.Ui.Box'' inherits from both ''Elm.Widget'' and the interface ''Efl.Orientation''. These two classes/interfaces define a method called ''setOrientation''. In C you can specify which one you want by calling the respective function, e.g. ''elm_widget_orientation_set'' or ''efl_orientation_orientation_set''. In the Javascript bindings, the current approach is using these explicit casts.
162</note>
163
164<code javascript>
165tweet_box_orient = tweet_box.cast("Efl.Orientation");
166tweet_box_orient.setOrientation(efl.Efl.Orient.VERTICAL);
167</code>
168
169Now we are ready to ask the twitter module to get the timeline of the target user. The 'get' function will be passed a callback that will be called when the data is ready. Inside it, we will start building the tweet list.
170
171Also, we create an array to store the icon widgets to be filled when the icon finish downloading.
172
173<code javascript>
174icon_array = new Array(); // To store the icons
175twit.get('statuses/user_timeline', {screen_name: user_acount, count:10},
176 function(error, tweets, response) {
177 if (error)
178 return;
179
180 // Begin building the tweets
181</code>
182
183For each tweet, we make a new ''Elm.Layout'' and set various components, or, in efl jargon, "parts", using the ''set*'' family of methods.
184
185First, we set a base theme using ''setFile''. The layout will load the given file and setup the internal layout structure, etc. This will allow us to refer the individual tweet's parts by name on the following methods.
186
187The edj file used was compiled from a source edc file. For more information, see the next section.
188
189<code javascript>
190 // continuing the previous callback
191 for(i=0; i < tweets.length; i++){
192
193 // extract the data we got from the twitter api
194 var user_name = tweets[i].user.name;
195 var screen_name = tweets[i].user.screen_name;
196 var text = tweets[i].text;
197
198 var layout = new efl.Elm.Layout(win);
199 // Use __dirname to get the file from the same folder of this .js
200 var filename = path.join(__dirname, "twitter_example_01.edj");
201 layout.setFile(filename, "tweet"); // Load the 'tweet' group from theme file
202</code>
203
204Once we have the theme loaded, we can use ''setText'' to set a new text to the related Edje parts in the theme, referring them on each call by using the name of the part as the first argument.
205
206<code javascript>
207 // Continuing the previous for loop
208 layout.setText("user_name", screen_name);
209 layout.setText("screen_name", " - @"+screen_name);
210</code>
211
212To have a formatted text, we use an ''Elm.Entry'' to show the main tweet text and add this widget into the theme using the ''setContent'' layout method. This allows us to inject full widgets into the layout, besides the basic stuff. Like ''setText'', ''setContent'' also receives the name of the target part as the first argument.
213
214<code javascript>
215 // continuing the previous for loop
216 var entry = new efl.Elm.Entry(win);
217 entry.setText("elm.text", text);
218 entry.setEditable(false);
219
220 // We have to cast to the proper type, like in the previous box orientation
221 // case
222 part = layout.part("tweet_text").cast("Efl.Container");
223 part.setContent(entry);
224
225 // Some sizing details for better looking
226 layout.setHintMin(127, 96);
227 layout.setHintWeight(1.0, 1.0);
228 layout.setHintAlign(-1.0, -1.0);
229</code>
230
231Now, for the icon, we use an ''efl.Efl.Ui.Image''. It'll be set to display the downloaded icon. Like the entry above, it will be placed in a swallow part of the theme.
232
233<code javascript>
234 // continuing the for loop
235 var icon = new efl.Efl.Ui.Image(win);
236 icon.fillInside = true;
237 icon_array.push(icon);
238 user_icon = layout.part("user_icon").cast("Efl.Container");
239 user_icon.setContent(icon);
240
241 // Pack the tweet into the box.
242 item = tweet_box.packEnd(layout);
243 layout.setVisible(true);
244 } // Finished the for loop
245</code>
246
247To show the tweet image, we need to download it. We can accomplish this creating a new file stream with ''fs.createWriteStream'' and download the image to this file stream using the ''request'' module. Once the download is finished, we iterate through the list of icons widgets and tell them to display the downloaded file. We also tell the tweet box and the window to show themselves.
248
249<code javascript>
250
251 if (tweets.length > 0) {
252 var icon_filename = '/tmp/twitter_pic.jpg';
253 var file = fs.createWriteStream(icon_filename);
254 file.on('finish', function() {
255 console.log("finished loading the icon file.");
256 for (i=0; i < icon_array.length; i++) {
257 icon_array[i].setFile(icon_filename, null);
258 }
259 });
260
261 request(tweets[0].user.profile_image_url).pipe(file);
262 }
263
264 tweet_box.setVisible(true);
265
266});
267win.setSize(380, 400);
268win.setVisible(true);
269</code>
270
271You will find these and more examples in directory ''src/examples'' in the efl source code.
272
273All you need to run is:
274<code bash>
275node <example_file_name>
276</code>
277
278=== Twitter edje theme ===
279
280Theming the tweet in edj allows you to separate presentation details from the code. In a nutshell, you create themes in edje by creating "parts" inside groups, the basic elements of an edje theme. For example, you can create text parts to hold text and rectangles. For traditional widgets, you can create "swallow" parts that the application can use to show buttons, text entry, etc. For more information, check the EDJE tutorial FIXME here.
281
282For now, first create an edc - the EDJE source format - file with the following contents:
283
284<code edje>
285collections {
286 group {
287 name: "tweet";
288 parts
289 {
290 part {
291 name: "user_icon";
292 type: SWALLOW;
293 description {
294 rel1 {
295 relative: 0.0 0.0;
296 offset: 2 2;
297 }
298 rel2 {
299 relative: 0.0 0.0;
300 offset: 50 50 ;
301 }
302 }
303 }
304 part {
305 name: "user_name";
306 type: TEXT;
307 effect: SOFT_SHADOW;
308 description {
309 color: 0 190 255 255;
310 rel1 {
311 relative: 1.0 0.0;
312 to_x: "user_icon";
313 offset: 7 4;
314 }
315 rel2 {
316 relative: 1.0 0.0;
317 to_x: "user_icon";
318 offset: 120 30;
319 }
320 text {
321 text: "User Name";
322 size: 12;
323 font: "sans:style=Bold";
324 min: 1 1;
325 ellipsis: -1;
326 align: 0.0 0.0;
327 }
328 }
329 }
330 part {
331 name: "screen_name";
332 type: TEXT;
333 description {
334 rel1 {
335 relative: 1.0 0.0;
336 to: "user_name";
337 offset: 15 4;
338 }
339 rel2 {
340 relative: 1.0 1.0;
341 to: "user_name";
342 offset: 75 10;
343 }
344 text {
345 text: "scname";
346 size: 10;
347 font: "sans";
348 min: 1 1;
349 ellipsis: -1;
350 align: 0.0 0.0;
351 }
352 }
353 }
354 part {
355 name: "tweet_text";
356 type: SWALLOW;
357 description {
358 rel1 {
359 relative: 0.0 1.0;
360 to: "user_name";
361 offset: 0 0;
362 }
363 rel2 {
364 relative: 0.0 1.0;
365 to: "user_name";
366 offset: 250 80;
367 }
368 }
369 }
370 }
371 }
372}
373</code>
374
375Then compile it to the .edj format that your app will load:
376
377<code bash>
378~$ edje_cc your_edc_file.edc # Will generate your_edc_file.edj
379</code>