It shows the visualization of bacteria growth and reproduction in certain conditions.

Summary of my evaluation is here.

I am writing this just for such developers to share my impression.
So let’s start from some history.

History

The next time-line shows how both teams where roughly releasing:

As you can see Flex team started ~ 2 years ahead of GWT team. Not surprisingly Flex is more mature technology at the current moment. The proper analysis maybe would be to compare then GWT 2.0 with Flex 2.x but no one is interesting in this

Out of the Box

Let’s see now what developers have out of the box when they start to work with both technologies.

SDK

Both have open source free SDK.

IDE

GWT: All you need  is Eclipse with J2EE plugins + download and install free GWT Eclipse plugin.
It perfectly works even with latest Galileo (3.5) Eclipse.
Flex: Though basic tools to work in command line (compiler, etc.) are provided it will not be very convenient to do some real project given just that. Adobe Flex Builder 3 plugin for Eclipse is not free and costs some fair money but it is worth of its price, no matter what the people say.

Programming Language

You develop GWT projects on Java.
For Flex you need to code in Action Script.
Action Script provides majority of the OOP features and for a normal developer the learning curve should be very short.
Off course Java is richer language but Action Script provides you with all means to create a nice OOP code. Also consider that for the classes that represent your UI components and thus will be compiled to Java Script code by GWT you can use only part, though quite large part, of the Java Runtime Library. For example you can’t use threads or java.io classes.

UI Markup Language

GWT: Before the 2.0 release GWT has no embedded markup language. All structuring and layouting of your UI should have been done in Java code similarly as it is done in Java Swing.
As of the GWT 2.0 there is a UiBinder feature which allows you to layout/style your UI in xml files. I described basics of this here.
Flex: there is MXML markup language which also allows you to layout and style your applications/components in xml-way. But MXML is much more mature, allowing you to do additional things which you will not be able to achieve with UiBinder. For example you can insert plane Actions Script code there, so MXML’s flavor resembles here JSPs
Theoretically you can write the whole Flex application in MXML while UiBinder only allows you to control layout and assign some event handlers + other minor stuff.
Also it’s worthy to note that MXML has much stronger support in IDE: better autocompletion, ability to debug MXML, etc.

Standard Components

GWT: comes with 18 widgets and  10 layout panels which are described here.
Flex: has 30 controls, 17 Layouts, 8 Navigators and 10 charts. Though some useful enterprise-scale components are not coming in the standard free package and you should pay additionally for them, e.g. Advanced Data Grid or OLAPDataCube.

So here Flex and GWT hardly can be compared. Also upcoming (in 2010) Flex 4 release promise to deliver even more components.

@CHARSET "UTF-8";
.name{
    font-weight: bold;
}

.label{
    color: #0000FF;
    font-style: italic;
}

.bio{
    color: #666666;
}
.photo{
    margin-right: 5px;
}

Then we register this CSS in the UiBinder xml template:

Then we assign to widgets required styles with help of addStyleNames attributes.
That’s it about simple styling.

I also decided to have “bio” part of the user profile to be rendered inside a disclosure panel so the users can expand/collapse it as needed.
The first though is to do it like this:

<g:DiclosurePanel>
<g:Label ui:field="bio" addStyleNames="{style.bio}"/>
</g:DisclosurePanel>

But this way will not allow me to set the header of the disclosure panel. DisclosurePanel has method setHeader(Widget) but I don’t know how to nicely construct and reference a widget inside the xml attribute.
Also the mostly useful constructor of the DisclosurePanel class it the public DisclosurePanel(ImageResource openImage, ImageResource closedImage,
String headerText) which allows setting of open/close icons as well as the string header. I don’t know why GWT guys have constructor with String parameter but setter only with Widget parameter, but this is the different story. Our task is to be able to instantiate the DisclosurePanel with help of that mentioned constructor.
For being able to delegate instantiation of UI components from the GWT framework to the developer’s code GWT provides @UiFactory annotation.
I just add the following method to my UserProfile.java:

@UiFactory
    protected DisclosurePanel createPanel(String label)
    {
        Resources res = GWT.create(Resources.class);
        DisclosurePanel result = new DisclosurePanel(res.getCloseIcon(), res.getOpenIcon(), label);
        return result;
    }

Now each time I will write in my .ui.xml

<g:DisclosurePanel label="Details">
            <g:Label ui:field="bio" addStyleNames="{style.bio}"/>
 </g:DisclosurePanel>

for example it will call the createPanel(String label) method to get the instance of the DisclosurePanel with specified textual header and open/close icons.
In result we will have this:

