Help with bbUI.js

**goku_vegeta** · 06-23-2012, 03:14 PM

Hey Everyone,

I was at the BlackBerry 10 Jam Toronto conference the other day, I signed up for all the sessions in the web track. I was really intrigued by bbUI.js.

Now I'm trying to implement in this sample web app, just to see how it would look.

here is my source code,

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:rim="http://www.blackberry.com/ns/widgets" version="1.5.1">
<rim:loadingScreen backgroundImage="blackberry.png"
onFirstLaunch="true" />
<name>Maps</name>
<access subdomains="true" uri="http://m.maps.nokia.com"/>
<content src="http://m.maps.nokia.com"/>
<icon src="mapicon.png"/>
<rimermissions>
<rimermit>read_geolocation</rimermit>
</rimermissions>
<rimrientation mode="portrait" />
<div data-bb-type="action-bar" data-bb-tab-style="highlight">
<div data-bb-type="action" data-bb-style="tab" data-bb-img="images/actionBar/cog_dark_theme.png">Library</div>
<div data-bb-type="action" data-bb-style="tab" data-bb-selected="true" data-bb-img="images/actionBar/cog_dark_theme.png">Smart</div>
<div data-bb-type="action" data-bb-style="button" data-bb-img="images/actionBar/cog_dark_theme.png" onclick="alert('Find');">Find</div>
</div
</div>
</widget>

As you can tell, all I'm trying to do is what is called the action bar, See here https://github.com/blackberry/bbUI.js/wiki/Action-Bar

I can package the app, sign it and load it on to my Dev Alpha without a problem, but I don't get the action bar. Anything I'm doing wrong or missing?

Thanks in advance

**recompile** · 06-23-2012, 06:10 PM

Sorry, why is this:

Code:

<div data-bb-type="action-bar" data-bb-tab-style="highlight">
<div data-bb-type="action" data-bb-style="tab" data-bb-img="http://forums.crackberry.com/images/actionBar/cog_dark_theme.png">Library</div>
<div data-bb-type="action" data-bb-style="tab" data-bb-selected="true" data-bb-img="http://forums.crackberry.com/images/actionBar/cog_dark_theme.png">Smart</div>
<div data-bb-type="action" data-bb-style="button" data-bb-img="http://forums.crackberry.com/images/actionBar/cog_dark_theme.png" onclick="alert('Find');">Find</div>
</div
</div>

in your config.xml file?

This may help:

https://github.com/blackberry/bbUI.j...master/samples

**ignites** · 06-24-2012, 12:20 AM

lol i see u posted the same article on dev forum... Use the bb dev forum and do a search

it was asked a few times already.

**goku_vegeta** · 06-24-2012, 11:01 AM

Originally Posted by ignites

lol i see u posted the same article on dev forum... Use the bb dev forum and do a search

it was asked a few times already.

UPDATE: Well, I found that post in the BlackBerry Developer Forums, it had some useful information that's for sure. Now I'm stuck at the toolkit initialization x_x

My new source code is

<widget xmlns:rim="http://www.blackberry.com/ns/widgets" version="1.0.0" xmlns="http://www.w3.org/ns/widgets">
<name>Maps</name>
<content src="http://m.maps.nokia.com" />
<access subdomains="true" uri="http://m.maps.nokia.com"/>
<icon src="mapicon.png"/>
<rim

ermissions>
<rim

ermit>read_geolocation</rim

ermit>
</rim

ermissions>
<rim:loadingScreen backgroundImage="blackberry.png"
onFirstLaunch="true" />
<rim

rientation mode="portrait"/>
<rim:navigation mode="focus" />
<feature id="blackberry.system.event" />
<feature id="blackberry.app" />
<feature id="blackberry.app.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.2.css"></link>
<script type="text/javascript" src="bbui-0.9.2.js"></script>
<script type="text/javascript">

bb.init(onscreenready : function(bb10ActionBarDark:, true) {
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>
<div data-bb-type="title" data-bb-caption="Edit Contact" data-bb-back-caption="Cancel" data-bb-action-caption="Save" onactionclick="doSave()"></div>
</widget>

AND I'm still wondering what I'm doing wrong. In the zip archive I have my config.xml, bbui-0.9.2.css, bbui-0.9.2.js, blackberry.png, and mapicon.png. Now the application does successfully package, I can run it on the Dev Alpha but none of the UI elements are working. I know that it is necessary to actually initialize the toolkit but I'm not sure exactly what I'm supposed to do, you can see my attempt above in the source code. Keep in mind I'm a beginner at this so easy to follow or detailed instructions would be absolutely wonderful

Thanks for the help so far everyone

Yes I did

I figured I'd try both places and see what happens, I'll do a search though.

Originally Posted by recompile

Sorry, why is this:

Code:

<div data-bb-type="action-bar" data-bb-tab-style="highlight">
<div data-bb-type="action" data-bb-style="tab" data-bb-img="http://forums.crackberry.com/images/actionBar/cog_dark_theme.png">Library</div>
<div data-bb-type="action" data-bb-style="tab" data-bb-selected="true" data-bb-img="http://forums.crackberry.com/images/actionBar/cog_dark_theme.png">Smart</div>
<div data-bb-type="action" data-bb-style="button" data-bb-img="http://forums.crackberry.com/images/actionBar/cog_dark_theme.png" onclick="alert('Find');">Find</div>
</div
</div>

in your config.xml file?

This may help:

https://github.com/blackberry/bbUI.j...master/samples

Oh that was because I thought I had to reference the .png file for the action bar icons to show.