Cooee Archetype

Added by Kimie Nakahara, last edited by Pete Butland on Sep 03, 2007  (view change)

Here we are going to take a look into Cooee archetype, assuming that you have the basics on command line commands, Maven and, obviously, Java programming.

Cooee provides a Maven archetype to create a simple web application. Although small, it enough either to experienced users easily start a new application and to beginners understand how Cooee works and start playing with it.

First of all, lets get the archetype from Karora svn. Type these commands in a terminal (or command.com)

Getting the archetype
$ svn co http://svn.karora.org/repos/cooee/trunk/archetype/simpleapp
$ cd simpleapp/
$ mvn install
$ cd ..
$ mvn archetype:create -DarchetypeGroupId=org.karora -DarchetypeArtifactId=cooee-simpleapp -DarchetypeVersion=1.0-SNAPSHOT -DgroupId=com.demo -DartifactId=myapp -Dversion=0.1
$ cd myapp/
$ mvn jetty:run

or, using the archetype deployed in the Maven repository

Alternate getting the archetype
$ mvn archetype:create -DarchetypeGroupId=org.karora -DarchetypeArtifactId=cooee-simpleapp -DarchetypeVersion=1.0-SNAPSHOT -DgroupId=com.demo -DartifactId=myapp -Dversion=0.1 -DremoteRepositories=http://karora.org/maven-snapshots
$ cd myapp/
$ mvn jetty:run

Then we should be able to get our archetype working:

Finish jetty execution typing <CRT>+c in the command line.

Note that you can change the artifactId, groupId and version of your application (in the example, myapp, com.demo and 0.1) in the mvn create command.

Now lets take a look into the created archetype structure:

Archetype Structure- Directories and Files
$ ls -R myapp/
myapp/:
WebContent  pom.xml  src

myapp/WebContent:
WEB-INF

myapp/WebContent/WEB-INF:
web.xml

...

myapp/src/main/java/com/demo:
CooeeApp.java  CooeeServlet.java  HelloPane.java  MainWindow.java  Resources.java

myapp/src/main/resources:
image  style

myapp/src/main/resources/image:
HeaderBackground.png  ShadowBackgroundDarkBlue.png  ShadowBackgroundLightBlue.png  SplitPaneHorizontalSeparator.png

myapp/src/main/resources/style:
Default.stylesheet

As a Maven user, you already know that the file pom.xml is used to configure Maven for myapp project. Also, supposing you are familiar with web applications, you also know that the WEB-INF/web.xml file is the deployment descriptor of web our application. By know, we don't need to both with both of these files.

Let's take a closer look into the java classes:

CooeeServlet.java is our web application start point, which just creates an instance of CooeeApp - our application instance - which, by the way, is a subclass of an Cooee ApplicationInstance abstract class. Then we create the Window which will represent the application window. This window needs a container which will define the window layout and handle the visual components, MainWindow.java creates and populates the container for this application. How does it do this?

First it creates a SplitPane - or a pane that can be split into smaller panes - with vertical orientation, and put the application title label in the splitpane.

Note that for each visual component - SplitPane, Label, Column - we are setting up an style with setStyleName method. Styling is the way we define ours application appearence: colors, font types and size, shadows, etc. All the styles have been defined in the file Default.stylesheet (look into Directories and Files list above), which, by the way, is defined as the application default style "provider" in init method in CooeeApp class.

public MainWindow() {
                super();

                SplitPane verticalPane = new SplitPane(SplitPane.ORIENTATION_VERTICAL);
                verticalPane.setStyleName("TestPane");
                add(verticalPane);

                Label titleLabel = new Label("Cooee Archetype App");
                titleLabel.setStyleName("TitleLabel");

                verticalPane.add(titleLabel);

                horizontalPane = new SplitPane(SplitPane.ORIENTATION_HORIZONTAL,
                                new Extent(215));
                horizontalPane.setStyleName("DefaultResizable");
                verticalPane.add(horizontalPane);

                Column controlsColumn = new Column();
                controlsColumn.setStyleName("ApplicationControlsColumn");
                controlsColumn.setCellSpacing(new Extent(5));

                horizontalPane.add(controlsColumn);

                testLaunchButtonsColumn = new Column();
                controlsColumn.add(testLaunchButtonsColumn);

                addTest("Show Hello", "com.demo.screen.HelloPane");

                Column applicationControlsColumn = new Column();
                controlsColumn.add(applicationControlsColumn);

        }

Then another SplitPane, with horizontal orientation, is used to handle the button column, which will contain our test button and the main area of the application. The methog addTest creates a button labeled Show Hello, that when it is pressed will create a HelloPane instance and put it into the main area. The main logic is actually inside the actionListener for Show Hello Button, which can be reused to add other components to the button column.

public void actionPerformed(ActionEvent e) {

				if (activeButton != null) {
					activeButton.setStyleName("Default");
				}
				Button button = (Button) e.getSource();
				button.setStyleName("Selected");
				activeButton = button;
				String screenClassName = "com.demo.testscreen."
						+ e.getActionCommand();

				try {

					Class screenClass = Class.forName(screenClassName);
					Component content = (Component) screenClass.newInstance();
					if (horizontalPane.getComponentCount() > 1) {
						horizontalPane.remove(1);
					}
					horizontalPane.add(content);

...

Labels

 
(None)