04-17-2012 05:43 AM - edited 04-17-2012 05:52 AM
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:
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.
Solved! Go to Solution.
04-17-2012 06:10 AM
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.
04-17-2012 07:31 AM
04-17-2012 07:48 AM
04-17-2012 07:48 AM - edited 04-17-2012 07:53 AM
@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.
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:
04-17-2012 07:50 AM
04-17-2012 08:11 AM
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.
<a href="#" onclick="bb.pushScreen('menu.htm', 'menu');">Link</a>
<body onload="bb.pushScreen('menu.htm', 'menu');">
Hopefully this answers your questions.