205 lines
6.0 KiB
Plaintext
205 lines
6.0 KiB
Plaintext
~~Title: Javascript Tutorial~~
|
||
==== Javascript Tutorial [DRAFT]====
|
||
|
||
This Javascript tutorial describe the basics to compiles and run a Javascript example using Elementary in Node.Js
|
||
|
||
=== Prerequisite ===
|
||
|
||
Before you start you will want about how compile a EFL library
|
||
|
||
* Installed from source: [[docs/efl/start|Get started with EFL]].
|
||
|
||
=== Dependencies ===
|
||
|
||
You will need additional dependencies to Javascript Bindings:
|
||
|
||
* [[https://nodejs.org|node]] (4.2 or better)
|
||
|
||
=== Compilation ===
|
||
|
||
== Efl ==
|
||
To configure efl sources with bindings to use in nodejs add ''//––with-js=nodejs//'' in configure flags to generate node files
|
||
|
||
<code bash>
|
||
./configure --with-js=nodejs #in efl source path
|
||
</code>
|
||
|
||
and compile normally
|
||
|
||
<code bash>
|
||
make
|
||
make install
|
||
</code>
|
||
|
||
== Elementary ==
|
||
|
||
In Elementary all you need is run ''./autotools'' and compile/install
|
||
|
||
<code bash>
|
||
./autotools #in elementary source path
|
||
make
|
||
make install
|
||
</code>
|
||
|
||
=== Node.Js ===
|
||
|
||
After everything is compiled and installed, it is time to use the modules in node.js.
|
||
|
||
The default node.js files installed by efl/elm stay in prefix /lib path (if you don't define a prefix path is ''/usr/local/lib'')
|
||
|
||
Node.js needs to know where find efl/elm node modules, to that export NODE_PATH with the file path to modules.
|
||
|
||
<code bash>
|
||
export NODE_PATH=/usr/local/lib #if necessary replace with your prefix path
|
||
</code>
|
||
|
||
Now you are ready to use the modules in node.js, use ''require'' to import the modules
|
||
|
||
<code javascript>
|
||
~$ node
|
||
> efl = require("efl")
|
||
> elm = require("elm")
|
||
</code>
|
||
|
||
====Button Example====
|
||
|
||
<note tip>
|
||
You find this example in ''elementary_source/src/examples/button_example_00.js''
|
||
</note>
|
||
|
||
Import Elementary module
|
||
<code javascript>
|
||
elm = require('elm');
|
||
</code>
|
||
|
||
Create a new Window with //auto hide// (the window is automatically hidden when close is pressed):
|
||
<code javascript>
|
||
win = new elm.Elm.WinStandard(null);
|
||
win.setTitle("Hello, World!");
|
||
win.setAutohide(true);
|
||
</code>
|
||
|
||
Create a new Button (passed window has parent) and set new label text to button:
|
||
<code javascript>
|
||
btn = new elm.Elm.Button(win);
|
||
btn.setText(null, "Good-Bye, World!");
|
||
</code>
|
||
|
||
Set button basic size and positions:
|
||
<code javascript>
|
||
btn.setSize(120, 30);
|
||
btn.setPosition(60, 15);
|
||
btn.setSizeHintWeight(1.0, 1.0);
|
||
btn.setSizeHintAlign(1.0, 1.0);
|
||
</code>
|
||
|
||
The method ''on'' is used to register callback on events, in this case we need catch the ''clicked'' event, we register a function (second argument) to print a log message when button ''btn'' is clicked
|
||
<code javascript>
|
||
btn.on('clicked', function () { console.log('clicked'); } );
|
||
</code>
|
||
|
||
To finish, is necessary show all elements, for that use ''setVisible(true)''
|
||
<code javascript>
|
||
btn.setVisible(true);
|
||
win.setSize(240, 60);
|
||
win.setVisible(true);
|
||
</code>
|
||
|
||
====Twitter Example====
|
||
|
||
<note tip>
|
||
You find complete twitter example in ''elementary_source/src/examples/twitter_example_01.js''
|
||
</note>
|
||
|
||
This is a more complex example, with edje theme and some external requirements. We need install ''request'' and ''twitter'' module, for this use the ''npm'' (node.js package manager) it downloads and installs all necessary to use this modules.
|
||
<code bash>
|
||
npm install request
|
||
npm install twitter
|
||
</code>
|
||
<note tip>''npm'' is installed by default with Node.js</note>
|
||
|
||
Import all modules and initialize necessary variables to connect in twitter API
|
||
<code javascript>
|
||
elm = require('elm');
|
||
util = require('util');
|
||
fs = require('fs');
|
||
request = require('request'); //need "npm install request"
|
||
Twitter = require('twitter'); //need "npm install twitter"
|
||
|
||
var twit = new Twitter({
|
||
consumer_key: 'ZbSM93w5Sp2cyZ2SG0XuCvoHV',
|
||
consumer_secret: 'g8N7EEQLpdKPnAsS9hWuQV29FYjBkhH62jhZzXyYymDw87DKye',
|
||
access_token_key: '222611263-pPhKKjYh59uuNLP0b86sP7aAtLhdecjVQaEsCDCv',
|
||
access_token_secret: 'l7ccNKXTVv6cymfSD1gQH61tmfixkdna2QmOjPtpVxSHD'
|
||
});
|
||
|
||
user_acount = 'EnlightenmentKo'
|
||
icon_array = new Array();
|
||
</code>
|
||
|
||
Create a new Window (it has previous example):
|
||
<code javascript>
|
||
win = new elm.Elm.WinStandard(null);
|
||
win.setTitle("Twitter App");
|
||
win.setAutohide(true);
|
||
</code>
|
||
|
||
Create and show a //box// and //list// elementary widget containers
|
||
<code javascript>
|
||
box = new elm.Elm.Box(win);
|
||
box.setSizeHintWeight(1.0, 1.0);
|
||
win.resizeObjectAdd(box);
|
||
box.setVisible(true);
|
||
|
||
list = new elm.Elm.List(win);
|
||
list.setSizeHintWeight(1.0, 1.0);
|
||
list.setSizeHintAlign(-1.0, -1.0);
|
||
box.packEnd(list);
|
||
list.setVisible(true);
|
||
</code>
|
||
|
||
Getting twitter user timeline asynchronous, using callback
|
||
<code javascript>
|
||
twit.get('statuses/user_timeline', {screen_name: user_acount, count:10},
|
||
function(error, tweets, response) {
|
||
|
||
</code>
|
||
|
||
Make a new file stream with ''fs.createWriteStream'', download the image to file using ''request'' module and register the ''_img_load'' function to called when image download has finished
|
||
<code javascript>
|
||
file = fs.createWriteStream('/tmp/twitter_pic.jpg');
|
||
file.on('finish', _img_load);
|
||
if (tweets.length > 0) {
|
||
request(tweets[0].user.profile_image_url).pipe(file);
|
||
}
|
||
</code>
|
||
|
||
For each tweet we make a new Elm.Layout and set a theme using ''setfile'', ''setText'' is used to define a new text to Edje elements in theme. To have a formatted text we use Elm.Entry to main tweet text and add this widget into theme using ''setContent'' layout method
|
||
<code javascript>
|
||
for(i=0; i < tweets.length; i++){
|
||
var layout = new elm.Elm.Layout(win);
|
||
layout.setFile("twitter_example_01.edj", "tweet");
|
||
layout.setText("user_name", screen_name);
|
||
layout.setText("screen_name", " - @"+screen_name);
|
||
|
||
var entry = new elm.Elm.Entry(win);
|
||
entry.setText("elm.text", text);
|
||
console.log(text);
|
||
layout.contentSet("tweet_text", entry);
|
||
</code>
|
||
|
||
Add a layout widget to Elm.List and call ''list.go()'' to start displaying the list properly.
|
||
<code javascript>
|
||
item = list.itemAppend("", layout, null, null, null);
|
||
}
|
||
list.go();
|
||
};
|
||
win.setVisible(true);
|
||
</code>
|
||
|
||
You will find this and more examples in directory ''src/examples'' in efl and elementary source code.
|
||
|
||
All you need to run is:
|
||
<code bash>
|
||
node <example_file_name>
|
||
</code> |