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

Tips, Quirks and Solutions

[ Edited ]

Hi Everyone,

 

We had a great suggestion by jmace to create a sticky thread that would capture different quirks/bugs and their workarounds as well as general Tips.  So I figured I would start one up.

 

I'm hoping to keep this thread as clean as possible for posting a specific scenario and its solution.   If you have questions for one of the posts in this thread please create a new discussion thread with your questions.  It will just make it much easier to find what you are looking for in this thread.

 

I invite anyone who has encountered a challenge that they have overcome to post the issue and solution in this thread.

 

I'll get it started with a template that we can use for posts. 

 

Area: BlackBerry WebWorks 

Found on: Bold 9700 v5.0.0.536 (Patform 5.1.0.138) 

Issue:

In a WebWorks app, if you scroll down, and then scroll back to the top, a table cell does not completely redraw. The portion that doesn't redraw is actually a small png repeated horizontally between two images. 

 

Before Scrolling:

 

After scrolling down and then scroll back up:

 

Solution:

Turns out that this is a bug in the Browser where it manifests itself if the table cell with a repeated background does not have its height explicitly set.  

 

If you set the height of the table cell (either using CSS or the height attribute) that contains the repeating background it should solve the problem for you.

 

Specifying the height in px works the best

 

 

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

Re: Tips, Quirks and Solutions

Area: BlackBerry Browser

Found on: v5.0.0.x

 

Issue:

Setting the background image for an element via hover does not work.  For example:

 

 

li a:hover {
    background: url(bgmenu.gif) repeat-x transparent;
}

 

 

Changing a background image via JavaScript also does not work.

 

Solution:

This is a bug in the Browser.  You have some different approaches you can take.  It all depends on the scenario and weighing the trade-offs for each.

 

1) The best performing 

In this case I typically choose a background color for the div for ":hover" that is light enough so that the fonts of the text displayed in the div don't have to change color.. For instance, the font color can stay black and don't have to turn white for contrast

 

2) Middle ground

In this scenario I use a darker highlight color (more like the blue system highlight color) that I set for the background color for the div on ":hover".  An issue that I found is that if you change the foreground color on ":hover" via CSS it doesn't cascade down to the elements nested inside the div :smileysad:  So in this case I trap the onmouseover and onmouseout events and toggle the text font color for the nested elements via JavaScript.  This does take a performance hit compared to option #1

 

3) Best looking with Gradient Image

