makall

Don't take it personally

Posts Tagged ‘EFL

EasyUI – An MVC framework for Elev8

with 2 comments

Elev8 brings to the JavaScript developers an easy way to create desktop and mobile applications. Since my last post, lots of attributes and methods were included on Elev8’s widgets, some new modules were added and others were started. It is gratifying to see how this project is growing and the interest of the community about it.

Today, I’m glad to introduce to you a complement to Elev8 that aims to make the development process even easier, its name is EasyUI.

EasyUI is a framework that uses the MVC pattern to help the developer to create functional applications quickly. To make it possible, EasyUI automatize the creation of views and uses a generic set of controllers and models that already implement the common communication between the MVC layers.

Controllers on EasyUI uses the information provided on its extension to identify which view content must be shown. All controllers provide widgets like toolbars, navigation bars and others. They are enabled by defining its content and callbacks on controller extension.

ListController, that shows a list of items, require a method that receive a index as attribute and returns an object with the content to be shown for that index. Usually an extension uses this index to get an item on model and return its content as an object. ListController can signaling the selection of items to its extension using a callback.

FormController, is a generic controller used to show widgets. These widgets could been related to fields of model by adding the ‘field’ attribute on its declaration. The position and the widgets list is given by an bi dimensional array
that represents rows and columns. FormController also handle the buttons for viewing, editing and adding a record.

Models on EasyUI provide methods to return theirs length and content, those methods are strongly used by controllers to update theirs views. And methods for CRUD are also provided on models that require it.

Another tool used by EasyUI to provide its flexibility is to use attributes as variables or functions, when the attribute is a function, the EasyUI call it to get its result. Therefore its possible to change the title just putting the logic to do that on the “function” of title attribute, instead of always update it on another part of the code.

To make the long story shorter, I will rewrite the code of The simple application for Elev8 using the EasyUI framework . Its features and facilities I will show during the code. I hope you enjoy.

The simple application for EasyUI

A simple Infinigag viewer application

Here we will create a model that uses the Infinigag JSON API to fill itself with Infinigag content and provide it to the controller. The controller will be an extension of the FormController, it receives an array of widgets to be used on its view and manage it. The Photocam widget will be used to show the images. And a toolbar is added to the view simply declaring its content and callback on controller.

On the model side, most of the code is related to the communication with Infinigag and just few of them are related to the EasyUI API. At controller, most part of code is there to declare and manage the toolbar.

As a result we have an application with almost half of the code of the original one.

/* Load the Elev8 modules to be used */
var EUI = require('eui');
var XMLHttpRequest = require('http').XMLHttpRequest;

/* Extend the base model to work with Infinigag JSON API */
InfinigagModel = EUI.Model({
    items: [],
    url: 'infinigag.com/api.json',

    /* Init method is the constructor */
    init: function() {
        this.request = new XMLHttpRequest();
        this.request.onreadystatechange = function() {

            /* Fill the model content with the info received */
            this.items = JSON.parse(this.request.responseText)['images'];

            /* Notify the controller about model changes */
            this.notifyController();
        }.bind(this);
        this.refresh();
    },

    /* Return the item at index or undefined if it doesn't exist */
    itemAtIndex: function(index) {
        var item = this.items[index];

        /* If no file defined */
        if (item && (item.file == undefined)) {

            /* Ask for image file */
            var request = new XMLHttpRequest();
            request.onreadystatechange = function(request, index) {
                this.items[index].file = request.responseText;

                /* Notify the controller about item updated at index */
                this.notifyController(index);
            }.bind(this, request, index);
            request.open("GET", item.image.big);
            request.send("");
        }
        return item;
    },

    /* Get new information from Infinigag */
    refresh: function() {
        this.request.open("GET", this.url);
        this.request.send("");
    },

    /* Return the model's length */
    length: function() { return this.items.length; }
});

