Creating border images for dynamically sized screen elements

Creating background images for dialog boxes, buttons, and menus poses a couple of unique design challenges:

  • Because they overlay other screen elements, you need to provide visual separation so that the dialog boxes, buttons, and menu elements stand out from the screen elements beneath. Typically, designers achieve this visual separation by creating a three-dimensional effect using borders with highlighting and shading. To mimic the effect of light and achieve depth, each of the four borders is unique. For example, the top and left borders are often highlighted, while the bottom and right borders are shadowed.
  • Because they are scaled to fit the text that they contain, images used as backgrounds for dialog boxes, buttons, and menus must be scalable to accomodate any possible size. At the same time, if this image contains a border, the border width needs to remain constant.

To solve this design challenge, Theme Builder uses border images and tiling patterns.

A border image is an image that contains the both the border and the background for element—essentially, a version of the dialog box, button or menu that is large enough to define the border, but too small to contain any text. For example:

Once you have created a border image, you can add it to your theme and then use the Theme Builder to define the tiling pattern. A tiling pattern informs the BlackBerry device how to manipulate the image for an element that is dynamic. It defines which portions of the image are the horizontal and vertical borders (which are stretched either horizontally and vertically around the edges of an element) and which is the background (which is repeated to fill the entire background).

You must open the Tile Image dialog box to create the tile definition:

After you create the tile definition, you can view the how the image will appear on the dynamic element in the Preview pane.