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.
<servlet> <servlet-name>click-servlet</servlet-name> <servlet-class>tk.click.html.ClickHTMLServlet</servlet-class> <load-on-startup>0</load-on-startup> </servlet>
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".
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.
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
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>
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 |
You can use all Velocity directives in Clicklets. So you would be able to use existing Velocity templates with small modification.
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.