tapestry-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From build...@apache.org
Subject svn commit: r946211 - in /websites/production/tapestry/content: cache/main.pageCache implementing-the-hi-lo-guessing-game.data/Application_Exception.png implementing-the-hi-lo-guessing-game.html using-beaneditform-to-create-user-forms.html
Date Fri, 03 Apr 2015 17:19:36 GMT
Author: buildbot
Date: Fri Apr  3 17:19:36 2015
New Revision: 946211

Log:
Production update by buildbot for tapestry

Added:
    websites/production/tapestry/content/implementing-the-hi-lo-guessing-game.data/Application_Exception.png
  (with props)
Modified:
    websites/production/tapestry/content/cache/main.pageCache
    websites/production/tapestry/content/implementing-the-hi-lo-guessing-game.html
    websites/production/tapestry/content/using-beaneditform-to-create-user-forms.html

Modified: websites/production/tapestry/content/cache/main.pageCache
==============================================================================
Binary files - no diff available.

Added: websites/production/tapestry/content/implementing-the-hi-lo-guessing-game.data/Application_Exception.png
==============================================================================
Binary file - no diff available.

Propchange: websites/production/tapestry/content/implementing-the-hi-lo-guessing-game.data/Application_Exception.png
------------------------------------------------------------------------------
    svn:mime-type = image/png

Modified: websites/production/tapestry/content/implementing-the-hi-lo-guessing-game.html
==============================================================================
--- websites/production/tapestry/content/implementing-the-hi-lo-guessing-game.html (original)
+++ websites/production/tapestry/content/implementing-the-hi-lo-guessing-game.html Fri Apr
 3 17:19:36 2015
@@ -77,7 +77,7 @@ table.ScrollbarTable td.ScrollbarNextIco
 
 /*]]>*/</style><div class="Scrollbar"><table class="ScrollbarTable"><tr><td
colspan="1" rowspan="1" class="ScrollbarPrevIcon"><a shape="rect" href="exploring-the-project.html"><img
align="middle" border="0" src="https://cwiki.apache.org/confluence/images/icons/back_16.gif"
width="16" height="16"></a></td><td colspan="1" rowspan="1" class="ScrollbarPrevName"
width="33%"><a shape="rect" href="exploring-the-project.html">Exploring the Project</a>&#160;</td><td
colspan="1" rowspan="1" class="ScrollbarParent" width="33%"><sup><a shape="rect"
href="tapestry-tutorial.html"><img align="middle" border="0" src="https://cwiki.apache.org/confluence/images/icons/up_16.gif"
width="8" height="8"></a></sup><a shape="rect" href="tapestry-tutorial.html">Tapestry
Tutorial</a></td><td colspan="1" rowspan="1" class="ScrollbarNextName" width="33%">&#160;<a
shape="rect" href="using-beaneditform-to-create-user-forms.html">Using BeanEditForm To
Create User Forms</a></td><td colspan="1" rowspan="1" class="Sc
 rollbarNextIcon"><a shape="rect" href="using-beaneditform-to-create-user-forms.html"><img
align="middle" border="0" src="https://cwiki.apache.org/confluence/images/icons/forwd_16.gif"
width="16" height="16"></a></td></tr></table></div><p><span
style="line-height: 1.4285715;">Let's start building a basic Hi-Lo Guessing game.</span></p><p>In
the game, the computer selects a number between 1 and 10. You try and guess the number, clicking
links. At the end, the computer tells you how many guesses you required to identify the target
number. Even a simple example like this will demonstrate several important concepts in Tapestry:</p><ul><li>Breaking
an application into individual pages</li><li>Transferring information from one
page to another</li><li>Responding to user interactions</li><li>Storing
client information in the server-side session</li></ul><p>We'll build this
little application in small pieces, using the kind of iterative development that Tapestry
makes so easy.</p><p><img clas
 s="confluence-embedded-image" src="implementing-the-hi-lo-guessing-game.data/hilo-flow.png"
