Clicklets

What's this?

Clicklets provides the plain HTML based view template solution for Click.

Click is very the simple and powerful framework for the web application development. It uses Velocity as the default view template engine (of cource, we can use also JSP as view). Velocity is also simple and powerful same as Click. However, when we use Velocity, we can't preview templates with the web browser.

Clicklets solves this problem, and Clicklets provides auto control binding. This feature removes tedious control definition codes from your Page classes. For example. Here is a normal Page class:

public class SamplePage extends Page {
  
  private Form form;
  private TextField text;
  private Submit submit;
  
  public void onInit(){
    form = new Form("form");
    text = new TextField("text");
    submit = new Submit("submit", this, "onClick");
    
    form.add(text);
    form.add(submit);
    addControl(form);
  }
  
  public boolean onClick(){
    ...
  }
}

In Clicklets, you don't have to implement onInit() because controls are assembled from HTML. You would write only the following HTML.

<form name="form">
  <input type="text" name="text" >
  <input type="submit" value="Submit" action="onClick">
</form>

If the Page class has a field which matches control declared in HTML, Clicklets injects it automatically using reflection. And there are no complex parts such as $imports in HTML header or <input type="hidden" name="form_name" value="$form.name"> in forms. Details about auto binding, see Auto Binding section.

Note: Clicklets is under development yet, So it have performance and other problem, and specification might be modified.

Installation

Put clicklets-x.x.jar into WEB-INF/lib

Modify servlet definition in WEB-INF/web.xml

<servlet>
  <servlet-name>click-servlet</servlet-name>
  <servlet-class>tk.click.html.ClickHTMLServlet</servlet-class>
  <load-on-startup>0</load-on-startup>
</servlet>

Reference

<html c:imports="true|false">

If specify "true", Clicklets outputs $imports in HTML header as following:

<html>
  <head>
    $imports
  </head>
  ...
</html>

If "false" then $imports is omitted. the default valueis "true".

c:replace="..."

Replaces the element with the specified value. For example:

<span c:replace="$item.name">Name</span>

This HTML would be converted to the following Velocity template:

$name

You can use this for many purpose.

c:rendered="..."

Controls visibility of the element. If specify "false", the element would not be rendered. You can also specify any Velocity expression as the attribute value.

In fact, This attribute is converted to #if(). For example:

<span class="error" c:rendered="$form.fields.text.error">
  $form.fields.text.error
</span>

This Clicklets would be converted to the following Velocity template.

#if($form.fields.text.error)
  <span class="error">
    $form.fields.text.error
  </span>
#end

c:foreach="..."

Makes loop.

<ul c:foreach="$item in $items">
  <li>$item.name</li>
</ul>

This Clicklets template would be converted to the following Velocity template.

<ul>
#foreach($item in $items)
  <li>$item.name</li>
#end
</ul>

Auto Binding

Clicklets provides auto binding for following controls.

HTML	Control
<form>	net.sf.click.control.Form
<input type="text">	net.sf.click.control.TextField
<input type="password">	net.sf.click.control.PasswordField
<input type="hidden">	net.sf.click.control.HiddenField
<input type="checkbox">	net.sf.click.control.Checkbox
<input type="radio">	net.sf.click.control.Radio / net.sf.click.control.RadioGroup
<input type="file">	net.sf.click.control.FileField
<input type="submit">	net.sf.click.control.Submit
<select> / <option>	net.sf.click.control.Select / net.sf.click.control.Option
<textarea>	net.sf.click.control.TextArea

Velocity Directives

You can use all Velocity directives in Clicklets. So you would be able to use existing Velocity templates with small modification.

Client-Side Validation

Click supports client-side validation since 0.20. Here is an example to use client-side validation in Clicklets.

<form name="form" clientValidation="true" ...>
  ...
</form>
$client-side-errors

Error messages would be displayed in $client-side-errors.