tapestry-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From conflue...@apache.org
Subject [CONF] Apache Tapestry > Getting Started
Date Mon, 13 Dec 2010 11:45:00 GMT
<html>
<head>
    <base href="https://cwiki.apache.org/confluence">
            <link rel="stylesheet" href="/confluence/s/1810/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/Getting+Started">Getting
Started</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>
        Changed from {code} to {panel} for long maven command to allow wrapping for better
presentation and ease of use<br />
    </div>
        <br/>
                         <h4>Changes (7)</h4>
                                 
    
<div id="page-diffs">
            <table class="diff" cellpadding="0" cellspacing="0">
            <tr><td class="diff-unchanged" >h2. See it live \! <br> <br></td></tr>
            <tr><td class="diff-changed-lines" >You can play with Tapestry via
our live demonstration applications. To start you can have a look at the [Hotel <span class="diff-changed-words">Booking<span
class="diff-added-chars"style="background-color: #dfd;"> Demo</span>|http://tapestry.zones.apache.org:8180/tapestry5-hotel-booking/]</span>
that has been developed by contributors and committers. The whole source code is available
at [github|http://github.com/ccordenier/tapestry5-hotel-booking] so you can download and play
with it. <br></td></tr>
            <tr><td class="diff-unchanged" > <br>h2. Create your first Tapestry
project <br></td></tr>
            <tr><td class="diff-snipped" >...<br></td></tr>
            <tr><td class="diff-unchanged" >The easiest way to get started is
to use [Apache Maven|http://maven.apache.org] to create your initial project; Maven can use
an _archetype_ (a kind of project template) to create a bare-bones Tapestry application for
you. <br> <br></td></tr>
            <tr><td class="diff-changed-lines" >One you have Maven installed,
execute the <span class="diff-added-words"style="background-color: #dfd;">following</span>
command (copy and paste it as-is){footnote}If you prefer, just {{mvn archetype:generate -DarchetypeCatalog=http://tapestry.apache.org}}
will work as well, and you will be prompted for the other details interactively.{footnote}:
<br></td></tr>
            <tr><td class="diff-unchanged" > <br></td></tr>
            <tr><td class="diff-changed-lines" ><span class="diff-deleted-words"style="color:#999;background-color:#fdd;text-decoration:line-through;">{noformat}</span>
<span class="diff-added-words"style="background-color: #dfd;">{panel:bgColor=white}</span>
<br></td></tr>
            <tr><td class="diff-deleted-lines" style="color:#999;background-color:#fdd;text-decoration:line-through;">mvn
-DarchetypeVersion=5.2.4 -Darchetype.interactive=false -DgroupId=com.example -DarchetypeArtifactId=quickstart
-Dversion=1.0-SNAPSHOT -DarchetypeGroupId=org.apache.tapestry -Dpackage=com.example.newapp
-DartifactId=newapp --batch-mode -DarchetypeRepository=http://tapestry.apache.org archetype:generate
<br></td></tr>
            <tr><td class="diff-added-lines" style="background-color: #dfd;">mvn
\-DarchetypeVersion=5.2.4 \-Darchetype.interactive=false \-DgroupId=com.example \-DarchetypeArtifactId=quickstart
\-Dversion=1.0-SNAPSHOT \-DarchetypeGroupId=org.apache.tapestry \-Dpackage=com.example.newapp
\-DartifactId=newapp \--batch-mode \-DarchetypeRepository=[http://tapestry.apache.org] archetype:generate
<br></td></tr>
            <tr><td class="diff-changed-lines" ><span class="diff-deleted-words"style="color:#999;background-color:#fdd;text-decoration:line-through;">{noformat}</span>
<span class="diff-added-words"style="background-color: #dfd;">{panel}</span> <br></td></tr>
            <tr><td class="diff-unchanged" > <br>Maven will (after performing
a large number of one-time downloads) create a skeleton project ready to run.  Because we
specified an artifactId of &quot;newapp&quot;, the project is created in the {{newapp}}
directory. <br></td></tr>
            <tr><td class="diff-snipped" >...<br></td></tr>
            <tr><td class="diff-unchanged" >Tapestry page templates have the {{.tml}}
extension and are found in src/main/webapp. Templates are essential HTML with some special
markup to link the template to the Java class and to reference ready-made components you can
use to speed up your development. <br> <br></td></tr>
            <tr><td class="diff-changed-lines" >Java classes are found in <span
class="diff-changed-words">src/main/*java*/com/example/newapp/*pages<span class="diff-added-chars"style="background-color:
#dfd;">{</span>*<span class="diff-added-chars"style="background-color: #dfd;">}</span>{footnote}That</span>
is, in the {{com.example.newapp.pages}} package.{footnote} and their name matches their template
name ({{Index.tml}} <span class="diff-changed-words"><span class="diff-added-chars"style="background-color:
#dfd;">\</span>-&gt;</span> {{Index.java}}). <br></td></tr>
            <tr><td class="diff-unchanged" > <br>In the test project, most
of the HTML is not found on the pages themselves but in a Layout component which acts as a
global template for the whole site. Java classes for components live in src/main/*java*/com/example/newapp/*components*
and component templates go in src/main/*resources*/com/example/newapp/*components* <br></td></tr>
            <tr><td class="diff-snipped" >...<br></td></tr>
            <tr><td class="diff-unchanged" > <br>---- <br></td></tr>
            <tr><td class="diff-unchanged" >{display-footnotes} <br></td></tr>
        </table>
</div>                            <h4>Full Content</h4>
                    <div class="notificationGreySide">
        <h2><a name="GettingStarted-Seeitlive%5C%21"></a>See it live &#33;</h2>

<p>You can play with Tapestry via our live demonstration applications. To start you
can have a look at the <a href="http://tapestry.zones.apache.org:8180/tapestry5-hotel-booking/"
class="external-link" rel="nofollow">Hotel Booking Demo</a> that has been developed
by contributors and committers. The whole source code is available at <a href="http://github.com/ccordenier/tapestry5-hotel-booking"
class="external-link" rel="nofollow">github</a> so you can download and play with
it.</p>

<h2><a name="GettingStarted-CreateyourfirstTapestryproject"></a>Create your
first Tapestry project</h2>

<p>The easiest way to get started is to use <a href="http://maven.apache.org" class="external-link"
rel="nofollow">Apache Maven</a> to create your initial project; Maven can use an
<em>archetype</em> (a kind of project template) to create a bare-bones Tapestry
application for you.</p>

<p>One you have Maven installed, execute the following command (copy and paste it as-is)<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>
:</p>

<div class="panel" style="background-color: white;border-width: 1px;"><div class="panelContent"
style="background-color: white;">
<p>mvn &#45;DarchetypeVersion=5.2.4 &#45;Darchetype.interactive=false &#45;DgroupId=com.example
&#45;DarchetypeArtifactId=quickstart &#45;Dversion=1.0-SNAPSHOT &#45;DarchetypeGroupId=org.apache.tapestry
&#45;Dpackage=com.example.newapp &#45;DartifactId=newapp &#45;-batch-mode &#45;DarchetypeRepository=<a
href="http://tapestry.apache.org" class="external-link" rel="nofollow">http://tapestry.apache.org</a>
archetype:generate</p>
</div></div>

<p>Maven will (after performing a large number of one-time downloads) create a skeleton
project ready to run.  Because we specified an artifactId of "newapp", the project is created
in the <tt>newapp</tt> directory.</p>

<p>To run the skeleton application, change to the <tt>newapp</tt> directory
and execute:</p>

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

<p>After some more one-time downloads you can open your browser to <a href="http://localhost:8080"
class="external-link" rel="nofollow">http://localhost:8080</a> to see the application
running.</p>

<p>You can also load the newly-created project it into any IDE and start coding. See
the next section on where to find the different components of the application.</p>

<h2><a name="GettingStarted-Exploringthetestproject"></a>Exploring the test
project</h2>

<p>A Tapestry application is composed of pages, each page consisting of one template
file and one Java class.</p>

<p>Tapestry page templates have the <tt>.tml</tt> extension and are found
in src/main/webapp. Templates are essential HTML with some special markup to link the template
to the Java class and to reference ready-made components you can use to speed up your development.</p>

<p>Java classes are found in src/main/<b>java</b>/com/example/newapp/<b>pages</b>
<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>
 and their name matches their template name (<tt>Index.tml</tt> &#45;&gt;
<tt>Index.java</tt>).</p>

<p>In the test project, most of the HTML is not found on the pages themselves but in
a Layout component which acts as a global template for the whole site. Java classes for components
live in src/main/<b>java</b>/com/example/newapp/<b>components</b>
and component templates go in src/main/<b>resources</b>/com/example/newapp/<b>components</b></p>

<h2><a name="GettingStarted-More"></a>More</h2>

<p>For more information on this, try the <a href="/confluence/display/TAPESTRY/Tapestry+Tutorial"
title="Tapestry Tutorial">Tapestry Tutorial</a> which goes into more detail about
setting up your project, as well as loading it into Eclipse ... then continues on to teach
you more about Tapestry.</p>

<p>Then, learn more about <a href="/confluence/display/TAPESTRY/Principles" title="Principles">Tapestry
Philosophy</a> and then checkout our full <a href="/confluence/display/TAPESTRY/Documentation"
title="Documentation">Documentation</a> page on which you will find a lot of resources
written by committers and contributors.</p>

<h2><a name="GettingStarted-ObtainHelp"></a>Obtain Help</h2>

<p>Tapestry has an active user mailing list on which you can find a lot of valuable
support. You can subscribe <a href="mailto:users-subscribe@tapestry.apache.org" class="external-link"
rel="nofollow">users-subscribe@tapestry.apache.org</a> or look for an answer in the
<a href="http://markmail.org/search/list:org.apache.tapestry.users" class="external-link"
rel="nofollow">archives</a></p>

<p>Having trouble?  Try our <a href="/confluence/display/TAPESTRY/Frequently+Asked+Questions"
title="Frequently Asked Questions">Frequently Asked Questions</a>.</p>


<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'>
          If you prefer, just <tt>mvn archetype:generate -DarchetypeCatalog=<a href="http://tapestry.apache.org"
class="external-link" rel="nofollow">http://tapestry.apache.org</a></tt> will
work as well, and you will be prompted for the other details interactively.
      </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'>
          That is, in the <tt>com.example.newapp.pages</tt> package.
      </td>
    </tr>
  </tbody>
</table></p>
    </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/Getting+Started">View
Online</a>
        |
        <a href="https://cwiki.apache.org/confluence/pages/diffpagesbyversion.action?pageId=23334911&revisedVersion=20&originalVersion=19">View
Changes</a>
            </div>
</div>
</div>
</div>
</div>
</body>
</html>

Mime
View raw message