Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Contributor
docaholic
Posts: 41
Registered: ‎05-03-2012
My Device: Blackberry 10 Alpha, Blackberry Bold 9930
Accepted Solution

bbUI how-to

Hey guys,

 

I was wondering how to actually initialize bbUI; I seem to be having a bit of trouble...

 

So I have my app, which works correctly, but it looks horrible, since it's entirely on HTML5 and has none of the native UI aspects. I'm using bbUI, and declared the initialization and everything but I don't notice any difference.

 

In fact, if i put my application inside a <div data-bb-type="screen">, the entire screen (in Ripple) just appears blank, and nothing shows up.

 

How do I use use bbUI correctly?

 

Thanks in advance

 

 

Developer
rorybarnes
Posts: 214
Registered: ‎01-07-2011
My Device: Bold 9900

Re: bbUI how-to

Could you post some of your actual code? It is really difficult to help you debug without seeing what you are working with. 

R

--
Rory (@roryboy)
Click "Accept as Solution" if post solved your original issue. Give like/thumbs up if you feel post is helpful
Contributor
docaholic
Posts: 41
Registered: ‎05-03-2012
My Device: Blackberry 10 Alpha, Blackberry Bold 9930

Re: bbUI how-to

Oh sorry!

 

Well to start off my code looks like this:

 

<!-- to load webworks and initialize bbUI-->
<script>
      function ready() {
      };
      window.addEventListener("load", function(e) {
         document.addEventListener("webworksready", ready);
      }, false);
      bb.init();
</script>
 <div data-bb-type="screen">
        <div id="map"></div>
        <div id="footer">
            <input type="submit" name="loadForm" id="loadForm" value="Hail Taxi" onclick="hideMap()"/>
        </div>
        </script>
        <div id="contactForm" style="display:none">
            <form name="sendTaxi"> 
                <input type="tel" name="number" id="number" placeholder="phone"/> <br/>
                <input type="email" name="email" id="email" placeholder="email"/> <br/>
                <p> How to contact you: <p>
                <input type="radio" id="prefsms" name="contact" value="sms"/> Text Message <br/>
                <input type="radio" id="prefemail" name="contact" value="email" checked="checked"/> Email <br/>
                <select id="serviceType" name="serviceType">
                    <option value="Taxi">Taxi</option>
                    <option value="Limo">Limo</option>
                    <option value="Ladies">Ladies Only Taxi</option>
                    <option value="Handicap">Handicap</option>
                </select>
            </form>
            <input type="submit" name="SendHail" value="Send Hail" onclick="sendTaxiHail()"/>
        </div>
    </div>

 So just to sum it up, everything within the <div data-bb-type="screen"> </div> doesn't show up...

Developer
rorybarnes
Posts: 214
Registered: ‎01-07-2011
My Device: Bold 9900

Re: bbUI how-to

[ Edited ]

Thanks, just makes sure we are talking about the same thing

 

So your index.html file should look something like this:

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

 then main.html would look like:

<div data-bb-type="screen" data-bb-title="Main" data-bb-effect="fade">
        <div id="map"></div>
        <div id="footer">
            <input type="submit" name="loadForm" id="loadForm" value="Hail Taxi" onclick="hideMap();"/>
        </div>
        <div id="contactForm" style="display:none">
            <form name="sendTaxi"> 
                <input type="tel" name="number" id="number" placeholder="phone"/> <br/>
                <input type="email" name="email" id="email" placeholder="email"/> <br/>
                <p> How to contact you: <p>
                <input type="radio" id="prefsms" name="contact" value="sms"/> Text Message <br/>
                <input type="radio" id="prefemail" name="contact" value="email" checked="checked"/> Email <br/>
                <select id="serviceType" name="serviceType">
                    <option value="Taxi">Taxi</option>
                    <option value="Limo">Limo</option>
                    <option value="Ladies">Ladies Only Taxi</option>
                    <option value="Handicap">Handicap</option>
                </select>
            </form>
            <input type="submit" name="SendHail" value="Send Hail" onclick="sendTaxiHail();"/>
        </div>
    </div>

 Hopefully that helps point you in the right direction. The wiki for bbUI.js has much more detailed explainations of why things are done the way they are.

https://github.com/blackberry/bbUI.js/wiki

 

edit:

The above index.html is for PlayBook and SmartPhones, for BB10 it is slightly different to setup, instructions are here (https://bdsc.webapps.blackberry.com/html5/documentation/ww_getting_started/Getting_Started_with_BB10... 

--
Rory (@roryboy)
Click "Accept as Solution" if post solved your original issue. Give like/thumbs up if you feel post is helpful
Visitor
daneroo
Posts: 1
Registered: ‎05-10-2012
My Device: BB10 Alpha

Re: bbUI how-to

Has anyone managed to get a bbUI sample working on BB10.

 

I am following these instructions: but getting this Error as soon as I include

    <script src="js/libs/webworks.js"></script>

 

  Require Error No permission to load:

  pps for local:///chrome/index.html  


MD5 (js/libs/webworks.js) = 1ddf8066f1cd412df301399b92ccd405

webworks.js from  SDK-1.0.0.7

/Developer/SDKs/Research In Motion/BlackBerry 10 WebWorks SDK 1.0.0.7/Framework/clientFiles/webworks.js

Contributor
docaholic
Posts: 41
Registered: ‎05-03-2012
My Device: Blackberry 10 Alpha, Blackberry Bold 9930

Re: bbUI how-to

Yeah I can't seem to get it to work either....

 

As before, my map in my code sample above has now disappeared, and all I'm left with is a big blank spot where it's supposed to go :smileyfrustrated:

 

Anybody have any suggestions?

Developer
ignites
Posts: 466
Registered: ‎04-11-2012
My Device: Bold 9900

Re: bbUI how-to

some of the stuff needs to be invoked. like the CSS style sheet etc...

 

for example inorder to use the BBUI styling for button u need to name the class='bb-bb10-button-dark' for it to be invoked.


Developer for easyDial for BlackBerry Bold & inLink for BlackBerry PlayBook
Find me online via twitter, or on the techfruits.com webpage. Please hit the like button below if what I said helped!
Retired
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: bbUI how-to

I'm running the samples on both a PlayBook and BB10 device.  I typically use the WebWorks for Tablet OS SDK because the BB10 WebWorks SDK is still catching up on feature capability

 

https://github.com/blackberry/bbUI.js/tree/master/samples

 

The documentation also has a "The Basics" section that should talk about how to initialize the toolkit, and what an application structure looks like

 

https://github.com/blackberry/bbUI.js

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Contributor
docaholic
Posts: 41
Registered: ‎05-03-2012
My Device: Blackberry 10 Alpha, Blackberry Bold 9930

Re: bbUI how-to

Oh okay, thanks for the help; I seem to have it working now (at least on Ripple).

 

Just another question, is it possible to modify the SIZE of each button? Thanks!

Retired
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: bbUI how-to

At the end of the day it is all CSS so there should be a way for you to apply your own stylesheets by tracing through the JavaScript and CSS for the toolkit.  However any changes you make would be overwritten if you grabbed a newer version of the toolkit.

 

All the controls are sized based on User Experience guidelines for BlackBerry devices to create a consistent look and feel in your application so that it looks at home on a BlackBerry.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter