Geekly Articles each Day
📜 ⬆️ ⬇️

Symbian Web Runtime: easy mobile application development

This post participates in the contest " Smart phones for smart posts ".

Now a lot of mobile applications are written using HTML and Javascript. It is understandable - such applications are easier to write, easier to transfer from one mobile platform to another, no need to learn Java, Objective C and other languages. However, most mobile operating systems still require some kind of wrapper. In the simplest case, you need to write a small application that will be a window of the built-in web browser maximized to the maximum. To support special features (for example, working with contacts or files), you will need to either add it to support the necessary functions, or use one of the frameworks for writing mobile applications . In any case, you will need special tools, be it a compiler or the same framework.

However, in Symbian, starting with Symbian S60 3rd Edition, there was one good thing - Symbian Web Runtime (WRT). It allows you to develop your mobile applications using HTML and Javascript, using only standard tools of almost any desktop operating system - a text editor and a ZIP-archiver. In fact, this is also a mobile framework, but already embedded in the system, which does not require additional tools or compilation. Let's take a closer look at it?

Hello, world!


The future WRT-application (or more correctly, the WRT-widget), when first viewed, is a ZIP archive with the .WGZ extension. It contains a folder with files (if you just archive files, it will not work, only in the folder). Inside, there must be an info.plist file and a main HTML file. There may also be an icon.png file with a recommended size of 88x88 pixels, which will serve as an icon for our widget. Everything else is up to you.

The file format info.plist is almost exactly the same as that of Apple, and is described here . Here is an example:
') 
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Nokia//DTD PLIST 1.0//EN" "http://www.nokia.com/NOKIA_COM_1/DTDs/plist-1.0.dtd"> <plist version="1.0"> <dict> <key>DisplayName</key> <string>HelloWorld</string> <key>Identifier</key> <string>com.HelloWorld</string> <key>Version</key> <string>1.0</string> <key>MainHTML</key> <string>index.html</string> <key>MiniViewEnabled</key> <false/> <key>AllowNetworkAccess</key> <false/> </dict> </plist>
ParameterType ofUsingDescription
DisplayNameLineRequiredThe name of your widget. It will be displayed in the main menu of the phone.
IdentifierLineRequiredThe unique id of the widget.
MainHTMLLineRequiredRelative path to the main HTML file.
VersionLineOptionalThe version of the widget.
AllowNetworkAccessBooleanOptionalGive the widget network access. By default, false - access to local data only.
MiniViewEnabledBooleanOptionalGive the ability to add a widget to your desktop. The default is false. If the device does not support desktop widgets, this parameter is ignored.

If we now create an index.html file in the same folder, write something like this in it:

 <html> <body>  <h1>Hello, world!</h1> </body> </html>

And then compress this folder into a ZIP-archive and change its permission to .WGZ, then we will get an application for Symbian.

Here to begin with and all. You can lay out pages, write Javascript code for them, test them in your browser, and then easily and simply turn them into mobile applications for Symbian. However, it should be noted that to connect CSS and Javascript files from the Internet, you will need to enable the AllowNetworkAccess parameter.

Localization


If you want to translate your widget into many languages, you can use the built-in localization tools. It is quite simple.

To support any language, you need to create a subfolder called <language> .lproj inside the main folder (for example, "en.lproj" or "fi.lproj"):

If you want to translate the name of your widget, you need to create an infoplist.strings file and put a line like this in it:

 DisplayName = " "

The rest of the localization process is quite simple. When downloading files with cascading style sheets, scripts, pictures or other resources, WRT searches for them first in a sub-folder with localization, and only then in the main folder. For example:

[main folder] \ fi.lproj \ flag.png



[main folder] \ en.lproj \ flag.png



[main folder] \ flag.png



Javascript

 var flag = document.createElement('img'); flag.setAttribute('src', 'flag.png');

As a result, for the Finnish language will display the Finnish flag, for the English - English, and for all others - the purple one.

Web Runtime API


