Setting up the project structure

Introduction tutorial - Setting up the project structure - Creating styles

SUMMARY In order to start building applications with XUI to it is necessary to have the correct libraries which can be downloaded from the XUI website at http://www.sourceforge.net/projects/xui. In this step we will look at a project structure which is standard for XUI development. While the structure is by no means fixed, it is easier to be able to refer to predefined elements for consistency. In this step we will also look at some of the basic configuration files needed for a XUI application.

FURTHER READING This step can be carried out automatically for you by the kalideoscope Editor and is explained in step 2 of the kalideoscope Editor tutorial.

Before starting to create pages, the project structure needs first to be setup. Create a directory for the project and in it create the sub-directories images, pages, resources, src, lib as in Figure 1.

Figure 1 - The project structure

Now create a batch file called run.bat which contains the content in listing 1.

Listing 1 - run.bat

java -cp .;..\..\lib\XuiCoreSwing.jar;..\..\lib\XuiOptional.jar;.\images;
        .\pages;.\resources;.\build\classes 
	net.xoetrope.swing.XApplet

The latest version of XuiCoreSwing.jar should be downloaded from the XUI project page on sourceforge.net and placed in the lib directory. The build directory is where the class files for the project will be built into. The src directory is where the Java source for the project will reside.

In this example project we will be using Swing components. If you wish to build an AWT project you need to replace the XuiCoreSwing.jar file with the XuiCore.jar file and amend the run.bat file accordingly.

Create a styles file

The style sheet file works in much the same way as a HTML stylesheet where component colours and properties are defined in a single file which, when changed, affects all of the components referring to it. Create a style file called styles.xml in the resources directory as in listing 2. Please note that the styles in listing 2 are incomplete and the entire file can be found by clicking the link 'Open the project directory' at the bottom of the page and looking in the resources directory.

Listing 2 - styles.xml

   <styles>
        <style name="banner">
            <color_back value="ffcc66"/>
            <font_size value="0"/>
            <font_weight value="0"/>
            <font_italic value="0"/>
            <style name="prompt">
                <color_fore value="0000aa"/>
                <font_face value="Arial"/>
                <font_size value="12"/>
            </style>
        </style>
        <style name="data">
            <color_fore value="666600"/>
            <font_face value="Arial"/>
            <font_size value="12"/>
            <font_weight value="0"/>
            <font_italic value="0"/>
        </style>
        ...
    </styles>

The extract in listing 2 shows the three styles banner, prompt and data. The styles are self-explanatory, but what is of note is that the prompt style does not have a background colour defined but inherits it's background colour from the parent style banner.

Create a startup file

The startup file specifies certain startup properties and points the application at other resource files which are to be used. Create a file called startup.properties in the resources directory. The contents of the file should be as in listing 3.

Listing 3 - startup.properties

CenterWin=true
ClientHeight=480
ClientWidth=640
StartClass=welcome
Title=ABC Bank Mortgage Application
StyleFile=styles.xml
Frames=frames
UseWindow=false
StartPackage=net.xoetrope.mortgage

As you can see the styles.xml file we created is being referred to from the StyleFile property. The ClientHeight, ClientWidth and Title properties are self-explanatory and the others are briefly described in listing 4.

Listing 4 - Startup properties

CenterWin	Center the main application window within the screen

StartClass	This is the main class which will appear when the application is first launched. This can be any of the following... 1. A Java class file which extends the XPage class 2. An XML defined page 3. An XML defined page which uses a Java class for events and business logic.

Frames	If omitted the application will start in single screen mode (each page will take up the entire application window). If included this property refers to the file which defines a frameset. This is much the same as a HTML frameset.

UseWindow	When false, this property creates the application with a title bar as in most typical applications. When set to true, the application starts with out a title bar and can be used for kiosk type applications.

StartPackage	This is the package from which pages will be created. So when you want the application to navigate to the net.xoetrope.mortgage.Welcome page for example, you simply need to refer to Welcome and the application will know to use the package referred to by this property.