Sandboxing

Sandboxing

Sandboxing allows style an application fast and easy with Glaze. The main idea is to create and edit web-based stylesheets to quickly setup a stylesheet to use in your application and test it on multiple devices and/or simulators in parallel.

Create a web-based stylesheet

For Sandboxing you need to create an editable web-based css stylesheet.

We recommend to create an account at pastebin.com. When you’re done create a new paste which you’ll use as your web-based stylesheet. Once your needed styles are defined, submit the paste and copy the URL of the raw text. For example, the raw text URL for the pastebin URL http://pastebin.com/1234567 would be http://pastebin.com/raw.php?i=1234567.

Of course, you can also setup your own server hosting your stylesheets in raw text.

Setup a sandbox

Create a BlackBerry project using Glaze. Please refer to Getting Started for help.

To test the styles of your web-based stylesheet, you need to set up a static instance of StyleSheetSandbox in your main application class :

// the sandbox instance
public static StyleSheetSandbox sandbox;

public MyApp {
	// construct the sandbox with the stylesheet url and screen to test
	sandbox = new StyleSheetSandbox("http://pastebin.com/raw.php?i=1234567") {
		public Screen createSandboxScreen() {
			return new LoginScreen();
		}
	};

        // update to load the stylesheet and display the sandbox screen
        sandbox.update();
}

A sandbox is created for the URL ‘http://pastebin.com/raw.php?i=1234567’ using the screen LoginScreen

The method createSandboxScreen() is abstract and must return a screen to test your stylesheet. The returned screen
should hold fields with styles corresponding to styles defined in your web-based stylesheet.

A typical sandbox screen could look like this :

public LoginScreen() {
	super(Style.id("screen"));

        // create all fields with styles
	VerticalFieldManager content = new VerticalFieldManager(
			Field.USE_ALL_WIDTH);

	LabelField usernameLabel = new LabelField("Username");
	content.add(usernameLabel, Style.id("label"));

	TextField usernameField = new TextField(Field.USE_ALL_WIDTH);
	content.add(usernameField, Style.id("field"));

	LabelField passwordLabel = new LabelField("Password");
	content.add(passwordLabel, Style.id("label"));

	TextField passwordField = new TextField(Field.USE_ALL_WIDTH);
	content.add(passwordField, Style.id("field"));

	ButtonField loginButton = new ButtonField("Login", Field.USE_ALL_WIDTH);
	content.add(loginButton, Style.id("button"));

	add(content, Style.id("content"));

        // add the update menu item to the sandbox
	addMenuItem(MyApp.sandbox.createUpdateMenuItem());
}

A screen displaying a login dialog using a variety of styles is constructed

Notice the last line in the constructor of LoginScreen : this will add a menu item to update the styles in your application according to the web-based stylesheet you previously declared to use with the sandbox.

Run the sandbox

Now package the sandbox application, install it to a simulator or device, make sure the application has access to the web and start the application.

After a short loading dialog, your screen will appear with the styles you declared in the web-based stylesheet.
To change the styles in your application, simply change the web-based stylesheet, open the menu in the running sandbox application and choose “Update Styles”. When an update is triggered, all texts and states of the screen (e.g. entered texts, field focus) is preserved.

Of course, you can have multiple BlackBerry devices running the same sandbox application thus making it possible to test your stylesheet on multiple devices in parallel.

Automatic updates

Aside from a manual stylesheet update as described above updates can also be set to be triggered automatically in defined intervals. For this a sandbox is created as described and startAutoUpdate(interval) is called to start the automatic updates. The interval defines the interval in milliseconds between the updates.

// the sandbox instance
public static StyleSheetSandbox sandbox;

public MyApp {
        // construct the sandbox with the stylesheet url and screen to test
	sandbox = new StyleSheetSandbox("http://pastebin.com/raw.php?i=1234567") {
		public Screen createSandboxScreen() {
			return new LoginScreen();
		}
	};

        // start the automatic update with an interval of 2000 milliseconds
        sandbox.startAutoUpdate(2000);
}