Calculator Next Generation


Home \| luxor-xul.sourceforge.net \| Contact us



		Tutorials
		Calculator NG
		Custom tags
		Miscelaneous



		Contact us

Calculator Next Generation

Authors : Denis Cardon (cardondenis <at> yahoo.com) and Philippe Yard (pvpy <at> yahoo.com)

- Get your copy here ! (swingtest.tar.gz)

Introduction

This is a test case for experimenting easier data binding and event handling in java gui. The programming style is very similar to the one one would expect when using Visual Basic. Visual Basic is definitly the best language around, but no one can argue to the fact that GUI front-end programming is much easier/faster in VB than in Java.

I made a complete rewrite of the calculator tutorial according to this new model so Luxor users could give me some feed back. It does not implements style sheet, layout is very basic (hbox and vbox only). So don't expect nice eye-candy gui. Following is a screenshot of the Calculator Next Generation !

However I hope it will stir some comments for improvement and later a merge in the main luxor tree.

Note : sorry for the spelling. I promise next time I'll be less sloppy :-)

So what you'll find in that package?

/src/ --> all the sources
/lib/ --> all the libs (some may not be used at all, but I'm lazy and did'nt took the time to clean up)
/bin/ compiled class (for the lazy ones :-)
/.classpath  IBM Eclipse projet file
/.project 	idem

(sorry, no build.xml, but it is quite easy to write so I'll let you do it ! )
Main class is /src/Calculator.java. Widget layout is located in the /src/calculator.xul file. All the other classes are framework classes (which should be jar-ed and hidden from everyday users, but for now you are more than welcomed to take a look at it !)

Some explanations

Here is a sample extract from the caculator.xul file. It is standard luxor stuff, so no comments :

<xul>
  <hbox id="calculator">

    <vbox>

      <hbox>
        <textfield id="screen_display" data="value" enabled="false"/>
      </hbox>       
        
      <hbox>        
        <button label="ac" command="ac"/>
        <button label="c" command="c"/>
      </hbox>
      
      <hbox>
        <button label="7" command="seven"/>
        <button label="8" command="eight"/>
        <button label="9" command="nine" />
        <button label="+" command="add"/>
      </hbox>
.....
   </vbox>
  </hbox>
</xul>

GUI initialization

Here is the Calculator.java class. First, we'll take a look at the constructor (nothing to say about the main(args[]) method.

public class Calculator {

	.....	

	XulForm form = null;

	public static void main(String args[]) {
		Calculator test = new Calculator();
	}

	public Calculator() {

		try {
		
			form =
				XulFormFactory.getForm("calculator.xul", "calculator", this);



			JFrame frame = new JFrame();
			frame.getContentPane().setLayout(new BorderLayout());
			frame.getContentPane().add(
				form.getJComponent(),
				BorderLayout.CENTER);
			frame.pack();
			frame.setVisible(true);

			frame.addWindowListener(new WindowAdapter() {
				public void windowClosing(WindowEvent e) {
					System.exit(-1);
				}
			});



			form.firePropertyChange();


			
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

Here are the important methods API :

XulFormFactory : public static XulForm getForm(fileName, xulId,implementingClass) : returns a XulForm object. The XulForm Object contains the swing stuff and a reference to the Calculator class which elements the model and the methods.
XulForm public JComponent getJComponent() : returns the Swing representation of the xul file as a JComponent object.
XulForm public JComponent firePropertyChange() : when you make a change to the model data, you should call this method to refresh the display.

The other lines of code are plain swing and could in fact be transfered into the factory...

Linking model

What you have to do is just to implements the getter and setters corresponding to the property referenced in the xul file in the data attribute :

	<textfield id="screen_display" data="value" enabled="false"/>

Here the data attribute value is... value. So you have to implements the getValue() and setValue() methods. For now the type that are automatically handled are : String, Double, Float (all objects, no primitives).
Note : when you make a change to the value programatically (ie. thought java code and not thought the swing interface), you have to fire an event to tell the GUI to refresh :

	form.firePropertyChange();

Linking Actions

What you have to do to link actions is just to implements the corresponding method :

	<button label="7" command="seven"/>

In the class, you just have to implement the mehod with the following signature public void handle_click_<command_name>()

    public void handle_click_seven(){
        displayed_value = displayed_value + "7";
        form.firePropertyChange();
    }

This is quite straight forward, no? Note that in the method I have made a change to the model (displayed_value), so I have to do a form.firePropertyChange() in order to refresh the GUI.

That all Folks

Well, I hope you enjoyed it ! This is just a prototype, so don't expect things to work smoothly. But still, I think it is a enjoyable things to be able to write a java GUI in a VB style ! Send your comments on the luxor mailing list.



luxor-contrib.sourceforge.net \| luxor-xul.sourceforge.net