tapestry-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From conflue...@apache.org
Subject [CONF] Apache Tapestry > Creating The Skeleton Application
Date Wed, 04 May 2011 23:41:01 GMT
<html>
<head>
    <base href="https://cwiki.apache.org/confluence">
            <link rel="stylesheet" href="/confluence/s/2042/9/12/_/styles/combined.css?spaceKey=TAPESTRY&amp;forWysiwyg=true"
type="text/css">
    </head>
<body style="background: white;" bgcolor="white" class="email-body">
<div id="pageContent">
<div id="notificationFormat">
<div class="wiki-content">
<div class="email">
    <h2><a href="https://cwiki.apache.org/confluence/display/TAPESTRY/Creating+The+Skeleton+Application">Creating
The Skeleton Application</a></h2>
    <h4>Page <b>edited</b> by             <a href="https://cwiki.apache.org/confluence/display/~bobharner">Bob
Harner</a>
    </h4>
        <div id="versionComment">
        <b>Comment:</b>
        Updated tapestry version number to 5.2.5 in the maven archetype command line<br
/>
    </div>
        <br/>
                         <h4>Changes (3)</h4>
                                 
    
<div id="page-diffs">
                    <table class="diff" cellpadding="0" cellspacing="0">
    
            <tr><td class="diff-snipped" >...<br></td></tr>
            <tr><td class="diff-unchanged" >{code} <br> <br></td></tr>
            <tr><td class="diff-changed-lines" >It will then prompt you to pick
the archetype - choose *Tapestry <span class="diff-changed-words">5.2.<span class="diff-deleted-chars"style="color:#999;background-color:#fdd;text-decoration:line-through;">4</span><span
class="diff-added-chars"style="background-color: #dfd;">5</span></span> Quickstart
Project*, enter the group id, artifact id, version and package when prompted. <br></td></tr>
            <tr><td class="diff-unchanged" > <br>{noformat} <br></td></tr>
            <tr><td class="diff-snipped" >...<br></td></tr>
            <tr><td class="diff-unchanged" >[INFO] No archetype defined. Using
maven-archetype-quickstart (org.apache.maven.archetypes:maven-archetype-quickstart:1.0) <br>Choose
archetype: <br></td></tr>
            <tr><td class="diff-changed-lines" >1: http://tapestry.apache.org
-&gt; quickstart (Tapestry <span class="diff-changed-words">5.2.<span class="diff-deleted-chars"style="color:#999;background-color:#fdd;text-decoration:line-through;">4</span><span
class="diff-added-chars"style="background-color: #dfd;">5</span></span> Quickstart
Project) <br></td></tr>
            <tr><td class="diff-unchanged" >2: http://tapestry.apache.org -&gt;
tapestry-archetype (Tapestry 4.1.6 Archetype) <br>Choose a number: : 1 <br></td></tr>
            <tr><td class="diff-snipped" >...<br></td></tr>
            <tr><td class="diff-unchanged" >1: 5.1.0.5 <br>2: 5.0.19 <br></td></tr>
            <tr><td class="diff-changed-lines" >3: <span class="diff-changed-words">5.2.<span
class="diff-deleted-chars"style="color:#999;background-color:#fdd;text-decoration:line-through;">4</span><span
class="diff-added-chars"style="background-color: #dfd;">5</span></span> <br></td></tr>
            <tr><td class="diff-unchanged" >Choose a number: 3: 3 <br>Define
value for property &#39;groupId&#39;: : com.example <br></td></tr>
            <tr><td class="diff-snipped" >...<br></td></tr>
    
            </table>
    </div>                            <h4>Full Content</h4>
                    <div class="notificationGreySide">
        <style type='text/css'>/*<![CDATA[*/
