 |
|
 |
 |
|
|
 
Romain Guy's BlogSynth StudioPosted by gfx on September 01, 2005 at 02:47 AM | Comments (14)Synth Studio EA1Synth Studio Early Access 1 is a package of three very simple tools I wrote to help me port existing look and feels to Synth. The downloadable archive contains everything you need to run them but I haven't included the source code yet, for I need to figure out which license to use. I might even start a new java.net project if some of you are interested into helping creating a suite of tools to easy Synth look and feels creation. But let's take a look at what Synth Studio already offers. Visual Look and Feel GrinderFor my first experiences with Synth I tried to port existing look and feels. Doing such a thing can be really painful if you take the time to capture screenshots of every component, in each possible state. It's even harder because you usually have to extract the component from its background. In the case of non rectangular components, like Alloy or Windows XP buttons, things can get pretty nasty. Visual Look and Feel Grinder helps a lot:  In this window, you can selected the look and feel of your choice in the bottom combo box. Look and feels are seeked within the classpath used when you run the application. If you use one of the startup scripts included in the archive, you can just set the CLASSPATH environment variable so that it includes the look and feel you want to "grind". Once you've selected the look and feel of your choice, you can pick a Swing component in the left palette and see it in the central area. Next, you can use the properties sheet on the right to change properties until the component is in the appropriate state. You can finally click either of the two buttons on the lower right to export the component as a PNG file with a transparent background. The result is incredibly easy to use in any good picture editing software and it can serve as excellent basis for a brand new look and feel of your own. Look and Feel GrinderWhile useful, Visual Look and Feel Grinder is quite tedious to use when you want to extract pictures for every Swing component. Look and Feel Grinder works in a very similar fashion but solely with a command line interface. By default, it will use the default platform look and feel (Metal or Ocean on Windows and Linux, Aqua on MacOS X) but you can choose your own by specifying its class name as a parameter: $ ./LookAndFeelGrinder com.sun.java.swing.plaf.motif.MotifLookAndFeel The tool will then create a new directory named after the look and feel and put all the generated pictures in it.  Some components will have several pictures, one per state. For instance, a  To achieve its work, Look and Feel Grinder relies on a resource called <beans>
<bean name="JButton">
<state type="disabled" />
<state type="empty" />
<state type="pressed" />
</bean>
<!-- ... -->
</beans>
Each couple bean/state is mapped to a method of public abstract JComponent createJButtonDefault(ComponentContext context); public abstract JComponent createJButtonDisabled(ComponentContext context); public abstract JComponent createJButtonEmpty(ComponentContext context); public abstract JComponent createJButtonPressed(ComponentContext context); The public JComponent createJScrollBarDefault(ComponentContext context) {
JScrollBar scrollBar = new JScrollBar(JScrollBar.HORIZONTAL);
scrollBar.setValue(50);
scrollBar.setPreferredSize(new Dimension(300,
scrollBar.getPreferredSize().height));
return scrollBar;
}
Finally, the grinder calls a renderer on each component. It is, by default, a In the end, both grinders are really useful when used with the third tool, Insets Worker. Insets WorkerThe most annoying part of creating a Synth look and feel (apart from understanding how Synth works :) is to define the insets of each picture used for each state of each component. It is a tedious job we can't really automate and for which picture editing tool aren't really meant for. Insets Worker is a very simple application which helps you define them by loading a picture of a component and dragging guidelines:  You can load a picture by using PNG files and the load button, but you can also drag them directly from Visual Look and Feel Grinder (initiate the drag gesture on the checkboard panel beneath the component). Just drag the four guidelines until they match what you want, read the insets at the bottom and write them down in your Synth XML file. Defining the insets often require single-pixel precision and you can hardly do that with components shown at 100% of their size. Just roll your mouse wheel to zoom in and out:  Is it really a Synth Studio? Not yet...Even though they proved to be really useful in my work, those three tools are still very crude and should be somehow integrated together. They should also be extended so that you can visually design a Synth look and feel without ever writing XML code. Such a graphical tool could even help masking a lot of Synth subtelties and make this skinning technology much easier to use. If you are interested in contributing to such a project, say so and we'll start a new java.net project. Bookmark blog post:  del.icio.us  Digg  DZone  Furl  Reddit
CommentsComments are listed in date ascending order (oldest first) | Post Comment
| |
 java.net RSS Feeds
|
