1. goku_vegeta's Avatar
    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
    06-23-12 03:14 PM
  2. recompile's Avatar
    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
    06-23-12 06:10 PM
  3. ignites's Avatar
    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.
    06-24-12 12:20 AM
  4. goku_vegeta's Avatar
    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"/>
    <rimermissions>
    <rimermit>read_geolocation</rimermit>
    </rimermissions>
    <rim:loadingScreen backgroundImage="blackberry.png"
    onFirstLaunch="true" />
    <rimrientation 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.


    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.
    Last edited by goku_vegeta; 06-24-12 at 11:55 AM.
    06-24-12 11:01 AM
LINK TO POST COPIED TO CLIPBOARD