data-image-src="/confluence/download/attachments/23340505/hilo-flow.png?version=2&amp;modificationDate=1286814202000&amp;api=v2"></p><p>Our
page flow is very simple, consisting of three pages: Index (the starting page), Guess and
GameOver. The Index page introduces the application and includes a link to start guessing.
The Guess page presents the user with ten links, plus feedback such as "too low" or "too high".
The GameOver page tells the user how many guesses they took before finding the target number.</p><h1
id="ImplementingtheHi-LoGuessingGame-IndexPage">Index Page</h1><p>Let's get
to work on the Index page and template. Make Index.tml look like this:</p><div class="code
panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width:
1px;"><b>Index.tml</b></div><div class="codeContent panelContent pdl">
 <script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[&lt;html
t:type=&quot;layout&quot; title=&quot;Hi/Lo Guess&quot;
-    xmlns:t=&quot;http://tapestry.apache.org/schema/tapestry_5_3.xsd&quot;&gt;
+    xmlns:t=&quot;http://tapestry.apache.org/schema/tapestry_5_4.xsd&quot;&gt;
 
     &lt;p&gt;
         I&#39;m thinking of a number between one and ten ...
@@ -98,7 +98,7 @@ table.ScrollbarTable td.ScrollbarNextIco
         &lt;t:actionlink t:id=&quot;start&quot;&gt;start guessing&lt;/t:actionlink&gt;
     &lt;/p&gt;
 ]]></script>
-</div></div><p>If you refresh the browser and hover your mouse over the
"start guessing" link, you'll see that its URL is now /tutorial1/index.start, which identifies
the name of the page ("index") and the id of the component ("start").</p><p>If
you click the link now, you'll get an error:</p><p><img class="confluence-embedded-image"
src="implementing-the-hi-lo-guessing-game.data/hilo-index-missing-action-error.png" data-image-src="/confluence/download/attachments/23340505/hilo-index-missing-action-error.png?version=3&amp;modificationDate=1416709525000&amp;api=v2"></p><p>Tapestry
is telling us that we need to provide some kind of event handler for that event. What does
that look like?</p><p>An event handler is a method of the Java class with a special
name. The name is <code>on</code><strong><em>Eventname</em></strong><code>From</code><strong><em>Component-id</em></strong>
... here we want a method named <code>onActionFromStart()</code>. How do we know
that "action" is the right eve
 nt name? Because that's what ActionLink does, that's why its named <strong><em>Action</em></strong>Link.</p><p>Once
again, Tapestry gives us options; if you don't like naming conventions, there's an @<a
shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/annotations/OnEvent.html">OnEvent</a>
annotation you can place on the method instead, which restores the freedom to name the method
as you like. Details about this approach are in the <a shape="rect" href="component-events.html">Tapestry
Users' Guide</a>. We'll be sticking with the naming convention approach for the tutorial.</p><p>When
handling a component event request (the kind of request triggered by the ActionLink component's
URL), Tapestry will find the component and trigger a component event on it. This is the callback
our server-side code needs to figure out what the user is doing on the client side. Let's
start with an empty event handler:</p><div class="code panel pdl" s
 tyle="border-width: 1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width:
1px;"><b>Index.java</b></div><div class="codeContent panelContent
pdl">
+</div></div><p>If you refresh the browser and hover your mouse over the
"start guessing" link, you'll see that its URL is now /tutorial1/index.start, which identifies
the name of the page ("index") and the id of the component ("start").</p><p>If
you click the link now, you'll get an error:</p><p><img class="confluence-embedded-image
image-center" width="500" src="implementing-the-hi-lo-guessing-game.data/Application_Exception.png"
data-image-src="/confluence/download/attachments/23340505/Application_Exception.png?version=1&amp;modificationDate=1428077959324&amp;api=v2"></p><p>&#160;</p><p>Tapestry
is telling us that we need to provide some kind of event handler for that event. What does
that look like?</p><p>An event handler is a method of the Java class with a special
name. The name is <code>on</code><strong><em>Eventname</em></strong><code>From</code><strong><em>Component-id</em></strong>
... here we want a method named <code>onActionFromStart()</code>. How do we know
that "action
 " is the right event name? Because that's what ActionLink does, that's why its named <strong><em>Action</em></strong>Link.</p><p>Once
again, Tapestry gives us options; if you don't like naming conventions, there's an @<a
shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/annotations/OnEvent.html">OnEvent</a>
annotation you can place on the method instead, which restores the freedom to name the method
as you like. Details about this approach are in the <a shape="rect" href="component-events.html">Tapestry
Users' Guide</a>. We'll be sticking with the naming convention approach for the tutorial.</p><p>When
handling a component event request (the kind of request triggered by the ActionLink component's
URL), Tapestry will find the component and trigger a component event on it. This is the callback
our server-side code needs to figure out what the user is doing on the client side. Let's
start with an empty event handler:</p><div class=
 "code panel pdl" style="border-width: 1px;"><div class="codeHeader panelHeader pdl"
style="border-bottom-width: 1px;"><b>Index.java</b></div><div class="codeContent
panelContent pdl">
 <script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[package
com.example.tutorial.pages;
 
 public class Index
@@ -167,7 +167,7 @@ public class Index
 </div></div><p>The new event handler method now chooses the target number,
and tells the Guess page about it. Because Tapestry is a managed environment, we don't just
create an instance of Guess ... it is Tapestry's responsibility to manage the life cycle of
the Guess page. Instead, we ask Tapestry for the Guess page, using the @InjectPage annotation.</p>
   <div class="aui-message warning shadowed information-macro">
                             <span class="aui-icon icon-warning">Icon</span>
                 <div class="message-content">
-                            <p>All fields in a Tapestry page or component class must
be <strong>private</strong>.</p>
+                            <p>All fields in a Tapestry page or component class must
be <strong>non-public</strong>.</p>
                     </div>
     </div>
 <p>Once we have that Guess page instance, we can invoke methods on it normally.</p><p>Returning
a page instance from an event handler method directs Tapestry to send a client-side redirect
to the returned page, rather than sending a redirect for the active page. Thus once the user
clicks the "start guessing" link, they'll see the Guess page.</p>    <div class="aui-message
problem shadowed information-macro">
@@ -178,7 +178,7 @@ public class Index
     </div>
 <p>So ... let's click the link and see what we get:</p><p><img class="confluence-embedded-image"
src="implementing-the-hi-lo-guessing-game.data/guess-template-missing.png" data-image-src="/confluence/download/attachments/23340505/guess-template-missing.png?version=2&amp;modificationDate=1416710821000&amp;api=v2"></p><p>Ah!
We didn't create a Guess page template. Tapestry was really expecting us to create one, so
we better do so.</p><div class="code panel pdl" style="border-width: 1px;"><div
class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>src/main/resources/com/example/tutorial/pages/Guess.tml</b></div><div
class="codeContent panelContent pdl">
 <script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[&lt;html
t:type=&quot;layout&quot; title=&quot;Guess The Number&quot;
-    xmlns:t=&quot;http://tapestry.apache.org/schema/tapestry_5_3.xsd&quot;&gt;
+    xmlns:t=&quot;http://tapestry.apache.org/schema/tapestry_5_4.xsd&quot;&gt;
 
     &lt;p&gt;
         The secret number is: ${target}.
@@ -197,7 +197,7 @@ public class Index
 ]]></script>
 </div></div><p>This doesn't have anything to do with database persistence
