Creating background images for dynamically sized screen elements
Designing background images for dialog boxes, buttons, menus, and title bars presents a number of challenges for theme designers, for two reasons:
- They are dynamic in size: Dialog boxes, buttons, and menus are scaled to fit the text that they contain. Because theme designers do not know the size of the element, they cannot design background images to fit; images must be scalable to accommodate any possible size.
- They are overlay elements: Dialog boxes, buttons, menus, and title bars should be separated from the screen content that they overlay so they stand out. Typically, most UIs use borders to separate elements from the screen content that they overlay, to create a three-dimensional layering effect.
Since background images for dynamic elements require borders and are of an unknown size, static images are not sufficient. Creating an image that includes the border and background and then scaling it to fit does not work because the borders scale as well, resulting in inconsistent border widths across similar elements. Creating separate images for the borders and background is also not a satisfactory solution because the resulting number of resources required is impractical.
To achieve a scalable image background with consistent border widths, the Plazmic® Theme Builder uses pattern tile images. A pattern tile is a single image that includes the border and a repeatable pattern for the background fill. After you create a pattern tile, you can use the Tile Image dialog box to create the tile definition—that is, to differentiate between the repeatable tile portion and the border portions of the image.
The tile definition informs the Plazmic Theme Reader on the BlackBerry® device how to manipulate the image for a dynamically sized element. The Plazmic Theme Reader scales as necessary the portions you define as the border to surround the edges of the element, and it tiles the portion you define as the repeatable pattern to fill the entire background.
For example, suppose you create the following pattern tile:
When you use this pattern tile as the background image for a dynamically sized element, such as a dialog box, you must open the Tile Image dialog box to create the tile definition:
After you create the tile definition, the rendered effect is visible in the Plazmic Theme Builder preview pane.