How to install and use the WRT Kit
Hi everyone,
In this post, we’ll show how to install and use the WRT Kit.
The WRTKit is a complete library of JavaScript code, CSS style rules and graphical elements that are required to implement the kind of sophisticated, customizable, application-like user interfaces. It gives widget developers an easy way to create high quality user interfaces without having to worry about the problems that would otherwise plague their widgets.
When the WRTKit is used in a widget, complex and fully featured user interfaces can be created with just a few lines of JavaScript code. The WRTKit takes care of generating all the HTML and CSS automatically behind the scenes.
We’ll show with a few of examples, how to create a “Hello World” Widget with the WRTKit.
First you have to copy the folder “WRTKit” that contains the sub-folders “Resources”, “Utils” and “UI”, besides the JavaScript file “WRTKit.js” to the same folder of your project.
So, in your HTML code, you put in a reference for the WRT Kit:
<script type="text/javascript" src="WRTKit\WRTKit.js"></script>
Now, you create a JavaScript file called “HelloWorld.js”. This code below is optional, however it’s very recommended to set the navigation enabled to false, for use the components, not the mouse. Thus, you gain much accessibility.
if (window.widget) { widget.setNavigationEnabled(false); }
Then, let’s start to use the WRTKit. As you can see in the example below, we need a UIManager class to manage a set of views and related user interface elements such as the scrollbar that indicates the scroll position for the current view, as well as notification popup dialogs.
We instanciate it in this form.
this.uiManager = new UIManager();
After, we need a view to be shown through the UIManager. Therefore, we instanciate a ListView whose id is “-1″ and title is “Hello World”.
this.mainView = new ListView(-1, "Hello World");
So, to show how WRTKit makes the things easy, now we’ll put a ContentPanel in the ListView without to specify all the features of a content panel. Then, we create and add a content panel whose id is “null”, caption is “Hello World !”, content is all the big phrase, foldability is true and expanded state is false (i.e., the content starts hidden).
this.mainView.addControl(new ContentPanel(null, "Hello World !", "Hello everyone, this is an example of a hello world using the WRT Kit !", true, false));
Now, we came back to the HTML, to put the reference for the “HelloWorld.js” and call the method init()”.
<script type="text/javascript" src="HelloWorld.js"></script>
and
<body onload="init()">
All the code of the HelloWorld should be like this:
/** Hello World example using WRT Kit. @author Artur Farias */ var uiManager; var mainView; function init() { if (window.widget) { widget.setNavigationEnabled(false); } this.uiManager = new UIManager(); this.mainView = new ListView(-1, "Hello World"); this.mainView.addControl(new ContentPanel(null, "Hello World !", "Hello everyone, this is an example of a hello world using the WRT Kit !", true, false)); this.uiManager.setView(this.mainView); }
When you run the Widget at your S60, your aplication will be like this picture below:
Leave a comment