/* Extend the FormController */
Infinigag = EUI.FormController({

    /* Create a model and connect it to the controller */
    model: new InfinigagModel(),
    index: 0,

    /* FormController uses a bidimensional array to posit its widgets */
    fields: [[EUI.widgets.Photocam({zoom_mode: 'auto-fit', field: 'file'})]],

    /* The content of toolbar */
    toolbarItems: [
        {label: 'Prev', icon: 'arrow_left'},
        {label: 'Next', icon: 'arrow_right'},
        {label: 'Load', icon: 'refresh'},
        {label: 'Exit', icon: 'close'}
    ],

    /* Function to be called when a toolbar item be selected */
    selectedToolbarItem: function(item) {
        switch (item.label) {
            case 'Next': this.index++; break;
            case 'Prev': this.index--; break;
            case 'Load': this.model.refresh(); break;
            case 'Exit': elm.exit(); break;
        }
        this.updateView(this.index);
    }
});

/* Start the application */
EUI.app(new Infinigag());

Written by mello

August 2, 2012 at 5:15 pm

Posted in Elev8

Tagged with , ,

Running Elev8 on Tizen Emulator

with 4 comments

On my last post I ran Elev8 on the Tizen Developer Device. This device is ARM based, so the entire build was done for ARM. Now we’ll build Elev8 and the V8 lib to run on the Tizen Emulator, that is i386 based. Only a few tricks are needed to do this task and I’ll show them here.

The Tizen Emulator is installed with Tizen SDK, follow the Tizen Emulator Documentation to learn how to create and start a virtual machine. On this same documentation you’ll learn how to open a shell on that.

By default, the EFL and Elementary are not installed on the created virtual machine, and the /etc/apt/source.list points to a machine that isn’t accessible to outsiders. So apt-get commands don’t work. To make the installation of those packages easier I added the same repository used by SBS on /etc/apt/source.list and I installed those with apt-get.

sdb shell
echo "deb http://download.tizen.org/releases/1.0/apt.sbs/i386 \
slp2-target main contrib non-free" > /etc/apt/source.list
apt-get update
apt-get install efl-dev libelm-dev
exit

Now, we’ll take similar steps to those we took on the last post. But replacing arm with ia32 on the libv8 make command and adding -A i386 on SBS command lines to set it to i386 environment.

# Get and compile v8 on SBS i386 target
git clone git://github.com/v8/v8.git
cd v8
make dependencies
sbs -A i386 -e make ia32.release library=shared

# Create libv8 deb file
mkdir -p tmp/usr/lib
cp out/ia32.release/obj.target/tools/gyp/libv8.so tmp/usr/lib/
cp -r include tmp/usr
cd tmp/
tar -czf ../libv8.tar.gz .
cd -
fakeroot alien libv8.tar.gz

# Install libv8 on SBS i386 target
sbs -A i386 -et dpkg -i libv8_1-2_all.deb

# Send libv8 to and install on Tizen Emulator
sdb push libv8_1-2_all.deb root/
sdb shell dpkg -i root/libv8_1-2_all.deb
cd ..

# Install efl-dev and elementary packages on SBS arm target
sbs -A i386 -et apt-get -y install efl-dev libelm-dev

# Get Elev8 from enlightenment svn repository and compile it
svn checkout http://svn.enlightenment.org/svn/e/trunk/PROTO/elev8
cd elev8
sbs -A i386 -e ./autogen.sh --prefix=/usr
sbs -A i386 -e make
sbs -A i386 -e make install DESTDIR=$(pwd)/tmp

# Create elev8 deb file
cd tmp
tar -czf ../elev8.tar.gz .
cd -
fakeroot alien elev8.tar.gz

#Send elev8 to and install on Tizen Emulator
sdb push elev8_1-2_all.deb root/
sdb shell dpkg -i root/elev8_1-2_all.deb
cd ..

# Running a example
sdb shell elev8 /usr/share/elev8/data/javascript/anim.js

That’s all folks!

Written by mello

July 3, 2012 at 12:56 pm

Posted in Elev8, Tizen

Tagged with , , ,

Running Elev8, a JavaScript bindings for EFL, on Tizen Developer Device

with 4 comments

Elev8 is the next gen JavaScript runtime for EFL. It is based on Google’s V8 engine (hence the name), and includes a module that allows creating Elementary apps in a declarative way, greatly reducing the amount of code necessary to build the UI for your application. – acidx

