Skip to content
This repository has been archived by the owner on Oct 9, 2018. It is now read-only.

Toolkit Initialization

Jump to bottom
tneil edited this page May 29, 2012 · 33 revisions

To initialize bbUI you need to call the bb.init() function before you start loading UI elements into your application. THIS IS MANDITORY The bb.int() function takes one parameter which is a JSON structure containing any of the options you wish to override. If you want to simply use the default configuration call the initialization function with no parameters bb.init().

The default values of the options which can be overriden are:

{
	onbackkey: null, 				// Custom handler for back key on BlackBerry 5/6/7 smartphones
	onscreenready: null,			// Manipulate your screen before it's inserted into the DOM
	ondomready: null,				// Manipulate your screen after it's inserted into the DOM
	bb10ActionBarDark: true, 		// If set to true, the action bar will use the dark theme
	bb10ControlsDark: true,			// If set to true, the controls will use the dark theme
	bb10ListsDark: false,			// If set to true, lists will use the dark theme (you need a dark background)
	bb10ForPlayBook: false,			// If set to true, PlayBook will be considered a BB10 device
	bb10HighlightColor: '#00A8DF'	// A highlight color to use when a user selects an item
}

Ready Events

You can be notified when your screen, and all associated <script> tags, are loaded and ready for manipulation before styling is applied using the onscreenready event. The screen is still not contained in the DOM of the page at this point, but can be manipulated to modify its contents before the bbUI styling is applied. This allows you to perform your data manipulation before the screen has been displayed to the user and minimizes rendering engine layouts which are very expensive.

You can also be notified when your screen, and all associated <script> tags, have been inserted into the DOM using the ondomready event. This allows you to perform your data manipulation after the screen has been displayed to the user.

To subscribe to this event simply assign a function to the onscreenready parameter of the init function. The function will be called with the DOM element of your screen, and the id you have specified for that screen so that you can apply any screen specific changes.

Since all of the script files for the specific screen are loaded before the onscreenready or ondomready events are fired, you can place all your screen specific logic in those files and only have one onscreenready and ondomready global handler to act as the "traffic cop".

The getElementById() function has been added to the element object that is passed into onscreenready and ondomready events so that you can manipulate the DOM of the element passed into the event.

<html>
	<head>
		<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=no,target-densitydpi=device-dpi" />
		<link  rel="stylesheet" type="text/css" href="bbui-0.9.1.css"></link>
		<script type="text/javascript" src="bbui-0.9.1.js"></script>
		<script type="text/javascript">
		
			bb.init(onscreenready : function(element, id) {
						if (id == 'menu') {
							doMenuLoadingBeforeInsert(element);
						} 
					},
					ondomready: function(element, id) {
						if (id == 'menu') {
							doMenuLoadingAfterInsert(element);
						} 
					});
		</script>
	</head>
	<body onload="bb.pushScreen('menu.htm', 'menu');">	
	</body>
</html>
Clone this wiki locally