Create a Web Runtime Theme for WRTKit
From Symbian Developer Community
You wish to customise the look and feel of your WRTKit-based WRT widgets. You might do this in order to match the brand of your target web service, to simplify giving all widgets for a particular customer the same appearance, or to rebrand a 'generic' widget for a number of customers.
 |
| ||||||||||||
Contents |
Solution
WRT widgets are constructed from HTML, CSS, images and javascript. You can change the appearance of any widget, while keeping the content the same, by modifying its CSS and images.
WRTKit and Aptana Studio IDE make this even easier, because all the UI resources for a WRTKit project are kept in one place: /WRTKit/Resources/. Changing the theme is then simply a matter of replacing the content of /WRTKit/Resources/ with modified images and CSS.
UI.css
UI.css contains the CSS styles for WRTKit components. Usually you should only make small changes to this file - e.g. changing colours. In this example, we have also included a few tweaks that can come in handy - relative font sizes and style inheritance which is described in more detail here.
UI Control Images
Most of the work is actually replacing images to be consistent with your theme. Some images are composite - e.g. they contain several images at different offsets.
It is probably best to start from the existing theme images and modify rather than create new ones. This takes a bit of effort but there are only 20 or so images, and most are trivially simple. Most web developers and designers are familiar with this process.
Testing the theme
Aptana Studio makes testing your widget really easy. Screen size and orientation can be changed on the fly and the application is accurately rendered on the computer screen.
Test your theme with a variety of screen sizes and layouts provided to ensure good user experience on all devices.
Finally, always test your theme on a few phones! Aptana is great, but it doesn't necessarily use the same rendering engine available on the phone.
Variants and Extensions
None
Summary
This recipe shows how to customise the look and feel of your WRT widget.
Related Info
- File:SymbianFoundationWidgetTheme.zip (theme code associated with this example)
Comments
Sign in to comment…
