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

Screens

Jump to bottom
tneil edited this page May 5, 2012 · 28 revisions

The bbUI toolkit builds the application's UI in the most optimized fashion for the target operating system. It follows a methodology of a single web page that has screens loaded into it as HTML fragments. Each screen is its own HTML fragment file. The toolkit then uses AJAX to push and pop screens off of the stack. The toolkilt manages the screen stack and loading the content. This ensures the best use of device memory.

To open a new screen in an appliction using bbUI you simply call bb.pushScreen('mypage.htm', 'mypagename'). To close the top screen you simply call bb.popScreen(). The toolkit is designed to use the Application Event WebWorks API so that it can trap the "back" hardware key and automatically handle popping the last screen off of the stack.

If you want to override the back button handling, and substitute it with your own handler, you can simply call bb.assignBackHandler(callback) and your callback function will now be invoked when the back button is clicked. It is then up to you to handle all back button navigation.

<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>
	</head>
	<body onload="bb.pushScreen('menu.htm', 'menu');">	
	</body>
</html>

Defining a Screen

Creating a screen to be used with bbUI is as simple as creating an HTML file and placing the screen fragment markup in the file. A screen declaration is simply a <div> with an attribute data-bb-type="screen". You then place all the contents for your screen inside this <div>.

A display effect can also be declared on your screen. Currently only data-bb-effect="fade" is supported. This will fade in your screen when it displays. This is supported both on BB7 and up. This has been disabled on purpose in bbUI because the fade effect doesn't perform well on devices below BB7.

You can also create a nested data-bb-type="title" <div> in your screen to declare a title bar. If defined, a standard black screen title bar will appear showing the declared text. The data-bb-caption attribute defines the text to show in this title area.

NOTE: Title bars are not available for BlackBerry 10 yet for bbUI

<div data-bb-type="screen" data-bb-title="User Interface Examples" data-bb-effect="fade">
	<div data-bb-type="title" data-bb-caption="User Interface Examples" ></div>
</div>

You can also add a back button to your title bar that will ONLY appear when you display your content on a PlayBook. To define a back button in your title bar, add the caption of your back button to the data-bb-back-caption attribute. When running on BlackBerry 10, if you provide a back button in your title bar it will automatically create an action bar with a back button on it "if" there are no tabs on your action bar.

<div data-bb-type="title" data-bb-caption="User Interface Examples" data-bb-back-caption="Back"></div>

This will appear as the standard back button in your UI as seen below:

Back Button

Screen Scrolling Effects

Inertial screen scrolling effects with elastic ends are implemented by default for PlayBook only (this means no scrolling effects for other devices at the moment). This has been accomplished by integrating iScroll into bbUI.
This will provide a native scrolling experience on each of your screens. If you do not want the scrolling effects applied to a screen you can simply turn them off using the data-bb-scroll-effect="off" attribute on the <screen> element. You may want to remove these effects on screens where you want all the content within the screen to be fixed without providing an elastic pull down effect on the content.

<div data-bb-type="screen" data-bb-scroll-effect="off">

</div>
Clone this wiki locally