Presenting EasyUI 2012-09-21

Introduction

I’ve been working at ProFUSION on a project called EasyUI for the past few months. This library is based on Google’s V8 JavaScript engine and the Enlightenment Foundation Libraries and aims to diminish the hurdle in writing native applications for the forthcoming Tizen platform.

EFL itself – specially its UI toolkit, Elementary – follows a pretty traditional approach to creating applications: the library user must know how to join all bits and pieces, which often leads to common code that is written and rewritten in each new application.

By observing common patterns and providing an uniform MVC interface, EasyUI parts from this traditional approach and offers a new way to create applications using EFL.

Before talking about code, let me show a video (best viewed in HD) of some sample EasyUI applications being executed:

Brief overview of an EasyUI app

An app begins with a simple call to EUI.app(), passing at least one parameter: the main view-controller. The other parameter is an optional object that contains application settings, such as the theme or window titles. EasyUI applications are contained inside one window only, since the main focus are apps for mobile devices with stacked lists and the eventual popup that appears on top of the content.

The code below shows a typical controller-view; explanation will follow.

MainController = EUI.ListController({
    title: 'My Favorite Fruits',
    model: new ArrayModel(['Pear', 'Banana', 'Uvaia']),
    itemAtIndex: function(index) {
            return {
                    text: this.model.itemAtIndex(index)
            };
    },
    selectedItemAtIndex: function(index) {
            var fruit = this.model.itemAtIndex(index);
            this.pushController(new FruitController(fruit));
    },
    navigationBarItems: { right: 'Add' },
    selectedNavigationBarItem: function(item) {
            if (item === 'Add')
                    this.pushController(new AddFruitController);
    }
});

Lots of things happens with the declaration of MainController. Of note:

function() {
    if (this.model.length() == 1)
            return "My Favorite Fruit";
    return "My Favourite Fruits";
}

Behind the scenes, the framework will initialize the EFL, create the window and required widgets, listen to callbacks – and call the application code in appropriate moments.

The next post in this series will show the anatomy of a Reddit client.

Show me the code

We’re just working on some licensing issues right now. This should be released as an open source project. As soon as this is cleared up, EasyUI should hit Enlightenment’s SVN repository.

If you liked this post, consider getting me a coffee!