makall

Don't take it personally

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;

Advertisements

Written by mello

June 4, 2012 at 7:59 pm

Posted in Elev8

Tagged with ,

3 Responses

Subscribe to comments with RSS.

  1. Great example. Please consider writing an example with multiple source files.

    TAsn

    June 7, 2012 at 6:01 am

    • TAsn, we are working on Elev8 to improve the file import system (requires) and it will demand some examples. When they are ready I will put some here. Thanks.

      mello

      June 11, 2012 at 5:04 pm

  2. […] 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 […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: