Sencha Inc. | HTML5 Apps

Blog

Building a Tizen App With Sencha Touch

January 15, 2014 | Gautam Agrawal

Introduction

In Sencha Touch 2.3.1, we added support for the Tizen platform, which is a “Web-based OS” and allows developers to use HTML5 technologies to write applications. The web browser bundled with Tizen is one of the most standards-compliant of the current crop of mobile browsers. In this article, I will show you how to get started with building a Tizen app using Sencha Touch.

A Simple Tizen App — TizenTunes

I decided to build a simple music player app (TizenTunes) using iTunes RSS feeds. To start with, I needed the Sencha Touch 2.3.1 framework, a 4.x version of Sencha Cmd to build and deploy my app, and any standard code editor. I started following the three part tutorial by Lee Boonstra, “Getting Started with Sencha Touch 2”, which gives you detailed instructions on building a weather utility app.

In my app, I needed three simple views: a main view (the container with the app title and navigation bar), a list (for displaying the top 100 music albums from iTunes RSS), and a detail panel (with the song preview image and a player to play the selected song). Besides that, I needed a model for the iTunes RSS feed, a store for the data with a feed proxy, and a controller to select songs from the list and play them in the detail panel.

tizentunes

Next, I needed to theme this app for the Tizen platform. Sencha Touch 2.3.1 provides out-of the-box Tizen themes. All I had to do was modify the app.json file to configure the appropriate theme resources and rebuild.

The default Sencha Touch theme configuration in the app.json file looks like this:

 
"css": [{
        "path": "resources/css/sencha-touch.css",
        "platform": [ "phone", "tablet", "desktop" ],
        "theme": "Default",
        "update": "delta"
}]
 

which was changed to:

 
"css": [{
        "path": "resources/css/tizen.css",
        "platform": [ "tizen" ],
        "theme": "Tizen",
        "update": "delta"
}]
 

The results of rebuilding the app with the new configurations are:

tizentunes

Next, since Sencha Touch offers both dark and a light variations of the Tizen theme (dark being the default), I wanted to switch to the lighter theme for my app. Switching the theme to the lighter shade was just a matter of adding/changing another config in my app.js file:

 
Ext.application({
    views: [
        'MainView', 'DetailPanel', 'SongList'
    ],
    controllers: [
        'Songs'
    ],
    name: 'TizenTunes',
    themeVariation: 'light',
    launch: function() {
        Ext.create('TizenTunes.view.MainView', {fullscreen: true});
    }
});
 

This change could also be accomplished by using the following code inside the launch function, which is a programmatic way of switching the theme (in case you need to do it dynamically).

 
TizenTunes.app.setThemeVariation ('light');
 
tizentunes

Running a Tizen App on the Emulator

In order to test my app, I wanted use the Web Emulator that comes with the Tizen SDK available at the Tizen Developers site. Using the Install Manager to install the Tizen IDE posed some challenges on my Mac OSX. For more information, I recommend using this YouTube video, and a discussion on this thread at the Tizen developers forum.

Once I was past the initial hurdle of getting the Tizen IDE running, I had access to the Tizen Web Simulator, and I just pointed my TizenTunes app to start testing.

tizentunes tizentunes

We hope you find this example useful in building your own Tizen apps. Try it out and share our feedback with us on the Sencha forum.

There are 2 responses. Add yours.

Tom Coulton

11 months ago

We translated this blog article into Japanese: http://www.xenophy.com/sencha-blog/10077

Also, this is the Sencha Japan User Group page: http://www.meetup.com/Japan-Sencha-User-Group/

Odb

11 months ago

Tizen compliance for html 5 us great but performance is garbage

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.