Here we’ll use Tizen’s SBS (Scratchbox Build System) to compile libv8 and elev8. To make the process of installing and uninstalling packages to the device easier, we’ll use alien to convert a tarball to a debian package.

Pre-requisites

  1. Scratchbox Build System installed and its targets created:
  2. Alien (http://joeyh.name/code/alien/):
    • # apt-get install alien

The Recipe

Git clone V8 as in https://developers.google.com/v8/build

Compile v8 on SBS arm target

cd v8
make dependencies
sbs -e make arm.release library=shared

Create libv8 deb file

mkdir -p tmp/usr/lib
cp out/arm.release/obj.target/tools/gyp/libv8.so tmp/usr/lib/
cp -r include tmp/usr
cd tmp/
tar -czf ../libv8.tar.gz .
cd -
fakeroot alien libv8.tar.gz

Install libv8 on SBS arm target

sbs -et dpkg -i libv8_1-2_all.deb

Send libv8 to and install it on Tizen device

sdb push libv8_1-2_all.deb root/
sdb shell dpkg -i root/libv8_1-2_all.deb
cd ..

Install efl-dev and elementary packages on SBS arm target

sbs -et apt-get -y install efl-dev libelm-dev

Get Elev8 from enlightenment svn repository:

svn checkout http://svn.enlightenment.org/svn/e/trunk/PROTO/elev8
cd elev8
sbs -e ./autogen.sh --prefix=/usr
sbs -e make
sbs -e make install DESTDIR=$(pwd)/tmp

Create elev8 deb file

cd tmp
tar -czf ../elev8.tar.gz .
cd -
fakeroot alien elev8.tar.gz

Send elev8 to and install it on Tizen device

sdb push elev8_1-2_all.deb root/
sdb shell dpkg -i root/elev8_1-2_all.deb
cd ..

Running

sdb shell elev8 /usr/share/elev8/data/javascript/anim.js

Elev8 anim.js example

Under the /usr/shar/elev8/data/javascript folder are a lot of examples that you can use as reference. As Elev8 was first made to run on the desktop, some examples may look weird on the device for now, but they give you some idea of how easy writing EFL JavaScripts applications for Tizen will be.

And of course you can run you own code, to do it just send the file to the device and call it from sdb.

sdb push infinigag.js /root/
sdb shell elev8 /root/infinigag.js

Elev8 infinigag.js example

To uninstall

sdb shell apt-get remove elev8 libv8

Written by mello

June 20, 2012 at 6:28 pm

Posted in Elev8, Tizen

Tagged with , , , ,

Tizen SDK 1.0 on 64-bits Fed.. I mean ArchLinux

with one comment

Recently, motivated by the Ancient Spirits of Evil, I started a quest to install the Tizen SDK on an ArchLinux x64 machine, a.k.a. my work machine.

Tizen Web Simulator

…”Why are you talking so much about x64?”
Well, the Tizen group, before this post being published, has just released packages for Windows (urgh!) and Ubuntu, both on 32-bits.

So to do this I had some choices:

  1. Install Ubuntu 32-bits on my machine;
  2. Install a virtual machine with Ubuntu 32-bits
  3. Install a chrooted 32-bits enviroment
  4. Look for another job; or
  5. Search on the web for someone who had made it and go through that.

With the fifth option in mind, I found an excelent post by Tomi Ollila, who solved this same problem, but on Fedora. I was almost there :(

The great thing is, ArchLinux is great. Not just by itself, but with its community.

Following the instructions from Tomi post, I realized that just a few packages are missing on an usual ArchLinux instalation. So, to keep the Tomi instructions reliable on ArchLinux, I just had to install debootstrap from AUR, it replaces the step 3 of Tomi’s post.

wget http://aur.archlinux.org/packages/de/debootstrap/debootstrap.tar.gz
tar -xvf debootstrap.tar.gz
cd debootstrap
makepkg
sudo pacman -U debootstrap-*-any.pkg.tar.xz
cd -

Between steps 14 and 15, I use the command below to prevent PERL messages about locale:

locale-get en_US.UTF-8

Continue with Tomi instructions and be happy.

Starting Tizen IDE

Tizen IDE

Well, that’s it. It’s possible to have the Tizen SDK running on your ArchLinux x64 machine. And now, to start your Tizen development, you can use Iscaro’s blog as a starter guide.

Tizen Emulator

Good night and good luck.

Written by mello

June 11, 2012 at 4:51 pm

Posted in Arch Linux, Tizen

Tagged with , ,

A simple application for Elev8

with 3 comments

I’m still quite uncertain about the best way to post an entire application here, so I’ll put a brief introduction and well commented code (from my point of view, of course). Should you have any doubts at the end of this post, please ask it in the comments and I’ll try to answer it. Thanks.

The application

This application will get some images from the web and will show them. Below are shown some expected behaviors:

  • When it starts, a local image will be shown.
  • When Load button be pressed, the application will request a list of images from infinigag.com and will show the first image from the list.
  • The Next and Previous buttons navigate through the image list and are enabled according to it.
  • The Exit button close the application.

The preview

The code

/* Load the Elev8 modules to be used */
var elm = require('elm');
var XMLHttpRequest = require('http').XMLHttpRequest;

/* Create a request object */
var list_request = new XMLHttpRequest();

/* Maintain the list of images and the index of image being shown */
var data = null;

/* When the list request is finished, this function will be called */
list_request.onreadystatechange = function() {

    /* Create a new list of data */
    data = {index: 0, pics: []};

    /* Since the JSON module is not ready, I'll use regex
     * to extract the image name from received JSON file */
    var reg = new RegExp('"big":"([^"]*)"', 'g');

    /* For all images referenced on JSON file received */
    while ((pic = reg.exec(this.responseText))) {

        /* Fill data with images reference */
        data.pics.push(pic[1].replace(/\\/g, ''));
    }

    /* Enable load button */
    toolbar.load.enabled = true;

    /* Show a image from the list */
    show(0);
}

/* According to index, show the prev, next
 * or current image from the list */
function show(index) {

    /* Returns if there is no data */
    if (!data) return;

    /* Update the image index */
    data.index += index;

    /* Enable/Disable the Next and Previous
     * buttons according to the list */
    toolbar.prev.enabled = (data.index > 0);
    toolbar.next.enabled = (data.index < (data.pics.length - 1));

    /* Create a request object */
    var image_request = new XMLHttpRequest();

    /* When a request of image finishes, this function will be called */
    image_request.onreadystatechange = function() {

        /* Update the image with the image received */
        picture.file = image_request.responseText;
    }

    /* Make a image request according to the selected index */
    image_request.open('GET', data.pics[data.index]);
    image_request.send();
}

/*                     About declarations
 *
 * - Each method elm.Method() receives as parameter a object with
 *   modifiers and it returns a full declaration of the GUI element.
 * - This declaration can be used to realise a GUI element or to
 *   attach it to another declaration.
 * - The relationship between widgets and containers are given
 *   by nesting widgets on container elements attribute.
 */

/* As we'll not use window declaration in another place, it will
 * be passed directly to the 'realise' method. */
var win = elm.realise(elm.Window({
    /* On declaration of a container or widget, attributes
     * are defined as in any other javascript object */
    title: 'Infinigag',
    width: 320,
    height: 480,

    /* elm containers objects have the 'elements' attribute
     * that is used to attach widgets on it */
    elements: {
        bg: elm.Background({
            weight: {x: 1.0, y: 1.0},
            align: {x: -1.0, y: -1.0},
            resize: true,
        }),

        /* Containers can be attached to others containers */
        box: elm.Box({
            weight : {x: 1.0, y: 1.0},
            resize : true,
            elements: {
                picture: elm.Photocam({
                    weight : {x: 1.0, y: 1.0},
                    align : {x: -1.0, y: -1.0},
                    zoom_mode: 'auto-fill',
                    file : elm.datadir + "data/images/sky_01.jpg",

                    /* Callbacks are defined as any other attribute */
                    on_click: function() {

                        /* Change zoom_mode when picture is clicked */
                        this.zoom_mode = (this.zoom_mode == 'auto-fill') ?
                                          'auto-fit' : 'auto-fill';
                    }
                }),
                toolbar: elm.Box({
                    horizontal: true,
                    elements: {
                        prev: elm.Button({
                            label: 'Prev',
                            enabled: false,
                            on_click: function() {

                                /* Show previous picture */
                                show(-1);
                            }
                        }),
                        next: elm.Button({
                            label: 'Next',
                            enabled: false,
                            on_click: function() {

                                /* Show next picture */
                                show(1);
                            }
                        }),
                        load: elm.Button({
                            label: 'Load',
                            on_click: function() {

                                /* Request the list of images */
                                list_request.open('GET', "infinigag.com/api.json");
                                list_request.send();

                                /* Disable load button */
                                this.enabled = false;
                            }
                        }),
                        exit: elm.Button({
                            label: 'Exit',
                            on_click: function() {

                                /* Exit from application */
                                elm.exit();
                            }
                        })
                    }
                })
            }
        })
    }
}));

/* Just alias to the realised widgets */
var toolbar = win.elements.box.elements.toolbar.elements;
var picture = win.elements.box.elements.picture;

Written by mello

June 4, 2012 at 7:59 pm

Posted in Elev8

Tagged with ,

Running Elev8 – a JavaScript bindings for EFL

with 8 comments

JavaScript is an ubiquitous language with a large number of developers. Thinking of bringing EFL to the JavaScript ecosystem, a JavaScript bindings framework named Elev8 has been made. It’s still under development but there are a lot of widgets and modules that are ready for use.

The key feature of Elev8 is the declarative way to build a graphical interface. The declarations of widgets are like a recipe. Those declarations are passed to methods that realize the declared widgets and return a reference to them.

Under the hood, Elev8 uses the Google V8 JavaScript Engine to run its scripts. A module named ‘elm’ does all the GUI stuff and modules like ‘timer’ and ‘http’ bring in the functionalities of traditional JavaScript modules.

Elev8 is new on Enlightenment and it is on PROTO repository, this means that it isn’t installed by default. So it should be installed by hand the old fashioned way, autogen, make and make install. As it’s hard to create a tutorial to cover all Linux distros in the universe and its package systems, I’ll show here how to install the needed libraries on Ubuntu and ArchLinux.

Installing EFL and V8 on ArchLinux

sudo pacman -S elementary-svn v8

Installing EFL and V8 on Ubuntu

The EFL is outdated on Ubuntu, so here we need to do all the work without apt-get.

mkdir efl
cd efl

To avoid downloading all of Enlightenment, we’ll use a given script to download just the needed modules.

svn export -r71465 http://svn.enlightenment.org/svn/e/trunk/SCRIPTS/compile_efl.sh

There are a few changes to do on this script so everything works well. We’ll use sed to do it.

# use the actual directory to download sources
sed -i "s%^SRCDIR=.*$%SRCDIR=\"${PWD}\"%" compile_efl.sh

# remove the enlightenment from compilation
sed -i 's/\(PKGS=".*\) e\("\)/\1\2/' compile_efl.sh

This script identifies which distro it is running and downloads all dependencies of EFL. Then it downloads, compiles and installs all EFL modules. The EFL modules will be installed on /opt/e17-71465 and a script named e17-env.sh will be created. This created script points the environment variables to the EFL installed.

The compile_efl.sh script, should be ran as root. So, please, review the script to make sure your system will be safe.

sudo ./compile_efl.sh -r71465
source /opt/e17-env.sh
cd -

After that we’ll just install V8 on a debian way.

sudo apt-get install libv8-dev

Elev8

Downloading

svn checkout http://svn.enlightenment.org/svn/e/trunk/PROTO/elev8

Compile and install it

cd elev8
./autogen.sh
make
sudo make install
cd -

Running

By default, Elev8 is installed on /usr/local, so its scripts are in /usr/local/share/elev8/data/javascript. You can run some of those to test it.

elev8 /usr/local/share/elev8/data/javascript/anim.js

That’s all

Below are some screenshots and on the next post I’ll show a simple application using the ‘elm’ and ‘http’ modules.

Written by mello

May 29, 2012 at 6:41 pm

Posted in Elev8

Tagged with , , ,

%d bloggers like this: