| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| |
| <!-- |
| Copyright 1999-2004 The Apache Software Foundation |
| Licensed 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. |
| --> |
| |
| |
| <!-- Content Stylesheet for Site --> |
| |
| |
| <!-- start the processing --> |
| <!-- ====================================================================== --> |
| <!-- GENERATED FILE, DO NOT EDIT, EDIT THE XML FILE IN xdocs INSTEAD! --> |
| <!-- Main Page Section --> |
| <!-- ====================================================================== --> |
| <html> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> |
| |
| <meta name="author" value="Jon S. Stevens"> |
| <meta name="email" value="jon@latchkey.com"> |
| |
| |
| |
| |
| <title>Velocity - You make the decision - Saying Hello</title> |
| </head> |
| |
| <body bgcolor="#ffffff" text="#000000" link="#525D76"> |
| <table border="0" width="100%" cellspacing="0"> |
| <!-- TOP IMAGE --> |
| <tr> |
| <td align="left"> |
| <a href="http://jakarta.apache.org"><img src="http://jakarta.apache.org/images/jakarta-logo.gif" border="0"/></a> |
| </td> |
| <td align="right"> |
| <a href="http://jakarta.apache.org/velocity/"><img src="../images/logo.gif" alt="Velocity" border="0"/></a> |
| </td> |
| </tr> |
| </table> |
| <table border="0" width="100%" cellspacing="4"> |
| <tr><td colspan="2"> |
| <hr noshade="" size="1"/> |
| </td></tr> |
| |
| <tr> |
| <!-- LEFT SIDE NAVIGATION --> |
| <td width="20%" valign="top" nowrap="true"> |
| |
| <!-- ============================================================ --> |
| |
| <p><strong>About</strong></p> |
| <ul> |
| <li> <a href="../index.html">Overview</a> |
| </li> |
| <li> <a href="../getting-started.html">Getting Started</a> |
| </li> |
| <li> <a href="http://jakarta.apache.org/builds/jakarta-velocity/">Download</a> |
| </li> |
| <li> <a href="../install.html">Install</a> |
| </li> |
| <li> <a href="../design.html">Design</a> |
| </li> |
| <li> <a href="../contributors.html">Contributors</a> |
| </li> |
| <li> <a href="../changes.html">ChangeLog</a> |
| </li> |
| <li> <a href="../code-standards.html">Coding Standards</a> |
| </li> |
| <li> <a href="../license.html">License</a> |
| </li> |
| <li> <a href="../todo.html">TODO</a> |
| </li> |
| <li> <a href="http://issues.apache.org/bugzilla/enter_bug.cgi?product=Velocity">Report Issues</a> |
| </li> |
| </ul> |
| <p><strong>Community</strong></p> |
| <ul> |
| <li> <a href="../powered.html">Powered By Velocity</a> |
| </li> |
| <li> <a href="http://jakarta.apache.org/site/getinvolved.html">Get Involved</a> |
| </li> |
| <li> <a href="http://jakarta.apache.org/site/mail.html">Mailing Lists</a> |
| </li> |
| <li> <a href="http://jakarta.apache.org/site/cvsindex.html">CVS Repositories</a> |
| </li> |
| </ul> |
| <p><strong>Docs</strong></p> |
| <ul> |
| <li> <a href="../user-guide.html">User's Guide (English)</a> |
| </li> |
| <li> <a href="../user-guide_fi.html">User's Guide (Finnish)</a> |
| </li> |
| <li> <a href="../user-guide_fr.html">User's Guide (French)</a> |
| </li> |
| <li> <a href="../user-guide_es.html">User's Guide (Spanish)</a> |
| </li> |
| <li> <a href="../developer-guide.html">Developer's Guide</a> |
| </li> |
| <li> <a href="../vtl-reference-guide.html">VTL Reference Guide</a> |
| </li> |
| <li> <a href="../specification.html">Specification</a> |
| </li> |
| <li> <a href="../api/index.html">Javadoc</a> |
| </li> |
| </ul> |
| <p><strong>Tools</strong></p> |
| <ul> |
| <li> <a href="../tools/index.html">Velocity Tools</a> |
| </li> |
| <li> <a href="../anakia.html">Anakia : XML->doc tool</a> |
| </li> |
| <li> <a href="../texen.html">Texen : text generation</a> |
| </li> |
| <li> <a href="../dvsl/index.html">DVSL : XML xformation</a> |
| </li> |
| <li> <a href="../veltag.html">Veltag : JSP taglib</a> |
| </li> |
| <li> <a href="../migration.html">Migration to Velocity</a> |
| </li> |
| <li> <a href="../devtools.html">Editors and IDEs</a> |
| </li> |
| </ul> |
| <p><strong>Comparisons</strong></p> |
| <ul> |
| <li> <a href="../ymtd/ymtd.html">YMTD</a> |
| </li> |
| <li> <a href="../differences.html">VM/WM Differences</a> |
| </li> |
| <li> <a href="../casestudy1.html">JSP vs. Velocity</a> |
| </li> |
| <li> <a href="../casestudy2.html">XMLC vs. Velocity</a> |
| </li> |
| </ul> |
| <p><strong>Site Translations</strong></p> |
| <ul> |
| <li> <a href="http://jakarta.apache.org/velocity/">English</a> |
| </li> |
| <li> <a href="http://www.ingrid.org/jajakarta/velocity/velocity-1.2-rc2/docs-ja/index.html">Japanese</a> |
| </li> |
| </ul> |
| </td> |
| <td width="80%" align="left" valign="top"> |
| <table border="0" cellspacing="0" cellpadding="2" width="100%"> |
| <tr><td bgcolor="#525D76"> |
| <font color="#ffffff" face="arial,helvetica,sanserif"> |
| <a name="Saying Hello"><strong>Saying Hello</strong></a> |
| </font> |
| </td></tr> |
| <tr><td> |
| <blockquote> |
| <p> |
| Ok, lets start off with some easy examples. These examples really do not |
| even touch on the basics of correct design. However, they still make |
| good examples because correct design is often harder than showing a |
| simple example. We will show better examples further along in this |
| essay. |
| </p> |
| <p> |
| For the first example, we show that there are two different approaches |
| of doing the same exact thing using both JSP and Velocity. This is an |
| example of printing out a parameter with JSP: |
| </p> |
| <div align="left"> |
| <table cellspacing="4" cellpadding="0" border="0"> |
| <tr> |
| <td bgcolor="#023264" width="1" height="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| <td bgcolor="#023264" height="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| <td bgcolor="#023264" width="1" height="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| </tr> |
| <tr> |
| <td bgcolor="#023264" width="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| <td bgcolor="#ffffff"><pre> |
| <html> |
| <head><title>Hello</title></head> |
| <body> |
| <h1> |
| <% |
| if (request.getParameter("name") == null) { |
| out.println("Hello World"); |
| } |
| else { |
| out.println("Hello, " + request.getParameter("name")); |
| } |
| %> |
| </h1> |
| </body></html></pre></td> |
| <td bgcolor="#023264" width="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| </tr> |
| <tr> |
| <td bgcolor="#023264" width="1" height="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| <td bgcolor="#023264" height="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| <td bgcolor="#023264" width="1" height="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| </tr> |
| </table> |
| </div> |
| <p> |
| This is an example of doing the same thing with Velocity: |
| </p> |
| <div align="left"> |
| <table cellspacing="4" cellpadding="0" border="0"> |
| <tr> |
| <td bgcolor="#023264" width="1" height="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| <td bgcolor="#023264" height="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| <td bgcolor="#023264" width="1" height="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| </tr> |
| <tr> |
| <td bgcolor="#023264" width="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| <td bgcolor="#ffffff"><pre> |
| <html> |
| <head><title>Hello</title></head> |
| <body> |
| <h1> |
| #if ($request.getParameter("name") == null) |
| Hello World |
| #else |
| Hello, $request.getParameter("name") |
| #end |
| </h1> |
| </body></html></pre></td> |
| <td bgcolor="#023264" width="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| </tr> |
| <tr> |
| <td bgcolor="#023264" width="1" height="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| <td bgcolor="#023264" height="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| <td bgcolor="#023264" width="1" height="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| </tr> |
| </table> |
| </div> |
| <ul> |
| <li><a href="./images/hello-jsp.gif" target="newWindow">Hello JSP Screen shot</a></li> |
| <li><a href="./images/hello-velocity.gif" target="newWindow">Hello Velocity Screen shot</a></li> |
| </ul> |
| <p> |
| <font size="-1">[ These two screen shots demonstrate the idea that one |
| cannot easily look at what the code is doing in a browser when using |
| JSP. ]</font> |
| </p> |
| <hr noshade="true" size="1" /> |
| <p> |
| The primary difference between the two is the way that output is |
| performed. With JSP, one needs to embed "code" within <code><% |
| %></code> tags and for Velocity, one does not need to embed "code" |
| within tags. One can simply use the Velocity Template Language (VTL) |
| directly in any portion of the template. |
| </p> |
| <p> |
| The benefit (and detriment) of the embedded code is that the JSP code |
| within a page will not show up when the file is simply loaded into |
| the browser. On the other hand, there might be a case where one may |
| desire it to show up (for example, in debugging). |
| </p> |
| <p> |
| Another issue with JSP is the fact that even the most basic examples |
| start to blow the whole MVC paradigm right out of the water. The reason |
| is that embedding HTML code within Java code is a bad design decision |
| because it makes it more difficult to modify the look and feel of an |
| application at a later date. It also destroys the concept of MVC |
| separation where the View (ie: HTML) display of the page is separated |
| from the Model and Controller. For example, if just the word "Hello" |
| needed to be in bold, we would need to embed <code><b> |
| </b></code> tags into the <code>out.println()</code> statement. |
| </p> |
| <p> |
| Of course, <i>people in the know</i>, would recommend that we write JSP like |
| this: |
| </p> |
| <div align="left"> |
| <table cellspacing="4" cellpadding="0" border="0"> |
| <tr> |
| <td bgcolor="#023264" width="1" height="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| <td bgcolor="#023264" height="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| <td bgcolor="#023264" width="1" height="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| </tr> |
| <tr> |
| <td bgcolor="#023264" width="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| <td bgcolor="#ffffff"><pre> |
| <html> |
| <head><title>Hello</title></head> |
| <body> |
| <h1> |
| <% if (request.getParameter("name") == null) %> |
| Hello World |
| <% else %> |
| Hello, <% request.getParameter("name"); %> |
| </h1> |
| </body></html></pre></td> |
| <td bgcolor="#023264" width="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| </tr> |
| <tr> |
| <td bgcolor="#023264" width="1" height="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| <td bgcolor="#023264" height="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| <td bgcolor="#023264" width="1" height="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| </tr> |
| </table> |
| </div> |
| <p> |
| Or with Struts: |
| </p> |
| <div align="left"> |
| <table cellspacing="4" cellpadding="0" border="0"> |
| <tr> |
| <td bgcolor="#023264" width="1" height="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| <td bgcolor="#023264" height="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| <td bgcolor="#023264" width="1" height="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| </tr> |
| <tr> |
| <td bgcolor="#023264" width="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| <td bgcolor="#ffffff"><pre> |
| <html> |
| <head><title>Hello</title></head> |
| <body> |
| <h1> |
| <logic:notPresent parameter="name"> |
| Hello World |
| </logic:notPresent> |
| <logic:present parameter="name"> |
| <bean:parameter id="name" name="name"/> |
| Hello, <bean:write name="name"/> |
| </logic:present> |
| </h1> |
| </body></html> |
| </pre></td> |
| <td bgcolor="#023264" width="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| </tr> |
| <tr> |
| <td bgcolor="#023264" width="1" height="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| <td bgcolor="#023264" height="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| <td bgcolor="#023264" width="1" height="1"><img src="/images/void.gif" width="1" height="1" vspace="0" hspace="0" border="0"/></td> |
| </tr> |
| </table> |
| </div> |
| <ul> |
| <li><a href="./images/hello-jsp2.gif" target="newWindow">Hello JSP Screen shot</a></li> |
| </ul> |
| <p> |
| <font size="-1">[ This is the new JSP screen shot showing the above |
| example when loaded directly into the browser. ]</font> |
| </p> |
| <hr noshade="true" size="1" /> |
| <p> |
| The point that needs to be made is that in order to make JSP "pure", one |
| really needs to jump through hoops. The example above looks very similar |
| to the Velocity example. However, one still needs to embed the necessary |
| <code><% %></code> tags everywhere. More typing == more chances |
| for mistakes! There is also a bit of a disconnect as to when the ";" |
| needs to be added and when it does not. With Velocity, the rule is that |
| you place a # before a directive and a $ before a member in the Context. |
| </p> |
| <p> |
| As you can see from the example image, there is now a bit more |
| information in the displayed page, except that it is also missing all of |
| the logic which was used to build the page. If one views the equivalent |
| Velocity template directly in the browser, without it being rendered |
| first, all of the logic in the template remains visible. The advantage |
| is that it is easier to debug problems. |
| </p> |
| <p> |
| You make the decision. |
| </p> |
| <p> |
| <strong>[ <a href="ymtd.html">Home</a> <- Previous | |
| Next -> <a href="./ymtd-generation.html">Generation?</a> ] |
| </strong></p> |
| </blockquote> |
| </p> |
| </td></tr> |
| <tr><td><br/></td></tr> |
| </table> |
| </td> |
| </tr> |
| |
| <!-- FOOTER --> |
| <tr><td colspan="2"> |
| <hr noshade="" size="1"/> |
| </td></tr> |
| <tr><td colspan="2"> |
| <div align="center"><font color="#525D76" size="-1"><em> |
| Copyright © 1999-2004, The Apache Software Foundation |
| </em></font></div> |
| </td></tr> |
| </table> |
| </body> |
| </html> |
| <!-- end the processing --> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
