Css Design Contest

On the wicket mailing list they annouced a design contest. Read the email for more details:

Hi

Someone mentioned that we could have a better look & feel for wicket, since there are no designers in the core team. I proposed a contest, to make the coolest slickest css for wicket. So please feel free to apply.

Requirements:

your css should be compatible with the basic browsers, Firefox , IE , Safari etc. And retain heavy use of embedded js. And it should be a drop on, using existing id’s & hierachy for design.

Practical info:

The contest ends in 2 months April 2nd.

Get the wicket examples here:
http://svn.apache.org/repos/asf/wicket/trunk/wicket-examples/

If you need it you can put your css in svn at wicketstuff, write to this
list for details on howto get commit rights, you should add your css to
sandbox and sf user name (https://wicket-stuff.svn.sourceforge.net/svnroot/wicket-stuff/sandbox/ ).

Yes as with all contest there is a prize, you can win the wicket t-shirt along with the honor if your css are the winner. This
http://www.cafepress.com/apachewicket.317298148
or this
http://www.cafepress.com/apachewicket.317298083 depending on your age 🙂

Just reply to this thread to enter the contest.

Regards Nino on behalf of the Wicket People

To join the thread in the mailing list send a mail to

users-subscribe@wicket.apache.org
Advertisements

CRUD with Wicket + Guice + Db4o / NeoDatis

The journey began with a search for a database for my desktop application TimeFinder. It turned out that there are at least 3 candidates if I would choose a simple and only one tier architecture:

  1. GORM
  2. NeoDatis
  3. Db4o

One tier applications would only make sense for some special uses cases like in my case for high schools with one timetable admin. But it would be a lot better if I could use sth. like remote GORM, remote object persistence or even an ajaxified web application. Yes. Why not? What, if I rewrite the UI from scratch and move from ‘Swing Desktop’ to web? But then again: which web framework and which persistent architecture?

A lot of people would recommend Grails (myself included) if I need a simple CRUD web framework, but for me Grails is a bit heavy weight (~ 20 MB) and I will have to live with at least 6 languages: GSP, JS, HTML, ‘Spring-XML’, Java and Groovy. I will need Java at least for the performance critical part: the timetabling algorithm.

Okay. Then, why not GWT or Eclipse RAP? GWT has Javascript compilation, which I am not a big fan of and Eclipse RAP requires pure Eclipse development, I guess. So what else? There are a lot of Java web frameworks (with Ajax) as I discovered earlier. My choice now was simple: Wicket, which is Swing for the web. But what if you don’t like Swing? Then you will love the ‘Swing for the web’ 😉 !

Wicket Features

From what I learned in the last days and from blog posts; Wicket is outstanding in the following areas:

  • Separation of UI and code. You only have
    • pure HTML no new syntax required ala JSP, JSF, GSP, velocity, … the latter one was the reason for not choosing click. No Javascript hassle … if there are some, then I trust the wicket community to fix them in wicket itself
    • and pure Java. This is very good if you’ll someday refactor your code. And you’ll.
  • You can create your own components easy and fast. You can even create ajax components without xml and js… only Java.
  • A strong community (even a German book)
  • No route file necessary. (This can be a disaster for manually managed JSF apps)

Okay. And the persistent layer? That was the reason for this journey … hmmh, there are already several different persistent ‘technics’ for Wicket available:

Hmmh, but I only need a very simple persistent layer. No complex queries etc. As I mentioned earlier I can even live with xml (for datastorage). I decided to look into db4o again (used it in gstpl which is the antecessor of TimeFinder) and into the more commercial friendly (LGPL) object oriented database NeoDatis. The latter one has an option to export to xml and import the same, this would be great so that I don’t have to think about database migrations (some refactorings will be applied automatically. see 1.10 in the PDF docs). Migration in db4o should be easy too.

While I was thinking about that, I asked on the Apache Wicket mailing list for such simple persistent solution. Jeremy Thomerson pointed out that there are even some maven archetypes at jweekend which generates a simple Wicket app with persistence for me. I chose the Wicket+Guice+JPA template and updated this to use Guice 2.0 and the latest warp-persist according to this post. After that I needed to make db4o or NeoDatis working. For the latter one I needed warp-persist-neodatis and for the first one I only needed some minor changes, but they took a bit longer.

Resources

For those who want to see the results, here are the 2 independent maven projects (Apache License 2.0) within my subversion repository (revision 781):

To try the examples just type ‘mvn install’ and run ‘mvn jetty:run’. The resulting war file is amazing small: under 6 MB!

Now point your firefox or opera to http://localhost:8080/timefinderwicket/

And here is the screenshot:

As you can see the localized warning messages are already provided and shown instead of “Please enter a value into the field ‘location'”.

To work with wicket is a great experience! In another project it took me about 10 minutes to convert a normal submit into an ajax one which updates only selected components. And then, in the NeoDatis project I initiallly developed my EventDataView against a completely different data item and moved the source nearly unchanged to the db4o project with the Event class! That is nice component oriented development. Okay, I did copy and paste rather then creating a maven submodule for the pageable list, but that wouldn’t be that difficult with wicket. Then as a third example I overwrote the navigation panel, which was easy too: Now instead of

<< < 1 2 ... > >>

it will be shown

First Prev 1 2 ... Next Last.

without touching the UI. You can even provide ‘properties’ files to apply easy I18n.

Coming Home

Wicket is like coming home ‘to desktop’ after some years of web development, especially in the UI layer. And guice perfectly meets my dependency injection requirements: pure Java.

To get all things right I had to tweek the initial example of jweekend a lot, but all necessary changes were logically and does not smell like a hack. As a first step I updated the versions of the artifacts and then I added a DataView from the repeater examples. The developed CRUD example is now built with dependency injection instead of the original locator pattern (ala DatabaseLocator.getDb()):

@Inject
Provider<ObjectContainer> oc;

Then the update mechanism and some other exception must be solved, but you only need to check out the sources and see what is possible!

As a side note

please keep in mind that there is a NetBeans Plugin for Wicket 1.4.x and an IntelliJ plugin for the same. For all NetBeans guys which are interested in ‘deploy on save’ feature you only need to enable ‘Compile on Save’ and then you can change code or HTML in Wicket, if you are running the application via jetty:run (jetty configuration is already done in the pom). Currently this works only with db4o as a standalone server. To my knowledge this way of UI prototyping can be even faster than with Grails, where it could take some seconds to be recompiled.

Conclusion

Dive into the world of Wicket right now!

Use Wicket RAD for an Existent Web-Application

Wicket RAD (Rapid Web Application Development) is a framework which creates a UI on the fly from existing domain classes. It is based on wicket and speeds up development 2-4 times compared to JSF, I guess (but maybe wicket itself is the important speed up factor ;-)).

