Form separation in Tapestry

In this post I want to talk about separation of form data between sections, why it may be necessary to and how to implement it in tapestry5. Firstly lets think about why we can decide to separate our forms into sections.

1. We may need some organization of form data by logical sense.
2. We may need some separate validation for each group of form data.
3. We may need some validation highlighting for sections with errors.
4. We may have a very long form and want to extract some data into separate components.

All of this is possible. So lets look at this issues step by step.

Tapestry Fixed Control Name Fixin

Have you ever had a problems with Tapestry5 ValidationTracker service? When after zone update inside a form you are trying to submit this form, validation fails and all specified form values inside updated zone disappear? No? Then try this demo, choose country, then city(name is empty), submit => validation fails, city value is missed.

Tapestry Render Deferred Fixin

Tapestry5 pages consists of a set of components placed on this page. When client request comes to the server this components will render themselves in the same order they was placed on the page. The rendering of each component is divided into a number of phases (Component Rendering) but all this phases are triggered within its component rendering. So, what if there is a dependency of component-A in some setup logic of component-B? No problem, when their order is <component-B> => <component-A>. But what will happen if their order is <component-A> => <component-B>? Component-A will have invalid data from component-B(it hasn't initialized itself yet). There is a solution in Label component from tapestry-core. It defers "for" attribute rendering using Heartbeat service.

Tapestry Ajax Upload Fixin

Do you have problems with file uploading when using it with ajax requests?
The issue is that ajax file uploading isn't transparently supported. There are some approaches to solve this issue. I will use jQuery as client side framework and Tapestry5 as server side for all examples.

1. Using advantages of html5 http://www.w3.org/TR/XMLHttpRequest2/#interface-formdata

The main idea is to use special JS interface called FormData. We can create it from existing form element and it will copy all data from it or we can create empty FormData and fill it from scratch. Then we can use it in ajax request and it will work.

... in almost all modern browsers: Chrome 7+, FF 4.0, IE 10+(really?), Opera 12+, Safari 5+. But what about old browsers?

2. Using usual form submission in iframe.
The idea is to emulate asynchronous request via form submission in separate iframe. We just need to create iframe and form targeted to this iframe, attach file inputs to newly created form, copy input values from original form to new as hidden fields, and submit this form as usual. Response from server will be automatically loaded in iframe body.


In this case we should also improve server logic to think about such request as ajax request. And don't forget about escaping.

T5-Examples application moved to Heroku

Just moved my live demo to Heroku cloud application platform. Why I do so? Simple deploy - you just need to push code to heroku git repository and platform will do all remaining work for you. It will force maven build "mvn -B -DskipTests=true clean install" and then execute application instances configured in Procfile.
So, I have git repository on GitHub for my demo. I need to do some configuration to make it run on Heroku:
1. Sign Up
2. Install Heroku Toolbelt
3. Sign in and create new application

4. Link my existing git repository

5. Configure application runner. I use jetty runner for this as described in article. I need to make some enhancement in maven pom.xml:

And add file Procfile:

7. Push to Heroku git repository

8. Open app at http://<app-name>.herokuapp.com/

Now I have linked up my samples on GitHub with live demo on Heroku. All previous articles was updated respectively. It is time to not worry about deploying samples to some app server. It is time to work with code. And when time will come I just need to push it to heroku repository...
More about Heroku