Prerequisites

• you should have downloaded the latest jZeno release
• you should have installed Eclipse
• you should have installed a recent java JDK (1.4 or higher)

Installing

Start the installer by running the windows native installer, or the executable jar (.jar) file by double clicking the download file. If this does not work try this on a the command line :

java -jar jzeno-[insert version number]-setup.jar

You will be guided through a typical installer. You should at least install the 'Template project'. After this you can run jZeno straight from the install folder by double clicking the run.bat file (on windows) or executing the run.sh shell script (on Linux/Unix).

Next you can check out the template project by pointing your browser to http://localhost:8080/app :

Take your time to read the welcome screen as it contains some valuable tips... Then take a look around at the existing menu options. Most are built-in screens that are used for configuring & monitoring your application. Also have a look at the Products screen as we'll be modifying this one later on...

Setting up Eclipse

Next you should start up eclipse and import the template project into your workspace. You can do this by selecting the menu option File - Import and then clicking Existing Projects into Workspace. Next you'll be prompted to specify the root directory of the project to import. You should specify the template subfolder in the jZeno installation location. You are then presented with the discovered project ('jzeno-template') and should click Finish.

Everything is now set up for you to start developing. In the next sections we'll first show you how you can change the existing products screen, and then move on to create a completely new screen from scratch.

First of all make sure you have opened the products screen in your web browser. Open the ProductScreen class in eclipse to edit it (in package net.sf.jzeno.template.screen in the rsrc folder) and modify it to add the an extra component to it :

public ProductScreen() {
    DynaLabel extraLabel = new DynaLabel("Hello World !");
    add(extraLabel);

    ...

Next you should compile your modified class (save the file - eclipse will then compile it). Now go to your web browser and press the RELOAD button. This should load the new version of the ProductScreen, and your little label should be visible in the browser.

Creating your first jZeno screen

In the net.sf.jzeno.template.screen package create a new java class in eclipse called 'GettingStartedScreen' and then edit this class as shown below :

package net.sf.jzeno.template.screen;

import net.sf.jzeno.echo.components.Screen;
import net.sf.jzeno.echo.components.Title;
import net.sf.jzeno.echo.databinding.DynaButton;
import net.sf.jzeno.echo.databinding.DynaLabel;
import net.sf.jzeno.echo.databinding.DynaTextField;

public class GettingStartedScreen extends Screen {
    private static final long serialVersionUID = 1L;
    
    private String yourName;
    
    public GettingStartedScreen() {      
        add(new Title("Getting Started"));
        
        DynaTextField nameField = new DynaTextField(getClass(), "yourName", "");
        add(nameField);
        
        DynaButton dynaButton = new DynaButton(null, null, 
                                       "actionCommand=buttonEvent,text=Push Me");
        add(dynaButton);
    }
    
    public void buttonEvent() {
        DynaLabel label = new DynaLabel("Welcome to jZeno, ");
        add(label);
        DynaLabel label2 = new DynaLabel(getClass(), "yourName", "");
        add(label2);
    }

    public String getYourName() {
        return yourName;
    }

    public void setYourName(String yourName) {
        this.yourName = yourName;
    }

    public String getHistoryTitle() {
        return "Getting Started";
    }
}

After you've finished this screen (don't forget to save/compile it) go to the Admin - Menu option to configure the jZeno menu and add a new menu item that opens your new screen ! Don't forget to apply your changes. (TIP: You can drag-and-drop your new menu item to an existing menu)

• . Type your name in the text field and click the "Push Me" button. Observe the result. I don't think you'll have much trouble relating the code to the things you see on screen but let's explain things anyway:
• First you create a textfield called nameField. In the constructor you specify that you bind this textfield to the GettingStartedScreen (the getClass()-method) and more specifically to the yourName variable it contains. The third (empty) argument can contain a comma-separated list of so-called construction hints. No hints are required for the textfield.
• We add the textfield to our screen simply by callind the add-method. This method is universally used to add components to screens and to other container components.
• Next, we create a button that is not bound to a class/property but that does contain some construction hints. The actionCommand construction hint tells us the name of the method that will be executed when the button is pressed. The text hint tells us the text that will be displayed on the button. Once again, we add the button to our screen using the add-method.
• We then write the buttonEvent method, which is the code that will be executed when we click the button. Here we use 2 labels: one to display some static text, and one to display the text you entered in the textfield. Both are added to the screen.
• Finally, we should make sure to provide getter/setter methods for the yourName variable so that it can be accessed through reflection.
• However, there is a problem with the above application. Try pushing the button multiple times. What do you observe? Everytime you push the button, the two labels are added to the screen but the previous ones aren't removed. This behaviour is easily explained because your entire screen is only constructed the first time you access it (eg. when clicking on a menu-item), so everytime you press the button, you effectively add 2 labels to the already existing screen. To change this, reimplement your screen as follows:

package get.started;

import net.sf.jzeno.echo.components.AbstractScreen;
import net.sf.jzeno.echo.components.Title;
import net.sf.jzeno.echo.databinding.DynaButton;
import net.sf.jzeno.echo.databinding.DynaLabel;
import net.sf.jzeno.echo.databinding.DynaTextField;

public class GettingStartedScreen extends AbstractScreen {
    private static final long serialVersionUID = 1L;
    
    private String yourName;
    
    private DynaTextField nameField;
    
    private DynaButton pushMeButton;
    
    private DynaLabel welcomeLabel;
    
    private DynaLabel nameLabel;
    
    public GettingStartedScreen() {      
        add(new Title("Getting Started"));
        
        nameField = new DynaTextField(getClass(), "yourName", "");
        add(nameField);
        
        pushMeButton = new DynaButton(null, null, 
                              "actionCommand=buttonEvent,text=Push Me");
        add(pushMeButton);
        
        welcomeLabel = new DynaLabel("Welcome to jZeno, ");
        welcomeLabel.setVisible(false);
        add(welcomeLabel);
        
        nameLabel = new DynaLabel(getClass(), "yourName", "");
        add(nameLabel);
        nameLabel.setVisible(false);
    }
    
    public void buttonEvent() {        
        welcomeLabel.setVisible(true);
        nameLabel.setVisible(true);
    }

    public String getYourName() {
        return yourName;
    }

    public void setYourName(String yourName) {
        this.yourName = yourName;
    }
}

• You see that we have made our textfield, button and two labels instance variables. This makes it easy to access them across multiple methods (from experience we have learned that you will want to do this often and therefore we have made it our recommended programming style).
• We now create both our labels in the constructor, but we make them invisible simply by setting the visible property to false. In the buttonEvent method we then simply set them to visible so that the first time you press the button, they will be displayed on screen.
• What happens then if you press the button multiple times? Well, the same code will be executed again, but this time you're not adding labels to the screen. You're merely setting them visible and, as they already are visible, this has no further effect. You might wonder why it still correctly changes the displayed name to the name you entered in the textfield? There is after all no code you've written that takes care of this so why does it do that? Without delving too deep in the inner workings of jZeno, let's just say that jZeno accurately detects that you have changed your entry in the textfield and will automatically rebind the components that are bound to this property.
• This concludes our first steps in jZeno. Feel free to experiment with the GettingStartedScreen and with the the Dyna-classes that you can find in the net.sf.jzeno.echo.databinding package (there is much more than just DynaLabel, DynaTextField and DynaButton and they all share the same 3 argument constructor).

To learn more, have a look at our How-to's section here.

Documentation

Sourceforge

External links