Don't take it personally

Archive for August 2012

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: '',

    /* 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 */

    /* 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 */
            }.bind(this, request, index);
  "GET", item.image.big);
        return item;

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

    /* 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;

/* Start the application */ Infinigag());

Written by mello

August 2, 2012 at 5:15 pm

Posted in Elev8

Tagged with , ,

%d bloggers like this: