BBUI.js actionBar and actionMenu

**Tobster619** · 01-26-2013, 03:23 PM

Hello,

I have already created my app (A currency converter) using HTML5 WebWorks and everything works fine but what I'm really looking for is 'the native blackberry look-and-feel' that BBUI.js offers. The problem I'm having is where to I put the code needed to create an actionBar and an actionMenu with sharing options within my index.html file or my home.html file (This is my first page that gets loaded on opening). I'm having this problem because I didn't really understand the tutorial in the github wiki and when I follow the tutorial on opensourcebb

and run the app in Ripple Emulator no pictures are shown much like in the image that I have attached.

I'm also looking into creating an update function and linking the code to a server or using an api to retrieve exchange rates (so that I don't have to do it manually when the rates change)

[If needed I will attach my .zip file of my whole application incase someone can help]

Any help would be very much appreciated.

Thanks in advance!

**mikeo007** · 01-26-2013, 05:20 PM

I've had nothing but trouble trying to get BBUI.js working in Ripple. I know it's doable, but Chrome is a PITA sometimes.
The easiest way to see the BBUI.js stuff in action is to download the entire sample at: https://github.com/blackberry/bbUI.j...master/samples
Package it in ripple as is, and run it on the simulator.

If you want to try some of it on your own, keep the skeleton from the sample (delete all the .htm files except index and menu). Menu.htm in this case is where your main content will go, since Index.htm is just the initialization file for the app.

**jeroen_13** · 01-26-2013, 05:46 PM

First of all, please run some demo apps first.

You see that the base of every app is; Index.htm

In the index.htm you'll find; all the folders, javascripts and styling paths.

You also will see this line of code;

<Body onload="bb.pushScreen('menu.htm','menu')"></body>

The menu.htm is the file where you want to add your codes to.
BB.pushScreen means; it executes the menu.htm on top of the index.htm (with the styling). Without the index.htm the menu has no styling.

So run the base of your app, and the styling should be applied

**Tobster619** · 01-26-2013, 06:09 PM

Originally Posted by jeroen_13

First of all, please run some demo apps first.

You see that the base of every app is; Index.htm

In the index.htm you'll find; all the folders, javascripts and styling paths.

You also will see this line of code;

<Body onload="bb.pushScreen('menu.htm','menu')"></body>

The menu.htm is the file where you want to add your codes to.
BB.pushScreen means; it executes the menu.htm on top of the index.htm (with the styling). Without the index.htm the menu has no styling.

So run the base of your app, and the styling should be applied

In my index.html file I have these lines of code:

"bb.pushScreen('home.html', 'home');
}, false);"

Should I change where it says false to true? And all of my content for the app should be in my home.html file?

**jeroen_13** · 01-27-2013, 03:37 AM

All your content should be in the home.htm . I'll send you a sample in about 2hrs

edit; i created a sample for you

Download samples.zip

**Tobster619** · 01-27-2013, 06:49 AM

Originally Posted by jeroen_13

All your content should be in the home.htm . I'll send you a sample in about 2hrs

edit; i created a sample for you

Download samples.zip

Thanks for doing this for me, I now see what I have to do. Could I send you my .zip file to see if I have put everything in correctly?

**jeroen_13** · 01-27-2013, 07:36 AM

Yea sure. Just send it

**Tobster619** · 01-27-2013, 07:56 AM

Here it is, I have updated my config.xml as well. Have I done everything correctly and is there anything else I need to do or add? Thanks again for this

**jeroen_13** · 01-27-2013, 09:19 AM

it looks good, but you've to add all your <javascript> coding in a seperate .js file , and add this to your index.htm <script scr="linktoyourjs.js"></script>

btw i saw your 'to do list'

the portrait mode only ;
BB10

Code:

<feature id="blackberry.app">
    <param name="orientation" value="portrait" />
</feature>

Playbook

Code:

<rim:orientation mode="portrait"/>

also; the 'auto updater'
you stored the current values in a <javascript> area, so if you put those values in a seperate .js file, you can upload that to a webhosting. via the webhosting you can change the value, because the app will get the values from the internet (your server)

