tapestry-commits 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 Wed, 04 May 2011 23:41:00 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/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>
        Updated tapestry version number to 5.2.5 in the maven archetype command line<br
/>
    </div>
        <br/>
                         <h4>Changes (1)</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" > <br>{panel:bgColor=white} <br></td></tr>
            <tr><td class="diff-changed-lines" >mvn <span class="diff-changed-words">\-DarchetypeVersion=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> \-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-unchanged" >{panel} <br> <br></td></tr>
            <tr><td class="diff-snipped" >...<br></td></tr>
    
            </table>
    </div>                            <h4>Full Content</h4>
                    <div class="notificationGreySide">
        <div class='navmenu' style='float:right; background:#eee; margin:3px; padding:3px'><table
class="tableview" width="100%">
            <tr><th style="padding: 3px 3px 3px 0px">Related Articles</th></tr>
                        <tr>
            <td>
                                 <span class="icon icon-page" title=Page>Page:</span>
                         <a href="/confluence/display/TAPESTRY/Principles">Principles</a>
        
                                            </td>
        </tr>
                <tr>
            <td>
                                 <span class="icon icon-page" title=Page>Page:</span>
                         <a href="/confluence/display/TAPESTRY/Introduction">Introduction</a>
        
                                            </td>
        </tr>
                <tr>
            <td>
                                 <span class="icon icon-page" title=Page>Page:</span>
                         <a href="/confluence/display/TAPESTRY/Tapestry+Tutorial">Tapestry
Tutorial</a>
        
                                            </td>
        </tr>
                <tr>
            <td>
                                 <span class="icon icon-page" title=Page>Page:</span>
                         <a href="/confluence/display/TAPESTRY/Getting+Started">Getting
Started</a>
        
                                            </td>
        </tr>
            </table>
</div> 

<p>Getting started with Tapestry is easy, and you have lots of ways to begin your adventure:
watch a video, browse the source code of a working demo app, create a skeleton app using Maven,
or step through the tutorial.</p>

<h2><a name="GettingStarted-Watchashortvideo"></a>Watch a short video</h2>

<p>For a fast-paced introduction, watch Mark W. Shead's <a href="http://blog.markwshead.com/900/tapestry-5-10-minute-demo/"
class="external-link" rel="nofollow">10 Minute Demo</a>. This video shows how to
set up a simple Tapestry application, complete with form validation, Hibernate-based persistence,
and Ajax. The video provides a preview of the development speed and productivity that experienced
Tapestry users enjoy.</p>

<h2><a name="GettingStarted-Playwithaworkingdemoapp"></a>Play with a working
demo app</h2>

<p>You can also play with Tapestry via our live demonstration applications. To start,
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>. The <a href="http://github.com/ccordenier/tapestry5-hotel-booking"
class="external-link" rel="nofollow">source code</a> is provided 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 start a new app 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>Once 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.5 &#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. (Note: if you get "Unable to get resource" warnings
at this stage, you may be behind a firewall which blocks outbound HTTP requests to Maven repositories.)</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-Exploringtheskeletonproject"></a>Exploring the
skeleton 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 skeleton 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-What%27snext%3F"></a>What's next?</h2>

<p>To deepen your understanding, step through the <a href="/confluence/display/TAPESTRY/Tapestry+Tutorial"
title="Tapestry Tutorial">Tapestry Tutorial</a> which goes into much 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>Be sure to read about the core <a href="/confluence/display/TAPESTRY/Principles"
title="Principles">Tapestry Principles</a>, and browse the extensive <a href="/confluence/display/TAPESTRY/User+Guide"
title="User Guide">User Guide</a>.</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 by sending e-mail to <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>.  <a href="/confluence/display/TAPESTRY/Mailing+Lists"
title="Mailing Lists">More Options</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=29&originalVersion=28">View
Changes</a>
            </div>
</div>
</div>
</div>
</div>
</body>
</html>

Mime
View raw message