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
Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

How To: Speed up page loads in WebWorks

Hi Everyone,

 

We've come across a little tweak for the WebWorks framework that you may be interested in that will give a better appearance of speed when navigating from URL to URL in a WebWorks application.

 

The intent for our <loadingScreen> capabilities was to make sure that something was shown while the content of the next screen was being fetched.  However the implementation for this is based on the assumption that the loading screen should only disappear once all of the content has been rendered in the page you are navigating to.

 

This code also affects an application that isn't using loading screens.  When you are moving from URL to URL between pages loaded in your application the framework will actually wait until all the content on the new screen has been fully rendered before it paints and shows the content.

 

If you would rather have the new content of the target URL progressively load and show the partial results before the page is fully rendered you can make a quick change in one of the WebWorks template Java files.

 

This will give more of an appearance of speed vs waiting.  It will be up to you on which type of experience you would like to give to your end user.

 

To make this change you can take the following steps:

 

Step 1: Locate the "BroserFieldScreen.java" file in your WebWorks SDK installation directory.

 

This is typically found in the following location if you are using the raw command line SDK or the Visual Studio WebWorks plug-in:  

 

C:\Program Files\Research In Motion\BlackBerry WebWorks Packager\device_templates\blackberry\web\widget\bf

 

If you are using the WebWorks Plug-in for Eclipse your path will likely be:

 

C:\Program Files\BlackBerry WebWorks Plug-in Eclipse\plugins\net.rim.browser.tools.wcpc_1.5.1.201010291444-22\wcpc\device_templates\blackberry\web\widget\bf

 

 

Step 2: Modify the file

 

FIRST: Back-up this file somewhere for safe keeping

 

The change that needs to be made is a very simple one.. it is essentially removing the conditional paint flag in this file.  Typically this file is marked as read-only so you will want to change this file flag so you can save your changes

 

You will now need to locate the following method:

 

 

    /* Paints a bgcolor if the page is not loaded yet */
    protected void paint(Graphics graphics) {
        if(_loaded){          
            super.paint(graphics);
        }
    }

 And then you are going to comment out the following lines:

 

    /* Paints a bgcolor if the page is not loaded yet */
    protected void paint(Graphics graphics) {
        //if(_loaded){          
            super.paint(graphics);
       // }
    }

 

 

Step 3: Save and Test

 

First save the changes to this file.  You can now re-build one of your applications to see how it affects the user experience.

 

Note:

This change is really only going to affect applications that navigate between URLs for multiple pages to load.  It will not affect applications that use one single page and then utilize AJAX and DHTML to update the single page.

 

 

Hopefully this is helpful Smiley Happy

 

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Developer
Posts: 1,055
Registered: ‎01-25-2009
My Device: BlackBerry Bold 9650/BlackBerry Torch 9800

Re: How To: Speed up page loads in WebWorks

Tim,

 

Thanks for this helpful tip. Would this help with initial application load as well (even if it is a single-paged AJAX-driven app)?

Jerome Carty - Follow jcarty on Twitter@jcarty | #webworks-dev / #BlackberryDev on irc.freenode.net | My Apps
Click "Accept as Solution" if post solved your original issue.. Give like/thumbs up if you feel post is helpful
Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: How To: Speed up page loads in WebWorks

Possibly.. it would depend on the application and where you were running your scripts.. if they are inline or if you are doing a setTimeout() to ensure they don't block the rendering thread of the content.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Developer
Posts: 37
Registered: ‎01-18-2011
My Device: Huron 8800
My Carrier: IM3

Re: How To: Speed up page loads in WebWorks

It's still unclear for me. So, if I want to utilize the startup loading screen technique, i have to put my initialization script inside another thread by using setTimeout()?
Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: How To: Speed up page loads in WebWorks

What I'm trying to say is that I don't know if this change will give you the affect that you are hoping for.  The only way to know for sure is make the change and see if it gives you the desired results.

 

We have only tried this change out to see if it gives the desired results for navigating from page to page within an application for a specific scenario.  Whether or not you are happy with the way it works is entirely a preference decision.

 

For loading HTML in general into a web browser, having JavaScript inline before the onload and also JavaScript in the onload, the web page will not perform its initial rendering until the JavaScript thread ends.  

 

Therefore, if you have code that needs to run on the page load, and you don't want it to block the initial rendering of the HTML, you should call your code using a setTimeou().  This will cause the JavaScript thread to terminate, thus allowing the exiting HTML to be rendered to the user.

 

These are things to take into consideration for the initial page for your WebWorks application.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Developer
Posts: 37
Registered: ‎01-18-2011
My Device: Huron 8800
My Carrier: IM3

Re: How To: Speed up page loads in WebWorks

Thanks a lot for the detailed answer, so i just have to set the onload on body or having inlinescript before the onload to mimic the startup behavior.