When you ran the demos in the previous section (see running the demo system) you where presented with a fully scripted web based application. Scimpi provides some generic template files that give you an application framework to start with. In this section we will look how a scimpi application is created, and specifically how the pages are constructed. The examples here are based on the domain model that provided as part of the template and is provided in the appendix for reference. The first thing to look at is the use of generic views in Scimpi.
Set up an example application as detailed in the previous section. The following example shows the complete create, build and run cycle using Ant and the provided lightweight server.
$ cd scimpi-0.1
$ cp --recursive template example
$ cd example
$ ant deploy -Ddeploy.dir=../demo/webapp/ -Dwebapp.name=example
Buildfile: build.xml
compile:
[mkdir] Created dir: /home/rcm/tmp/scimpi-0.1/example2/build
[mkdir] Created dir: /home/rcm/tmp/scimpi-0.1/example2/build/classes
[javac] Compiling 6 source files to /home/rcm/tmp/scimpi-0.1/example2/build/classes
war:
[war] Building war: /home/rcm/tmp/scimpi-0.1/example2/build/example.war
deploy:
[copy] Copying 1 file to /home/rcm/tmp/scimpi-0.1-SNAPSHOT/demo/webapp
BUILD SUCCESSFUL
Total time: 1 second
$ cd ../demo
$ ./webserver.sh
2008-03-17 15:49:16.934::INFO: Logging to STDERR via org.mortbay.log.StdErrLog
2008-03-17 15:49:16.977::INFO: jetty-6.1.5
:
:
:
Access the main page by entering the http://localhost:8080/example in the address field and pressing the Go button. The opening screen of the browser shows the actions of all the services that the application provides, i.e., the methods defined in the ClaimantRepository and ClaimRepository service classes. As for most web applications this is the welcome page and in this case maps to index.shtml.
Clicking on the links/buttons will invoke the selected method and display a generic view. For example the All Claimants button above generates invokes the allClaimants method on the claimants repository service object, which returns a collection. This displays the list of claimants as shown below. This uses the template generic/collection.shtml to create the page.
Clicking on the select link will use another generic page (generic/object.shtml) to show you detail of the object, while clicking on the edit link will use the template generic/edit.shtml to provide a page containing an HTML form for editing the object. Here you can change the name of the employee.
If we now use the same technique to view all the claims and then open up a specific one using the select link, the claim viewing page (still generic/object.shtml) shows the complete claim including a list of the expense items. Notice that at bottom of the page there is a second link (below edit), this is the action method defined in the Claim class called submit.
Clicking such a link will either invoke the method immediately if it has no parameters or, as in this case, it will open up a generic action form (generic/action.shtml) to allow the user to set the parameters before the method is executed. Below we see the page that we get after pressing the link on the page above. The approver parameter is set to the default value as specified in the domain model.
After pressing the OK button you are returned to the home page as the method return nothing to process. Had the method returned an object then that object would displayed. If you navigate back to the claim you will see that the approver has been set up and the status changed to Submitted.
All the above was achieved through generic views, no HTML or template pages were written. In the next section we will look at how we create our own pages to create a targeted and stylised user interface.
If we now create a new page called example.shtml (placed in the example/webapp directory) with the following markup we will be getting Scimpi to run an action and list the results to us. This shows us a number of important things about Scimpi pages. First, all files with the extension shtml are Scimpi files and are processed on the server before being sent to the client. These files are essentially HTML files with addition Scimpi tags that will replaced with dynamic content when processed. Second, all Scimpi tags are of the form <swf:command attributes>.
<html>
<head>
<link rel="stylesheet" href="style/screen.css" type="text/css"/>
<title>Claims</title>
</head>
<body>
<h1>Claims</h1>
<swf:run-action object="service:claims" method="allClaims" />
<swf:list type="disc"/>
</body>
</html>
Depending on how you are running Scimpi you may need to rebuild the web application, redeploy it or restart the web server. (Using Ant and the provided web server, as described above, you should run Ant again (to copy the new file across) and restart the web server.)
This example uses two Scimpi tags to interact with Naked Objects and generate some dynamic HTML. The first tag invokes the action allProducts on the service object known as claims, which is the claims repository; the service: prefix indicates the object is a service and claims is the name of the service object as provided by its getId method. The second tag generates an unordered list (OL tag) with a set of list items (within LI tags) from the collection that was returned by the previous tag. The browser shows the following when the example.shtml page is requested.
By replacing tag <swf:list type="disc"/> with <swf:table/> an HTML table will be generated instead of a list.
As well as tags that practically do all the work of generating things likes lists, tables and forms, Scimpi provides tags to allow you to build your own. The next example uses the collection tag in place of table to control the processing of the contained block. This tag will iterate through the collection and for each element will process the contained elements so that the elements title and claimant field is displayed along with a table showing the items field.
<h1>Claims</h1>
<swf:run-action object="service:claims" method="allClaims" />
<swf:collection>
<div>
<h3><swf:title icon="off"/>, for <swf:field field="claimant" icon="off"/></h3>
<swf:table field="items"/>
</div>
</swf:collection>
The result of this page are the same three elements as before but the layout and detail have been specified in detail.