table.ScrollbarTable  {border: none;padding: 3px;width: 100%;padding: 3px;margin: 0px;background-color:
#f0f0f0}
table.ScrollbarTable td.ScrollbarPrevIcon {text-align: center;width: 16px;border: none;}
table.ScrollbarTable td.ScrollbarPrevName {text-align: left;border: none;}
table.ScrollbarTable td.ScrollbarParent {text-align: center;border: none;}
table.ScrollbarTable td.ScrollbarNextName {text-align: right;border: none;}
table.ScrollbarTable td.ScrollbarNextIcon {text-align: center;width: 16px;border: none;}

/*]]>*/</style><div class="Scrollbar"><table class='ScrollbarTable'><tr><td
class='ScrollbarPrevIcon'><a href="/confluence/display/TAPESTRY/Dependencies%2C+Tools+and+Plugins"><img
border='0' align='middle' src='/confluence/images/icons/back_16.gif' width='16' height='16'></a></td><td
width='33%' class='ScrollbarPrevName'><a href="/confluence/display/TAPESTRY/Dependencies%2C+Tools+and+Plugins">Dependencies,
Tools and Plugins</a>&nbsp;</td><td width='33%' class='ScrollbarParent'><sup><a
href="/confluence/display/TAPESTRY/Tapestry+Tutorial"><img border='0' align='middle'
src='/confluence/images/icons/up_16.gif' width='8' height='8'></a></sup><a
href="/confluence/display/TAPESTRY/Tapestry+Tutorial">Tapestry Tutorial</a></td><td
width='33%' class='ScrollbarNextName'>&nbsp;<a href="/confluence/display/TAPESTRY/Loading+the+Project+Into+Eclipse">Loading
the Project Into Eclipse</a></td><td class='ScrollbarNextIcon'><a href="/confluence/display/TAPESTRY/Loading+the+Project+Into+Eclipse"><img
border='0' align='middle' src='/confluence/images/icons/forwd_16.gif' width='16' height='16'></a></td></tr></table></div>

<h1><a name="CreatingTheSkeletonApplication-UsingtheQuickstartArchetype"></a>Using
the Quickstart Archetype</h1>

<p>Before we can get down to the fun, we have to create an empty application. Tapestry
uses a feature of Maven to do this: <b>archetypes</b> (a too-clever way of saying
"project templates").</p>

<p>What we'll do is create an empty shell application using Maven, then import the application
into Eclipse to do the rest of the work.</p>

<p>For the tutorial, we're using a fresh install of Eclipse and an empty workspace at
/Users/Howard/Documents/workspace<style type='text/css'>
.FootnoteMarker, .FootnoteNum a {
  background: transparent url(/confluence/download/resources/com.adaptavist.confluence.footnoteMacros:footnote/gfx/footnote.png)
no-repeat top right;
  padding: 1px 2px 0px 1px;
  border-left: 1px solid #8898B8;
  border-bottom: 1px solid #6B7C9B;
  margin: 1px;
  text-decoration: none;
}
.FootnoteNum a {
  margin-top: 2px;
  margin-right: 0px;
}
.FootnoteNum {
  font-size: x-small;
  text-align: right;
  padding-bottom: 4px;
}
.footnote-th1 {
  text-align: right;
}
.Footnote {
  padding-left: 7px;
  margin-bottom: 4px;
  border: 1px none #DDDDDD;
  writingMode: tb-rl;
}
.accessibility {
     display: none;
     visibility: hidden;
}
@media aural,braille,embossed {
        .FootnoteMarker, .FootnoteNum a {
         border: 1px solid #000000;
         background: #ffffff none;
    }
    .accessibility {
         display: run-in;
         visibility: visible;
    }
}
</style>
<script type='text/javascript' language='JavaScript'>
//<!--\n
var effectInProgress = {};
var despamEffect = function (id,effectType,duration) {
  if ((effectInProgress[id]) || (typeof(Effect)=="undefined") || (typeof(Effect[effectType])=="undefined"))
return;
  new Effect[effectType](id);
  effectInProgress[id]=true;
  setTimeout('effectInProgress[\"'+id+'\"]=false;',duration*1000);
};
var oldFootnoteId = '';
var footnoteHighlight = function(id,pulsateNum) {
  if (oldFootnoteId!='') document.getElementById('Footnote'+oldFootnoteId).style['borderStyle']
= 'none';
  oldFootnoteId = id;
  document.getElementById('Footnote'+id).style['borderStyle'] = 'solid';
  despamEffect('Footnote'+id,'Highlight',1)
  if (pulsateNum) despamEffect('FootnoteNum'+id,'Pulsate',3)
}
var footnoteMarkerHighlight = function(id) {
  if (oldFootnoteId!='') document.getElementById('Footnote'+oldFootnoteId).style['borderStyle']
= 'none';
  oldFootnoteId = '';
  despamEffect('FootnoteMarker'+id,'Pulsate',3)
}
//-->
</script>

<sup id='FootnoteMarker1'>
    <a name='FootnoteMarker1'
        href='#Footnote1'
        onClick='footnoteHighlight("1",true);'
        alt='Footnote: Click here to display the footnote'
        title='Footnote: Click here to display the footnote'
        class='FootnoteMarker'>
            1
    </a>
</sup>
.  You may need to adjust a few things for other operating systems or local paths.</p>

<p>From our workspace directory, we'll use Maven to create a skeleton Tapestry project.
</p>

<p>Before proceeding, we have to decide on four things: A Maven <em>group id</em>
and <em>artifact id</em> for our project, a <em>version</em>, and
a <em>base package name</em>.</p>

<p>Maven uses the group id and artifact id to provide a unique identity for the application,
and Tapestry needs to have a base package name so it knows where to look for pages and components.</p>

<p>For this example, we'll use the group id <b>com.example</b>, artifact
id <b>tutorial1</b>, version <b>1.0-SNAPSHOT</b> and we'll use <b>com.example.tutorial</b>
as the base package.</p>

<p>Our final command line is:</p>

<div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
<pre class="code-java">
mvn archetype:generate -DarchetypeCatalog=http:<span class="code-comment">//tapestry.apache.org</span>
</pre>
</div></div>

<p>It will then prompt you to pick the archetype - choose <b>Tapestry 5.2.5 Quickstart
Project</b>, enter the group id, artifact id, version and package when prompted.</p>

<div class="preformatted panel" style="border-width: 1px;"><div class="preformattedContent
panelContent">
<pre>~/Documents/workspace
$ mvn archetype:generate -DarchetypeCatalog=http://tapestry.apache.org
[INFO] Scanning for projects...
[INFO] Searching repository for plugin with prefix: 'archetype'.
[INFO] ------------------------------------------------------------------------
[INFO] Building Maven Default Project
[INFO]    task-segment: [archetype:generate] (aggregator-style)
[INFO] ------------------------------------------------------------------------
[INFO] Preparing archetype:generate
[INFO] No goals needed for project - skipping
[INFO] [archetype:generate {execution: default-cli}]
[INFO] Generating project in Interactive mode
[INFO] No archetype defined. Using maven-archetype-quickstart (org.apache.maven.archetypes:maven-archetype-quickstart:1.0)
Choose archetype:
1: http://tapestry.apache.org -&gt; quickstart (Tapestry 5.2.5 Quickstart Project)
2: http://tapestry.apache.org -&gt; tapestry-archetype (Tapestry 4.1.6 Archetype)
Choose a number: : 1
Choose version: 
1: 5.1.0.5
2: 5.0.19
3: 5.2.5
Choose a number: 3: 3
Define value for property 'groupId': : com.example
Define value for property 'artifactId': : tutorial1
Define value for property 'version': 1.0-SNAPSHOT: 
Define value for property 'package': com.example: com.example.tutorial
Confirm properties configuration:
groupId: com.example
artifactId: tutorial1
version: 1.0-SNAPSHOT
package: com.example.tutorial
Y: 
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESSFUL
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 1 minute 41 seconds
[INFO] Finished at: Wed Nov 17 17:00:16 PST 2010
[INFO] Final Memory: 16M/81M
[INFO] ------------------------------------------------------------------------
~/Documents/workspace
$ 
</pre>
</div></div>

<div class='panelMacro'><table class='infoMacro'><colgroup><col width='24'><col></colgroup><tr><td
valign='top'><img src="/confluence/images/icons/emoticons/information.gif" width="16"
height="16" align="absmiddle" alt="" border="0"></td><td>The first time you
use Maven, you'll see quite a bit more output, mostly about downloading all sorts of JARs
and other files. These downloaded files are cached locally and will not need to be downloaded
again, but you do have to be patient on first use.</td></tr></table></div>

<p>After executing the command, you'll see a new directory, <tt>tutorial1</tt>.</p>

<div class='panelMacro'><table class='infoMacro'><colgroup><col width='24'><col></colgroup><tr><td
valign='top'><img src="/confluence/images/icons/emoticons/information.gif" width="16"
height="16" align="absmiddle" alt="" border="0"></td><td><b>Maven Behind
a Firewall</b><br />If you are behind a firewall, before running any "mvn" commands,
you will need to configure your proxy settings in settings.xml. Here is an example:

<div class="code panel" style="border-width: 1px;"><div class="codeHeader panelHeader"
style="border-bottom-width: 1px;"><b>settings.xml</b></div><div class="codeContent
panelContent">
<pre class="code-java">
&lt;settings&gt;
  &lt;proxies&gt;
    &lt;proxy&gt;
      &lt;active&gt;<span class="code-keyword">true</span>&lt;/active&gt;
      &lt;protocol&gt;http&lt;/protocol&gt;
      &lt;host&gt;myProxyServer.com&lt;/host&gt;
      &lt;port&gt;8080&lt;/port&gt;
      &lt;username&gt;joeuser&lt;/username&gt;
      &lt;password&gt;myPassword&lt;/password&gt;
      &lt;nonProxyHosts&gt;&lt;/nonProxyHosts&gt;
    &lt;/proxy&gt;
  &lt;/proxies&gt;
  &lt;localRepository&gt;C:/Documents and Settings/joeuser/.m2/repository&lt;/localRepository&gt;
&lt;/settings&gt;
</pre>
</div></div>
<p>Of course, adjust the <tt>localRepository</tt> element to match the correct
path for your computer.</p></td></tr></table></div>

<h1><a name="CreatingTheSkeletonApplication-RunningtheNewApplicationusingJetty"></a>Running
the New Application using Jetty</h1>

<p>One of the first things you can do is use Maven to run Jetty directly.</p>

<p>Change into the newly created directory, and execute the command:</p>

<div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
<pre class="code-java">
mvn jetty:run
</pre>
</div></div>

<p>Again, the first time, there's a dizzying number of downloads, but before you know
it, the Jetty servlet container is up and running.</p>

<p>Once Jetty is initialized (which only takes a few seconds), you'll see the following
in your console:</p>

<div class="preformatted panel" style="border-width: 1px;"><div class="preformattedContent
panelContent">
<pre>                               URLRewriter: DEFINED
                         UpdateListenerHub: REAL
                    ValidateBindingFactory: DEFINED
             ValidationConstraintGenerator: DEFINED
                  ValidationMessagesSource: DEFINED
                            ValidatorMacro: DEFINED
                        ValueEncoderSource: DEFINED

85.00% unrealized services (153/180)

2010-11-17 17:06:30.630::INFO:  Started SelectChannelConnector@0.0.0.0:8080
[INFO] Started Jetty Server
</pre>
</div></div>

<p>You can now open a web browser to <a href="http://localhost:8080/tutorial1/" class="external-link"
rel="nofollow">http://localhost:8080/tutorial1/</a> to see the running application:</p>

<p><span class="image-wrap" style=""><a class="confluence-thumbnail-link 1026x746"
href='https://cwiki.apache.org/confluence/download/attachments/23340356/startpage.png'><img
src="/confluence/download/thumbnails/23340356/startpage.png" style="border: 0px solid black"
/></a></span></p>

<p>The date and time in the middle of the page proves that this is a live application.</p>

<p>This is a complete little application; it doesn't do much, but it demonstrate how
to create a number of pages sharing a common layout, and demonstrates some simple navigation.
 You can see that it has three different pages that share a common layout
<sup id='FootnoteMarker2'>
    <a name='FootnoteMarker2'
        href='#Footnote2'
        onClick='footnoteHighlight("2",true);'
        alt='Footnote: Click here to display the footnote'
        title='Footnote: Click here to display the footnote'
        class='FootnoteMarker'>
            2
    </a>
</sup>
.</p>

<div class='panelMacro'><table class='warningMacro'><colgroup><col width='24'><col></colgroup><tr><td
valign='top'><img src="/confluence/images/icons/emoticons/forbidden.gif" width="16"
height="16" align="absmiddle" alt="" border="0"></td><td>You should hit Control-C
in the Terminal window to close down Jetty before continuing with the tutorial.</td></tr></table></div>

<hr />

<p><table class='Footnotes' style='width: 100%; border:none;' cellspacing='0' cellpadding='0'
summary='This table contains one or more notes for references made elsewhere on the page.'>
  <caption class='accessibility'>Footnotes</caption>
  <thead class='accessibility'>
    <tr class='accessibility'>
      <th class='accessibility' id='footnote-th1'>Reference</th>
      <th class='accessibility' id='footnote-th2'>Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr name='Footnote1'>
      <td valign='top' class='FootnoteNum' headings='footnote-th1'>
        <a href='#FootnoteMarker1'
          onClick='footnoteMarkerHighlight("1");'
          onMouseOver='footnoteHighlight("1",false);'
          alt='Footnote: Click to return to reference in text'
          title='Footnote: Click to return to reference in text'
          id='FootnoteNum1'>
            1
        </a>
      </td>
      <td id='Footnote1'
        valign='top'
        width='100%'
        class='Footnote'
        headings='footnote-th2'>
          Yes, Howard is on a Mac. Get one.
      </td>
    </tr>
    <tr name='Footnote2'>
      <td valign='top' class='FootnoteNum' headings='footnote-th1'>
        <a href='#FootnoteMarker2'
          onClick='footnoteMarkerHighlight("2");'
          onMouseOver='footnoteHighlight("2",false);'
          alt='Footnote: Click to return to reference in text'
          title='Footnote: Click to return to reference in text'
          id='FootnoteNum2'>
            2
        </a>
      </td>
      <td id='Footnote2'
        valign='top'
        width='100%'
        class='Footnote'
        headings='footnote-th2'>
          Layout is a loose term meaning common look and feel and navigation across many or
all of the pages of an application. Often an application will include a Layout component to
provide that commonness.
      </td>
    </tr>
  </tbody>
</table></p>

<style type='text/css'>/*<![CDATA[*/
table.ScrollbarTable  {border: none;padding: 3px;width: 100%;padding: 3px;margin: 0px;background-color:
#f0f0f0}
table.ScrollbarTable td.ScrollbarPrevIcon {text-align: center;width: 16px;border: none;}
table.ScrollbarTable td.ScrollbarPrevName {text-align: left;border: none;}
table.ScrollbarTable td.ScrollbarParent {text-align: center;border: none;}
table.ScrollbarTable td.ScrollbarNextName {text-align: right;border: none;}
table.ScrollbarTable td.ScrollbarNextIcon {text-align: center;width: 16px;border: none;}

/*]]>*/</style><div class="Scrollbar"><table class='ScrollbarTable'><tr><td
class='ScrollbarPrevIcon'><a href="/confluence/display/TAPESTRY/Dependencies%2C+Tools+and+Plugins"><img
border='0' align='middle' src='/confluence/images/icons/back_16.gif' width='16' height='16'></a></td><td
width='33%' class='ScrollbarPrevName'><a href="/confluence/display/TAPESTRY/Dependencies%2C+Tools+and+Plugins">Dependencies,
Tools and Plugins</a>&nbsp;</td><td width='33%' class='ScrollbarParent'><sup><a
href="/confluence/display/TAPESTRY/Tapestry+Tutorial"><img border='0' align='middle'
src='/confluence/images/icons/up_16.gif' width='8' height='8'></a></sup><a
href="/confluence/display/TAPESTRY/Tapestry+Tutorial">Tapestry Tutorial</a></td><td
width='33%' class='ScrollbarNextName'>&nbsp;<a href="/confluence/display/TAPESTRY/Loading+the+Project+Into+Eclipse">Loading
the Project Into Eclipse</a></td><td class='ScrollbarNextIcon'><a href="/confluence/display/TAPESTRY/Loading+the+Project+Into+Eclipse"><img
border='0' align='middle' src='/confluence/images/icons/forwd_16.gif' width='16' height='16'></a></td></tr></table></div>
    </div>
        <div id="commentsSection" class="wiki-content pageSection">
        <div style="float: right;">
            <a href="https://cwiki.apache.org/confluence/users/viewnotifications.action"
class="grey">Change Notification Preferences</a>
        </div>
        <a href="https://cwiki.apache.org/confluence/display/TAPESTRY/Creating+The+Skeleton+Application">View
Online</a>
        |
        <a href="https://cwiki.apache.org/confluence/pages/diffpagesbyversion.action?pageId=23340356&revisedVersion=24&originalVersion=23">View
Changes</a>
            </div>
</div>
</div>
</div>
</div>
</body>
</html>

Mime
View raw message