There are some more annotations available with UiBinder but this little example actually shown the essence of it.

The plan was to see how much work would I save using UiBinder for designing a simple UserProfile widget.
Something like this was on my mind:

To implement this widget we will create 4 files:

• UserProfile.java – widget class
• UserProfile.ui.xml – xml file with interface markup
• UserProfileDO – data object to hold the user profile’s data. Will serve as a data provider for UserProfile widget
• entry point class to instantiate the widget and show it on the screen

Here is how it looks in my Eclipse:

We should start from the .ui.xml file, it’s like if we were developing an  HTML page and will start from the HTML itself and only after that do some javascripting, CSS-ing, etc. :

<?xml version="1.0" encoding="UTF-8"?>
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui'>
    <g:FlowPanel>
        <g:HorizontalPanel>
            <g:Image ui:field="photo"/>
            <g:FlowPanel>
                <g:Label ui:field="name"/>
                <g:HorizontalPanel>
                    <g:Label text="mobile: "/>
                    <g:Label ui:field="mobile"/>
                </g:HorizontalPanel>
                <g:HorizontalPanel>
                    <g:Label text="email: "/>
                    <g:Label ui:field="email"/>
                </g:HorizontalPanel>
                <g:HorizontalPanel>
                    <g:Label text="web: "/>
                    <g:Label ui:field="web"/>
                </g:HorizontalPanel>
            </g:FlowPanel>
        </g:HorizontalPanel>
        <g:Label ui:field="bio"/>
    </g:FlowPanel>
</ui:UiBinder>

Very nice thing here is that in Eclipse you’ll get all the autosuggestion help from the IDE regarding the component names and attribute values. So this does help to write the code easy and quick.
If we where composing this UI directly in the java code it would be far from being that nice and accurate.
Notice that we marked few fields which we should be able to operate on programmatic with ui:field attribute.
So, this represent the UI we want to see for the component on the screen.

Now goes the data object to represent the raw data of some user profile:

public class UserProfileDO {
  private String imageURL;
  private String name;
  private String mobile;
  private String email;
  private String web;
  private String bio;

...getters and setters here....

  public UserProfileDO(String bio, String email, String imageURL,
 String mobile, String name, String web) {
   super();
   this.bio = bio;
   this.email = email;
   this.imageURL = imageURL;
   this.mobile = mobile;
   this.name = name;
   this.web = web;
  }
}

The last part of the puzzle is the code of the UserProfile widget:

public class UserProfile extends Composite {

    interface UserProfileUiBinder extends UiBinder<FlowPanel, UserProfile>{};
    private static UserProfileUiBinder uiBinder = GWT.create(UserProfileUiBinder.class);

    @UiField Image photo;
    @UiField Label name;
    @UiField Label mobile;
    @UiField Label email;
    @UiField Label web;
    @UiField Label bio;

    public UserProfile(UserProfileDO data)
    {
        super();
        initWidget(uiBinder.createAndBindUi(this));
        photo.setUrl(data.getImageURL());
        name.setText(data.getName());
        email.setText(data.getEmail());
        mobile.setText(data.getMobile());
        web.setText(data.getMobile());
        bio.setText(data.getBio());
    }

}

The first 2 lines will be similar for any widget which UI you want to keep in xml. Like the GWT docs says you declare an interface parametrized with 2 types: first one is the type of the topmost container you have in the widget’s xml (which is the FlowPanel in our case) and the second one is the widget’s class itself.
Then we have a constructor which takes a data object as only input parameter. The linkage of the UiBinder XML to the widget happens in the initWidget() method call.
Everything is very simple.

The last part is the entry point class which shows how easy it is to instantiate and show the UserProfile widget:

public class UiBinderLearning implements EntryPoint {

    public void onModuleLoad() {
        UserProfileDO upDO = new UserProfileDO("Project manager at Epam Systems.", "alexander.arendar@gmail.com",
                "/images/me.jpg", "+380952600399", "Alexander Arendar", "aarendar.wordpress.com");
        UserProfile userProfile= new UserProfile(upDO);
        RootPanel.get().add(userProfile);
    }
}

What we have in the browser is:

What we still miss is some styling for labels. I’ll show in the next post how to do it.
Conclusion: UiBinder really separates UI from business logic and all the middle-code stuff. I really liked it and will use it a lot.

My plan was to have something like this:

Goals:

• Simple but extensible validation framework
• required fields validation for start
• Validation fires when user clicks “Submit” button

I started with 2 interfaces:

public interface IValidatable {

