In front of SUN's house

This is the first time I tried video conference. Arif gave a presentation on our project and we made a demonstration on the SOVoIP software.

On the presentation

The audience in the Melbourne side included Dr. Tao,  from the HPC team, Ashley and Nick, the manager of Melbourne office; on the other side facing the camera are Cristina and her staff from Brisbane office.

At the end of the presentation, people’s opinions focused on “how this system would be attractive comparing to other existing ones”. Yes indeed, business models sometimes are more important than the technical issues.

Certificate Obtained

Nowadays you can pick serveral programmers to implement a blue print easily, however, the most important thing is how to make customers use it, like it and be royal to use it and like it, since that can determine whether you can or cannot generate benifits from it and use them to support it later. Arif used many use cases and the audience seem to like them, thus we would come up with more in the future.

From this project I learnt a lot, from planning on resources, to dealing with several kinds of issues during the development and testing. Never stop climbing.

its name is spaghetti monster, or enterprise system

This is a project I have done in RMIT University, which involves a lot of cooperation and interaction between multiple applications, which is so-called “Enterprise System”. The first part of the system is used to serve the University which relies on an old-fashioned system for student administration. As it usually happens in industry, requirements and/or values may change, so you should take this into account and design for flexibility. (This is an instruction in the project description, which is quite useful trying hard to figure out the blueprint.)

Another helpful tool when I was designing the restrictions in the data manipulation is thhe CRUD Management table:

[1] Note: the initiator of the CRUD operations refer to the user’s behaviors in its main application, the propagations of the operations are not shown in this table, but in the business rules

[2] SUBJECT (App 1* & 2) means subject table exists in App #1 and #2, and App #1 is the primary application maintains the data;

Source Code:
deployment.rar:  complied code and war/ear files
Table_Structures.rar:  tables for applications
development.rar:  source codes (NetBeans projects)

For the usage of the codes, please refer to the Project Manual for illustrated guides:

For code inspection and compiling:
Section 6    Developer Manual

For deployment:
Section 4    Deployment Guide

For running and using the system:
Section 5    User Manual

Wanna try by yourself?
1. Source Code
2. War File (put it into Tomcat Server’s container)

1. The Idea.

The future applications seem to be more concerning on the individuals. Sleeping counts nearly 1/3 of life time, if an application would help people to analyze the factors of sleeping, why not spend 5 minutes on recording your sleep status and make it better. Though the improvement on quality and quantity  of sleeping depends on the real actions taken by the sleepers themselves, SleepManager can help people who suffer from sleeping-troubles to record, analyze and discover their sleep patterns.

Google makes the blur idea turn to be clear. Frankly speaking, at first, the idea is nearly to lose an election when we search and find out a website in Japanese language that is already doing the same thing and is fairly mature in functionalities. However, after digging around that website and using it as a normal user’s role, we still think it is worth of building such an application of English version( there are no such a website in English language right now) since the Japanese website contains numerous modules which may not suit for the most of users ( it is a common style that asian website tend to contain as much information as it can). After all, this existent application is a tutorial, too. We learn the “use cases” from its portal (or say, user panel) and use firebug to do the “anatomy”.

Then, our task becomes to be “abstract the essentials of it and find ways to implement the functions”.

2. The Scope

Let’s now codify the features this sleep diary application will support, and the general design goals:

1, Who are our users: people living in a fast life-style, i.e. employees and students under pressure, who care about their health status and want healthy sleep.

2, In what situation, when and where: we assume the users are using our application when they are going to bed or just getting up, no much time to wait for the page jumping, so our applications should be a little easier on the eyes. User can go to the action by NO MORE THAN ONE CLICK.

3, In addition to the UI being “efficient”, We want user interface (UI) to be ”tidy”, like other Web2.0 sites do. For example, Gmail and Youtube are more like to concern on the functionalities and provide only simple but beautiful UI. (This conclusion is based on the observation more than 150 Web2.0 sites).

4, Users can see graphs demonstrating the statistics.

5, The individual user can create, update his/her sleep records;
6, What is the data being transferred and stored: Nothing much, integers and strings representing date, time and notes (that means browser-side needs to do the rendering job for statistics graphs, not server side)

The 6th scope answers the 4th scope, before reaching this point we discus a little bit on how can we render the graph (bar chart). We use firebug to dig and find that the existent application is transferring a image from server to the client. Apparently, such a solution is of slowness in performance. Therefore, we turn to use JavaScript-based to do the job. Although Flash-based solution is also a good idea, but none of team member are familiar with that one, learning Action Script costs more time and we don’t want our project get delayed. After an hour of searching work, JavaScript tends to be the one (details in Specification section).

