Rich Internet Applications (RIA)

Canoo is exhibiting at booth no. 429 at this year’s JavaOne. Please feel free to stop by to say hello.

Some of the highlights at the booth (besides Swiss chocolate) include:

• How to build an enterprise-class RIA in five minutes using Canoo’s RIA library, UltraLightClient.
• A Canoo customer will demo their Enterprise Web application at the Canoo booth.

And don’t miss the Canoo technical session:

Dierk Koenig and Mike Mannion are speaking on “Going Mobile with JavaFX Script Technology, Groovy, and Google Android” (Session ID: TS-5815 on Wednesday, May 07, 10:50 – 11:50).

This post describes how much easier it is to write applications with UltraLightClient ‘08 ( ultra easy, to repeat a recurring phrase). Unlike the previous posts in this series, this post focuses on use cases instead of features. You can find the previous posts discussing the new features in the upcoming UltraLightClient ‘08 release in the UltraLightClient category of this blog.

I will cover the following use cases in this post:

• How to setup a new project in Eclipse
• How to start with application development
• How to web enable my application
• How to write an application that runs in a browser and with Java Web Start
• How to implement a form
• How to implement a table
• How to sort tables
• How to internationalize an application
• How to change the style of your application
• How to use a custom look and feel
• How to define the log level, the file service, coders, protocol encoding, …

For each use case, I will flash back to the current version to highlight how the new release will make the overall development process smoother.

How to setup a new project in Eclipse

Start the project wizard that is installed as part of the UltraLightClient ‘08 release. The project wizard guides you through the process of setting up a new Eclipse project.

How it was before
Create a new Java project. Copy all relevant libraries into your project. Attach source code for these libraries.
If your project requires client-side code, things become even more complex. Create a new extension project and connect it to your application project. Again, copy all relevant extension libraries into your extension project and attach the source code.

How to start with application development

The new project wizard helps you start application development. Besides the projects, the wizard creates an end-to-end sample application that you can use as a kick start. End-to-end means from user interface to the database! The sample application contains best practices that evolved from a lot of UltraLightClient projects.
Learn from the success of others!

How it was before
Read a lot of documentation. Start coding. Learn from your errors. Read the postings in the mailing lists. Continue coding. Learn again from your errors. While you get more experienced you will notice recurring patterns. After a while you are able to distinguish the good patterns from the ugly ones.

How to web enable my application

Nothing to do at all! The new project wizard has already prepared your project for web deployment. The only thing left to do, is to export your project as a WAR file! And as a bonus you can deploy and run your web-enabled applications from within Eclipse.

How it was before
Write a complex build script. Write a HTML/JSP page that embeds the ULC Applet. Configure that ULC Applet accordingly. If you want to support Java Web Start, write a matching JNLP file. Configure your application inside the Servlet deployment descriptor.
Ensure that you correctly configured everything, i.e. that your ULC Applet connects to your ULC Servlet and that your ULC Servlet connects to your application.

How to write an application that runs in a browser and with Java Web Start

Nothing to do at all. UltraLightClient ‘08 takes care of this for you!

How it was before
Write an application for Java Web Start and write an application wrapper for the browser that places the main window inside an Applet.

How to implement a form

Only one line of code for each field in the form! With this single line you get a nice form layout including end user error feedback. And UltraLightClient ‘08 automatically synchronizes your form and your data.
You can find more details about forms in a previous blog post.

@Override
protected void initForm() {
  startTab("General");
  addTextField("name");
  addCheckBox("contractor");
  addSlider("workload");
  ...
}


How it was before
No support at all. You have to write code for your layout, write code for error feedback, write synchronization code, … Lots of freedom, which results in non-uniform code and offers too many ways to get lost.

How to implement a table

Only one line of code for each column in the table. That’s all!
You can find more details about the configuration file in a previous blog post.

TableBinding tableBinding = TableBinding
    .createTableBindingFromBeanList(persons, table, Person.class, false);
tableBinding.addColumnBinding("name");
tableBinding.addColumnBinding("contractor");
tableBinding.addColumnBinding("workload");
...


How it was before
Write your own table model. And in 99% of the cases you end up writing the same boilerplate code again and again.

How to sort tables

A one liner in UltraLightClient ‘08!

table.setRowSorter(new TableRowSorter(table.getModel()));

