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
Developer
Posts: 124
Registered: ‎07-11-2011
My Device: 8900
My Carrier: Airtel
Accepted Solution

Transition between the screens to WebView White flickers Issues

Hi All,

 

Application architecture: HTML/JS/CSS hosted on a HTTPS URL in a web server.

 

The BB10 app is packaged to invoke this URL and launch the pages in the app.

 

Below is the content of config.xml file:

<?xml version="1.0" encoding="utf-8"?>
<!--
 Copyright 2012 Research In Motion Limited.

 Licensed under the Apache License, Version 2.0 (the "License");  you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

 http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software  distributed under the License is distributed on an "AS IS" BASIS,  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and  limitations under the License.
-->
<widget xmlns="http://www.w3.org/ns/widgets"
        xmlns:rim="http://www.blackberry.com/ns/widgets"
        version="1.0.0"
        id="Dropbox_app">
    <name>Dropbox</name>
    <content src="index.html" /> 
  <!--   <content src="loader.html" />  -->
	
	<author>DropboxApproval</author>
	<icon rim:hover="false" src="images/icon.png" />
	<icon rim:hover="true" src="images/icon.png" />
    <description>Loading...</description>
    <license href="http://www.apache.org/licenses/LICENSE-2.0">
        Licensed under the Apache License, Version 2.0 (the "License");
        you may not use this file except in compliance with the License.
        You may obtain a copy of the License at
            http://www.apache.org/licenses/LICENSE-2.0
        Unless required by applicable law or agreed to in writing, software
        distributed under the License is distributed on an "AS IS" BASIS,
        WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
        See the License for the specific language governing permissions and limitations under the License.
    </license>
	<feature id="blackberry.io" required="true" version="1.0.0.0">
	                <param name="websecurity" value="disable" />
	</feature>
    <feature id="blackberry.io.filetransfer" required="true" version="1.0.0.0">
	                <param name="websecurity" value="disable" />
	</feature>
    <feature id="blackberry.invoke" required="true" version="1.0.0.0"></feature>
	<feature id="blackberry.invoke" required="true" version="1.0.0.0"></feature>
		
		<feature id="blackberry.ui.menu" />
		<feature id="blackberry.ui.dialog"/>
		<feature id="blackberry.identity" />
		<feature id="blackberry.system.event" />
		<feature id="blackberry.app.event"/>
		<feature id="blackberry.ui.contextmenu"/>
		  <feature id="org.apache.cordova.inappbrowser.InAppBrowser" required="true" version="1.0.0" />
		  <feature id="blackberry.app" required="true" version="1.0.0.0">
	<!-- <param name="backgroundColor" value="0xff262626" />
	<param name="orientation" value="portrait" /> -->
		</feature>
	<preference name="websecurity" value="disable" />
	
	
	<access uri ="*"/>
	
</widget>

 Below is the content of index.html file:

<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <script src="local:///chrome/webworks.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
   <script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>
    <script>
	window.location = "https://dl.dropboxusercontent.com/u/assets/index.html";
	</script>
    
</head>
<body>
<div id="container">	
       
    </div>
    
</body>
</html>

 Now, while navigating to index.html file, it's showing white screen as follows:

This may be due to network latency or loading javascrip and css in HTML page.I have found below two post related to white screen:

https://github.com/blackberry/BB10-WebWorks-Framework/issues/202

https://github.com/blackberry/BB10-WebWorks-Framework/issues/244

 

Is there any way to put activity indicator type of thing on this webview.

One solution is i am thinking or trying to load all my JS and css after body tag.

 

Please help me to overcome this.It''s very urgent.

Thanks in advanceSmiley Happy

whiteScreen.png

Retired
Posts: 1,561
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: Transition between the screens to WebView White flickers Issues

You are correct, the WebView is loading new content which includes destroying the current document, creating a new document, and populating that document with the content of the new URL. Being an external URL, there are download times which will affect the duration of the white-screen.

Using an AJAX-based navigation system (i.e. asynchronously fetch content and replace the content on the *existing* document) would allow for both an activity indicator (since the document isn't being destroyed, you can add HTML5 functionality during loading) and minimize the display of any white-screen (since you only replace the content once it's all ready to go.)

Without a valid document (between separate page loads currently) you won't be able to render any type of loading screen.

There are a number of UI frameworks that enable this type of AJAX navigation.

Alternatively, you could set the <content> of your config.xml to point at the remote document right from the start, removing the middle-man index.html packaged with your application. If that would suit your needs.

Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Developer
Posts: 124
Registered: ‎07-11-2011
My Device: 8900
My Carrier: Airtel

Re: Transition between the screens to WebView White flickers Issues

Thanks for your quick reply.

By Ajax based navigation system, you mean define all pages blank div in one local HTML page and populate content of div after getting reponse using ajax navigation system.

 

Can you please share some gitHub repository sample link which excatly using mentioned approach.

 

One doubt, i had is that Application architecture is HTML/JS/CSS hosted on a HTTPS URL in a web server.Same thing is working fine on Iphone and Ipad without white screen but not on BB10 and lowerversion.

 

Waiting for your response.

Developer
Posts: 124
Registered: ‎07-11-2011
My Device: 8900
My Carrier: Airtel

Re: Transition between the screens to WebView White flickers Issues

[ Edited ]

Plaese help me to resolve out above issue.It''s very urgent.

Thanks in advanceSmiley Happy

Highlighted
Retired
Posts: 1,561
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: Transition between the screens to WebView White flickers Issues

BBUI uses an Ajax based approach to navigation, however it isn't exactly cross-platform (dependant on BlackBerry APIs):

https://github.com/blackberry/bbUI.js/

 

jQuery Mobile does also have this approach implemented.

http://demos.jquerymobile.com/1.0a4.1/docs/pages/docs-navmodel.html

 

A more complete list can be found here:

http://en.wikipedia.org/wiki/List_of_Ajax_frameworks#JavaScript

 

Unfortuanately I'm not sure of a library that can just be "included" and take over with everything being Ajax-based navigation. You need to code your application based on a chosen framework's process.

 

I don't have an example of doing this directly with pure HTML/JS. If all of your "pages" are located in the same document, it's simply a matter of showing one/hiding the next (or replacing a common "visible" div with the content from another.) If your pages are located in separate files, you'd need to load those files programmatically, then insert them into the "visible" div.

 

On other platforms, are they requesting the web resourced from an external location as well? If so, it's likely just that the process is a little different from BB10 in terms of when the document is destroyed / new document is presented. 


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Developer
Posts: 124
Registered: ‎07-11-2011
My Device: 8900
My Carrier: Airtel

Re: Transition between the screens to WebView White flickers Issues

Thanks for your support.