Sometimes it’s nice to let users decide what colours and fonts are used in our web applications. With dynamic HTML this is of course possible and the same possibilities therefore apply to a BlackBerry® web application.
In this coding sample, we show how to add a style configuration page to a BlackBerry® web application which allows a user to change the colours of certain HTML element types and the fonts used in an application. Their chosen settings are stored in cookies and then utilised on all other pages of the application automatically during the current and subsequent sessions.
The Style Selector consists of two pages; the first is the “style settings page” and the second is an example page which shows the selected style being applied.
If you exit the application and restart, settings previously selected at the style selector page are restored and reapplied.
The Style Settings Page
The style settings page displays first when you start the application and it consists of two parts. The top part has example HTML which will change as you change your settings. The bottom half contains a form into which you can submit your selection for various types of HTML element. Colours should be entered as RGB values in hex format without a preceding ‘#’. Once you have entered the values you want, click the Apply button to see their effect.
The screenshot to the right shows the top part of the style settings page when the application is first launched and default style settings apply.
And here we see the bottom part of the form on the style settings page.
Here, a user has filled in some of the values in the style settings form but has not yet clicked the Apply button.
After clicking the Apply button, the selected style has been applied to the style settings page.
In addition to applying your selected settings, clicking the Apply button also causes the selected setting values to be persisted in cookies. This is the mechanism used to both store settings between sessions and to make them available to other pages.
The Example Page
The example page using the user-specified style settings.