(that's coming up in a later chapter). It means that the value is stored in the HttpSession
between requests.</p><p>Go back to the Index page and click the link again. Finally,
we have a target number:</p><p><img class="confluence-embedded-image" src="implementing-the-hi-lo-guessing-game.data/guess-target.png"
data-image-src="/confluence/download/attachments/23340505/guess-target.png?version=3&amp;modificationDate=1416879254000&amp;api=v2"></p><p>That's
enough for us to get started. Let's build out the Guess page, and get ready to let the user
make guesses. We'll show the count of guesses, and increment that count when they make them.
We'll worry about high and low and actually selecting the correct value later.</p><p>When
building Tapestry pages, you sometimes start with the Java code and build the template to
match, and sometime start with the template and build the Java code to match. Both approaches
are va
 lid. Here, lets start with the markup in the template, then figure out what we need in the
Java code to make it work.</p><div class="code panel pdl" style="border-width: 1px;"><div
class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>Guess.tml
(revised)</b></div><div class="codeContent panelContent pdl">
 <script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[&lt;html
t:type=&quot;layout&quot; title=&quot;Guess The Number&quot;
-    xmlns:t=&quot;http://tapestry.apache.org/schema/tapestry_5_3.xsd&quot;
+    xmlns:t=&quot;http://tapestry.apache.org/schema/tapestry_5_4.xsd&quot;
     xmlns:p=&quot;tapestry:parameter&quot;&gt;
  
     &lt;p&gt;
@@ -308,7 +308,7 @@ public class GameOver
 ]]></script>
 </div></div><div class="code panel pdl" style="border-width: 1px;"><div
class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>GameOver.tml</b></div><div
class="codeContent panelContent pdl">
 <script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[&lt;html
t:type=&quot;layout&quot; title=&quot;Game Over&quot;
-    xmlns:t=&quot;http://tapestry.apache.org/schema/tapestry_5_3.xsd&quot;
+    xmlns:t=&quot;http://tapestry.apache.org/schema/tapestry_5_4.xsd&quot;
     xmlns:p=&quot;tapestry:parameter&quot;&gt;
 
     &lt;p&gt;

Modified: websites/production/tapestry/content/using-beaneditform-to-create-user-forms.html
==============================================================================
--- websites/production/tapestry/content/using-beaneditform-to-create-user-forms.html (original)
+++ websites/production/tapestry/content/using-beaneditform-to-create-user-forms.html Fri
Apr  3 17:19:36 2015
@@ -111,7 +111,7 @@ public enum Honorific
 ]]></script>
 </div></div><p>Now we need the address/Create page; lets start with an
empty shell, just to test our navigation.</p><div class="code panel pdl" style="border-width:
1px;"><div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>src/main/resources/com/example/tutorial/pages/address/CreateAddress.tml</b></div><div
class="codeContent panelContent pdl">
 <script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[&lt;html
t:type=&quot;layout&quot; title=&quot;Create New Address&quot;
-    xmlns:t=&quot;http://tapestry.apache.org/schema/tapestry_5_3.xsd&quot;&gt;
+    xmlns:t=&quot;http://tapestry.apache.org/schema/tapestry_5_4.xsd&quot;&gt;
 
     &lt;em&gt;coming soon ...&lt;/em&gt;
 
@@ -125,7 +125,23 @@ public class CreateAddress
 
 }
 ]]></script>
-</div></div><p>So ... why is the class named "CreateAddress" and not simply
"Create"? Actually, we could have named it "Create", and the application would still work,
but the longer <em>class</em> name is equally valid. Tapestry noticed the redundancy
in the class name (com.example.tutorial.pages.<code><em>address</em></code>.Create<em>Address</em>)
and just stripped out the redundant suffix. <span style="line-height: 1.4285715;">Tapestry
also checks for redundant prefixes. In addition, the long name, "address/CreateAddress" would
also work.</span></p><p>Eventually, your application will probably have
more entities: perhaps you'll have a "user/Create" page and a "payment/Create" page and an
"account/Create" page. You <em>could</em> have a bunch of different classes all
named Create spread across a number of different packages. That's legal Java, but it isn't
ideal. You may find yourself accidentally editing the Java code for creating an Account when
your really want to be editing th
 e code for creating a Payment.</p><p>Tapestry is encouraging you to use a more
descriptive name: Create<em>Address</em>, not just Create, but it isn't making
you pay the cost (in terms of longer, uglier URLs). The URL to access the page will still
be <a shape="rect" class="external-link" href="http://localhost:8080/tutorial1/address/create"
>http://localhost:8080/tutorial1/address/create</a>.</p><p>And remember,
regardless of the name that Tapestry assigns to your page, the template file is named like
the Java class itself: CreateAddress.tml.</p>    <div class="aui-message hint shadowed
information-macro">
+</div></div><p>So ... why is the class named "CreateAddress" and not simply
"Create"? Actually, we could have named it "Create", and the application would still work,
but the longer <em>class</em> name is equally valid. Tapestry noticed the redundancy
in the class name (com.example.tutorial.pages.<code><em>address</em></code>.Create<em>Address</em>)
and just stripped out the redundant suffix.</p><p><span style="line-height:
1.4285715;">Tapestry actually creates a bunch of aliases for you pages; any of these aliases
are valid and can appear in URLs or in the page parameter of PageLink. &#160;You can see
the list in the console:</span></p><div class="code panel pdl" style="border-width:
1px;"><div class="codeContent panelContent pdl">
+<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[[INFO]
TapestryModule.ComponentClassResolver Available pages (12):
+              (blank): com.example.tutorial.pages.Index
+   ComponentLibraries: org.apache.tapestry5.corelib.pages.ComponentLibraries
+             Error404: com.example.tutorial.pages.Error404
+      ExceptionReport: org.apache.tapestry5.corelib.pages.ExceptionReport
+             GameOver: com.example.tutorial.pages.GameOver
+                Guess: com.example.tutorial.pages.Guess
+                Index: com.example.tutorial.pages.Index
+          PageCatalog: org.apache.tapestry5.corelib.pages.PageCatalog
+PropertyDisplayBlocks: org.apache.tapestry5.corelib.pages.PropertyDisplayBlocks
+   PropertyEditBlocks: org.apache.tapestry5.corelib.pages.PropertyEditBlocks
+        ServiceStatus: org.apache.tapestry5.corelib.pages.ServiceStatus
+          T5Dashboard: org.apache.tapestry5.corelib.pages.T5Dashboard
+       address/Create: com.example.tutorial.pages.address.CreateAddress
+address/CreateAddress: com.example.tutorial.pages.address.CreateAddress]]></script>
+</div></div><p><span style="line-height: 1.4285715;">Tapestry users
the shortest alias when constructing URLs.</span></p><pre><span style="line-height:
1.4285715;">Eventually, your application will probably have more entities: perhaps you'll
have a "user/Create" page and a "payment/Create" page and an "account/Create" page. You </span><em
style="line-height: 1.4285715;">could</em><span style="line-height: 1.4285715;">
have a bunch of different classes all named Create spread across a number of different packages.
That's legal Java, but it isn't ideal. You may find yourself accidentally editing the Java
code for creating an Account when your really want to be editing the code for creating a Payment.</span></pre><p>Tapestry
is encouraging you to use a more descriptive name: Create<em>Address</em>, not
just Create, but it isn't making you pay the cost (in terms of longer, uglier URLs). The URL
to access the page will still be <a shape="rect" class="external-link" href="http://localhost
 :8080/tutorial1/address/create" >http://localhost:8080/tutorial1/address/create</a>.</p><p>And
remember, regardless of the name that Tapestry assigns to your page, the template file is
named like the Java class itself: CreateAddress.tml.</p>    <div class="aui-message
hint shadowed information-macro">
                             <span class="aui-icon icon-hint">Icon</span>
                 <div class="message-content">
                             <p>Index pages work in folders as well. A class named com.example.tutorial.pages.address.AddressIndex
would be given the name "address/Index". However, Tapestry has special rules for pages named
"Index" and the rendered URL would be <a shape="rect" class="external-link" href="http://localhost:8080/tutorial1/address/"
>http://localhost:8080/tutorial1/address/</a>. In other words, you can place Index
pages in any folder and Tapestry will build a short URL for that page ... and you <em>don't</em>
have to keep naming the classes Index (it's confusing to have many classes with the same name,
even across multiple packages); instead, you can name each index page after the package that
contains it. Tapestry users a smart <em>convention</em> to keep it all straight
and generate short, to the point URLs.</p>



Mime
View raw message