How it was before
Write a table model decorator. The decorator sorts the table model data of the underlying table model. And write an action listener that triggers the sort when the user clicks the table header. And write a table header cell renderer that displays a sort icon in the table header. And be careful when to use the table model decorator and the underlying table model.

How to internationalize an application

Name your user interface elements. That’s all! UltraLightClient ‘08 then auto-injects arbitrary property values from resource bundles into your user interface elements. And even better, for forms and tables UltraLightClient ‘08 creates default names. So you don’t have to do anything at all in your application!
You can find more details about the internationalization file in a previous blog post.

HelloApplication.properties
hello.text=Hello World!   # default text for the hello label
hello.icon=hello.png      # default icon for the hello label
 
HelloApplication_de.properties
hello.text=Hallo Welt!    # german text for the hello label
hello.icon=hello_de.png   # german icon for the hello label


How it was before
Get the resource bundle. Get the resource string out of the resource bundle. Convert the resource string into a property value (e.g. into an icon). Set the property value. And all that code looks more or less the same all the time…

How to change the style of your application

Style your components in the resource bundles. UltraLightClient ‘08 then auto-injects the defined styles for you.

# Heading style
Heading.font=SansSerif-BOLD-36
Heading.background=cyan
Heading.foreground=blue
Heading.opaque=true
 
hello.style=Heading  # hello label uses Heading style


How it was before
Implement a component factory. All components need to be created through this factory. The creator of a component has to provide all information to create the component. Changing the style of a component required code changes in the component factory, in the caller class or in both.

How to use a custom look and feel

Configure the look and feel in the new XML-based UltraLightClient ‘08 configuration file. The configuration file is respected by all launchers: development, Applet, JNLP. Again, you can find more details about the configuration file in my previous blog post.

...
<ulc:lookAndFeel>
  <ulc:lookAndFeelClassname>
    org.jvnet.substance.skin.SubstanceGreenMagicLookAndFeel
  </ulc:lookAndFeelClassname>
</ulc:lookAndFeel>
...


How it was before
Write custom code to set the look and feel and configure your launchers to use that custom code. The way to configure the custom code is different for each kind of launcher:

• Development => run time parameters
• Applet => HTML tags
• JNLP => xml based configuration file

How to define the log level, the file service, coders, protocol encoding, …

Use the same mechanism as for the look and feel, described above. Change the configuration in one XML file!

While Dierk König is speaking at this week’s JAX in Wiesbaden, Germany, I’m sending out an info pointing to his next session in San Francisco.

Dierk König and Mike Mannion are presenting a session at JavaOne 2008 on:

Going Mobile with JavaFX™ Script Technology, Groovy, and Google Android

Add this session to your schedule! And stop by at the Canoo booth at booth number 429.

This is the fourth post in a series of posts that offer a preview of the new features in the upcoming UltraLightClient ‘08 release. The first post was about forms, the second post discusses invisible table models, the third post introduced the new application services. This post describes how to configure an UltraLightClient ‘08 application.

UltraLightClient ‘08 will provide an ultra easy way to configure your application. Currently, the application configuration is distributed in several places. And, the configuration method differs from place to place:

For example, to change the look and feel of your application you have to code this in your Applet launcher, your JNLP launcher, and your DevelopmentRunner. Or to configure a custom carrier stream provider (to compress transferred data or not), you have to code this in your Applet launcher, your JNLP launcher, your DevelopmentRunner. And for this configuration option you have to be careful to match the Servlet deployment descriptor to your client-side code changes. The result is error prone and redundant code.

This will change in UltraLightClient ‘08!

UltraLightClient ‘08 provides one central configuration file that holds all the configuration information. The configuration file format is an XML file. This format enables your IDE to provide code completion and documentation for the configuration options. This support makes it a lot easier and less error prone to configure your application than before:

As an example, let’s change the look and feel for your application. The <ulc:lookAndFeel> tag configures the look and feel to be used by all client environments. All environments read this configuration file and configure themselves accordingly. No need to write custom launchers or custom DevelopmentRunners! The configuration file that sets the system look and feel looks like this:

<?xml version="1.0" encoding="UTF-8"?>
 
<ulc:ULCApplicationConfiguration xmlns:ulc="http://www.canoo.com/ulc"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://www.canoo.com/ulc ULCApplicationConfiguration.xsd ">
 
  <ulc:applicationName>
    com.canoo.ulc.testproject.view.HelloApplication
  </ulc:applicationName>
 
  <ulc:lookAndFeel>
    <ulc:standardLookAndFeel>SYSTEM</ulc:standardLookAndFeel>
  </ulc:lookAndFeel>
 