Here you can find more information about Wicket RAD. I use version 0.6.

  1. Add the following to your pom.xml (maven config file):
       <repositories>
            <repository>
                <id>wicketrad</id>
                <url>http://wicket-rad.sourceforge.net/repo</url>
                <releases>
                    <enabled>true</enabled>
                </releases>
                <snapshots>
                    <enabled>false</enabled>
                </snapshots>
            </repository>
        </repositories>
    
        <dependencies>
            <dependency>
                <groupId>org.wicketrad.jpa</groupId>
                <artifactId>wicket-rad-jpa</artifactId>
                <version>0.6</version>
            </dependency>
            <dependency>
                <groupId>org.wicketrad</groupId>
                <artifactId>wicket-rad-core</artifactId>
                <version>0.6</version>
            </dependency>
        </dependencies>
  2. extends DataWebApplication instead extends WebApplication
  3. There overwrite the method
    public String getDefaultPersistenceUnitName() {return "WicketPersistence";    }
  4. no default name for the class, so use @Table for every entity you want to use with WicketRAD
  5. no default name for the properties, so use @Column for every property
  6. add @TextField or another editor to all the strings you want to edit …
  7. or add @WysiwygEditor to get TinyMCE for free. Version 0.6 needs a missing dependency in pom.xml:
            <dependency>
                <groupId>commons-collections</groupId>
                <artifactId>commons-collections</artifactId>
                <version>3.2.1</version>
            </dependency>
  8. add @LabelProperty to see the property in a table

