Using Aspects to build GUIs

Sukesh Chopra, Kaitlin Duck Sherwood, and Sebastian Streg

Using traditional Object-Oriented programming techniques, code for building a GUI becomes tangled: layout code becomes tangled with behavior code. For example, consider a simple GUI with one button and one label, shown below, where the the label displays the number of times that the button has been pushed. When creating the label, the developer has to specify not only the visual aspects of the label, but also keep a pointer to the label that the button can use. When creating the button, the developer has to specify not only the visual aspects, but also define the behavior that the button should take when it is pushed.

public class Main {
   JFrame mainFrame;
   JPanel mainPanel;
   JLabel countLabel;
   public JButton countButton;
   int pressCount;

   
   public Main() {
      //Create and set up the window.
      mainFrame = new JFrame("Sample");
   
      //Create and set up the panel.
      mainPanel = new JPanel(new GridLayout(2, 2));
      
      //Add the widgets.
      countLabel = new JLabel("0", SwingConstants.LEFT);
      countButton = new JButton("Count");
      
      //Add the widgets to the container.
      mainPanel.add(countLabel);
      mainPanel.add(countButton);

      // BEHAVIOR
      pressCount = 0;        
      countButton.addActionListener(new ActionListener() {
         public void actionPerformed(ActionEvent e) {
            pressCount++;
            countLabel.setText(""+ pressCount);
         }
      });

      //Add the panel to the window.
      mainFrame.getContentPane().add(mainPanel, BorderLayout.CENTER);
            
      //Display the window.
      mainFrame.pack();
      mainFrame.setVisible(true);
   }

While the visual aspects of the GUI can easily be generated with XML or a GUI builder, the behaviour aspects cannot. Because the behavioural aspects must be embedded in the class that lays out the GUI, it is difficult to use automatically generate the layout code: re-generating it would stomp on the behavioural code.

Our goal in this project is to separate out the visual description from the behavioural description. We want to allow users to write

XML that describes the layout of the GUI
aspects that describe the behavior

We had originally thought we would take XML and aspects as input and create AspectJ output, which would then undergo a separate compilation step. However, we found that tools exist that would eliminate the need for a second compilation step: XML + aspects on the input create an executing GUI instead.

In the rest of this paper, we will discuss

tool selection
approaches considered
status update

Tool selection

We had two decisions to make about tools: what language to use and what tools to aid us in translating from XML to GUI.

We decided very quickly to use AspectJ. "Working on the bleeding edge" is a euphemism for "all the tools break", and we felt that it would be far safer to use a language with significant in-house expertise than one that did not. Thus we did not consider languages like AspectWerkz, CAESER, or EOS.

We found a number of tools that took XML as input and either generated Java as output or displayed a GUI:

The documentation for jxmlguibuilder was entirely in German. While Sebastian is fluent in German, Ducky can only read it with great difficulty, and Sukesh does not know German at all. The project also looked abandoned.
The Java Gui Builder and JXUL had documentation in English, but the documentation was very poor.
Luxor is pretty much the Cadillac of XML->GUI translators. It uses XUL as its XML dialect, and has a very rich and active development community. However, Luxor looked excessively complicated. In addition to the XUL translation, it has a web server, a portal engine, a template engine, a Python interpreter and more. We did not want to have to wade through all the extras in order to get at the XML translation kernel.
Glade is a robust project with a GUI interface to generate the GUI code, but unforunately uses GTK widgets and not Swing ones.
Koala seems to be built on Java Beans, which seemed wrong for our project.
SWI XML (AKA swix) seemed to have @@@ blah blah -- more here
Thinlet seemed very similar to Swix, but not as good.
gui4j was limited in number of attributes for objects is limited.

After careful evaluation, we decided to use Swix as our XML translator.

Out of the box, Swix takes two input files: an XML file which describes the GUI, and a Java class that does some initialization, defines actions used by the GUI (as methods in the class, not in the widgets' class) , and starts Swix.

Approaches considered

There were two main issues we needed find solutions for.

We do not have source for the Swing widgets. This means that we cannot do compile-time weaving of elements like JButton.
Each instance of a widget can have different behaviour, while aspects work on a class-by-class basis.

Load-time weaving

We attempted weave the Swing widgets at load time. We spent a huge amount of time trying to configure the tools, with no success. The documentation that exists for AspectJ with Java 5 is not entirely helpful. The official docs are reference materials and seem to be aimed at people who already understand the material. We found very few sites with tutorials and/or example code, and the best load-time weaving example[Vasseur2004] that we found was out of date.

Furthermore, we found a reference [Xerox200?] that said that load time reweaving of the java.* and javax.* classes was not possible. (We theorize that it is not allowed for security reasons.) We thus decided that discretion was the better part of valor, and instead put wrapper classes around the Swing widgets.

Instance-level aspects

We considered several solutions for instance-level aspects.

One thing we considered was to make a different class for each instance, with each class subclassed from the "true" class. For example, we could have e.g. JButtonButtonOne and JButtonButtonTwo to both be subclasses of JButton. This looked ugly: we would need to programmatically generate the wrapper classes on the fly; in order to write the aspects properly, the developer would need to understand that dummy classes were being built with ugly names.

Similarly, we considered inserting a dummy method in the wrapper class(es) to correspond to each instance. The only function of the dummy methods would be to give the developer something unique to the instance that they could then exploit with a pointcut.

Instead, we realized that since we had to use a wrapper anyway, we could pass an instance identifier to a wrapper's constructor and use that id in advice to determine whether it was the correct instance for that advice.

public aspect AddListener {
  private XTextField countField;
  private XLabel pressCount;

  after(String aName, String aLabel): execution(XButton.new(String, String)) && args(aName, aLabel)   
  {     
    if(aName == "buttonOne") 
    {       
      XButton xb = (XButton)(thisJoinPoint.getThis());       
      xb.addActionListener(new ActionListener() 
      {       
        public void actionPerformed(ActionEvent e) 
        {         
          <i>button1 action</i>;       
        });     
      }
   }   

  after(String aName, String aLabel): execution(XButton.new(String, String)) && args(aName, aLabel)   
  {     
    if(aName == "buttonTwo") 
    {       
      XButton xb = (XButton)(thisJoinPoint.getThis());       
      xb.addActionListener(new ActionListener() 
      {       
        public void actionPerformed(ActionEvent e) 
        {         
          <i>button2 action</i>;       
        });     
      }
   }   

 }

Broadly speaking, there are two important characteristics of widgets: actions (e.g. button pushes) and state (e.g. text fields, labels). Actions can be attached to widgets once, in advice after() the widget is created. Widgets with state need to have a pointer to them kept in the state.

This structure is so regular that a skeleton can be generated automatically.

Note that we can take advantage of being able to define identical pointcuts to separate advice for different buttons. We could have made one advice with if statements to figure out which instance it was, but that would jumble different instances' actions together.

In the case of widgets with behaviour, the behaviour is attached to the widget once, right after construction of the widget. In cases where the widget has state that needs to be maintained, a pointer to the widget can be grabbed once, right after construction of the widget.

Unmodified, Swix takes as inputs

an XML file describing the layout
a Java "starter" class that instantiates all of the widgets and calls Swix

We add an aspect file to the above, but the Java starter class file is now simple enough to make with a preprocessing utility. We also have a pre-processing utility that creates a "skeleton" aspect that the users would flesh out with behavioural code.

Status

We lost a huge amount of time trying to configure Eclipse to get load time weaving to work, so are a bit behind. (We are not the only group bitten by configuration issues; Arjun also spent a lot of time configuring Eclipse.)

We have modified Swix so that instead of creating JComponent instances, it creates instances of our wrapper classes. At this point, it makes XButton, XTextField, and XLabel instances instead of JButton, JTextField, and JLabel instances.

We have extended the format of the Swix input XML format slightly. It already had a slot to define which action should be used for a widget (although the code for those actions needed to be placed in the auxilliary Java class); we now recognize a tag in the XML which contains code for actions. We have written code that translates the XML (including the actions) into an aspect file.

The auxilliary Java class is now much simpler: it has only one string that ever changes. We currently make that file completely automatically.

At this point, we have a two-step process: we create the aspect and the auxilliary Java class statically and then start Swix using those files as input; we do not expect significant problems combining those steps.

@@@ we probably need to hack out the bits where the action is called -- it will try to go to the aux Java class. @@@ do we need to ignore the tags?