</ulc:ULCApplicationConfiguration>


Summary: UltraLightClient ‘08 makes it ultra easy to configure your application. No more need to write custom launchers and custom DevelopmentRunners.

Try out the new features in the latest milestone. Send us your feedback and help improve the UltraLightClient ‘08 release!

UltraLightClient 6.3 Milestone 1 of the upcoming ‘08 release is now available for download.

Evaluate the new features and send us your feedback!

For details see the milestone release notes or these recent blog posts discussing:

• forms,
• invisible table models,
• and application services

Please note: Milestone releases are not official releases. They provide early access to new features and fixed problem reports. They are provided for evaluation and testing purposes only. Please do not use milestone releases in a productive environment.

From Sweden to Germany to the USA to Switzerland – here’s a quick blog post to remind you of Canoo’s upcoming events:

• April 9 – 11: Dierk König is speaking at the Developer Summit in Stockholm, Sweden on “Groovy: Java’s dynamic friend”.
• April 21 – 25: Dierk König is speaking at JAX 08 in Wiesbaden, Germany. See the online program for all the details.
• May 6 – 9: Then we’re heading to San Francisco for this year’s JavaOne. Dierk König and Mike Mannion will be presenting a technical session on “Going Mobile with JavaFX Script Technology, Groovy, and Google Android“. And we’re exhibiting at booth no. 429 (cf my previous post).
• May 20 – 23: For those of you that are based in Switzerland: Sibylle Peter and Dieter Holz are presenting a talk at the Orbit / iEX 2008 conference in Zürich. This is part of a session on frameworks and strategies. Sibylle and Dieter will discuss the impact of Rich Internet Applications beyond the mere selection of a technology.

Come and see us!

This is the third post in a series of posts that offer a preview of the new features in the upcoming UltraLightClient ‘08 release. The first post was about forms, the second post discusses invisible table models. This post describes how to use the application services.

UltraLightClient ‘08 will provide more and improved services for your application:

• Easy to use application skeletons
• Easy to use internationalization
• Easy to use actions

Let’s have a closer look at the services one by one. The application skeletons gives an ultra easy way to implement your concrete application:

public class ApplicationFrameworkSnippet1 extends SingleFrameApplication {
  @Override
  protected void startup() {
    show(new ULCLabel("Hello UltraLightClient '08"));
  }
}


The above snippet uses the SingleFrameApplication skeleton. This skeleton provides a single frame with a standard layout: a menu bar, a tool bar, and a content area. The content area is passed as a parameter to the show() method. The resulting application looks as follows:

With help of the resource services you can easily internationalize your application. Simply name your components and then UltraLightClient ‘08 automatically fetches arbitrary property values out of a property file:

public class ApplicationFrameworkSnippet2 extends SingleFrameApplication {
  @Override
  protected void startup() {
    ULCLabel nameLabel = new ULCLabel();
    nameLabel.setName("name.Label");
    ULCTextField nameField = new ULCTextField();
    nameField.setName("name.Field");
 
    ULCBoxPane content = new ULCBoxPane(2, 0);
    content.add(nameLabel);
    content.add(nameField);
 
    show(content);
  }
}


Here is the content of the ApplicationFrameworkSnippet2.properties file.

Application.title=Snippet
 
name.Label.icon=astrologer.png
name.Label.font=Default Bold
name.Label.text=Name:
name.Field.columns=20


Please note the name of your application is used to identify the correct property file. The internationalization service provides some standard properties. One of these standard properties is used to define the title of the main application window (Application.title). And you can have a separate property file for each language you want to support. This results in the following window:

Let’s add an action to the window. To do this we don’t need to provide a full Action class. In UltraLightClient ‘08, it is sufficient to annotate a method:

IAction sayHelloAction = getContext().getActionMap().get("sayHello");
ULCButton sayHelloButton = new ULCButton(sayHelloAction);
 
@Action
public void sayHello() {
  fGreetingsLabel.setText(toGreetings());
}


In the property file you can specify additional properties for the action, e.g. sayHello.Action.text for the action text. This results in the following:

Summary: UltraLightClient ‘08 helps you in several aspects and makes it ultra easy to write your application. UltraLightClient ‘08 provides good support for application skeletons, internationalization, and actions.

We plan to publish an UltraLightClient ‘08 milestone release in the next days. Stay tuned!