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

Re: Tips, Quirks and Solutions

[ Edited ]

Area: BlackBerry Browser

Found on: v5.0 

 

RECOMMENDATION 

 

 

It is recommended that you add/remove the animated GIF <img> tag to your DOM structure if you wish to toggle its visibility instead of toggling its visibility via the "visibility" or "display" CSS attributes.  This will ensure that there is no possible way that the long running animation will drain battery or consume CPU power when not visible.

 

An example of toggling a animated GIF's visibility can be found below:

 

 

<html>
	<head>
	    <meta name="viewport" id="viewport" content="initial-scale=1.0,user-scalable=no" />
		<title>Untitled Page</title>
		<script type="text/javascript">
		    var _animation = null;
		    var _visible = false;
		    
		    function loadAnimation() {
		        if (_animation == null) 
		            _animation = document.getElementById('animation');
		            
		       _animation.innerHTML = "<img src='loading.gif' />";
		        _visible = true;
		    }
		    
		    function unloadAnimation() {
		        if (_animation == null) 
		            _animation = document.getElementById('animation');
		        _animation.innerHTML = "";
		        _visible = false;
		    }
		    
		    function buttonClick() {
		        if (_visible)
		            unloadAnimation();
		        else
		            loadAnimation();
		    }
		
		</script>
	</head>
	<body onload="loadAnimation();">
        <div id="animation"></div>
        <br />
        <button onclick="buttonClick()">Click Me</button><br />
	</body>
</html>

 

 

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Please use plain text.
BlackBerry Development Advisor
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Tips, Quirks and Solutions

[ Edited ]

Area: BlackBerry WebWorks

Found on: v5.0.0.x

 

Issue:

If you have a WebWorks app that you want to be locked to PORTRAIT only or LANDSCAPE only for a Storm device you cannot stop the orientation from changing when the user moves their device.

 

Solution:

You can make a very small change to the WebWorks template files to accomplish this.  However these changes will affect all WebWorks apps that you package with the WebWorks SDK unless you remove the changes later from the templates.

 

WARNING:  Please make a back-up copy of your "device_templates" directory before performing the below actions.

 

Step 1) Browse to the "device_templates" directory of your BlackBerry WebWorks SDK.  This directory is typically found in "[DRIVE]:\InstallDir\BlackBerry WebWorks Packager\device_templates"

 

Step 2) Open up the "Widget.java" file found in this directory in a text editor.

 

Step 3) Make the below changes in the Widget.java file.  The changed lines of code are highlighted below:

 

 

public Widget(WidgetConfig wConfig) {
        _wConfig = wConfig;
        initialize();
        
        int directions = net.rim.device.api.system.Display.DIRECTION_PORTRAIT;    net.rim.device.api.ui.Ui.getUiEngineInstance().setAcceptableDirections(directions);
  
        // Create PageManager
        PageManager pageManager = new PageManager(this, (WidgetConfigImpl) _wConfig);
        
        // push screen
        WidgetScreen wScreen = new BrowserFieldScreen(this, pageManager);
        pageManager.pushScreens((BrowserFieldScreen)wScreen);
    }    

 

Step 5) Run your app and enjoy the cool locked orientation :smileyhappy:

 

The direction you wish to lock your screen to is set on the "directions" local variable.  This value can be one of the following:

- net.rim.device.api.system.Display.DIRECTION_NORTH
- net.rim.device.api.system.Display.DIRECTION_SOUTH
- net.rim.device.api.system.Display.DIRECTION_EAST
- net.rim.device.api.system.Display.DIRECTION_WEST
- net.rim.device.api.system.Display.DIRECTION_LANDSCAPE
- net.rim.device.api.system.Display.DIRECTION_PORTRAIT

 

- net.rim.device.api.system.Display.DIRECTION_NORTH

- net.rim.device.api.system.Display.DIRECTION_SOUTH

- net.rim.device.api.system.Display.DIRECTION_EAST

- net.rim.device.api.system.Display.DIRECTION_WEST

- net.rim.device.api.system.Display.DIRECTION_LANDSCAPE

