CookSwing Tutorial: GUI Design



Support This Project


stats counter


Logo Logo IntelliJ IDEA

Before we begin, please open a window Java API reference. It helps explaining things with the reference by the side.


Hello World!

XML and Java Web Start Demo

For some reason, most tutorials start with a "hello world!" example. This tutorial is no exception. For this example, we are going to have a JFrame and a JLabel as the frame's content pane. As you may notice, all the tags and attribute names are in lower case. CookSwing is quite case sensitive, and all tags and attributes should be in lower case. Another thing is that all java Swing components have their first letter J removed. Thus JFrame becomes frame and JLabel becomes label.

What attributes can be set for an object directly correspond to the setters and publicly accessible variables of that object. For example, in case of JFrame, it has setTitle(String) function, thus one could assign a String object to the attribute title. In case of setSize(Dimension) function, however, one must convert the string "640,480" to a dimension object some how, before such assignment can be taken place. CookSwing provides a number of converters that convert a string value to various target object types, such as Date and Color. More can be found in the converters reference page.

	import cookswing.CookSwing;

	public class HelloWorld
		public static void main (String[] args)
			CookSwing cookSwing = new CookSwing ();
			cookSwing.render ("examples/xml/helloworld.xml").setVisible (true);

Let's explain the code step by step.

  1. 	CookSwing cookSwing = new CookSwing ();
    This line of code creates a CookSwing object, which can be used multiple times to parse XML documents.
  2. 	cookSwing.render ("examples/xml/helloworld.xml").setVisible (true);
    This line of code parses the XML document and obtains a Container object. The function render actually is just a call to xmlDecode and assumes the return value is a Container object.
    Then setVisible is just a Container function that display the component.

The Java code should be simple. After all, that is a part of reason using the toolkit, to reduce the burden of hard coding complex GUI elements.

GUI Layout

XML and Java Web Start Demo

Check out the LayoutManager Tags Reference for a complete list of layout managers. There are simpler sample codes for each layouts.

Begin Action

XML and Java Web Start Demo

CookSwing also provides the facility of hooking up listeners with various Swing components. This demo basically shows that. To hook up an ActionListener with a Button, for instance, one just needs to have the action listener as a public variable:

	public ActionListener buttonAction = new ActionListener ()
		public void actionPerformed (ActionEvent e)
			JOptionPane.showMessageDialog (null, e.getActionCommand ());

When constructing the CookSwing object, it is necessary to tell CookSwing the object where variables can be found.

	CookSwing cookSwing = new CookSwing (this);

Then in the XML document, you can have the buttonAction hooked up with the button.

	<button text="action button" actionlistener="buttonAction" />

Synchronized Buttons

A common problem using Java Swing is the synchronization of button states for menu items and toolbar buttons. Usually it can be done by hard coding the synchronization. Here we present a better solution, some what worry free for the programmer.

In the previous action demo, you may notice that menu item 2 is synchronized with toolbar button 2, and menu item 3 is synchronized with toolbar button 3. The synchronization can be done in the following steps.

  1. Assign a unique id for each menu item and button that needs to be synchronized.
  2. Then, for the menu items and buttons that need to be synchronized, put them into the same <syncbuttonstate> element using their ids.
    		<idref ctor="menu_2" />
    		<idref ctor="button_2" />
    If the menu items and buttons are not in any button group, then it is done. Their select and enable states would be synchronized.
  3. If <buttongroup> is to be used, it is necessary to have the button group on both the menu items part and the toolbar buttons part.
    		<idref ctor="menu_2" />
    		<idref ctor="menu_3" />
    		<idref ctor="menu_4" />
    		<idref ctor="button_2" />
    		<idref ctor="button_3" />
    		<idref ctor="button_4" />

JTable, JList, etc

Table Demo XML and Java Web Start Demo

List Demo XML and Java Web Start Demo

CookSwing provides tags for for creating JTable, JList, JTree, JCombox etc and provides tags for DefaultTableModel, DefaultListModel, DefaultComboBoxModel. What is missing is a good model for creating a tree model. I think that it is best left to the programmer to devise the syntax for the XML document that builds the tree model. It is very easy to extend the tag library to do so.

ResourceBundle and Locale

XML and Java Web Start Demo

This demo demonstrates how to change string, icons etc based on the Locale. A string starts with @ will be used as a key to lookup the necessary resource from the resource bundle. If the key could not be found, then the original string is returned as-is.

Beyond Swing

Although this tutorial puts emphasis on creating Swing components, CookSwing actually does much more than just Swing components. As you might have seen from previous examples, CookSwing can be used to configure various string and icon resources. It is also possible to use it to load start up configurations etc.

Questions? Comments? You can either contact me (although I may not have time to respond all your emails), or post it in the forum.

(c) Copyright 2004-2007 Heng Yuan. All rights reserved.

Valid XHTML 1.0! Valid CSS!