Meet the Tizen Web UI Framework

Gabor Paller's picture

In the previous post we have seen a dead simple Tizen application. In this iteration we go one step further. We will have the same application but this time the application will be adapted to the Tizen Web UI framework. This framework provides access to native widgets. These widgets also comply with jQuery Mobile so our application will be transformed into a jQuery application.

The example project is attached to this post. You have to be logged in to Sfonge website to access it.

The first thing that you notice is the size of the project. The IDE copies the Tizen Web UI framework files together with jQuery into every such project. While this is mildly annoying when downloading the example project, these stock files don't end up in the actual mobile application package files that are loaded into the device. You can check it yourself: find the words1tw.wgt file in the project's root directory, make a copy of it, rename the copy as ZIP and open it as a ZIP file. You will see that only the files belonging to our application are there.

This time the project was created for you so you can just import it into Tizen IDE as an Eclipse project. If you create such a project, however, make sure that you select the Tizen Web UI Framework/Single-Page Application template. This will import all the necessary platform libraries into the project. Tizen Web UI Framework applications have a particular page format which looks like this:

    <div data-role="page">
        <div data-role="header" data-position="fixed">
            ... header content ...
        </div><!-- /header -->

        <div data-role="content">
            ... main content ...

        <div data-role="footer" data-position="fixed">
            .. footer content ...
        </div><!-- /footer -->
    </div><!-- /page -->

Web UI widgets are inserted with special <div> tags. This is a button:

    <div data-role="button" data-inline="true" id="nextWordButton">Next word</div>

Handler is attached in js/main.js, jQuery style:

   $( "#nextWordButton" ).bind( "click", function(event, ui) {
        ... event handler code ...

As the entire framework is based on jQuery, I could make the DOM manipulation more elegant compared to the pure JavaScript variant.

   $( "#word" ).text( entry.word );

As always, you can try the application both in Simulator (which is Chrome application based on the Ripple mobile simulator) or in the Tizen emulator. It must be said that the emulator is a painful experience. It is very slow and given the large amount of JavaScript code in the Tizen Web UI Framework and jQuery, it takes more than 15 minutes (!) for this primitive application to launch. The Simulator is much faster and is completely usable but there is a trick here too: in order to access the JavaScript console and the developer tools in Chrome, untick the "Launch the Simulator in Google Chrome application mode" checkbox under Preferences/Tizen SDK/Web/Simulator.


Attached file: 
Taxonomy upgrade extras: