documentation/docs/why-click.html - click - Git at Google

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
 <!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
 -->
 <html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
  <meta name="Author" content="Malcolm Edgar"/>
  <meta name="description" lang="en" content="Apache Click Java web application framework"/>
  <meta name="keywords" lang="en" content="Apache Click, Click Framework, Java, JEE, J2EE, web application framework, open source"/>
  <title>Apache Click</title>
  <link rel="stylesheet" type="text/css" href="../help.css"/>
  <style type="text/css">
    ul { margin-top: 0.5em; }
    li { margin-bottom: 0.25em; }
  </style>
 </head>
 <body>

 <h1>Why Click</h1>
 <p/>
 This topic discusses the design philosophy and background behind Click, and hopefully explains why someone would build
 another Java web application framework.
 <p/>
 <br/>


 Click is a modern JEE web application framework, providing a natural rich client
 style programming model. &nbsp; Key features of Click include:

 <h2>1.&nbsp; Simple to Learn</h2>
 Click is designed to be simple to learn so that new developers can get up and running in a day.  This is very important
 with commercial development teams where you have a wide range of skill levels and motivation.
 <p/>
 To support ease of adoption Click has some of the best documentation available for an open source framework and
 includes many working examples.
 <p/>

 <h2>2.&nbsp; Component and Page Oriented Design</h2>
 If you have done traditional GUI programming with Swing, VB or Delphi you will know that there is something very wrong
 with JEE web development. JEE web development is painfully slow, complex and error prone.
 <p/>
 One of the first generation JEE web frameworks was Struts, which provides a command pattern design and a set of JSP
 tag libs. Unfortunately with Struts you are still down in the weeds, mapping URLs to Actions and working with primitive
 ActionForms.  Its not giving you much leverage at all.
 <p/>
 Tapestry was one of the first component based JEE web frameworks, introducing component hierarchies, pages and an
 event based programming model.  This is a much more productive way of working, and is what we have come to expect
 when developing desktop GUI applications.
 <p/>
 The idea with Click was to take this page and component design approach, and make it much easier to use and more
 accessible.
 <p/>
 Click provides a Page oriented design, featuring Control components and an event based programming model. Click
 includes 40 Controls out of the box, which correspond to the major HTML elements. It's a great way of programming
 more simply.
 <p/>
 Click Forms and Controls provide automatic validation and rendering, making form development very fast and robust.

 <h2>3.&nbsp; JSP &amp; MVC Free</h2>
 Click is JSP and MVC Free. This is a good thing!
 <p/>
 JSP's combined with the miss application of the MVC pattern have been holding back JEE web development for many years.
 It's a big statement I know, please let me explain.
 <p/>
 MVC is a desktop GUI design pattern, which supports a separation of roles in UI design. Model is the data, the
 View does the rendering and the Control is for modifying the data.  Now MVC is a fairly sophisticated UI pattern
 which solves the problem of multiple views and controls sharing the same data.
 <p/>
 For most UI development however MVC is overkill. The control and the view are usually the same thing.  For example,
 a Select box is the view and the control and also holds the model. In Swing fortunately, most of the MVC design is
 hidden away below the surface.  In VB and Delphi there is no MVC at all.
 <p/>
 In the early days of JEE web development design patterns were highly coveted, and MVC was grabbed and early Servlet/JSP
 designs were branded as MVC. In their analysis the model was usually a DAO, the view was the JSP and control was a
 Servlet.
 <p/>
 The effect of this was to lock in the design concept where the UI MVC roles were strictly separated. This fits well
 with the generalized architectural principle separating layers, and with the fact that JSPs are only really suitable
 for rendering output.
 <p/>
 Unfortunately the cost of this strict separation was the encapsulation. Most rich client UI components encapsulate
 their rendering and control functionality. Click components (Controls) are responsible for both rendering themselves
 (view) and then understanding what they mean (control).
 <p/>
 To see this concept in action take a simple Click page where we have an ActionLink Control.
 <pre class="codeJava">
 <span class="kw">public class</span> ExamplePage <span class="kw">extends</span> Page {

     @Bindable <span class="kw">protected</span> ActionLink myLink = <span class="kw">new</span> ActionLink(<span class="kw">this</span>, "<span class="st">onClick</span>");

     <span class="kw">public boolean</span> onClick() {
         System.out.println("<span class="st">onClick invoked</span>");
         <span class="kw">return true</span>;
     }
 }
 </pre>

 We include our <span class="st">myLink</span> ActionLink control in the
 HTML page template:

 <pre class="codeHtml">
 &lt;a href="<span class="st">$myLink.href</span>"&gt;Click Me&lt;/a&gt;
 </pre>

 At runtime the control <span class="st">href</span> attribute renders as:

 <pre class="codeHtml">
 &lt;a href="<span class="st">/mycorp/example-page.htm?actionLink=myLink</span>"&gt;Click Me&lt;/a&gt;
 </pre>

 If the user clicks the link, the ActionLink control invokes the Page's <code>onClick()</code> method.
 <p/>
 Conversely with the JSP MVC architecture a JSP can tell you something, but it can't understand what it has just
 said. Think about this for a second. There is no single UI component that is taking responsibility for its own actions.
 Guess where the responsibility then falls to...
 <p/>
 You become responsible for wiring up the numerous pieces to make it work. In Struts this can include:
 <ul>
    <li>writing a custom <tt>Action</tt> class</li>
    <li>writing a custom <tt>ActionForm</tt> class</li>
    <li>specifying the <tt>action</tt> elements in the <tt>struts-config.xml</tt> file</li>
    <li>specifying the <tt>form-bean</tt> element in the <tt>struts-config.xml</tt> file</li>
    <li>specifying the <tt>form</tt> element in the <tt>validation.xml</tt> file</li>
    <li>specifying the form <tt>field</tt> validation elements in the <tt>validation.xml</tt> file</li>
    <li>ensure all bindings are correct between the XML elements: <tt>action</tt>, <tt>form-bean</tt>, <tt>form</tt>, <tt>field</tt></li>
    <li>specifying the tag lib includes in the JSP file</li>
    <li>specifying the &lt;htm:form&gt; and &lt;html&gt; field tag XML elements and attributes correctly in the JSP file</li>
 </ul>

 In development of large applications this becomes a voluminous, tedious and error prone task.
 <p/>
 Another aspect of these designs is the transfer of logic from Java code into XML configuration files. Tapestry and Spring MVC
 also make extensive use of XML. The problem with this is compile time errors now only become apparent at runtime.
 Also writing and maintaining large volumes of XML is more difficult than Java code. The Java IDE refactoring
 tools are much more sophisticated than the XML tools available.
 <p/>
 Click enables you to apply Object Oriented design principles such as subclassing to extend other Controls,
 or aggregation to build more sophisticated UI components. For example the Click control <tt>CreditCardField</tt>
 "<i>is a</i>" subclass of <tt>TextField</tt> and "<i>has a</i>" <tt>Select</tt> control for specifying the card type.


 <h2>4.&nbsp; Velocity</h2>

 For rendering HTML Click uses the Velocity template engine. Velocity has a simple
 instruction set which is very easy to learn and use.
 For example take a look at the template below.

 <pre class="codeHtml">
 <span class="kw">#if</span> (!<span class="st">$session.order.lineItems.empty</span>)
 &lt;table&gt;
   &lt;tr&gt;
     &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;Quantity&lt;/th&gt; &lt;th&gt;Total Price&lt;/th&gt;
   &lt;/tr&gt;
   <span class="kw">#foreach</span> (<span class="st">$lineItem</span> <span class="kw">in</span> <span class="st">$session.order.lineItems</span>)
   &lt;tr&gt;
     &lt;td&gt;<span class="st">$lineItem.name</span>&lt;/td&gt;
     &lt;td&gt;<span class="st">$lineItem.quantity</span>&lt;/td&gt;
     &lt;td&gt;<span class="st">$lineItem.totalPrice</span>&lt;/td&gt;
   &lt;/tr&gt;
   <span class="kw">#end</span>
 &lt;/table&gt;
 <span class="kw">#else</span>
   No items have been ordered.
 <span class="kw">#end</span>
 </pre>

 You should have a pretty good idea of what this code does without having to consult any taglib
 documentation. Velocity's ease of use made it the ideal choice for Click.
 <p/>
 The one tricky part of Velocity, <i>configuration</i> is handled automatically by Click.
 <p/>
 Please note that Click's template service is pluggable so you can also use
 <a href="http://freemarker.sourceforge.net/">Freemarker</a> or JSPs for rendering
 in Click. It should be said that JSP 2.0 and the JSP Expression Language has
 improved the usability of JSP in recent years.

 </body>
 </html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
	<!--
	Licensed to the Apache Software Foundation (ASF) under one
	or more contributor license agreements. See the NOTICE file
	distributed with this work for additional information
	regarding copyright ownership. The ASF licenses this file
	to you under the Apache License, Version 2.0 (the
	"License"); you may not use this file except in compliance
	with the License. You may obtain a copy of the License at

	http://www.apache.org/licenses/LICENSE-2.0

	Unless required by applicable law or agreed to in writing,
	software distributed under the License is distributed on an
	"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
	KIND, either express or implied. See the License for the
	specific language governing permissions and limitations
	under the License.
	-->
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
	<meta name="Author" content="Malcolm Edgar"/>
	<meta name="description" lang="en" content="Apache Click Java web application framework"/>
	<meta name="keywords" lang="en" content="Apache Click, Click Framework, Java, JEE, J2EE, web application framework, open source"/>
	<title>Apache Click</title>
	<link rel="stylesheet" type="text/css" href="../help.css"/>
	<style type="text/css">
	ul { margin-top: 0.5em; }
	li { margin-bottom: 0.25em; }
	</style>
	</head>
	<body>

	<h1>Why Click</h1>
	<p/>
	This topic discusses the design philosophy and background behind Click, and hopefully explains why someone would build
	another Java web application framework.
	<p/>
	<br/>


	Click is a modern JEE web application framework, providing a natural rich client
	style programming model.   Key features of Click include:

	<h2>1.  Simple to Learn</h2>
	Click is designed to be simple to learn so that new developers can get up and running in a day. This is very important
	with commercial development teams where you have a wide range of skill levels and motivation.
	<p/>
	To support ease of adoption Click has some of the best documentation available for an open source framework and
	includes many working examples.
	<p/>

	<h2>2.  Component and Page Oriented Design</h2>
	If you have done traditional GUI programming with Swing, VB or Delphi you will know that there is something very wrong
	with JEE web development. JEE web development is painfully slow, complex and error prone.
	<p/>
	One of the first generation JEE web frameworks was Struts, which provides a command pattern design and a set of JSP
	tag libs. Unfortunately with Struts you are still down in the weeds, mapping URLs to Actions and working with primitive
	ActionForms. Its not giving you much leverage at all.
	<p/>
	Tapestry was one of the first component based JEE web frameworks, introducing component hierarchies, pages and an
	event based programming model. This is a much more productive way of working, and is what we have come to expect
	when developing desktop GUI applications.
	<p/>
	The idea with Click was to take this page and component design approach, and make it much easier to use and more
	accessible.
	<p/>
	Click provides a Page oriented design, featuring Control components and an event based programming model. Click
	includes 40 Controls out of the box, which correspond to the major HTML elements. It's a great way of programming
	more simply.
	<p/>
	Click Forms and Controls provide automatic validation and rendering, making form development very fast and robust.

	<h2>3.  JSP & MVC Free</h2>
	Click is JSP and MVC Free. This is a good thing!
	<p/>
	JSP's combined with the miss application of the MVC pattern have been holding back JEE web development for many years.
	It's a big statement I know, please let me explain.
	<p/>
	MVC is a desktop GUI design pattern, which supports a separation of roles in UI design. Model is the data, the
	View does the rendering and the Control is for modifying the data. Now MVC is a fairly sophisticated UI pattern
	which solves the problem of multiple views and controls sharing the same data.
	<p/>
	For most UI development however MVC is overkill. The control and the view are usually the same thing. For example,
	a Select box is the view and the control and also holds the model. In Swing fortunately, most of the MVC design is
	hidden away below the surface. In VB and Delphi there is no MVC at all.
	<p/>
	In the early days of JEE web development design patterns were highly coveted, and MVC was grabbed and early Servlet/JSP
	designs were branded as MVC. In their analysis the model was usually a DAO, the view was the JSP and control was a
	Servlet.
	<p/>
	The effect of this was to lock in the design concept where the UI MVC roles were strictly separated. This fits well
	with the generalized architectural principle separating layers, and with the fact that JSPs are only really suitable
	for rendering output.
	<p/>
	Unfortunately the cost of this strict separation was the encapsulation. Most rich client UI components encapsulate
	their rendering and control functionality. Click components (Controls) are responsible for both rendering themselves
	(view) and then understanding what they mean (control).
	<p/>
	To see this concept in action take a simple Click page where we have an ActionLink Control.
	<pre class="codeJava">
	<span class="kw">public class</span> ExamplePage <span class="kw">extends</span> Page {

	@Bindable <span class="kw">protected</span> ActionLink myLink = <span class="kw">new</span> ActionLink(<span class="kw">this</span>, "<span class="st">onClick</span>");

	<span class="kw">public boolean</span> onClick() {
	System.out.println("<span class="st">onClick invoked</span>");
	<span class="kw">return true</span>;
	}
	}
	</pre>

	We include our <span class="st">myLink</span> ActionLink control in the
	HTML page template:

	<pre class="codeHtml">
	<a href="<span class="st">$myLink.href</span>">Click Me</a>
	</pre>

	At runtime the control <span class="st">href</span> attribute renders as:

	<pre class="codeHtml">
	<a href="<span class="st">/mycorp/example-page.htm?actionLink=myLink</span>">Click Me</a>
	</pre>

	If the user clicks the link, the ActionLink control invokes the Page's <code>onClick()</code> method.
	<p/>
	Conversely with the JSP MVC architecture a JSP can tell you something, but it can't understand what it has just
	said. Think about this for a second. There is no single UI component that is taking responsibility for its own actions.
	Guess where the responsibility then falls to...
	<p/>
	You become responsible for wiring up the numerous pieces to make it work. In Struts this can include:
	<ul>
	<li>writing a custom <tt>Action</tt> class</li>
	<li>writing a custom <tt>ActionForm</tt> class</li>
	<li>specifying the <tt>action</tt> elements in the <tt>struts-config.xml</tt> file</li>
	<li>specifying the <tt>form-bean</tt> element in the <tt>struts-config.xml</tt> file</li>
	<li>specifying the <tt>form</tt> element in the <tt>validation.xml</tt> file</li>
	<li>specifying the form <tt>field</tt> validation elements in the <tt>validation.xml</tt> file</li>
	<li>ensure all bindings are correct between the XML elements: <tt>action</tt>, <tt>form-bean</tt>, <tt>form</tt>, <tt>field</tt></li>
	<li>specifying the tag lib includes in the JSP file</li>
	<li>specifying the <htm:form> and <html> field tag XML elements and attributes correctly in the JSP file</li>
	</ul>

	In development of large applications this becomes a voluminous, tedious and error prone task.
	<p/>
	Another aspect of these designs is the transfer of logic from Java code into XML configuration files. Tapestry and Spring MVC
	also make extensive use of XML. The problem with this is compile time errors now only become apparent at runtime.
	Also writing and maintaining large volumes of XML is more difficult than Java code. The Java IDE refactoring
	tools are much more sophisticated than the XML tools available.
	<p/>
	Click enables you to apply Object Oriented design principles such as subclassing to extend other Controls,
	or aggregation to build more sophisticated UI components. For example the Click control <tt>CreditCardField</tt>
	"<i>is a</i>" subclass of <tt>TextField</tt> and "<i>has a</i>" <tt>Select</tt> control for specifying the card type.


	<h2>4.  Velocity</h2>

	For rendering HTML Click uses the Velocity template engine. Velocity has a simple
	instruction set which is very easy to learn and use.
	For example take a look at the template below.

	<pre class="codeHtml">
	<span class="kw">#if</span> (!<span class="st">$session.order.lineItems.empty</span>)
	<table>
	<tr>
	<th>Name</th> <th>Quantity</th> <th>Total Price</th>
	</tr>
	<span class="kw">#foreach</span> (<span class="st">$lineItem</span> <span class="kw">in</span> <span class="st">$session.order.lineItems</span>)
	<tr>
	<td><span class="st">$lineItem.name</span></td>
	<td><span class="st">$lineItem.quantity</span></td>
	<td><span class="st">$lineItem.totalPrice</span></td>
	</tr>
	<span class="kw">#end</span>
	</table>
	<span class="kw">#else</span>
	No items have been ordered.
	<span class="kw">#end</span>
	</pre>

	You should have a pretty good idea of what this code does without having to consult any taglib
	documentation. Velocity's ease of use made it the ideal choice for Click.
	<p/>
	The one tricky part of Velocity, <i>configuration</i> is handled automatically by Click.
	<p/>
	Please note that Click's template service is pluggable so you can also use
	<a href="http://freemarker.sourceforge.net/">Freemarker</a> or JSPs for rendering
	in Click. It should be said that JSP 2.0 and the JSP Expression Language has
	improved the usability of JSP in recent years.

	</body>
	</html>