| |
The TotalCross have many types of buttons. There are the standard ones, defined when the user interface style is choosen (PalmOS, WinCE, Vista, Flat), among with variations that can be set using the method setBorder:
- BORDER_NONE: remove the button border. Useful when you have a button that is comprised of an image, like this one:
- BORDER_SIMPLE: set the border as a simple rectangle, with solid background. Its the border used in the Flat style.
- BORDER_3D: use a round 3d border, with solid background. The colors in this mode are specified using the properties borderColor3DG, borderWidth3DG, bottomColor3DG, cornerRadius3DG.
- BORDER_3D_HORIZONTAL_GRADIENT: same of BORDER_3D, however the background is a horizontal gradient.
- BORDER_3D_VERTICAL_GRADIENT: same of BORDER_3D, however the background is a vertical gradient.
The types above allow to create text buttons (that can have more than one line, splitted with \n), or just an image, or both (text with image). For buttons with text and image, you can place the image at left, right, bottom or top of the text. The ideal, when you create the images for the button, is to create it for the resolution 320x320, and then resize it to lower resolutions, using the method Image.smoothScaledFromResolution(320, background_color). The advantage of this approach is to avoid the creation of one set of buttons for each resolution, making the deployed program smaller.
There is a new border type, introduced in TotalCross version 1.12, named BORDER_GRAY_IMAGE. This type is used to create buttons like the one shown above, with several sizes and colors, using a single background image.. What this border type dões is, with a given grayscale image, colorize the image and resize it, based on the size of a text, centering the text on the image. Next, we will describe how to do that. We will need two things: a background image, and a program to put the image in grayscale.
- First, get the background image. In the web, there are many sites, like this one. Always select an image without gradient border, otherwise the change to a new color will not be perfect.
- Do not resize the button, use it in the original size.
- Convert the button to grayscale. You can do that with the free program IrfanView. Open the image on this program (or paste it directly from the site), click inn menu 'Image' and next in 'Convert to Grayscale'. Save the image in PNG format, with maximum compression (9), and select the transparent background (IrfanView has an option to select the transparent color in the Save dialog).
- Images with a gradient border must be saved in the target background color used in your program, otherwise the result will not be perfect.
The code below shows how to use this style.
Button btn = new Button("Rect", new Image("button1.png"), CENTER, 8);
btn.setBackColor(backColor);
btn.borderColor3DG = 0x008800; // cor usada para colorir a imagem
btn.setFont(font.asBold());
btn.setBorder(Button.BORDER_GRAY_IMAGE);
add(btn,CENTER,CENTER);
All these styles can be viewed in the image below, captured from the UIGadgets sample, going to the program menu and selecting Test / Image and Text Buttons.
 |
|
Development Kit
