Useful Links

No cache for Javascript, nice

Tapestry 5: using Select component

to use Select component, first create a page class:

public class Test {
private String gender;

public String getGender() {
return gender;
}

public void setGender(String gender) {
this.gender = gender;
}

public void onSuccess() {
System.out.println(gender);
}
}

in the template:

<input t:type="select" t:id="gender" model="'M,F'"/>

above code works, however it drops down a list of "M" and "F", not so informative, let's change so that it shows 'Male' and 'Female' to the user, but value returned in the variable gender is still single char:

just add a hashmap in the above class:

private HashMap genderModel;

public Test(String gender) {
genderModel = new HashMap();
genderModel.put("M", "Male");
genderModel.put("F", "Female");

}

in the template:
<input t:type="select" name="gender" t:id="gender" model="genderModel" t:value="gender" />

CSS: Styling a form

I found a good tutorial on CSS styling of a form : Tabless Forms

Here is a mini tutorial based on the above mentioned article:

Step 1:

Let's make a basic form first:

<form>
<input name="email" /><br />
<input name="password" /><br />
<input type="submit" name="submit" value="Login" />
</form>

Step 2:

Now, Let's add some labels:

<form>
<label for="email">Email:</label>
<input name="email" id="email" /><br />
<label for="password">Password:</label>
<input name="password" id="password" /><br />
<label for="submit">&nbsp;</label>
<input type="submit" name="submit" id="submit" value="Login" />
</form>

Step 3:
time to style the form, first we use a basic CSS :
<style>
label, input { display:block; float:left;}
br {clear:left;}
</style>

Step 4:
What left now is, to specify a width for the labels and right justify them, also put some padding and margins to make it look nicer, here are the modified CSS for that task:

label, input { display:block; float:left; margin-bottom:10px;}
label {width:75px; text-align:right; padding-right:10px;}
br {clear:left;}