 public void setIsRequired(boolean value);
 public boolean getIsRequired();
 public void setErrorMessage(String value);
 public String getErrorMessage();
 public ValidationResult validate();
 public void indicateValidity(boolean valid);

}

This one should be implemented in any UI component that should behave like a validatable form field.
Further we should have an interface which any form containing such validatable fields should implement:

import java.util.List;
 public interface IValidatableForm {
 public void registerField(IValidatable field);
 public void unregisterField(IValidatable field);
 public List<ValidationResult> validate();
 public boolean indicateValidity(List<ValidationResult> validationResult);
}

The idea is that the form can be anything and we don’t know exactly how it layouts its fields. It can also contain some fields (elements) that should not be validatable. So whoever composes the form should do it in normal way and when all children (fields) are added to the form it is needed to call for each of them registerField(field) method.
Whenever a validation should be performed it is needed to call validate() method of the form which will internally call validate() method of each registered field. Then aggregated validation result is passed to the indicateValidity() method of the IAggregatableForm which again delegates it to indicateValidity() of each particular field. So it is nothing else but the Composite design pattern.
Fields in my initial “rude” form where represented by the TextBox and TextArea components.
Next step is to enhance them for the sake of validation support.
Here is how to make the TextBox enhancement:

public class VTextBox extends Composite implements IValidatable {
 private String errorMessage = "";
 private boolean isRequired = false;
 private HorizontalPanel container;
 private Image validityIcon;
 private Image requiredIcon;
 private TextBox textBox;

 @Override
 public String getErrorMessage() {
  return errorMessage;
 }

 @Override
 public boolean getIsRequired() {
  return isRequired;
 }

 @Override
 public void indicateValidity(boolean valid) {
  if (valid)
  {
   validityIcon.setUrl("/images/icons/noerror.png");
  }
  else
  {
   validityIcon.setUrl("/images/icons/error.png")
  }
 }

 @Override
 public void setErrorMessage(String value) {
  this.errorMessage = value;
 }

 @Override
 public void setIsRequired(boolean value) {
  this.isRequired = value;
  container.remove(requiredIcon);
  if (value)
  {
   requiredIcon = new Image("/images/icons/required.png");
  }
  else
  {
   requiredIcon = new Image("/images/icons/isrequiredclear.png");
  }
  container.insert(requiredIcon, 0);
 }

 @Override
 public ValidationResult validate() {
  ValidationResult result = new ValidationResult();
  result.setValidatedObject(this);
  result.setValid(true);
  if (isRequired)
  {
   if (textBox.getText()== null || textBox.getText().length()== 0)
   {
    result.setValid(false);
   }
  }
  return result;
 }

 public VTextBox()
 {
  super();
  container = new HorizontalPanel();
  requiredIcon = new Image("/images/icons/isrequiredclear.png");
  container.add(requiredIcon);
  textBox = new TextBox();
  container.add(textBox);
  validityIcon = new Image("/images/icons/clearerror.png");
  container.add(validityIcon);
  initWidget(container);
 }

 public String getText()
 {
  return textBox.getText();
 }

 public void setText(String value)
 {
  textBox.setText(value);
 }

 @Override
 public void setWidth(String value)
 {
  textBox.setWidth(value);
 }
}

The same goes for the VTextArea class implementation so I omit it here. You can also analogically create V-classes from virtually any widget that should be validatable.

Here is the implementation of the form:

public class NewCommentForm extends Composite implements IValidatableForm {
 private List<IValidatable> validatableFields = new ArrayList<IValidatable>();
 private FlowPanel container;
 private HorizontalPanel userNameHolder;
 private Label userNameLable;
 private VTextBox userNameField;
 private HorizontalPanel commentBodyHolder;
 private Label commentBodyLable;
 private VTextArea commentBodyField;
 private Button submitButton;

 public NewCommentForm()
 {
  super();
  container = new FlowPanel();
  userNameHolder = new HorizontalPanel();
  commentBodyHolder = new HorizontalPanel();
  userNameLable = new Label("Name");
  userNameField = new VTextBox();
  userNameField.setIsRequired(true);
  userNameField.setWidth("200px");
  registerField(userNameField);
  commentBodyLable = new Label("Comment");
  commentBodyField = new VTextArea();
  commentBodyField.setIsRequired(true);
  commentBodyField.setWidth("400px");
  commentBodyField.setHeight("200px");
  registerField(commentBodyField);
  userNameHolder.add(userNameField);
  userNameHolder.add(userNameLable);
  commentBodyHolder.add(commentBodyField);
  commentBodyHolder.add(commentBodyLable);
  container.add(userNameHolder);
  container.add(commentBodyHolder);
  submitButton = new Button("Submit");
  container.add(submitButton);
  initWidget(container);
 }