- net.rim.device.api.system.Display.DIRECTION_PORTRAIT

 

Non-Storm/Torch devices will ignore this flag.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Please use plain text.
BlackBerry Development Advisor
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Tips, Quirks and Solutions

[ Edited ]

Area: BlackBerry Browser Engine

Found on: 5.0 on builds below 5.0.0.469

 

Issue:

If you have nested <div> elements the font style will not cascade down to child <div>'s on "hover".  This is always a useful capability when providing "highlights" for when a user has an item focused in a list.

 

Solution:

This cascading style does work starting, from what I can tell, OS version 5.0.0.469.  Below you will find an example on how to structure your HTML, CSS and JavaScript so that you can take advantage of this capability on newer versions of the 5.0 operating system while still providing similar experiences on an older version.

 

 

<html>
	<head>
	    <meta name="viewport" id="viewport" content="initial-scale=1.0,user-scalable=no" />
	    <meta name="x-blackberry-defaultHoverEffect" content="false" /> 
		<title>Hover Sample</title>		
		<style type="text/css">
		    
		    html, body  { 
	            padding: 0px;
	            margin: 0px;
	            overflow: hidden;
	            font-family: BBAlpha-Sans;
	            font-size:17pt;
            }
		
		    .listItem {
	            color: Black;
	            border-bottom: 2px solid #DEDEDE;
	            overflow: hidden;
	            padding: 5 0 5 0;
            }
            
            .title {
	            color:inherit;		
	            font-weight:normal;
	            font-size: 15pt;
	            margin: 0;
	            padding: 0;
            }

            .description {
	            font-size: 13pt;
	            margin: 1px;
	            padding: 0;
            }

            .listItem:hover .description {
	            color:inherit;	
            }
            
		</style>
		
		<script type="text/javascript">
		    function versionCheck(){
		        // Aquire our version
		        var array = navigator.appVersion.split(' ');
		        var os = new Object();
	            var parts = array[0].split('.');
	            os.major = parseInt(parts[0]);
	            os.minor = parseInt(parts[1]);
	            os.release = parseInt(parts[2]);
	            os.build = parseInt(parts[3]);
	            
	            // Create our dynamic style tag
	            var style = document.createElement("style")
		        style.setAttribute("type", "text/css")

	            // Check if it is 5.0.0.469 or above
	            if (os.major == 5 && os.minor == 0 && os.build >= 469) {
                    style.innerHTML = ".listItem:hover {color: White;background-color: #1865DE;}" + 
                    ".description {color: #4A4A4A;}";
	            }
	            else {
	                // Use a lighter shade
		            style.innerHTML = ".listItem:hover {background-color: #88BBFF;}";
		        }
		        
		        // Append our style
		        document.getElementsByTagName("head")[0].appendChild(style)
		    }
		</script>
		
	</head>
	<body onload="versionCheck()">
        <div class="listItem" x-blackberry-focusable="true">
            <p class="title">Sample Title 1</p>
            <p class="description">This is a quick description</p>
        </div>
        <div class="listItem" x-blackberry-focusable="true">
            <p class="title">Sample Title 2</p>
            <p class="description">Another description</p>
        </div>
        <div class="listItem" x-blackberry-focusable="true">
            <p class="title">Sample Title 3</p>
            <p class="description">A third description</p>
        </div>
	</body>
</html>

 

 

An example of what this highlight would look like on an build of 5.0 that does not support the cascade is as follows:

1948i3A5C459046CDCD8C

 

 

An example of what the highlight looks like on a build of 5.0 that supports the cascade.

1949i799BF696D4ECD8BD

 

 

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Please use plain text.
New Contributor
ChrishJhonEx
Posts: 4
Registered: ‎06-06-2010
My Device: Blackberry Storm 9500 Unlocked
My Carrier: vodafone

Re: Tips, Quirks and Solutions

hi nice thread for troubleshooting i'm bookmarking it for refrence, thanks for great sharing.

Please use plain text.
o0
Contributor
o0
Posts: 26
Registered: ‎05-13-2010
My Device: developper...
My Carrier: developper...