If you don’t like the default css style for the table. Use the appended code. You have to grab the source and compile it via maven.
.wradTableHeader, .wradFirstRowCell, .wradSecondRowCell, .wradPager{
font-family: Arial,Helvetica,sans-serif;
/* smaller */
font-size: 0.8em;
}
.wradSecondRowCell, .wradFirstRowCell, .wradTableHeader{
padding: .4em 2em 0.4em 2em;
margin: 0px 0px 0px 0px
}

.wradSecondRowCell, .wradFirstRowCell {
border-bottom:1px solid #aaaaaa;
border-left:1px solid #aaaaaa;
}

.wradTableHeader {
border-bottom:2px solid #aaaaaa;
border-left:2px solid #aaaaaa;
background-color: #ff9f0a;
font-weight: bold;
}

.wradSecondRowCell {
background-color: #ffd093;
}

Java Web Frameworks Survey

Introduction

Recently I began to play with Eclipse and web frameworks, because I will use Eclipse at work and there I will program with JSP. Another reason for this web-framework-survey is that I need a web front-end for my open source project Jetwick.
I love Swing so I looked how easy it is to program something useful with up-to-date web frameworks in comparison to Swing. For NetBeans support of several web frameworks (gwt, wicket, …) please look here.

The example I implemented in all frameworks is very minimalistic, but includes three basic components. The example offers a ‘Button’ to perform some gnuplot statements, which will be grabbed from a ‘TextArea’. On the server the statements will be performed (through gnuplot) and the user gets back the calculated image. E.g. if you type ‘plot sin(x)’ and click the button you will get the appropriated graph as an image within the web page.

I used the following statements for gnuplot and you can increase the isosamples to 100 to see what will happen if the respond of the server takes too long:

set xrange[-3:7]
set yrange[1:5]
set isosamples 50
set hidden3d
splot exp(-0.2*x)*cos(x*y)*sin(y)

Just copy and paste this into the appropriate ‘TextArea’ of the application.

Why I chose gnuplot?

  • it is free and available under linux and windows.
  • it looks nice
  • integration into LaTeX is best (good for scientists)

I used my simple class (see WebGnuplot package) to get the image from gnuplot, although there is a nice JNIBinding for gnuplot available at sourceforge.

Web Frameworks

I only chose the ‘most interesting’ frameworks, which are open source. The decision which one is interesting and which not was random. And I excluded frameworks where I need to program directly with Javascript. If you know other projects, where I can program in pure Java, then please let me know! Or ask me if you have suggestions or questions about the implementations.

Here is the list and how to access them in the example:

Click on the links to go directly to the web page of the product. Through this web framework comparison I have the feeling that there are some categories of frameworks:

  • Swing like approach: Echo, Thinwire and WingS
  • ‘Integrate components’ into HTML: Wicket and Click
  • ‘integrate scripts’ into HTML: JSP, ZK (maybe better: ‘action based’?)
  • compile Java to Javascript: GWT

Please help me here to use existent categories. Or this one and this.

Further Work

I will add some more frameworks in a later post. E.g. Struts, Stripes, MyFaces, Seam, SpringMVC, IT-Mill Toolkit and jZeno? Please make some suggestions here.

For some more Java web frameworks look on my own list, on java-source.net or on therightsoft.com. Or take a look at this nice comparison. .

Results

Swing

As the first step I created a Swing UI within 3 minutes – I will compare this later with the web frameworks.

Here is a screenshot of the result (It is not nice, but it was fast … and well, late):

Additional Information:

  • User Libraries: ‘WebGnuplot’ (See the resources section)

Click Framework

Click is compareable to wicket, but it is slightly easier I think. It is a lot easier than JSP, because you don’t need getters and setters (i.e. an extra bean) – just the variable (e.g. form) which will be mapped to the HTML correspondent ($form), which is an identifier of the used scripting language (velocity). This means you haven’t to know the HTML specific components like in wicket, although it is a plus if you know them. It took me about one hour to get it running. I didn’t try the adapted Eclipse (clickIDE), but with this IDE you should easily edit the HTML file’s e.g. velocity support for the editor.

Here you can see the result:

