Helping ordinary people create extraordinary websites!
| |
Helping ordinary people create extraordinary websites! |
Advanced SynthBy Michael Abernethy2005-04-16 
Using Images
The textfield borders in Figure 2 aren't normal-looking single-pixel rectangular borders. You create them by using an image. This isn't an unfamiliar concept -- images have been used in buttons and labels for a while now -- but you can imagine where some issues will come up. How does the cursor know where to go, how does the text get painted, and how do you create different-sized text fields? These issues are addressed by the concept of image stretching. One image file must describe every size of text field in the application, so you need a way to tell the XML file how to stretch the image properly and how to handle the normal textfield activities (carat and text control). Luckily, a method of doing this type of stretching has been available since the early skinned applications. The image must be divided into nine regions -- top, top right, right, bottom right, bottom, bottom left, left, top left, and center -- that you specify by an attribute in the XML file. The renderer can then stretch the image in a certain way to fit the allotted space. Figure 3 shows how the text-field image stretches. Figure 3. How an image gets stretched in Synth 3. 
The green-tinted regions in Figure 3 will only stretch in the vertical; that is, they'll grow when the text field is taller than the image. The red-tinted regions will only stretch horizontally, when the text field is longer than the image. The regions tinted yellow will not grow at all. No matter how big the text field gets, these regions will be drawn exactly as they look in the image file. Because these regions won't be stretched, they should contain all the curves, special tinting, shadows, and anything that would look odd if it were stretched out. Finally, the center region is optional. You can specify either to either draw or to omit it. The text field's center is omitted in our example. The renderer then uses this region to handle the text control and the carat. That's it -- the text field is completely drawn using a single image file. The imagePainter tag provides all the information needed to use images in the look and feel. It requires only a few attributes: • path : The path to the image to be used. • sourceInsets : The insets in pixels, representing the width of the green areas and the height of the pink areas in Figure 3. They map to the top, left, bottom, and right, in that order. • method : This is perhaps the most confusing attribute. It maps directly to a function in the javax.swing.plaf.synth.SynthPainter class. The class contains about 100 functions, all of them starting with paint . Each function maps to a specific painting job in a Swing component. You just need to find the right one, then set the attribute by removing the paint string and lowercasing the first letter after it. For example, paintTextFieldBorder is the attribute of textFieldBorder . The renderer takes care of the rest. • paintCenter : This attribute lets you keep the center of an image (in a button for example) or get rid of it. The textfield in the example gets rid of it to allow text to be drawn. The final step in using an image to paint borders is to increase the default insets to handle the new image you are using to draw them. If you don't change the insets, no image at all will be visible. You need to add an Listing 4 shows the XML code for loading images. Notice how the sourceInsets ensure that only the proper parts of the image get stretched. Listing 4. Loading images <style id="textfield"> Tutorial Pages: » Custom UIs are a Breeze with the Newest Swing Look and Feel » Beauty's Only Skin Deep » Synth Basics » Demo Application » Changing a Color and Font » Using Images » Handling Different States » Working with Custom Painters » More-Advanced Settings » Examining Synth Performance, Reliability, and Efficiency » Conclusion » Resources First published by IBM DeveloperWorks
|
 |