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
Highlighted
Contributor
Posts: 17
Registered: ‎11-19-2010
My Device: Nexus One
My Carrier: Vodafone
Accepted Solution

Page structure: All in one HTML, or separate files?

[ Edited ]

What is the right way to design the page structure of a WebWorks app? I'm using jQuery-mobile as well.

 

A: Should all the pages be in a single HTML, each page being a:

 

<div data-role="page">...</div>

 

B: Should pages be separated in different HTML files linking to each other?

 

I am currently using approach A, but the app is a slow when transitioning from a page to another. I suspect one of the reasons is the size of the single HTML that includes all pages.

 

Also another issue I'm having is that pressing the physical "back" button on the phone exits the app which is another reason I'm doubting my approach in having all pages in one HTML.

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

Re: Page structure: All in one HTML, or separate files?

Check out bbUI.js - it is  fairly light-weight framework specifically for webworks. (https://github.com/blackberry/bbUI.js)

 

You start with your index.html page, from there each page is loaded in as you call it. It takes care of pushing or poping the page + JS + CSS out of memory so you keep your memory footprint low. This is also the recommended way of dealing with pages rather than having all your stuff on one page.

 

It also handles the back button for you. The default behaviour on the first page of an app is to exit the app unless you trap it and tell it what to do. With bbUI it cycles back through your pages.

--
Rory (@roryboy)
Click "Accept as Solution" if post solved your original issue. Give like/thumbs up if you feel post is helpful
Developer
Posts: 817
Registered: ‎11-19-2009
My Device: Z10, Q10, 9900, 9790, PlayBook,
My Carrier: T-Mobile UK, Three, O2, Orange, Sunrise, Swisscom

Re: Page structure: All in one HTML, or separate files?

I'm guessing your question is about building apps for smartphones?

--
Olivier - interfaSys ltd
Developing for BlackBerry 10 devices using the Sencha Touch framework.
Contributor
Posts: 17
Registered: ‎11-19-2010
My Device: Nexus One
My Carrier: Vodafone

Re: Page structure: All in one HTML, or separate files?

@Olivier: Yes, my question is about building apps for smartphones and also BlackBerry playbook.

Developer
Posts: 817
Registered: ‎11-19-2009
My Device: Z10, Q10, 9900, 9790, PlayBook,
My Carrier: T-Mobile UK, Three, O2, Orange, Sunrise, Swisscom

Re: Page structure: All in one HTML, or separate files?

On the PlayBook, I wouldn't bother with separate HTML files. I would go for one index.html file and one JS file per JS class. It makes it easier to work on your code.
--
Olivier - interfaSys ltd
Developing for BlackBerry 10 devices using the Sencha Touch framework.
Contributor
Posts: 17
Registered: ‎11-19-2010
My Device: Nexus One
My Carrier: Vodafone

Re: Page structure: All in one HTML, or separate files?

[ Edited ]

@Rory: bbUI looks very promsing. However I have two concerns:

 

1. Is bbUI compatible with jQuery mobile? My worry is that they conflict in handling user inputs and especially page transitions.

 

2. Will this mean that everytime a new page is shown jQuery mobile's javascript is reloaded? And the rest of javascripts?

 

Also how does bbUI compare to jQuery mobile's own way of loading external pages via Ajax?

 

Here is the link to jquery way of linking pages:


http://jquerymobile.com/demos/1.1.0/docs/pages/page-links.html 

Contributor
Posts: 17
Registered: ‎11-19-2010
My Device: Nexus One
My Carrier: Vodafone

Re: Page structure: All in one HTML, or separate files?

@Olivier: Sure. On PlayBook I see good enough performance when dumping all the pages in one single HTML file. But I'm looking for a single solution that works well for both smartphones and the playbook.
Developer
Posts: 817
Registered: ‎11-19-2009
My Device: Z10, Q10, 9900, 9790, PlayBook,
My Carrier: T-Mobile UK, Three, O2, Orange, Sunrise, Swisscom

Re: Page structure: All in one HTML, or separate files?

I fully understand Smiley Happy. Good luck!

--
Olivier - interfaSys ltd
Developing for BlackBerry 10 devices using the Sencha Touch framework.
Developer
Posts: 214
Registered: ‎01-07-2011
My Device: Bold 9900
My Carrier: Rogers

Re: Page structure: All in one HTML, or separate files?

I haven't actually tried using bbUI with jQuery Mobile since JQM was at version 0.8.x, but it didn't go so well. What are you using JQM for in your app? You might be able to drop it and use straight jQuery or maybe even Zepto.

 

You can load CSS/JS with bbUI in two places, one in your index.html, which is available to all pages all the time, it is not cleaned up until your app exits. Or you can load it on page basis which is added and removed with the page.

 

bbUI loads a page via onload or onclick which is a different style than JQM. The pages other than index.html don't need to be full html pages, they just contain the content you want to load into the index.html as that is what it is doing.

i.e. 

<a href="#" onclick="bb.pushScreen('menu.htm', 'menu');">Link</a>

or

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

Hopefully this answers your questions.

--
Rory (@roryboy)
Click "Accept as Solution" if post solved your original issue. Give like/thumbs up if you feel post is helpful