Additional Information:

  • It seems to me that click integrates very good with Cayenne. Cayenne is an object relational mapper (ORM) and a nice (easy!) alternative to e.g. Hibernate.
  • I needed an extra servlet, which returns the image as an OutputStream.
  • A nice page returns if an error occurs with a lot of details and the full stack trace.
  • User Libraries: ‘Click’, ‘WebGnuplot’ and ‘Servlet API’ (See the resources section)
  • License: APL 2.0

Echo

Echo was the first web framework I tried. It was very easy and fast to get it working (less than 30 minutes). The only big difference to Swing was the AwtImageReference class, which I had to use for displaying in the label. It is nice that a message window pops up (‘Please Wait…’), if the respond of the server takes too long.

Here you see the result:

Echo2 Results

Additional Information:

  • User Libraries: ‘Echo’ and ‘WebGnuplot’ (See the resources section)
  • License: MPL

Google Web Toolkit

The Google Web Toolkit works different compared to all other frameworks. So it took me a lot of time (5 and more hours) to get it working and understand what to do. I will explain the procedure now.

  • You will have to compile the Java sources. Put the server side one into a sub-directory ‘server’ and the client side one into ‘client’. To compile the source you have to call ‘GWT-application-compile’ for this example. For the client side the compilation step generates Javascript sources from Java – to be executed on the clients webbrowser. And for the server side the Java code will be compiled and GWT generates e.g. the web.xml and some more files.
  • Then you can run your application in a ‘normal’ browser, if you deploy the application to the server. But there is another mode, they called it ‘host mode’, where client AND server code run on the virtual machine (jvm). Then you can test your application directly within Java, which is very useful for debugging I think.
  • For the interaction between client and server the GWT uses Java’s remote procedure calls (RPC). I will use it in the example, because the Image class does not support bytes or BufferedImage as input. So I send the gnuplot statements to the server (via RPC) and then the client reads the image from a separate ImageServlet (which knows the statements). This routine is a little bit complicate, but otherwise I wouldn’t use RPC and cannot show you how it works 😉

Another concept of GWT is that you have to define ‘slots’ within the HTML files. From Java code you can access those slots via:

VerticalPanel vp = new VerticalPanel();

vp.add(button);

RootPanel rp = RootPanel.get("appSlot");

if(rp != null) {  rp.add(vp); }

This makes it easy to integrate GWT in your current development. E.g. to enhance static content with some AJAX.

I got the following result:

Additional Information:

  • User Libraries: ‘GWT’ and ‘WebGnuplot’ (See the resources section)
  • GWT is a client centric framework
  • It is possible to let GWT create you an Eclipse project if you want an easy access to compilation etc. (I didn’t try this…).
  • There is a NetBeans plugin, which makes development very easy (without that I wouldn’t have figured out where my configuration mistake was…).
  • You will have to replace the linux specific jar by the jar of your OS. But I don’t know how to generate a compile and a shell script for this specific project. Normally you would run the ‘applicationCreator’.
  • I needed an extra servlet, which returns the image as OutputStream
  • License: APL 2.0

JSP

JSP was (and is?) the standard technology for a lot of companies to create web projects. It works similar to ASP.

To get started it takes me only approx. one hour.

Here you can see the result:

Additional Information:

  • User Libraries: ‘WebGnuplot’ and ‘Servlet API’ (See the resources section)
  • I needed an extra servlet, which returns the image as an OutputStream
  • License: APL 1.1

Thinwire

Thinwire’s last published version is relative old – maybe the authors skipped the development.

Update: This is not true. Look here and here.

I think it is easy to get started (approx. 50 minutes). Although I had some problems:

  • You will have to set the bounds of every component explicitly – this makes it really ugly if it comes to computer generated interface (e.g. Strings withing Labels).
  • It is not easy to display dynamically generated images to the client. Unlike echo and wings, we need here an ImageServlet for this work like e.g. in JSP and GWT.
  • And I had to use the Button class to display an image, because the Image class does not work. This was the reason that it took relatively long to get it working.

Result:

Additional Information:

  • If an exception raises you will get a window with the message and a full stack trace!
  • User Libraries: ‘Thinwire’, ‘WebGnuplot’ and ‘Servlet API’ (See the resources section)
  • I needed an extra servlet, which returns the image as an OutputStream
  • License: LGPL

