tapestry-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From build...@apache.org
Subject svn commit: r946241 [2/2] - in /websites/production/tapestry/content: ./ cache/ error-page-recipe.data/ overriding-exception-reporting.data/
Date Fri, 03 Apr 2015 22:19:43 GMT
Modified: websites/production/tapestry/content/templating-and-markup-faq.html
==============================================================================
--- websites/production/tapestry/content/templating-and-markup-faq.html (original)
+++ websites/production/tapestry/content/templating-and-markup-faq.html Fri Apr  3 22:19:42
2015
@@ -82,7 +82,7 @@ table.ScrollbarTable td.ScrollbarNextIco
 </div></div><p>Part of the DOCTYPE is the declaration of entities such
as <code>&amp;nbsp;</code>.</p><p>Alternately, you can simply
use the numeric version: <code>&amp;#160</code>; This is the exact same character
and will render identically in the browser.</p><p>Starting in release 5.3, Tapestry
introduces an XHTML doctype when no doctype is present; this means that common HTML entities
will work correctly.</p><h3 id="TemplatingandMarkupFAQ-Whydosomeimagesinmypageshowupasbrokenlinks?">Why
do some images in my page show up as broken links?</h3><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 <code>ViewUser.tml</code> file, you may have:</p><div
class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent
pdl">
 <script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[
 &lt;img class=&quot;icon&quot; src=&quot;icons/admin.png&quot;/&gt;${user.name}
has Administrative access
 ]]></script>