Another issue with the background image that I found (which I think is related to the fact that the background image doesn't change on :hover) is that even if you set the background image for an element via JavaScript it doesn't paint the change.  Apparently the bug in the browser that is related to both of these issues is that a repaint flag doesn't get set when the background image changes and so it doesn't repaint the element.  So in order to do a gradient image for highlight you will need to create an image with an absolute position to cover your div.  You will then have to set its z-order to 0 and a <div> that contains the foreground text with a z-order of 1.  Then, like in option #2 you will have to trap the onmouseover and onmouseout of the <div> and either change the "src" of the <img> or toggle it's visibility.  While making this change you would also change the font colors for contrast.

 

In option #3 I would also recommend pre-loading your highlight image via hidden <img> tags or using the Image() object so that it doesn't have to retrieve the image during the JavaScript events.  For #3 to work, it will take a little bit of fiddling around to get it look just the way you want.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Please use plain text.
Developer
iamtony
Posts: 87
Registered: ‎02-26-2010
My Device: Bold 9000

Re: Tips, Quirks and Solutions

Area: BlackBerry Browser

Found on: 5.0.x

 

Issue: In the widget, the browser will not render the full background color to where your content does not exist.

 

backgroundcolor.jpg

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Solution:

 

Add the following to something like onLoad

 

 

document.body.style.height = screen.height;

 * Solution provided by tneil.

 

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

Re: Tips, Quirks and Solutions

Area: BlackBerry Browser

Found on: v5.0.0.x

 

Issue:

When performing multiple reads/writes into a Gears database you receive an "out of memory" error.  This is typically caused when record sets that are being used are not explicitly closed after their use.  When these record sets are not explicitly closed, their data remains in memory thus causing a leak.

 

Solution:

Be sure to explicitly close your record sets using their "close()" method when you are done using the instance of the record set.

 

Information to Note:

Gears database usage requires the device to either have a built-in eMMC card (common on Bold and Storm devices) or an inserted SD card.

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

Re: Tips, Quirks and Solutions

[ Edited ]

Area: BlackBerry WebWorks Packaging

Found on: v1.0 BETA3

 

THIS IS NO LONGER AN ISSUE WITH v2.0  

 

Issue:

When packaging a WebWorks archive that contains files that have a hyphen in them such as "product-add.png" you will receive an error like the following:

 

**********************

BUILDING mysample

cmd.exe /c bbwp C:\samples\mysample.zip /o C:\samples\build

[INFO]       Parsing command line options

[INFO]       Parsing bbwp.properties[INFO]       

 Validating widget archive

[ERROR]     Invalid widget archive - resource name not valid(product-add.png)

BUILD EXITED WITH 1 ERROR

**********************

 

Solution:

This is not generally a limitation of WebWorks.  Instead it is a file naming limitation on how embedded resources can be named in a BlackBerry application. 

 

To fix the scenario simply rename your problematic file to remove the hyphen such as "product_add.png"

 

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

Re: Tips, Quirks and Solutions

[ Edited ]

Area: BlackBerry WebWorks Trackball Navigation Mode

Found on: v1.0 BETA3

 

Issue:

When using the trackpad/trackball navigation mode in BlackBerry WebWorks you can get a scenario where non-visible elements still gain focus.

 

If you have an element that has the attribute x-blackberry-focusable="true" and it is contained in a div that has the style of "visible:hidden" or the element itself has its style as "visible:hidden", then the element will still gain focus.  This is because even though the element is not visible it still has a bounding rectangle that has a size greater than zero.  The exposed Java API of the element will not allow the navigation mode to inspect if the element is in fact visible or not thus causing the limitation.

 

Solution:

If you use the style "display:none" instead of "visible:hidden" then the element will no longer gain focus and produce a similar effect.

 

 

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

View source of html page

 

Area: BlackBerry Browser

Found on: >v4.3

 

Example using Simulator:

 

Goto a webpage in the 'Blackberry Browser'

Hold down the CTRL key on the desktop keyboard.

In the simulator you see 'alt' in the top right corner of the simulator.

Type rbvs with the CTRL key held down.

The source is displayed.

 

***for storm

1 Simulate - Tile Blackberry - left-side-up.

2.goto webpage

3. menu - show keyboard

4. keep the !?123 button clicked until it shows a locked icon in top left corner

5. click 3?$4

 

Cheers

Andrew

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

Re: Tips, Quirks and Solutions

Area: MDS Simulator

Found on: all versions

 

Issue:

When running a standalone MDS simulator, or the BlackBerry Web Plug-in tools that run an MDS simulator in the background, you are not able to access web pages on your local machine that are being served on port 8080

 

Solution:

The MDS simulator is actually a web server as well.  It is configured to run on port 8080 by default.  This causes a port conflict with other local web servers running on port 8080.  If you change the local web server to run on a alternate port, the port conflict will then be resolved

 

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

Re: Tips, Quirks and Solutions

[ Edited ]

Area: BlackBerry WebWorks & Web Pages in General

Found on: all versions

 

Issue:

When loading your page, it seems to take a long time before it is first rendered.  This can especially be frustrating on the first page loading in a BlackBerry WebWorks app.

 

Solution:

This issue is typically seen if you have JavaScript code in the onload of the document that is performing a lot of operations.  The BlackBerry browser will not render the page's HTML until the onload method has stopped executing and the JavaScript thread exits.

 

You can take a page from the tried and true "illusion of speed" play book that has been used for many years to address this.  If you  have HTML in the page that would be useful to show before you perform your onload logic you can simply use the following type of pattern in your onload

 

 

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

      function doload() {
          /* Your code here */
      }

    </script>
  </head>
  <body onload="setTimeout(doload, 300);">


  </body>
</html>

 

 

This way the doload() function will be called in 300 milliseconds.  By calling the setTimeout() function, it will exit the JavaScript thread and allow the existing HTML in the page to be rendered.

 

This will not be applicable to everyone, but it may help for those that have situations where their HTML on the page could be displayed before the data is retrieved.  Sometimes what I do is make the HTML on my page have "loading" indicators in the places that I will replace with new HTML as a result of my onload function.

 

A good example of this is in RIM's Facebook and Twitter applications.  They show the toolbars and the "chrome" of the application while it is retrieving data to be displayed from the online data source.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Please use plain text.
New Contributor
mvlcek
Posts: 4
Registered: ‎04-23-2010
My Device: Bold

Re: Tips, Quirks and Solutions

Area: BlackBerry Browser

Found on: v5.0.0.x

 

Issue:

Setting an animated background image for an element does not work (the image won't get animated).

 

 

li.loading {
background: url(loader.gif) no-repeat transparent;
}

 

Solution:

This is probably a bug in the Browser. For Blackberry, you should insert animated Graphics as img-tag.

Please use plain text.