tapestry-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From conflue...@apache.org
Subject [CONF] Apache Tapestry > Templating and Markup
Date Mon, 16 Aug 2010 18:34:00 GMT
<html>
<head>
    <base href="https://cwiki.apache.org/confluence">
            <link rel="stylesheet" href="/confluence/s/1810/9/8/_/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/Templating+and+Markup">Templating
and Markup</a></h2>
    <h4>Page <b>edited</b> by             <a href="https://cwiki.apache.org/confluence/display/~hlship">Howard
M. Lewis Ship</a>
    </h4>
        <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" >{code} <br> <br></td></tr>
            <tr><td class="diff-deleted-lines" style="color:#999;background-color:#fdd;text-decoration:line-through;">---
<br> <br></td></tr>
            <tr><td class="diff-unchanged" >With a page activation context, the
URL for the page will incorporate the id of the User object, something like {{/viewuser/37371}}.
 This is why the relative URLs to the {{admin.png}} image is broken: the base path is relative
to the page&#39;s URL, not to the page template{footnote}In fact, the page template may
not even be in the web context, it may be stored on the classpath, as component templates
are.{footnote}. <br> <br></td></tr>
            <tr><td class="diff-snipped" >...<br></td></tr>
        </table>
</div>                            <h4>Full Content</h4>
                    <div class="notificationGreySide">
        <h1><a name="TemplatingandMarkup-WhydoIgetaSAXParseExceptionwhenIuseanHTMLentity%2Csuchas%7B%7B%26amp%3Bnbsp%3B%7D%7Dinmytemplate%3F"></a>Why
do I get a SAXParseException when I use an HTML entity, such as <tt>&amp;nbsp;</tt>
in my template?</h1>

<p>Tapestry uses a standard SAX parser to read your templates. This means that your
templates must be <em>well formed</em>: open and close tags must balance, attribute
values must be quoted, and entities must be declared. The easiest way to accomplish this is
to add a DOCTYPE to your the top of your template:</p>

<div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
<pre class="code-xml">
&lt;!DOCTYPE html PUBLIC <span class="code-quote">"-//W3C//DTD XHTML 1.0 Strict//EN"</span>
   <span class="code-quote">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"</span>&gt;
</pre>
</div></div>

<p>Part of the DOCTYPE is the declaration of entities such as <tt>&amp;nbsp;</tt>.</p>

<p>Alternately, you can simply use the numeric version: <tt>&amp;#160</tt>;
 This is the exact same character and will render identically in the browser.</p>


<h1><a name="TemplatingandMarkup-Whydosomeimagesinmypageshowupasbrokenlinks%3F"></a>Why
do some images in my page show up as broken links?</h1>

<p>You have to be careful when using relative URLs inside page templates; the base URL
may not always be what you expect.  For example, inside your <tt>ViewUser.tml</tt>
file, you may have:</p>

<div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
<pre class="code-xml">
  <span class="code-tag">&lt;img class=<span class="code-quote">"icon"</span>
src=<span class="code-quote">"icons/admin.png"</span>/&gt;</span>${user.name}
has Administrative access
</pre>
</div></div>

<p>This makes sense; <tt>ViewUser.tml</tt> is in the web context, as is
the <tt>icons</tt> folder.  The default URL for this page will be <tt>/viewuser</tt><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>

<p>However, most likely, the ViewUser page has a page activation context to identify
which user is to be displayed:</p>

<div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
<pre class="code-java">
<span class="code-keyword">public</span> class ViewUser

  @Property
  @PageActivationContext
  <span class="code-keyword">private</span> User user;

  . . .
</pre>
</div></div>

<p>With a page activation context, the URL for the page will incorporate the id of the
User object, something like <tt>/viewuser/37371</tt>.  This is why the relative
URLs to the <tt>admin.png</tt> image is broken: the base path is relative to the
page's URL, not to the page template
<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>

<p>One solution would be to predict what the page URL will be, and adjust the path for
that:</p>

<div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
<pre class="code-java">
  &lt;img class=<span class="code-quote">"icon"</span> src=<span class="code-quote">"../icons/admin.png"</span>/&gt;${user.name}
has Administrative access
</pre>
</div></div>

<p>But this has its own problems; the page activation context may vary in length at
different times, or the template in question may be a component used across many different
pages, making it difficult to predict what the correct relative URL would be.</p>

<p>The <em>best</em> solution for this situation, one that will be sure
to work in all pages and all components, is to make use of the <tt>context:</tt>
binding prefix:</p>

<div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
<pre class="code-java">
  &lt;img class=<span class="code-quote">"icon"</span> src=<span class="code-quote">"${context:icons/admin.png}"</span>/&gt;${user.name}
has Administrative access
</pre>
</div></div>

<p>The src attribute of the &lt;img&gt; tag will now be bound to a dynamically
computed value: the location of the image file relative to the <br/>
web application context. This is especially important for components that may be used on different
pages.</p>

<h1><a name="TemplatingandMarkup-What%27sthedifferencebetween%7B%7Bid%7D%7Dand%7B%7Bt%3Aid%7D%7D%3F"></a>What's
the difference between <tt>id</tt> and <tt>t:id</tt>?</h1>

<p>You might occasionally see something like the following in a template:</p>

<div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
<pre class="code-xml">
<span class="code-tag">&lt;t:zone id=<span class="code-quote">"status"</span>
t:id=<span class="code-quote">"statusZone"</span>&gt;</span>
</pre>
</div></div>

<p>Why two ids?  Why are they different?</p>

<p>The <tt>t:id</tt> attribute is the Tapestry component id. This id is
unique within its immediate container.  This is the id you might use<br/>
to inject the component into your page class:</p>

<div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
<pre class="code-java">
  @InjectComponent
  <span class="code-keyword">private</span> Zone statusZone;
</pre>
</div></div>

<p>The other id is the client id, a unique id for the rendered element within the client-side
DOM. JavaScript that needs to access the element uses this id.  For example:</p>

<div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
<pre class="code-javascript">
  $('status').hide();
</pre>
</div></div>

<p>In many components, the <tt>id</tt> attribute is an informal parameter;
a value from the template that is blindly echoed into the output document.  In other cases,
the component itself has an <tt>id</tt> attribute.  Often, in the latter case,
the Tapestry component id is the <em>default</em> value for the client id.</p>

<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'>
          Assuming that class ViewUser is in the <em>root-package</em>.<tt>pages</tt>
package.
      </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'>
          In fact, the page template may not even be in the web context, it may be stored
on the classpath, as component templates are.
      </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/Templating+and+Markup">View
Online</a>
        |
        <a href="https://cwiki.apache.org/confluence/pages/diffpagesbyversion.action?pageId=23334958&revisedVersion=5&originalVersion=4">View
Changes</a>
            </div>
</div>
</div>
</div>
</div>
</body>
</html>

Mime
View raw message