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
Contributor
Posts: 36
Registered: ‎05-04-2010
My Device: Storm
My Carrier: Verizon

Webapps development - page orientation and pages.

1) For web apps, is there a way to programatically prevent the Storm and/or Storm2 from changing orientation (i.e.  Portrait to Landscape)?    I would like to provide a webapp or widget that is always on Portrait mode.

 

2) Also, I notice that the blackberry maintains the list of pages loaded as in a stack, and when clicking the back button you always go to the previous page until there are no more pages to go. Then the app closes.  Is there a way in webapp development to programatically delete pages and only maintain the most current page?

Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Webapps development - page orientation and pages.

1) For web apps, is there a way to programatically prevent the Storm and/or Storm2 from changing orientation (i.e.  Portrait to Landscape)?    I would like to provide a webapp or widget that is always on Portrait mode.

Check out my latest Tip & Tricks post on how to make this happen Smiley Happy

http://supportforums.blackberry.com/t5/Web-Development/Tips-Quirks-and-Solutions/td-p/470870/page/2

 

2) Also, I notice that the blackberry maintains the list of pages loaded as in a stack, and when clicking the back button you always go to the previous page until there are no more pages to go. Then the app closes.  Is there a way in webapp development to programatically delete pages and only maintain the most current page?

Yes, the widget retains the history of the pages in its stack while it is running so that it can navigate back to the previous page by default.

 

What I typically do to improve load times, is create one main screen that loads my JavaScript/CSS and essentially a <div> placeholder to load in other screens.  When I want to load in a new screen, I simply load the local page via AJAX and replace the "innerHTML" of the <div> statement.  This means that the location of my loaded page never changes and creates no history entries.  

 

Most of my local pages that I load are simply ".html" files but they only contain <div> markup that I then load into my main page.

 

You also have the option of loading in page-by-page like you have mentioned, but you can then override the "Back Button" and produce your own logic when a user presses it.  

 

I also override the "Back Button" in my <div> example so that I can produce my own navigation schemes.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Developer
Posts: 482
Registered: ‎10-24-2008
My Device: 9300
My Carrier: AT&T

Re: Webapps development - page orientation and pages.

[ Edited ]

Sorry, mispost - Delete

_________________________________________
www.jasonmace.com/blackberry
Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Webapps development - page orientation and pages.

An example for doing this would be to have you main page that basically looks something like the following:

 

 

<html>
  <head>
  <script type="text/javascript">

    function doAJAXLoad(url) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open('GET',url,true); 
        
        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4) {
                document.getElementById('root').innerHTML = xmlhttp.responseText;       	
            }
        }    
        xmlhttp.send(null);
    }
  </script>
  </head> 
  <body> 
    <div id="root"></div>
    <br/>
    <button onclick="doAJAXLoad('localDir/localfile.htm')">Click Me</button>
  </body>
</html>

 

 

 

When someone clicks on on the button it will load the local widget page and replace the "root" <div> contents with the new contents.  It is super fast and doesn't require the browser to do the following if you were to navigate to another page:

 

1) Tear down the existing DOM

2) Garbage collect the old DOM structure

3) Load in the whole new page, parse the Page and recreate the new DOM structure

4) Load in any JavaScript and parse/compile it

5) Load in any CSS and parse and apply its contents to the DOM

 

The tearing down and re-loading of the browser contents from scratch takes a bunch of time.  It has to allocate memory and clean up from the last page. This can take some time on a mobile device.  Plus I only ever load and parse my JavaScript for the entire application once.

 

I typically create a "loading" div that has an animated loading icon while I am asynchronously loading the new content.

 

I also make sure that the local page that I am retrieving from AJAX only has a <div> statement in it.

 

Hopefully that helps.

 

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter