Example WRT widget using Yahoo User Interface (YUI) library
From Symbian Developer Community
This article shows how to use Yahoo User Interface (YUI) library components in your WRT widgets.
| Comes with Code: | File:TabViewExample.wgz |
Most YUI components work in WRT widgets with no special effort. To prove the point and show just how easy this is, let us pick one of the YUI examples are turn it into a WRT widget. This TabView example is a good candidate: TabView Control: Build from Markup.
We will assume the use of Aptana Community Edition with Nokia WRT plugin. It is not necessary to use these - you can write widgets with nothing more than a text editor. However, using Aptana greatly simplifies most tasks.
First, let's create an Aptana project. Clicking File->New->Project opens the following dialog.
Select 'New Nokia Web Runtime Widget' and click Next. On the next screen select 'Basic Widget Project' and click Next again.
On the next screen select project name and click Next again.
We are ok with the defaults provided on the next screen so just click Finish.
Now, let's get the source for the TreeView example. Back to browser, open the example page and click on 'View example in new window' as follows.
In the new window, simply copy the page source (View page source/Select all/Copy) and paste back to index.html in your Aptana studio project, overwriting the default content.
You will notice that towards the bottom of the file, there are some scripts that appear to be used by Yahoo to track page views. You can freely remove everything after the 'END SOURCE CODE FOR EXAMPLE' comment, though make sure to keep body and html closing tags.
Done. We can now see the result directly in Aptana by clicking 'Nokia Web Runtime (WRT)' tab for index.html as below.
Here is the preview shown in Aptana:
Let's now package widget and deploy to a phone. Right click on the TabViewExample project in Project explorer and select Package Widget. The WGZ file is now created and can be installed on a phone.
Further Information
- Here is the File:TabViewExample.wgz.
Comments
Sign in to comment…
