Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Style Selector Web Application

by Retired ‎02-07-2011 11:06 AM - edited ‎02-15-2011 05:02 AM (2,687 Views)

Introduction

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.

 

Solution Walkthrough

Overview

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.

 

This entire solution uses standard JavaScript® and HTML. There is nothing BlackBerry specific in it and this illustrates the power of the standards-based BlackBerry® WebWorks™ SDK.

 

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.

 Screen Shot 1

And here we see the bottom part of the form on the style settings page.

 Screen Shot 2

 

Here, a user has filled in some of the values in the style settings form but has not yet clicked the Apply button.

 Screen Shot 3

After clicking the Apply button, the selected style has been applied to the style settings page.

 screenshot4.jpg

 

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.

Restoring the style settings page’s state after a restart is achieved through executing a JavaScript function from the page body’s onLoad event:

<body onLoad="initStyleSettingsPage()">

 

 

The Example Page

The example page exists purely to illustrate the fact that the settings selected on the style settings page can be applied to other pages in your application. To have a page use the selected style settings, all that is required is to execute a JavaScript function from the page body’s onLoad event:

<body onLoad="initStyle()">

 

The example page using the user-specified style settings.

 Screen Shot 5

Users Online
Currently online: 12 members 948 guests
Please welcome our newest community members: