changed title bars

README.md

@@ -119,18 +119,27 @@ into the document.
 ## 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>.  There's also a **data-bb-title**
-attribute where, if defined, a standard black screen title bar will appear showing the declared text.
+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 BB6 & BB7.  However, if your screen has <input> controls on it and you declare the "fade" effect, BB6 will not fade in the page.  This 
 has been disabled on purpose in bbUI because the fade effect doesn't perform well on BB6 when input controls are on the screen.
 
+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.
+
 	<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 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.
+
+	<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:
 
+![Image List](bbUI.js/raw/master/screenshots/backBtn.png)
 
 
 ## Loading Screen Specific CSS

samples/arrowList.htm

@@ -15,6 +15,7 @@
 * limitations under the License.
 -->
 <div data-bb-type="screen" data-bb-effect="fade">
+	<div data-bb-type="title" data-bb-caption="Arrow List" data-bb-back-caption="Back" ></div>
 	<div style="margin:15px;color:Gray;">
 		<p align="center">Below you will find an example of using an arrow list in a BlackBerry application</p>
 	</div>

samples/bbUI/bbUI.css

@@ -163,6 +163,55 @@ body, html {
 	display:block;
 }
 
+/* ================================================= 
+   PlayBook Title Bar
+   =================================================*/
+.pb-title-bar {
+	height:50px;
+	border-bottom:solid #2E2E2E 1px;
+	position:fixed;
+	top:0px;
+	left:0px;
+	right:0px;
+	background-color:#181818;
+	text-align:center;
+	color:#626262;
+	line-height:50px;
+	font-size: 12pt;
+	z-index:1000;
+}
+
+.pb-title-bar-back {
+	position: fixed;
+	border:solid black 1px;
+	top:10px;
+	left:10px;
+	height:30px;
+	line-height:30px;
+	font-size: 12pt; 
+	box-shadow: 0px 1px 0px #2E2E2E; 
+	border-radius:4px;
+	color:white;
+	z-index:1001;
+}
+
+.pb-title-bar-back-hover{
+	background-image: -webkit-gradient(linear, center top, center bottom, from(#0dacff), to(#0f75ff));
+	box-shadow: none;
+}
+
+.pb-title-bar-back-inner {
+	border-top: 1px solid #2E2E2E;
+	padding-left:30px;
+	padding-right:10px;
+	border-radius:4px;
+	background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAASCAYAAACNdSR1AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sMCBYODUzwDVMAAALNSURBVCjPNcFfaFV1AMDx7+93zu/8zs7d/RNezE1bWy4vN5uFKFdpQWJqLXc369GHMrJR6w9T8kGYzbXKCnqoGK2NRgx6i0ilbKOHWK3VwzIIwqK3qIdk1Mp7/v3O+fXU5yM6e4/4WvuYJEUpF5MlKOUQRv9arUQ21BzYefGTy784bqHlFgvFLI5j8tQgXIfAdwmjDQpt0kyeP1cebB642td3B1NTbwqxpfuQr7Wm1F4gDP8hTjcyKUz++htTlYGHDl5XDpgchoZHhCy3FyOTxFEShVEc3Yi0J9PXLkyODzcPXvccaIVwamyq9vO1X6Gn9iC1vkFu7T1Az45++dGl5fuS3NrQWJtYa08+c26i2tWguz6AK0hJ0xDPy8TE+fHfmkf7O4SFOIHnTp8Z/ezzr6c9VcB1NC4iQUijX3r5xehY8zDCgjHwwtjZ0aXFL+ddFUjlF2i1Ek9mtlV+5cL4wtDwYUxmATg1NvHj5YtfTHtuKVRK5Uka5spzIvHhx1fsseEjSEACT42cnl1aXH7SE2UhXU8mMsQgMiECR27eXCUxKQB/bWywvr6+InCEUtqCzFxHZ57SOFJl8vETJ8W3q2trFiiVSnywMD/f2Le3lueJRBiiKCJPwaSpIx3RzrOjZxpLiytruQXfh5nZt37aeXfvtJUxWnlo3eYKHCl6dtxPnLTwtai+Pz/7557ddbSG8AY8Pfq8WPnmBywa1w2QQhQ6gqDaYYz39/HjJ+qr331PaqGtAG9Pv2ob++/sskROalquBJmmiflDKW19v/3ao489seWr5VVyIAgC3p15Z3VfY/c2KXIpttcHq9ZmaZ6bNunYJDXhuiDVc3PvRff070ICNoeHHxnZRLHcBQiUV5DFylavs3tvZdv2e2XnbfvlpaWrv0fW2rmFT+P6XYc0lU23A4L/SdenVNnKzbfsobbrAc5OztjSTZ11gP8A9IAhyN2oEbQAAAAASUVORK5CYII="); 
+	background-repeat: no-repeat;
+	background-position: 10px 6px;
+}
+
+
+
 /* ================================================= 
    BB7 DropDown Buttons
    =================================================*/

samples/bbUI/bbUI.js

@@ -71,6 +71,10 @@ bb = {
 			return (navigator.appVersion.indexOf('7.0.0') >= 0) || (navigator.appVersion.indexOf('7.1.0') >= 0) || (navigator.appVersion.indexOf('Ripple') >= 0);
 		},
 
+		isPlayBook: function() {
+			return ((window.innerWidth == 1024 && window.innerHeight == 600) || (window.innerWidth == 600 && window.innerHeight == 1024));
+		},
+
 		// Determines if this device supports touch
 		isTouch: function() {
 			return true;
@@ -204,7 +208,6 @@ bb = {
 				blackberry.app.exit();
 			}
 		}
-
 	},
 
 	removeLoadedScripts: function() {
@@ -240,22 +243,53 @@ bb = {
 				if (bb.device.isHiRes) {
 					outerElement.setAttribute('class', 'bb-hires-screen');
 				}
-				if (outerElement.hasAttribute('data-bb-title')) {
-					var outerStyle = outerElement.getAttribute('style'),
-						title = document.createElement('div');
-					if (bb.device.isHiRes) {
-						title.setAttribute('class', 'bb-hires-screen-title');
-						outerElement.setAttribute('style', outerStyle + ';padding-top:33px');
-					} else {
-						title.setAttribute('class', 'bb-lowres-screen-title');
-						outerElement.setAttribute('style', outerStyle + ';padding-top:27px');
+
+				if (bb.device.isPlayBook()) {
+					//alert(bb.screens.length);
+					var titleBar = outerElement.querySelectorAll('[data-bb-type=title]')
+					if (titleBar.length > 0) {
+						titleBar = titleBar[0];
+
+						titleBar.setAttribute('class', 'pb-title-bar');
+						titleBar.innerHTML = titleBar.getAttribute('data-bb-caption');
+						if (titleBar.hasAttribute('data-bb-back-caption')) {
+							var button = document.createElement('div'), 
+								buttonInner = document.createElement('div');
+							button.setAttribute('class', 'pb-title-bar-back');
+							button.onmouseover = function() { 
+									this.setAttribute('class', 'pb-title-bar-back pb-title-bar-back-hover');
+								}
+							button.onmouseout = function() {
+									this.setAttribute('class', 'pb-title-bar-back');
+								}
+							button.onclick = bb.popScreen;
+
+							buttonInner.setAttribute('class','pb-title-bar-back-inner');
+							buttonInner.innerHTML = titleBar.getAttribute('data-bb-back-caption'); 
+							button.appendChild(buttonInner);
+							titleBar.appendChild(button);
+						}
+						// Set padding for scrolling under the fixed position
+						outerElement.setAttribute('style', 'padding-top:51px;');
 					}
-					title.innerHTML = outerElement.getAttribute('data-bb-title');
-					var firstChild = outerElement.firstChild;
-					if (firstChild != undefined && firstChild != null) {
-						outerElement.insertBefore(title, firstChild);
-					} else {
-						outerElement.appendChild(title);
+
+				}
+				else {
+					// See if there is a title bar
+					var titleBar = outerElement.querySelectorAll('[data-bb-type=title]')
+					if (titleBar.length > 0) {
+						titleBar = titleBar[0];
+						if (titleBar.hasAttribute('data-bb-caption')) {
+							var outerStyle = outerElement.getAttribute('style');
+							if (bb.device.isHiRes) {
+								titleBar.setAttribute('class', 'bb-hires-screen-title');
+								outerElement.setAttribute('style', outerStyle + ';padding-top:33px');
+							} else {
+								titleBar.setAttribute('class', 'bb-lowres-screen-title');
+								outerElement.setAttribute('style', outerStyle + ';padding-top:27px');
+							}
+							titleBar.innerHTML = titleBar.getAttribute('data-bb-caption');
+						}
 					}
 				}
 			}

samples/bbmBubbles.htm

@@ -16,7 +16,8 @@
 -->
 
 <div data-bb-type="screen" data-bb-effect="fade">
-	<script id="bbmBubblesJS" src="js/bbmBubbles.js" onunload="unloadPushListeners()"></script>
+	<div data-bb-type="title" data-bb-caption="BBM Bubbles" data-bb-back-caption="Back" ></div>
+	<script id="bbmBubblesJS" src="js/bbmBubbles.js?2" onunload="unloadPushListeners()"></script>
 	<style type="text/css">
 		body,html {
 			background-color: #B5B2B5;

samples/charts.htm

@@ -15,6 +15,7 @@
 * limitations under the License.
 -->
 <div data-bb-type="screen" data-bb-effect="fade">
+	<div data-bb-type="title" data-bb-caption="Charts" data-bb-back-caption="Back" ></div>
 	<script id="chartsJS" src="js/charts.js"></script>
 	<div style="margin:15px;color:Gray;">
 		<p align="center">

samples/gauge.htm

@@ -15,6 +15,7 @@
 * limitations under the License.
 -->
 <div data-bb-type="screen" data-bb-effect="fade">
+	<div data-bb-type="title" data-bb-caption="Gauges" data-bb-back-caption="Back" ></div>
 	<style type="text/css">
 		.bb-gauge
 		{

samples/inboxList.htm

@@ -16,7 +16,8 @@
 -->
 
 <div data-bb-type="screen" data-bb-effect="fade">
-	<script id="inboxListJS" src="js/inboxList.js" onunload="blackberry.ui.menu.clearMenuItems();"></script>
+	<div data-bb-type="title" data-bb-caption="Inbox List" data-bb-back-caption="Back" ></div>
+	<script id="inboxListJS" src="js/inboxList.js" onunload="unloadMessageList();"></script>
 	<style type="text/css">
 		body, html {
 			background-color: White;

samples/input.htm

@@ -16,6 +16,7 @@
 -->
 
 <div data-bb-type="screen" data-bb-effect="fade">
+	<div data-bb-type="title" data-bb-caption="Input Controls" data-bb-back-caption="Back" ></div>
 	<div data-bb-type="round-panel"> 
 		<div data-bb-type="panel-header">Buttons</div>
 		<div data-bb-type="label-control-container">

samples/js/bbmBubbles.js

@@ -17,12 +17,15 @@
 
 
 function loadPushListeners() {
-	blackberry.message.sms.addReceiveListener(onSMS);
+	if (blackberry.message) {
+		blackberry.message.sms.addReceiveListener(onSMS);
+	}
 }
 
 function unloadPushListeners() {
-	blackberry.message.sms.removeReceiveListener();
-
+	if (blackberry.message) {
+		blackberry.message.sms.removeReceiveListener();
+	}
 }
 
 function onSMS(message, sender, dateTime) {

samples/js/inboxList.js

@@ -18,6 +18,14 @@ function clickMe() {
  alert('Your device pin is:' + blackberry.identity.PIN);
 }
 
-blackberry.ui.menu.clearMenuItems();
-var item = new blackberry.ui.menu.MenuItem(false, 1, 'Custom Menu', clickMe);
-blackberry.ui.menu.addMenuItem(item);
+if (blackberry.ui.menu) {
+	blackberry.ui.menu.clearMenuItems();
+	var item = new blackberry.ui.menu.MenuItem(false, 1, 'Custom Menu', clickMe);
+	blackberry.ui.menu.addMenuItem(item);
+}
+
+function unloadMessageList() {
+	if (blackberry.ui.menu) {
+		blackberry.ui.menu.clearMenuItems();
+	}
+}

samples/menu.htm

@@ -14,7 +14,8 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 -->
-<div data-bb-type="screen"  data-bb-title="User Interface Examples" data-bb-effect="fade">
+<div data-bb-type="screen" data-bb-effect="fade">
+	<div data-bb-type="title" data-bb-caption="User Interface Examples" ></div>
 	<style type="text/css">
 		body, html {
 			background-color: White;

samples/pillButtons.htm

@@ -15,6 +15,7 @@
 * limitations under the License.
 -->
 <div data-bb-type="screen" data-bb-effect="fade">
+	<div data-bb-type="title" data-bb-caption="Pill Buttons" data-bb-back-caption="Back" ></div>
 	<script id="pillButtonsJS" src="js/pillButtons.js"></script>
 
 	 <div data-bb-type="pill-buttons">

samples/settings.htm

@@ -15,6 +15,7 @@
 * limitations under the License.
 -->
 <div data-bb-type="screen" data-bb-title="Screen Display" data-bb-effect="fade">
+	<div data-bb-type="title" data-bb-caption="Screen Display" data-bb-back-caption="Back"></div>
 	<div data-bb-type="round-panel" id="mainList"> 
 		<div data-bb-type="panel-header">Font</div>
 		<div style="margin:3px;">

samples/tallList.htm

@@ -15,6 +15,7 @@
 * limitations under the License.
 -->
 <div data-bb-type="screen" data-bb-effect="fade">
+	<div data-bb-type="title" data-bb-caption="Tall List" data-bb-back-caption="Back"></div>
 	<style type="text/css">
 		body, html {
 			background-color: White;

src/bbUI.css

@@ -163,6 +163,55 @@ body, html {
 	display:block;
 }
 
+/* ================================================= 
+   PlayBook Title Bar
+   =================================================*/
+.pb-title-bar {
+	height:50px;
+	border-bottom:solid #2E2E2E 1px;
+	position:fixed;
+	top:0px;
+	left:0px;
+	right:0px;
+	background-color:#181818;
+	text-align:center;
+	color:#626262;
+	line-height:50px;
+	font-size: 12pt;
+	z-index:1000;
+}
+
+.pb-title-bar-back {
+	position: fixed;
+	border:solid black 1px;
+	top:10px;
+	left:10px;
+	height:30px;
+	line-height:30px;
+	font-size: 12pt; 
+	box-shadow: 0px 1px 0px #2E2E2E; 
+	border-radius:4px;
+	color:white;
+	z-index:1001;
+}
+
+.pb-title-bar-back-hover{
+	background-image: -webkit-gradient(linear, center top, center bottom, from(#0dacff), to(#0f75ff));
+	box-shadow: none;
+}
+
+.pb-title-bar-back-inner {
+	border-top: 1px solid #2E2E2E;
+	padding-left:30px;
+	padding-right:10px;
+	border-radius:4px;
+	background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAASCAYAAACNdSR1AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sMCBYODUzwDVMAAALNSURBVCjPNcFfaFV1AMDx7+93zu/8zs7d/RNezE1bWy4vN5uFKFdpQWJqLXc369GHMrJR6w9T8kGYzbXKCnqoGK2NRgx6i0ilbKOHWK3VwzIIwqK3qIdk1Mp7/v3O+fXU5yM6e4/4WvuYJEUpF5MlKOUQRv9arUQ21BzYefGTy784bqHlFgvFLI5j8tQgXIfAdwmjDQpt0kyeP1cebB642td3B1NTbwqxpfuQr7Wm1F4gDP8hTjcyKUz++htTlYGHDl5XDpgchoZHhCy3FyOTxFEShVEc3Yi0J9PXLkyODzcPXvccaIVwamyq9vO1X6Gn9iC1vkFu7T1Az45++dGl5fuS3NrQWJtYa08+c26i2tWguz6AK0hJ0xDPy8TE+fHfmkf7O4SFOIHnTp8Z/ezzr6c9VcB1NC4iQUijX3r5xehY8zDCgjHwwtjZ0aXFL+ddFUjlF2i1Ek9mtlV+5cL4wtDwYUxmATg1NvHj5YtfTHtuKVRK5Uka5spzIvHhx1fsseEjSEACT42cnl1aXH7SE2UhXU8mMsQgMiECR27eXCUxKQB/bWywvr6+InCEUtqCzFxHZ57SOFJl8vETJ8W3q2trFiiVSnywMD/f2Le3lueJRBiiKCJPwaSpIx3RzrOjZxpLiytruQXfh5nZt37aeXfvtJUxWnlo3eYKHCl6dtxPnLTwtai+Pz/7557ddbSG8AY8Pfq8WPnmBywa1w2QQhQ6gqDaYYz39/HjJ+qr331PaqGtAG9Pv2ob++/sskROalquBJmmiflDKW19v/3ao489seWr5VVyIAgC3p15Z3VfY/c2KXIpttcHq9ZmaZ6bNunYJDXhuiDVc3PvRff070ICNoeHHxnZRLHcBQiUV5DFylavs3tvZdv2e2XnbfvlpaWrv0fW2rmFT+P6XYc0lU23A4L/SdenVNnKzbfsobbrAc5OztjSTZ11gP8A9IAhyN2oEbQAAAAASUVORK5CYII="); 
+	background-repeat: no-repeat;
+	background-position: 10px 6px;
+}
+
+
+
 /* ================================================= 
    BB7 DropDown Buttons
    =================================================*/