06-12-2012 03:02 PM
Im trying to recreate one of my apps into BB10 and I want to use Actionbars to navigate thru the app.
One problem im having is having the acctual action bar show up. I have the same code that hows in the ActionBar.htm in the sample folder that I got from https://github.com/blackberry/bbUI.js
but when i package and test the action bar wont show for my app but if i package the "sample app" the action bar shows.
Am I missing something?
Is it because in the smaple they use .htm and I use .html?
Thanks in advance
06-12-2012 06:26 PM
The htm vs. html suffix shouldn't really impact the functionality of your app. Can you please confirm which WebWorks SDK you are packaging with?
Also, would you be able to provide a simple HTML file that implements the action bar that we could use and test out? (i.e. a simple version of the file that is not working for you.)
06-12-2012 07:47 PM
http://ge.tt/m/8x5552J thats a working bar. Its suppost to have a backbutton under terms and a whole actionbar under novice.
You can try it on a pb or alpha.
Im using the lates sdk for the pb I think.
I package the sample bbui and send it to a pb and i see the actoon bar. but when i package mine it wont show up. Action shows but no bar or buttons.
06-13-2012 08:52 AM
Have you used Web Inspector to check for any runtime errors?
I can see the elements for your action bar displayed to the left of the "Novice" screen. They don't appear to be formatted correctly.
Looking at the source of your index.html file, I think I know why. I appears that there are some missing </div> tags, specifically, the following two <div> elements have no closing tag:
<div data-bb-type="screen" data-bb-effect="fade"> <div id="wrapper">
This would cause bbUI to be unable to transform the actionbar markup.
For the terms page, have you considered adding a title element instead, like the following? bbUI will automatically add a back button
<div data-bb-type="screen" data-bb-effect="fade"> <div data-bb-type="title" data-bb-caption="Terms" data-bb-back-caption="Back" ></div> ... </div>
Finally, as a suggestion, you can always create your own custom back buttons with the following snippet:
<div data-bb-type="button" onclick="bb.popScreen()">Press me to go Back</div>
06-13-2012 09:36 AM - edited 06-13-2012 09:36 AM
I have added more </div>'s but im still having the same problem. I have also added the Back button you created to see if that would work but still nothing. I still missing something?
http://ge.tt/1H54N4J/v/0?c <---new working bar
07-23-2012 02:30 AM
with bbUI.js 0.9.3 and up is there a way to have the back-button in the buttom as part of the action-bar in the bottom like shown in the first example here in the bbUI.js Wiki.
I tried something like:
<div data-bb-type="action-bar" data-bb-back-caption="Back"> <div data-bb-type="action" data-bb-style="button" data-bb-img="images/actionBar/cog_dark_theme.png" onclick="bb.pushScreen('test1.html', 'test1');">test1</div> </div>
But this seems to not work. Would be nice to not only have the example images in the Wiki, there should also be the sample source code for them to go on working with BB10 UI.
07-23-2012 11:31 AM - edited 07-23-2012 11:32 AM
Looks like you have that right. Here's a screen I used in one of my sample applications, can you give this a try in your application to see whether the back button is shown? Which SDK are you packaging with / which device are you testing on?
<div data-bb-type="screen" data-bb-title="Elements" data-bb-effect="fade"> <div data-bb-type="title" data-bb-caption="Elements" data-bb-back-caption="Back"></div> <div data-bb-type="round-panel"> <div data-bb-type="panel-header">Live DOM Changes</div> <div data-bb-type="panel-header">DOM Properties</div> <div data-bb-type="panel-header">Event Listeners</div> </div> </div>
EDIT: This is through the title, not an action bar. I'll try an action bar directly.