From Symbian Developer Community

Web Runtime consists of several components that allow installation and execution of web apps (applications). Web apps are written in HTML/JavaScript/CSS, with JavaScript-based access to some device APIs. They execute inside the web browser and are very similar to the web/AJAX applications we see on the web.

The really cool bit is that web apps appear as native applications on Symbian phones during installation and at runtime (they're intuitive to install, find and use). On Symbian devices (starting with S60 5th Edition phones such as the Nokia N97), web apps can also have a "home screen" representation - a mini view of the web app with active content can be shown on the phone's home screen. With an increasing number of easy-to-use APIs, web apps can access location services, messaging, address book, media files etc. making for an ideal platform for rapid development.

Web app development is supported by an excellent and growing set of plugins for major development environments:

• Symbian's open source, Eclipse-based Symbian Web Development Tools (WRT Tools)
• Aptana Studio
• Microsoft Visual Studio
• Adobe DreamWeaver

This quick start guide is targetted at developers already familiar with HTML, JavaScript and CSS, and explains how to use the Symbian Web Development Tools (WRT Tools). To learn about Web technologies first, and to find links to JavaScript, HTML and CSS tutorials, go to the web technologies technical overview article.

Contents 1 What is Web Runtime? 1.1 Standards support 1.2 Availability 2 Setting up the development environment 3 Familiarising yourself with WrtTools 4 Hello World 5 Advanced Hello World 6 Debugging 7 Next steps

What is Web Runtime?

Web Runtime is the WebKit web browser along with a set of components that allow widget installation, app management and access to device features via a JavaScript API. Widget development using Web Runtime allows you to package up web pages, install them on the phone and run them as a standalone application using the underlying WebKit engine to render the pages.

Standards support

WebKit - and consequently Web Runtime 1.1 - currently offers support for:

• HTML 4.01
• XHTML mobile profile
• CSS 2.1
• JavaScript 1.5

Availability

Web Runtime 1.1 is available on Symbian^1 devices (S60 5th Edition) such as the Nokia N97. Web Runtime 1.0 is available on following phones:

1. All S60 3rd Edition FP2 and later phones
2. Samsung S60 3rd Edition FP1
3. Nokia S60 3rd Edition FP1 phones with latest firmware update

More information about Web Runtime versions can be found here.

Setting up the development environment

This quick start guide uses the free, open source Symbian Web Development Tools (WRT Tools) development environment. First, go to the [1] to download and install the latest version of the IDE. The version ending with -181 is the current recommended version. Choose the zip file appropriate for your host. For debugging, WrtTools uses Google Chrome browser which you can download from here if you don't already have it installed. You also need to have at least a Java5 Runtime - available at here

Familiarising yourself with WrtTools

Symbian Web Development Tools (WRT Tools) is Eclipse-based and closely resembles other Eclipse based tools.

To edit a file, it is enough to double click it in the WRT Navigator. The preview pane on the right-hand side provides a fully interactive preview of the widget. In the bottom of the window, you can see console output, search results, list of errors and many other useful panes.

The image shows the "WebRuntime" perspective. Symbian Web Development Tools (WRT Tools) inherits the concept of perspectives from Eclipse IDE. Perspectives essentially allow users to have several arrangements of windows depending on the current task. Typically, we use the "WebRuntime" as a development perspective - a separate Debug perspective is more appropriate for debugging when more information needs to fit in the viewing area of the screen. Perspectives can be selected in the top-right corner of the window.

Hello World

Let's now create a simple project with WrtTools. On the File menu select New->Web Runtime Application.

Follow through with the Wizard as follows.

Wizard step 1

Wizard step 2

Wizard step 3

Note the project type options in step two above. Normally, you will be choosing between "Basic Widget project" and "Hello Application Project with WRTKit". The difference between the two is that the former leaves it to the developer to choose how they are building the user interface - manually via HTML/CSS/JavaScript or by including third party libraries (such as Guarana or YUI). The latter option includes WRTKit, a small and fairly simple JavaScript library of user interface components (ListView, Label, TextField etc.) that can be used to build your application.

For now, let's follow through with the basic project as above. In the final step, click Finish to complete the wizard.

Once project is created, double click on index.html in the Project view to open the file. Let's modify the code as follows:

 
    <body onLoad="javascript:init();">
        Your name:
        <input id="namebox"><br>
        <input type=submit value="Say hello" 
            onclick="document.getElementById('output').innerHTML =
                'Hello ' + document.getElementById('namebox').value;">
        <div id="output">
        </div>
    </body>
 

To view our widget in action, we can now switch to preview tab.

To run the widget on a phone, we first need to produce installable widget archive file. WrtTools provides an option for automatic package creation as below.

This produces the widget archive (extension .wgz), which is in fact a zip file containing project files. The WGZ file can now be transferred to the phone and installed. See How to get an app to the phone if you need help with transferring the file and its installation.

Advanced Hello World

The previous example shows just how easy it is to create basic widgets. The WrtTools IDE deals with meta data (info.plist) and packaging and we can create a widget by just adding some static html to index.html.

However, any good widget will require more programmatic control. Using JavaScript we can produce proper applications with natively integrated menus, AJAX server interactions and access to device features such as GPS, contacts etc.

To simplify development of the user interface we'll use WRTKit. As before, we initiate the new project wizard by selecting New->Web Runtime Application on the File menu.

Follow through with the wizard as follows.

Wizard step 1

Wizard step 2

Wizard step 3

Note that we have now selected Hello Application Project with WRTKit.

Finally, click Finish.

The project is now created and we can immediately see our demo widget in action in the preview pane. Preview options such as screen size and orientation can be set in the "Settings" dialog.

The code for the widget is in basic.js (unless you have selected a different name in the wizard). Thanks to the following code in index.html the init() function will be first called when the widget is loaded.

 
    <body onload="init()">
 

Let's examine the initialisation code:

 
    // Set tab-navigation mode and show softkeys, but
    // only if we are in the WRT environment.
    if ( window.widget )
    {
        // Create the "About" menu.
        var aboutMenuItem = new MenuItem( "About", MENU_ITEM_ABOUT );
        aboutMenuItem.onSelect = menuItemSelected;
        menu.append( aboutMenuItem );
        widget.setNavigationEnabled( false );
        menu.showSoftkeys();
    }
 
    // create UI manager
    uiManager = new UIManager();
 

The first section creates the About menu item and sets up navigation and menu modes. What is more interesting is the if statement surrounding this code, which essentially checks if the widget is running in an environment that supports WRT extensions such as on device, emulator or in preview pane. However, if the code is running in a different environment (such as a regular web browser), the guarded code would cause an error, which is a common source of problems when debugging with Firebug and Firefox. So, in order to allow debugging, always guard WRT specific code with if ( window.widget ) { ... }

The final step initialises the UIManager class used for WRTKit control management. Further, the code initialises GUI components. This should be familiar ground and WRTKit is extremely simple and intuitive.

 
    // create main view
    mainView = new ListView( null, "Hello World" );
 
    //Create about view
    aboutView = new ListView( null, "Hello World" );
 
    // add a text field to the view
    nameField = new TextField( null, "Enter your name" );
    mainView.addControl( nameField );
 
    // add a button to the view
    helloButton = new FormButton( null, "Say Hello!" );
    helloButton.addEventListener( "ActionPerformed", helloButtonClicked );
    mainView.addControl( helloButton );
 
    // About label control
    aboutLabel = new Label();
    aboutView.addControl( aboutLabel );
 
    function helloButtonClicked()
    {
        var name = helloButton.getText();
        // Now you can do something with the text the user entered.
    }
 

Finally, we set the current view using the UIManager.

 
    // display the main view
    uiManager.setView( mainView );
 

Debugging

The WrtTools can also be used for debugging widget projects. In order for this to work, you will need to have latest version of Google Chrome installed.

Starting a debug session for a widget is quite simple

1. Right click on the index.html file in WRT Navigator window
2. Select Debug pop-up menu option

Next steps

Now you've got the right setup you can start experimenting. Of course, we've just scratched the surface here. For more information, here are the best WRT resources:

• Web Technologies category on developer.symbian.org
• Web Developers Library on Forum Nokia
• Web Runtime Articles on Forum Nokia

Comments

Pp7 said…

Berserkk said…

Sign in to comment…