Jeroen

edit; change the

Code:

<access uri="http://chart.apis.google.com" subdomains="true" />

to

Code:

<access uri="*" subdomains="true" />

with the "*" it is allowed to acces every domain. usefull for getting info from a server

**Tobster619** · 01-27-2013, 09:57 AM

Hello, I have added the bits you said to add in, but since all of the code has been added I have lost my styling from my 'styles.css' file and have no idea how to put it back in because I tried: <script src="styles.css"></script> but that hasn't worked. So, could you take another look at my menu.html file and see where I can put it back in so that the menu.html file reads h1, h2 and h3 from the styles.css file?

Thanks for this

**jeroen_13** · 01-27-2013, 10:22 AM

Replied via pm

**Tobster619** · 01-27-2013, 12:18 PM

Latest .zip

**jeroen_13** · 01-27-2013, 12:29 PM

Originally Posted by Tobster619

Latest .zip

its really messed up... i'll rebuild the app as how it is supposed to be build. should be done within 30minutes

**Tobster619** · 01-27-2013, 12:45 PM

Originally Posted by jeroen_13

its really messed up... i'll rebuild the app as how it is supposed to be build. should be done within 30minutes

Sorry about that, but thanks

**jeroen_13** · 01-27-2013, 01:05 PM

rewritting the app... wont work...
the currency converter itself doesnt work. the currency input doesnt work. cant enter a value to be converted

the menubar now works correctly

http://updo.nl/file/cacb6650.zip

**Tobster619** · 01-27-2013, 01:09 PM

That's a bit weird, it works on the version I have now, I'll see what I can do. But thanks for getting the actionBar to work

**jeroen_13** · 01-27-2013, 01:19 PM

Originally Posted by Tobster619

That's a bit weird, it works on the version I have now, I'll see what I can do. But thanks for getting the actionBar to work

bbui.js doesnt really like other styles / custom javascript extensions. not everything will work without some heavy modification

**SCrid2000** · 01-27-2013, 05:02 PM

[QUOTE=jeroen_13;7888088
You also will see this line of code;
<Body onload="bb.pushScreen('menu.htm','menu')"></body>
[/QUOTE]
Actually, that line hasn't been used for a long time in bbUI.

**SCrid2000** · 01-27-2013, 05:04 PM

Originally Posted by Tobster619

In my index.html file I have these lines of code:

"bb.pushScreen('home.html', 'home');
}, false);"

Should I change where it says false to true? And all of my content for the app should be in my home.html file?

No. That false is for something else.

**SCrid2000** · 01-27-2013, 05:05 PM

Originally Posted by jeroen_13

bbui.js doesnt really like other styles / custom javascript extensions. not everything will work without some heavy modification

You can use custom CSS/JS, you just have to load it from the index.html (I use html rather than htm, no difference really though) and not from the child documents.
Every file other than the index file in bbUI is actually a single div that's dynamically loaded into the index when it's requested.

**SCrid2000** · 01-27-2013, 05:07 PM

Originally Posted by jeroen_13

All your content should be in the home.htm . I'll send you a sample in about 2hrs

edit; i created a sample for you

Download samples.zip

That sample doesn't use anything in the css/js folders, or in the images folder (except the icon); you should probably delete those to avoid confusion

**Tobster619** · 01-28-2013, 10:26 AM

Originally Posted by SCrid2000

That sample doesn't use anything in the css/js folders, or in the images folder (except the icon); you should probably delete those to avoid confusion

Hello, how would I get BBUI to load all of my pages? As it loads the menu.html file which has action bars but as soon as I click a tab to go somewhere else the actionBars are no longer there even though I have the code in the html files. Could you check out two version of my app please?

One was altered for me by jeroen_13 so that the actionBars would actually work but the currency converter doesn't function when it is put into a separate .js file.
And I have my original which the actionBars don't work on but the currency converter does

Would you mind checking them out to see how the styling could be sorted so that it looks like it's supposed to in the original? Any help would be appreciated.

[- My original one is called 'Currency Converter'
- The one alterted by jeroen_13 is called 'Currency']