Wicket

In Wicket you will only be successful, if you know some basics in HTML. You will embed the components via HTML tags and access them from Java via id’s. Although it seems to be complicated I got it within one hour. Maybe that was because of the provided example from JFreeChart forum. I think Wicket will integrate well in existing environment based e.g. up on pure Servlets or JSP.

Result:

Additional Information:

  • User Libraries: ‘Wicket’ and ‘WebGnuplot’ (See the resources section)
  • License: APL 2.0

WingS

It was even a little bit easier than Echo to get started (less than 20 minutes), because there is a class SImageIcon which takes a BufferedImage as parameter in one of its constructors. So I haven’t to use the documentation – I just used auto-completion of the IDE.

You will get a typically ‘waiting cursor’, if the respond of the server takes too long. My feeling was that WingS was a little bit slower than e.g. Echo with the task of displaying the image after I pressed the button.

Here is the result:

WingS Result

Additional Information:

  • User Libraries: ‘WingS’ and ‘WebGnuplot’ (See the resources section)
  • License: LGPL

ZK

It took relative long to get started. 3 or 4 hours. Now I know the steps you have to do:

  1. You will have to understand how to create a zul file for your UI. But there is a demo application on the web site, where you can find a common usage of every component.
  2. You will have to understand how to get information from the client via Path.getComponent(“/zkWindow/error”); and
  3. how to push the results to the client via:
    AImage image = new AImage(“Image”, bytes);
    myimage.setContent(image);

But after understanding how zk works, it was easy for me to create the necessary classes and zul files. The default layout is very nice I think. But please look here for yourself:

Additional Information:

  • User Libraries: ‘ZK Framework’ and ‘WebGnuplot’ (See the resources section)
  • License: GPL or Commercial

Resources

You can find all examples as Eclipse projects here. All my code stands under public domain if not otherwise stated. So you can do what you want with them (I.e. for all purposes: commercial etc.).

Try the following procedure to get it working:

  • Install gnuplot and adjust the command line in de.wg.core.GnuplotHelper e.g. for windows it is C:\GPpath\gnuplot.exe I think (I used linux).
  • Then you will need a webserver (I used tomcat) and adjust the location of your webapps folder in all the build.xml files.
  • Build the WebGnuplot project to create the jar in the dist folder (run the build task of build.xml) and change the location of this project in all examples (ant/build.xml).
  • Build all the examples: just run all the ‘build’ ant tasks.

I splitted the examples into several eclipse projects to avoid conflicts (e.g. more than one project uses beanshell) and to compile them independently.

You will have to set up the user libraries for Eclipse to make auto-completion possible. You should put the project specific JAR-files into a subdirectory ‘lib’ of every project.

Define the following user libraries:

  • WebGnuplot: WebGnuplot.jar
  • Servlet API: servlet-api.jar e.g. from tomcat’s common/lib folder.
  • Click: 1 file, 1.8 MB, version: 1.4
  • Echo: 3 files, 0.457 MB, version: 2
  • GWT: 3 files, 11.8 MB, version: linux-1.4.61
  • Thinwire: 2 files, 0.481 MB, version: 1.2 RC2


  • Wicket: 23 files, 8.2 MB, version: 1.3.2

  • WingS: 5 files, 2.3 MB, version: 3.2

  • ZK Framework: 31 files, 19.9 MB, 3.0.3

Maybe you have some usage from the following list, which is based on information from ohloh:

  • Click with 1-3 developer
  • Wicket with at least 4 developer
  • GWT with at least 4 developer
  • Thinwire with 1 developer
  • Echo with 1 developer
  • WingS at least 2 developer
  • ZK Framework at least 5 developer

Please correct my assumptions if I they are wrong!

You can find a slightly modified version of this article on javalobby, where it is also possible post comments.

Conclusion

And the winner is …. my brain, hehe.

But which project is the best one? It depends! Do you need commercial support? Do want to integrate it into an existing project e.g. with a pure Servlet solution? Do you want to integrate the UI tests in your regular tests? And so on.

Try the examples or look into the source to get a feeling of ‘how to work’ with a specific framework.

I hope you will have fun!