 public void setSubmitHandler(ClickHandler handler)
 {
  submitButton.addClickHandler(handler);
 }

 public String getUserName()
 {
  return userNameField.getText();
 }

 public String getCommentBody()
 {
  return commentBodyField.getText();
 }

 public void reset()
 {
  userNameField.setText("");
  commentBodyField.setText("");
 }

 @Override
 public boolean indicateValidity(List<ValidationResult> validationResult) {
  boolean result = true;
  if (validationResult != null)
  {
   for (ValidationResult fieldValidity: validationResult)
   {
    fieldValidity.getValidatedObject().indicateValidity(fieldValidity.isValid());
    if (! fieldValidity.isValid())
    {
     result = false;
    }
   }
  }
  return result;
 }

 @Override
 public void registerField(IValidatable field) {
  validatableFields.add(field);
 }

 @Override
 public void unregisterField(IValidatable field) {
  int index = validatableFields.indexOf(field);
  if (index != -1)
  {
   validatableFields.remove(index);
  }
 }

 @Override
 public List<ValidationResult> validate() {
  List<ValidationResult> result = new ArrayList<ValidationResult>();
  for (IValidatable field: validatableFields)
  {
   result.add(field.validate());
  }
  return result;
 }
}

So the form and its constituents are ready.
Now is the time to compose everything together. I am doing this in a PopupPanel:

public class NewPopupComment extends PopupPanel {

 private CommentItem parentCommentItem;
 private HorizontalPanel container;
 private NewCommentForm newCommentForm;

 public NewPopupComment(CommentItem commentItem)
 {
  super(false, true);
  this.parentCommentItem = commentItem;
  container = new HorizontalPanel();
  newCommentForm = new NewCommentForm();
  newCommentForm.setSubmitHandler(new ClickHandler(){
  @Override
  public void onClick(ClickEvent event) {
   List<ValidationResult> validationResult = newCommentForm.validate();
   if (newCommentForm.indicateValidity(validationResult))
   {
    //here validation is passed and here should go the corresponding code.
   }
  }
  container.add(newCommentForm);
  Image closeIcon = new Image("/images/buttons/close.png");
  closeIcon.addClickHandler(new ClickHandler()
  {
   @Override
   public void onClick(ClickEvent event) {
    NewPopupComment.this.hide();
    NewPopupComment.this.clear();
   }
  });
  container.add(closeIcon);
  add(container);
  center();
 }
}

As you can see the form is instantiated, placed into the popup and the submit button handler is setup which is actually doing the validation job among others.

The best way of learning new technology is implementation of some real idea that you have in your head.

Many of you should know the Artemiy Lebedev’s design studio site. Sometimes when I have a spare minute I like to visit their Business Lynch block. Their idea is very funny: people sends examples of their own design pieces and ask professionals from Lebedev art studio to evaluate and comment them. Most often they comment the work in a “It sucks” fashion.
I always wished there was a possibility for site visitors to leave comments there as well, that would be funny. But authors of the site did not provide such possibility.

So my idea was to create a small site that will cut from the ArtLebedev portal only Business Lynch block and allow visitors posting their comments. And I wanted this to be done on GAE and with help of GWT.

I did it quite fast, in few days of work. The result is here: art-lebedev-mirror.

Now I will briefly describe how it is done and what I used and learned for doing it.

The first thing was to get the raw HTML content of the original site and extracting the Business Lynch block out of there. So I needed a parser. My brain already tried earlier the convenient way of working with XML in Flex so I was about to work with DOM instead of some SAX parsers.

Most of SAX parsers expect y0u feed them with well formed XML documents. As you might already suggest the HTML source code of the ArtLebedev site was not strict and well-formed enough. So good well-known SAX parsers just thrown me some errors and refused to dig further.

Then I found in the internet the TagSoup parser which was designed specifically to be able to parse even very crappy documents. Also I found out the Apache Xalan processor. I feed the SAX-source produced by TagSoup to Xalan and it gave me a nice DOM representation of the HTML source code. So I was able to cut out the pieces I need.

The next thing was to add commenting facility. I decided to use GAE JDO for persistence and GWT for the overall UI.

There was one surprise with JDO here. As far as comment can be replied to other comments I decided to model the data entities recursively, i.e. allowing Comment entity to contain list of other Comment entities. I wasted the whole day on this trying to understand why the simple thing is not working and finally good people shown me this known DataNucleus issue.  So I needed to redevelop the relationship as unowned

In the process I learned also a log of different small things in GWT that you will not feel until you start building real things.