We should also mention the WRT API. It allows interaction with Symbian. WRT 1.0 doesn’t have many functions, but starting from WRT 1.1 it is possible to work with many services of this mobile operating system. About working with services - just below. Full documentation can be found on the Symbian Web Runtime API reference page of official documentation. Below I will briefly translate some of this documentation. Some points in the documentation are simply not described or controversial, so if you notice a mistake, please write about it and I will correct it.

There are several special WRT objects that can be accessed from Javascript:

In addition, a screen object is supported, which allows you to get the device screen parameters.
Let's take a look at them one by one.

widget

Available as window.widget or simply widget. In this case, the word widget is reserved in WRT and should not be used as the name of a variable or function.
The list of methods for the widget object:

I will explain what the essence of the prepareForTransition and performTransition functions are. Suppose you want to hide or show some element. To do this, you use elem.style.display = "block" or elem.style.display = "none". However, if you want to animate this show or hide, you have to call widget.prepareForTransition ("fade") before it, and widget.performTransition () after it.

Here is an example from the documentation:

HTML

 <!--   --> <div id='main'> , ! <input type="button" value="Config" onclick="toMain(0);" /> </div> <!--    --> <!--   --> <div id='config'>    , ! <input type="button" value="Main" onclick="toMain(1);" /> </div> <!--    -->

Javascript

 function toMain(main) { //    widget.prepareForTransition("fade"); if (main) { //        //    document.getElementById("config").style.display = 'none'; //    document.getElementById("main").style.display = 'block'; } else { //        //    document.getElementById("main").style.display = 'none'; //    document.getElementById("config").style.display = 'block'; } //  widget.performTransition(); }


Property list of the widget object:


Sub-objects of the widget object:


menu

Available as window.menu or simply menu. In this case, the word menu is reserved in the WRT and should not be used as the name of a variable or function.

With this object you can manage the application menu. The menu is assigned to the left soft button and cannot be reassigned to any other (for example, to the right). The left button is called "Options" (or otherwise in different localizations). The right soft button is called "Exit" and terminates the application. By default, the soft buttons are hidden and shown only when the user presses one of them (on the device keyboard).

The list of menu object methods:


The list of menu object properties:


MenuItem

Menu item.

The list of methods on the MenuItem object:


The list of properties of the MenuItem object:


Example from documentation:
 //   function menuEventHandler(id) { switch (id) { case 2001: break; case 2002: // -  break; } } //    function createMenu() { //    var optionsMenu = window.menu; //  -   optionsMenu.onShow = function() { //   alert('Event Trigger: optionsMenu.onShow'); } //     var m1 = new MenuItem('', 2001); var m2 = new MenuItem('', 2002); //  -    m1.onSelect = menuEventHandler; m2.onSelect = menuEventHandler; //       optionsMenu.append(m1); optionsMenu.append(m2); //         var m11 = new MenuItem('', 3001); var m12 = new MenuItem('', 3002); //         "" //       id optionsMenu.getMenuItemById(2001).append(m11); //        optionsMenu.getMenuItemByName('').append(m12); //  -    m11.onSelect = menuEventHandler; m12.onSelect = menuEventHandler; }


device

Available as window.device or just device. In this case, the word device is reserved in WRT and should not be used as the name of a variable or function.

This object is present starting with WRT 1.1 and opens up great opportunities to work with Symbian services with just one function.

The list of device object methods:

By itself, the section on using Symbian services in the WRT is quite large, and I will not give it here. If you find it interesting, I can describe it in a separate article. In general, the documentation is more or less clear and for each service there is a detailed example of all the functions. By the way, most functions have synchronous and asynchronous options, so your application will not slow down.

Advantages and disadvantages


Pros:Minuses:The pros and cons roughly outweigh each other, and the pros are still slightly larger.

By the way, on the same Nokia N9 and Nokia N950, based on MeeGo OS with Nokia Browser 8.5 browser, HTML 5 is fully supported - you can, for example, write a game using Canvas, with support for gestures and an accelerometer. True, there is not already used WRT, and the possibility of HTML 5.

Thanks for reading. I apologize for any errors and I will be glad to give helpful comments.

Source: https://habr.com/ru/post/133900/

More articles:


All Articles