3. Requirements

After making some decisions, more decisions are waiting! We use Google Docs to record the content of our online discussion, which becomes to perform as documentation in the following work. Furthermore, we draw a scratch and invite seven friends to give some suggestion of requirement; they are of a range of age from 12 to 65.

Figure1. Scratch of user panel (at suggestion gathering phase)

• The sleep diary form should be simple and intuitive for users to enter.
• Sleeping usually overlaps two adjacent dates. The following method is used to organize data

o     Record date

o     Sleep date (should either be the record date or the date before)

o     Sleep time (sleep date time should precede wake-up date time)

o     Wake-up date (should either be the record date or the date before)

o     Wake-up time

o     Wakefulness (a scale indicating wakefulness after getting up)

o     Note (for user’s own reference)

• The current version does not allow users to store other information, for example, afternoon nap.
• Users can see his or her sleeping pattern in a diagram form.
• Sleep related articles can show up on users’ pages and users can click those links to read more.
• Users are identified by a user name and a password.

4. Specification and Design

Basically, to finish the task, we will write persistence beans, controller’s classes and web pages, but what is exactly the technique should be used? Which one can be used and tested most efficiently? Which one gives the best performance?

4.1 Server Side: Persistence-Tier

The use cases and objects lead to database modeling, two entities in it: user entity and diary entity, then we search for a technique for persistence-tier. The first thing comes to our mind is MySQL server, a popular and Relational Database product. It is free and well supported (lots of books and tutorials provide “Hands-On Training”).  The second candidate, DB4O, is object-oriented. After checking the tutorial and guide books, we find out that:

1, the operation DB4O is transparent and friendly for programmers;

2, it provides helpful querying functionalities, handy for Java developer: Query by Example (QBE), Native Queries (NQ) and the SODA Query API (SODA);

3, DB4O can release us from headaches on writing in-line SQL statement, which tends to have error and hard to debug (from the earlier experience);

4, the migration of the DB4O database is easy — just copying the stored file. But for MySQL, we need to generate MySQL script for your schema and tables (administrator privilege is required, also maybe a new username may need to be set up), that will bring troubles and is not agile.

Because of the advantages of DB4O, we decide to choose it.

4.2 Server and Client Communication: DWR.

(In this report, the word “client” and “browser” are referring to the same concept.)

The preliminary technology is AJAX + servlet/RPC. It requires verbose and repeated coding; DWR (direct web remoting) will help us to invoke a server side method/function more easily. For example, the submitted form is treated as a bean and will be sent as a parameter via a function of a object in JavaScript, this object is mapping to a class on the server side. DWR also has a friendly test suite for debugging. Such a clear mechanism will make our life easier; furthermore, it supports reverse AJAX well, which is useful to add splashy functions (i.e. sending advertisements) in future.  So we choose it!

4.3 Client-Side: User Interface

XHTML + CSS + JavaScript, which becomes the web standard, defines the “structure”, “presentation” and “behavior” very well, we cannot find another combination as competitor. Since we want our user happy with the reacting time (stated in scope 2nd), AJAX are needed (DWR-based). User Interface should be compact and tidy, so that user can go to the action he/she needs by NO MORE THAN ONE CLICK (stated in scope 3rd), in order to do so, ExtJs can be taken advantage of, because its panel has a beautiful layout with collapsibility. When going deeper into the ExtJs, we find out that it can accomplish “structure”, “presentation” and “behavior” all together. But its learning curve is steep, which means it needs professional knowledge in JavaScript. Resource are from API documents, ExtJs forum and tutorials, no book existing for ExtJs. Unless we get the official support, otherwise it is risky. But we really need ExtJs to let our users to have better experience.

We are confused at the very start to this point, since both of team members are not familiar with JavaScript. To decrease the risk, we decide to take a compromised procedure:

Phase1: Basic

Build a face/faces with DIV + CSS, accomplish JavaScript functions (i.e. form submitting, client side DWR method invoking); (Figure1)

Phase2: “ExtJslized”

Implement ExtJs, use its components to replace the module step by step.

4.4 Client-Side: Graph Module