-</div></div><p>This makes sense; <code>ViewUser.tml</code>
is in the web context, as is the <code>icons</code> folder. The default URL for
this page will be <code>/viewuser (assuming that ViewUser class is in the _root-package_.{{pages}}
package).<br clear="none"></code></p><p>However, the ViewUser page
might use a page activation context to identify which user is to be displayed:</p><div
class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent
pdl">
+</div></div><p>This makes sense; ViewUser.tml is in the web context, as
is the icons folder. The default URL for this page will be /viewuser (assuming that ViewUser
class is in the &#160;<em>root-package</em>.pages package).</p><p>However,
the ViewUser page might use a page activation context to identify which user is to be displayed:</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[public
class ViewUser
 
   @Property
@@ -107,13 +107,7 @@ table.ScrollbarTable td.ScrollbarNextIco
 </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 pdl" style="border-width: 1px;"><div
class="codeContent panelContent pdl">
 <script class="theme: Default; brush: text; gutter: false" type="syntaxhighlighter"><![CDATA[
 $(&#39;status&#39;).hide();
 ]]></script>
-</div></div><p>In many components, the <code>id</code> 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 <code>id</code> attribute.
Often, in the latter case, the Tapestry component id is the <em>default</em> value
for the client id.</p><h3 id="TemplatingandMarkupFAQ-WhydomyimagesandstylesheetsendupwithaweirdURLslike/assets/eea17aee26bc0cae/ctx/layout/layout.css?">Why
do my images and stylesheets end up with a weird URLs like <code>/assets/eea17aee26bc0cae/ctx/layout/layout.css</code>?</h3><p>Tapestry
doesn't rely on the servlet container to serve up your static assets (images, stylesheets,
flash movies, etc.). Instead, Tapestry processes the requests itself, streaming assets to
the browser.</p><p>Asset content will be GZIP compressed (if the client supports
compression, and the content is compressible). In addition, Tapestry will set a far-future
expires header on the content. T
 his means that the browser will not ask for the file again, greatly reducing network traffic.</p><p>The
weird hex string is a random application version number. A new one is chosen every time the
application starts up.</p><p>This is necessary so that, if an asset changes in
place, browsers will download the new version. Because the application version number has
changed, it represents a new asset to browsers, who will download the new version, even if
the old version was previously downloaded (remember the far future expires header).</p><p>By
the time your application is ready for production, you should manage the application version
number directly:</p><div class="code panel pdl" style="border-width: 1px;"><div
class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>AppModule.java
(partial)</b></div><div class="codeContent panelContent pdl">
-<script class="theme: Default; brush: java; gutter: false" type="syntaxhighlighter"><![CDATA[
public static void contributeApplicationDefaults(
-			MappedConfiguration&lt;String, String&gt; configuration) {
-		configuration.add(SymbolConstants.APPLICATION_VERSION, &quot;1.7.5&quot;);
-	}
-]]></script>
-</div></div><p>You should be careful to change the application version
number for each new deployment of your application; otherwise returning users may be stuck
with old versions of assets that have changed in the interim. This kind of mismatch can cause
visual annoyances for style sheets or image files, but can break client-side behavior for
changed JavaScript libraries.</p><h3 id="TemplatingandMarkupFAQ-HowdoIaddaCSSclasstoaTapestrycomponent?">How
do I add a CSS class to a Tapestry component?</h3><p>As they say, "just do it".
The majority of Tapestry components support <em>informal parameters</em>, meaning
that any extra attributes in the element (in the template) will be rendered out as additional
attributes. So, you can apply a CSS class or style quite easily:</p><div class="code
panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
+</div></div><p>In many components, the <code>id</code> 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 <code>id</code> attribute.
Often, in the latter case, the Tapestry component id is the <em>default</em> value
for the client id.</p><h3 id="TemplatingandMarkupFAQ-WhydomyimagesandstylesheetsendupwithaweirdURLslike/assets/meta/zeea17aee26bc0cae/layout/layout.css?">Why
do my images and stylesheets end up with a weird URLs like <code>/assets/meta/zeea17aee26bc0cae/layout/layout.css</code>?</h3><p>Tapestry
doesn't rely on the servlet container to serve up your static assets (images, stylesheets,
flash movies, etc.). Instead, Tapestry processes the requests itself, streaming assets to
the browser.</p><p>Asset content will be GZIP compressed (if the client supports
compression, and the content is compressible). In addition, Tapestry will set a far-future
expires header on the conten
 t. This means that the browser will not ask for the file again, greatly reducing network
traffic.</p><p>The weird hex string is a&#160;<em>fingerprint</em>;
it is a hash code computed from the actual content of the asset. If the asset every changes,
it will have a new fingerprint, and so will be a new path and a new (immutable) resource.
This approach, combined with a far-future expires header also provided by Tapestry, ensures
that clients aggressively cache assets as they navigate your site, or even between visits.</p><p><span
style="color: rgb(83,145,38);font-size: 16.0px;line-height: 1.5625;">How do I add a CSS
class to a Tapestry component?</span></p><p>As they say, "just do it". The
majority of Tapestry components support <em>informal parameters</em>, meaning
that any extra attributes in the element (in the template) will be rendered out as additional
attributes. So, you can apply a CSS class or style quite easily:</p><div class="code
panel pdl" style="border-width: 1px;"><div
  class="codeContent panelContent pdl">
 <script class="theme: Default; brush: xml; gutter: false" type="syntaxhighlighter"><![CDATA[
 &lt;t:textfield t:id=&quot;username&quot; class=&quot;big-green&quot;/&gt;
 ]]></script>
 </div></div><p>You can even use template expansions inside the attribute
value:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent
panelContent pdl">
@@ -133,7 +127,7 @@ table.ScrollbarTable td.ScrollbarParent
 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
colspan="1" rowspan="1" class="ScrollbarPrevIcon"><a shape="rect" href="general-questions.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="general-questions.html">General Questions</a>&#160;</td><td
colspan="1" rowspan="1" class="ScrollbarParent" width="33%"><sup><a shape="rect"
href="frequently-asked-questions.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="frequently-asked-questions.html">Frequently
Asked Questions</a></td><td colspan="1" rowspan="1" class="ScrollbarNextName"
width="33%">&#160;<a shape="rect" href="page-and-component-classes-faq.html">Page
And Component Classes FAQ</a></td><td colspan="1" rowspan="1" class="Scrol
 lbarNextIcon"><a shape="rect" href="page-and-component-classes-faq.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>&#160;</p><p>&#160;</p><p>&#160;</p><p>&#160;</p><p>&#160;</p><p>&#160;</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 colspan="1" rowspan="1" class="accessibility" id="footnote-th1">Reference</th><th
colspan="1" rowspan="1" class="accessibility" id="footnote-th2">Notes</th></tr></thead><tbody></tbody></table></p><p>&#160;</p><p>&#160;</p><p>&#160;</p><p>&#160;</p></div>
+/*]]>*/</style><div class="Scrollbar"><table class="ScrollbarTable"><tr><td
colspan="1" rowspan="1" class="ScrollbarPrevIcon"><a shape="rect" href="general-questions.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="general-questions.html">General Questions</a>&#160;</td><td
colspan="1" rowspan="1" class="ScrollbarParent" width="33%"><sup><a shape="rect"
href="frequently-asked-questions.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="frequently-asked-questions.html">Frequently
Asked Questions</a></td><td colspan="1" rowspan="1" class="ScrollbarNextName"
width="33%">&#160;<a shape="rect" href="page-and-component-classes-faq.html">Page
And Component Classes FAQ</a></td><td colspan="1" rowspan="1" class="Scrol
 lbarNextIcon"><a shape="rect" href="page-and-component-classes-faq.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>&#160;</p><p>&#160;</p><p>&#160;</p><p>&#160;</p><p>&#160;</p><p>&#160;</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 colspan="1" rowspan="1" class="accessibility" id="footnote-th1">Reference</th><th
colspan="1" rowspan="1" class="accessibility" id="footnote-th2">Notes</th></tr></thead><tbody></tbody></table><p>&#160;</p><p>&#160;</p><p>&#160;</p><p>&#160;</p></div>
 </div>
 
 <div class="clearer"></div>



Mime
View raw message