Re: Tips, Quirks and Solutions

On the image rollover subject, I just noticed that while changing the background-image: url() does not work, changing the background image offset seems to work fine.

 

This means that you can create rollover images by saving both images in a single sprite either side by side or one on top of the other, and use the pseudo selector hover to shift the image up or sidwways to reveal the other version.

 

This is a good example of the technique:

 

http://www.threestyles.com/tutorials/coding-apples-navigation-bar-using-css-sprites/

 

oO

Please use plain text.
BlackBerry Development Advisor
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Tips, Quirks and Solutions

Hi oO,

 

You are absolutely correct.  The trick to getting your background image to re-paint is by either adjusting the size of the dom element, or changing the position of the background image.

 

I've added some examples of this in the "Cool UI Examples" thread:

 

http://supportforums.blackberry.com/t5/Web-Development/Some-Cool-UI-Examples/td-p/519868

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Please use plain text.
Developer
abarber
Posts: 189
Registered: ‎08-13-2008
My Device: Not Specified

Re: Tips, Quirks and Solutions

Area: BlackBerry Simulators

Found on: All

 

When working with the Blackberry simulators, to stop the Backlight timeout from blacking out the screen after 2 mins (max).

 

Add this to the simulator bat file.

/JvmDisableBacklightTimeout

 

E.g.

 

@echo off
fledge.exe /app=Jvm.dll /handheld=8900  /session=8900  /app-param=DisableRegistration /app-param=JvmAlxConfigFile:8900.xml /data-port=0x4d44 /data-port=0x4d4e /pin=0x2100000A /JvmDisableBacklightTimeout

 

Bat file can be found here (For example)

C:\Program Files\Research In Motion\BlackBerry Smartphone Simulators 5.0.0\5.0.0.411 (8900)

 

 

Cheers

 

Andrew

 

 

 

 

Please use plain text.
New Developer
emichaels
Posts: 8
Registered: ‎04-21-2010
My Device: BlackBerry Tour 9630
My Carrier: Sprint

Re: Tips, Quirks and Solutions

[ Edited ]

Area: BlackBerry WebWorks

Found on: 5.0.0.x

 

Issue:

Currently, there is no way to configure a WebWorks app to auto-run on startup. 

 

Solution:

Please see my proposed workaround using VS 2008 in this thread:

 

http://supportforums.blackberry.com/t5/Web-Development/Start-Widget-in-Background/m-p/539852#M5909

 

This workaround will allow the Widget to auto-run upon installation and upon startup.   

 

Please add a kudo if this solution works for you!  :smileywink:

 

************************ UPDATE *****************************

WebWorks now supports auto-run on startup.  See the developer guides on how to make this work for your application:

 

http://docs.blackberry.com/en/developers/subcategories/?userType=21&category=BlackBerry+WebWorks+SDK...

Please use plain text.
New Contributor
m7zhao
Posts: 5
Registered: ‎09-13-2010
My Device: Bold 9700
My Carrier: Rogers

Re: Tips, Quirks and Solutions

Hi o0,

 

I was trying to do the image rollover via the background-image on hover, and just tried your suggestion, it works in the simulator but after loading it onto a real device (Bold 9700) the background-image still does not change.

 

Has anyone tried this on real devices? I'd really like to get this working. Thanks for any help!

Please use plain text.
New Contributor
m7zhao
Posts: 5
Registered: ‎09-13-2010
My Device: Bold 9700
My Carrier: Rogers

Re: Tips, Quirks and Solutions

(Sorry for double-posting.)

 

Hi tneil,

 

I went on the "Cool UI Examples" thread but could not discern which one is an example of getting the background image to refresh/re-paint, could you point me to it? Thanks!

 

Also, like I said in my previous post, changing the position on :hover works in the simulator but I've now loaded the widget onto 3 real devices and the background does not change on any of them. They are a Tour running 5.0.0.419, a Bold 9700 running 5.0.0.442 and another Bold 9700 running 5.0.0.351. I know that the simulator is simulating 5.0.0.469, would that be the reason?

Please use plain text.