As stated in the 6th scope, the task is to transform the integers to the bars on the chart. Some articles[1] offer us a list of possible choices, and we select Flot, which is a component of jQuery framework. Compared to some other JS-based chart rendering module (montch, flotr), Flot is kind of that can be built in an hour to archive the task, less function but easy, and we choose it.

5, Coding and Debugging

We decide to do it in “extreme programming” way, and use SVN (Subversion Control) for the “working separately” situations (both team members can update and download the edited code at home, without conflicts). Google Docs are used for task-definition and documentation. To get a better efficiency on coding work, several methods and principles are taken, which is proved to benefit a lot along the whole process:

5.1 Conventions

0. We write interfaces to communicate and express the requirements; all the implement classes should pass the tests by JUnit.

1. The classes which are used and converted by DWR should provides test method (since DWR cannot use a bean as a parameter to test) and pass the tests.

2. The client side DWR object and method should be validated

(by sending to the console: console.log (object) in the callback method.

3. Use Adapter Mode to assemble the classes together.

4. Use Factory Mode to provide the DAO.

5. Use Singleton Mode to avoid conflicts when connecting to ObjectContainer(the DB4O database). Why we do so: DB4O do not have a management system like traditional 6. Relational Database, it may have risk on concurrency operations. Fortunately, its CRUD(Create, Retrieve, Update, Delete) methods are syncronized, so, if DBConnector returns a static singleton instance of ObjectContainer, the concurrency problem, when each DAO instance are accessing the same database, can be solved.

7. Use DWR to set and get the information in session. Why we do so: JavaScript cannot access session (of course), but we want to record the information of user in the page he/she is opening, after googling we find DWR has such utilities. By doing this, we actually abandon the utilities of JSP.

5.2 Re-design

5.2.1 On which side should we put validation?

In the coding process, there are re-design session, for example, when doing the user register module, we change the decision: making the validation from the client side (by JavaScript hard coding) to server side, to make our system more robust in future (because in future we may tranform the application for different language, so the validation rules change due to some reason such as encoding charset or length of username) .

5.2.2 Refractor by ExtJs framework

After finishing all the components on the server side and the basic functions by JavaScript + DWR-mapping-object, we feel safe about this “0.9″ version, planning to go to Phase2 and make it “ExtJslized”.

ExtJs is chosen to make the UI more compact by using its collapsing panel layout (and yes, it’s a one page application). Since there are many JavaScript libraries are imported in one page (ExtJs, DWR, Flot, our own usages), we use name space to avoid collisions on naming. We write ExtJs components in object-oriented way to let them reflect to the major DOM elements, for example, a nested panel reflects to a div called “left-side” bar.

5.2.3 RSS feature

After the phase 2, we decide to put more features on it about RSS generating and subscribing. The system will help user to subscribe feed on the topic of sleeping heath, taking advantage of yahoo service. User can also generate their own feed of sleep diaries. This is done by ROME, a Java library for RSS; we choose it simply because the tutorial gives enough information to implement our functions.

5.3 Tools and Plug-in

Firebugs in firefox and Spket plug-in for Eclipse are good tools for JavaScript Coding. If not using such kits, a missing semi-colon will kill us. ExtJs forum is a good place to ask questions, if the question is presented clearly, people here are willing to help. It is always good to ask people.

6. Screen-shots of version1.0

Figure2. User panel with record graph

Figure3. User panel(collapsed) with amount graph

Figure4. User registering

Figure5. Register success and redirecting

Figure6. Validation of login panel

I find these very useful when I was designing the UI, they are helpful on give users an instruction and making the app stylish. Choosing the right .  Today I am going to make one.

1 Blue print:
Open the illustrator. If I am making a set of icons, I will make these blue prints for every icon before I go into details for them, the purpose is to make them consistent in terms of style at the first stage.

2 Basic shape:
Open illustrator and use pen tool to draw these vectors, fill them with gradient colors.

3 Decoration:
Add the highlights (glisten) and shadows, in order to emphasize the feel, yeah, the feel…..

4 Border:
Make a copy of the portrait, fill it with dark color. Resize it to be a bit larger than the original. Send it to the back-end.
(It is not necessary to do this in the illustrator, you can just simply use “stroke” in photoshop, it works fine.)

5 (Optoinal)Make the icon file:

There are two options:
A. You can use Axialis IconWorkshop to generate the icons (*.ico)
Trial version: http://www.axialis.com/iconworkshop/

B. Use online icon generator:
http://www.genfavicon.com/

6 Use it:
You can use this new icon for different purpose:
–on the interface of your software;
–in search box in your website;
–as a favicon when people are browsing or bookmarking your website;
–as your windows desktop icon.

This aritcle was inspired by this tutorial.

In this article, a web service is created without IDE and is deployed into Glassfish server in the form of war file. The purpose of doing so is to gain more independence when deploying services.
Meanwhile, a client is built using NetBeans IDE’s benefits to achieve fast development. The client can be distributed and run on the computer equipped with JVM.

The files related to this article can be found in this zip file (all.zip).

Server side
(Attached with source codes and the war file, the Glassfish will auto-deploy the war file)

1 Initial Setup

 1.1 JAVA_HOME (if you are already using Java, skip this step)

 1.1.1  Download and install Java JDK 6
http://java.sun.com/javase/downloads/index.jsp

 1.1.2  set an environment variables, named JAVA_HOME, point it to the installation directory of Java. (to set environment variables in Windows, right click “my computer” > properties > advanced > environment variables )
 
1.2 AS_HOME

1.2.1  Download Application Server. (I am using the Glassfish v2.1)
Download: http://java.sun.com/javaee/glassfish/getit.jsp

1.2.2  set an environment variables, named: AS_HOME
to the installation directory of Glassfish Server
for example, my server is installed at E:toolsglassfish-v2.1
 
1.3 ANT_HOME

set an environment variables, named: ANT_HOME, to the installation directory of Apache Ant. If you have already been using ANT and have set the ANT_HOME, just skip this step; if you haven’t got the Apache ANT on your computer, you can find it is part of Glassfish Server. In Windows, Ant resides on libant. Thus, ANT_HOME can be defined as %AS_HOME%libant; then append %ANT_HOME% to the environment variable PATH
 
1.4 use command line to start server

(For UNIX)  $AS_HOME/bin/asadmin start-domain domain1
(For Windows)  %AS_HOME%/bin/asadmin start-domain domain1
 
Here is an example of the output:
Starting Domain domain1, please wait.
Default Log location is E:toolsglassfish-v2.1domainsdomain1logsserver.log
The domain (domain1) is already running.
 
 
So, what is a domain? From Glassfish v2.1 reference manual: http://docs.sun.com/app/docs/doc/820-4332
A domain provides a common authentication and administration point for a collection of zero or more server instances. The administration domain encompasses several manageable resources, including instances, clusters, and their individual resources. A manageable resource, such as a server instance, may belong to only one domain.
 
2 Development and Deployment

2.1 Development

I create simply web service HelloImpl, in which there is a method sayHello takes a String as input, and return this String with prefix and postfix.
 
This is the source code:

2.2 Deployment

All the works of compiling, generating war file is done by the ant script. You can find a war file in the “war/” folder and it can be deployed to the server. I insert sun-web.xml and web.xml in the folder WEB-INF manually (Actually, it is done by ant script, see it in the source code).
 
any problems will be recorded in the log file, it is helpful when debugging on deployment: %AS_HOME%/domains/domain1/logs/server.log
 
Now we have a war file called Helloworld.war. There are two ways to deploy it:
1. use http://localhost:4848/, click Applications > Web Applications > deploy
2. copy the file into %AS_HOME%domainsdomain1autodeploy
 
Now we have deployed the service, the Endpoint Address URI: /HelloWorld/HelloImplService
So the WDSL is: http://localhost:8080/HelloWorld/HelloImplService?wsdl
 
Client side
(The client is developed in Netbeans, attached with project source and jar file)

The client is designed to take a string from user and send it to the web service we have just created. If the JVM is installed on the machine, you can type in the command line, “Jin” is the parameter for you to assign:
java -jar HelloWorldClient.jar Jin
 
The result should be:
I send: Jin
Result = Hello, Jin!

This is the main method in the source code:

Finally, the client will call the web service on the “localhost”. Future works are:
1. Let client use properties files to store the server’s location;
2. Let server use database technique to maintain the information;
3. Use objects as input and output parameters.

References:
Managing and Monitoring Web Services in Project GlassFish
http://developers.sun.com/appserver/reference/techart/ws_mgmt.html
Using the IDE to develop a JAX-WS web service.
http://www.netbeans.org/kb/docs/websvc/jax-ws.html

Great appreciations to the helps from Arif (University of Melbourne) and Nathan (Sun).
Development and deployment of a simple web service and a client consuming it.
Jin Li, auswer[at]hotmail.com