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
Trusted Contributor
sergiosandoval
Posts: 132
Registered: ‎02-17-2012
My Device: Bold 9900
My Carrier: AT&T

Action bars in Webworks

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

Please use plain text.
BlackBerry Development Advisor
oros
Posts: 1,523
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: Action bars in Webworks

Hi there,

 

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.)


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Please use plain text.
Trusted Contributor
sergiosandoval
Posts: 132
Registered: ‎02-17-2012
My Device: Bold 9900
My Carrier: AT&T

Re: Action bars in Webworks

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. 

Please use plain text.
Administrator
astanley
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: Action bars in Webworks

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>

 

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Please use plain text.
Trusted Contributor
sergiosandoval
Posts: 132
Registered: ‎02-17-2012
My Device: Bold 9900
My Carrier: AT&T

Re: Action bars in Webworks

[ Edited ]

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

Please use plain text.
Trusted Contributor
sergiosandoval
Posts: 132
Registered: ‎02-17-2012
My Device: Bold 9900
My Carrier: AT&T

Re: Action bars in Webworks

[ Edited ]

I've also copyed actionbar.htm into my page to see if it would work but it doesnt.

 

 

I still think im missing something....

Please use plain text.
Developer
Developer
LBP
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: Action bars in Webworks

Hi,

 

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.

 

Regards.


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
Please use plain text.
BlackBerry Development Advisor
oros
Posts: 1,523
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: Action bars in Webworks

[ Edited ]

Hi there,

 

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.


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Please use plain text.