You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@tapestry.apache.org by bu...@apache.org on 2014/06/23 20:19:33 UTC
svn commit: r913404 - in /websites/production/tapestry/content:
ajax-and-zones.html cache/main.pageCache client-side-javascript.html
coffeescript.html css.html
Author: buildbot
Date: Mon Jun 23 18:19:32 2014
New Revision: 913404
Log:
Production update by buildbot for tapestry
Added:
websites/production/tapestry/content/coffeescript.html
Modified:
websites/production/tapestry/content/ajax-and-zones.html
websites/production/tapestry/content/cache/main.pageCache
websites/production/tapestry/content/client-side-javascript.html
websites/production/tapestry/content/css.html
Modified: websites/production/tapestry/content/ajax-and-zones.html
==============================================================================
--- websites/production/tapestry/content/ajax-and-zones.html (original)
+++ websites/production/tapestry/content/ajax-and-zones.html Mon Jun 23 18:19:32 2014
@@ -78,7 +78,7 @@
<span class="icon icon-page" title="Page">Page:</span> </div>
<div class="details">
- <a shape="rect" href="javascript.html">JavaScript</a>
+ <a shape="rect" href="legacy-javascript.html">Legacy JavaScript</a>
</div>
@@ -105,7 +105,7 @@
<span class="icon icon-page" title="Page">Page:</span> </div>
<div class="details">
- <a shape="rect" href="javascript-faq.html">JavaScript FAQ</a>
+ <a shape="rect" href="assets.html">Assets</a>
</div>
@@ -114,7 +114,7 @@
<span class="icon icon-page" title="Page">Page:</span> </div>
<div class="details">
- <a shape="rect" href="assets.html">Assets</a>
+ <a shape="rect" href="ajax-components-faq.html">Ajax Components FAQ</a>
</div>
@@ -123,12 +123,12 @@
<span class="icon icon-page" title="Page">Page:</span> </div>
<div class="details">
- <a shape="rect" href="ajax-components-faq.html">Ajax Components FAQ</a>
+ <a shape="rect" href="javascript-faq.html">JavaScript FAQ</a>
</div>
</li></ul>
-</div><p>Tapestry provides easy-to-use support for <strong>Ajax</strong>, the technique of using JavaScript to dynamically updating parts of a web page with content from the server without redrawing the whole page. With Tapestry, you can do simple Ajax updates without having to write any JavaScript code at all.</p><p>Ajax support is included in many <a shape="rect" href="component-reference.html">built-in components</a> and <a shape="rect" href="component-mixins.html">component mixins</a> via the <code>zone</code> parameter.</p><h2 id="AjaxandZones-Zones">Zones</h2><p>Zones are Tapestry's approach to performing partial page updates. A <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/corelib/components/Zone.html">Zone component</a> renders as an HTML element, typically a <div>, with the "t-zone" CSS class. (It also adds some JavaScript to the page to "wire up" a Tapestry.ZoneManager object to control updating that eleme
nt.)</p><p>A Zone can be updated via an EventLink, ActionLink or Select component, or by a Form. All of these components support a zone parameter, which provides the id of the Zone's <div>. Clicking such a link will invoke an event handler method on the server as normal ... except that the return value of the event handler method is used to send a <em>partial page response</em> to the client, and the content of that response is used to update the Zone's <div> in place.</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
+</div><p>Tapestry provides easy-to-use support for <strong>Ajax</strong>, the technique of using JavaScript to dynamically updating parts of a web page with content from the server without redrawing the whole page. With Tapestry, you can do simple Ajax updates without having to write any JavaScript code at all.</p><p>Ajax support is included in many <a shape="rect" href="component-reference.html">built-in components</a> and <a shape="rect" href="component-mixins.html">component mixins</a> via the <code>zone</code> parameter.</p><h2 id="AjaxandZones-Zones">Zones</h2><p>Zones are Tapestry's approach to performing partial page updates. A <a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/corelib/components/Zone.html">Zone component</a> renders as an HTML element, typically a <div>.</p><p>A zone is recognizable in the DOM because it will have the attribute <code>data-container-type=zone</code>. The client-side support f
or Zones is keyed off of this attribute and value.</p><p><span style="line-height: 1.4285715;">A Zone can be updated via an EventLink, ActionLink or Select component, or by a Form. All of these components support a zone parameter, which provides the id of the Zone's <div>. Clicking such a link will invoke an event handler method on the server as normal ... except that the return value of the event handler method is used to send a </span><em style="line-height: 1.4285715;">partial page response</em><span style="line-height: 1.4285715;"> to the client, and the content of that response is used to update the Zone's <div> in place.</span></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[<t:actionlink t:id="someLink" zone="myzone">update</t:actionlink>
...
<t:zone t:id="myZone" id="myzone">
@@ -193,7 +193,13 @@ Object onActionFromRegister()
registrationHelp);
}
]]></script>
-</div></div><p>    <em>Note that MultiZoneUpdate is deprecated starting with Tapestry 5.3.</em></p></div></div></div></div><p>These examples assume that there are two zones, "userInput" and "helpPanel", somewhere in the rendered page, waiting to receive the updated content.</p><h3 id="AjaxandZones-ZoneComponentIdvs.ZoneElementId">Zone Component Id vs. Zone Element Id</h3><p>Like all Tapestry components, Zones have a component id, specified using the <code>t:id</code> attribute. If you do not assign a component id, a unique id is assigned by Tapestry.</p><p>However, to coordinate things on the client side, it is necessary for components that wish to update the zone know the <em>client-side element id</em>. This is specified with the <code>id</code> parameter of the Zone component. If the <code>id</code> parameter is not bound, then a unique value (for the current page and render) is generated by Tapestry and this value is difficult to predict. The actual value will be avail
able as the <code>clientId</code> property of the Zone component itself.</p><p>Remember that the component id (<code>t:id</code>) is used to <em>inject</em> the Zone component into the containing page or component. The<br clear="none"> client-side id (<code>id</code>) is used ... on the client side to orchestrate requests and updates. You will often seen the following construct:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
+</div></div><p>    <em>Note that MultiZoneUpdate is deprecated starting with Tapestry 5.3.</em></p></div></div></div></div><p><span style="line-height: 1.4285715;">These examples assume that there are two zones, "userInput" and "helpPanel", somewhere in the rendered page, waiting to receive the updated content.</span></p><p><span style="line-height: 1.4285715;"> </span></p> <div class="aui-message warning shadowed information-macro">
+ <span class="aui-icon icon-warning">Icon</span>
+ <div class="message-content">
+ <p>In this example, the Zone receives the update but does not provide any content. That's OK, the other client-side elements (<code>userInput</code> and <code>helpPanel</code>) will be updated, and the zone's content left unchanged.</p>
+ </div>
+ </div>
+<p>This demonstrates why it is necessary for the developer to specify a particular client-side id for Zone components; if they were dynamically allocated ids, as is typical in most other elements, it would be impossible for this code to know what client-side id was used for the Zone.</p><h3 id="AjaxandZones-ZoneComponentIdvs.ZoneElementId">Zone Component Id vs. Zone Element Id</h3><p>Like all Tapestry components, Zones have a component id, specified using the <code>t:id</code> attribute. If you do not assign a component id, a unique id is assigned by Tapestry.</p><p>However, to coordinate things on the client side, it is necessary for components that wish to update the zone know the <em>client-side element id</em>. This is specified with the <code>id</code> parameter of the Zone component. If the <code>id</code> parameter is not bound, then a unique value (for the current page and render) is generated by Tapestry and this value is difficult to predict. The actual value will be avail
able as the <code>clientId</code> property of the Zone component itself.</p><p>Remember that the component id (<code>t:id</code>) is used to <em>inject</em> the Zone component into the containing page or component. The<br clear="none"> client-side id (<code>id</code>) is used ... on the client side to orchestrate requests and updates. You will often seen the following construct:</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[<t:zone t:id="myZone" id="myzone"> ... </t:zone>
<t:actionlink t:id="update" zone="myzone">update</t:actionlink>
@@ -210,11 +216,14 @@ Object onActionFromRegister()
</div>
<div style="border-right: 20px solid #D8E4F1;border-left: 20px solid #D8E4F1;">
-<p>If the Form or Link is enclosed by the Zone itself, then the <code>zone</code> parameter may be set to the special value <code>^</code>. The carat is evaluated, on the client side, by searching up form the form or link element for the first enclosing element with the <code>t-zone</code> CSS class. In this way, the client-side coordination can occur without having to know what the specific client-side id of the Zone is. Because of this, in many cases, it is no longer necessary to specify the Zone's <code>id</code> parameter.</p>
+<p>If the Form or Link is enclosed by the Zone itself, then the <code>zone</code> parameter may be set to the special value <code>^</code>. The carat is evaluated, on the client side, by searching up form the form or link element for the first enclosing element that is a Zone. In this way, the client-side coordination can occur without having to know what the specific client-side id of the Zone is. Because of this, in some cases, it is no longer necessary to specify the Zone's <code>id</code> parameter.</p>
</div><h3 id="AjaxandZones-AnUpdatedivwithinaZonediv">An Update div within a Zone div</h3>
<div style="border-right: 20px solid #ffcccc;border-left: 20px solid #ffcccc;">
-<p><em>This feature is removed starting with Tapestry 5.4</em></p></div><p>In many situations, a Zone is a kind of "wrapper" or "container" for dynamic content; one that provides a look and feel ... a bit of wrapping markup to create a border. In that situation, the Zone <div> may contain an update <div>.</p><p>An Update <div> is specifically a <div> element marked with the CSS class "t-zone-update", <em>inside</em> the Zone's <div>.</p><p>If an Update div exists within a Zone div, then when Tapestry updates a zone only the update <div>'s content will be changed, rather than the entire Zone <div>.</p><p>The show and update functions (see Zone Functions, below) apply to the Zone <div>, not just the update <div>.</p><h3 id="AjaxandZones-ZoneEffectFunctions">Zone Effect Functions</h3><p>A Zone may be initially visible or invisible. When a Zone is updated, it is made visible if not currently so. This is accomplished via a function on
the Tapestry.ElementEffect client-side object. By default, the show() function is used for this purpose. If you want Tapestry to call a different Tapestry.ElementEffect function when updates occur, specify its name with the zone's show parameter.</p><p>If a Zone is already visible, then a different effect function is used to highlight the change. By default, the highlight() function is called, which performs a yellow fade to highlight that the content of the Zone has changed. Alternatively, you can specify a different effect function with the Zone's update parameter:</p><div class="table-wrap"><table class="confluenceTable"><tbody><tr><th colspan="1" rowspan="1" class="confluenceTh"><p>Tapestry.ElementEffect Function</p></th><th colspan="1" rowspan="1" class="confluenceTh"><p>Result</p></th></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p>highlight()</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>(the default) highlight changes to an already-visible zone</p
></td></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p>show()</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>make the zone visible if it isn't already visible</p></td></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p>slidedown()</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>scroll the content down</p></td></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p>slideup()</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>slide the content back up (opposite of slidedown)</p></td></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p>fade()</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>fade the content out (opposite of show)</p></td></tr></tbody></table></div><p>To have Tapestry update a zone without the usual yellow highlight effect, just specify "show" for the update parameter:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
+<p><em>This feature is removed starting with Tapestry 5.4</em></p></div><p>In many situations, a Zone is a kind of "wrapper" or "container" for dynamic content; one that provides a look and feel ... a bit of wrapping markup to create a border. In that situation, the Zone <div> may contain an update <div>.</p><p>An Update <div> is specifically a <div> element marked with the CSS class "t-zone-update", <em>inside</em> the Zone's <div>.</p><p>If an Update div exists within a Zone div, then when Tapestry updates a zone only the update <div>'s content will be changed, rather than the entire Zone <div>.</p><p>The show and update functions (see Zone Functions, below) apply to the Zone <div>, not just the update <div>.</p><h3 id="AjaxandZones-ZoneEffectFunctions(Tapestry5.3andearlier)">Zone Effect Functions (Tapestry 5.3 and earlier)</h3><p> </p>
+
+<div style="border-right: 20px solid #ffcccc;border-left: 20px solid #ffcccc;">
+<p>_This feature refers to client-side logic only present in Tapestry 5.3 or earlier. For 5.4, there are client-side events that are triggered before and after changes to the Zone; listeners on those events can trigger whatever animations they like.</p></div><p> </p><p>A Zone may be initially visible or invisible. When a Zone is updated, it is made visible if not currently so. This is accomplished via a function on the Tapestry.ElementEffect client-side object. By default, the show() function is used for this purpose. If you want Tapestry to call a different Tapestry.ElementEffect function when updates occur, specify its name with the zone's show parameter.</p><p>If a Zone is already visible, then a different effect function is used to highlight the change. By default, the highlight() function is called, which performs a yellow fade to highlight that the content of the Zone has changed. Alternatively, you can specify a different effect function with the Zone's update parameter:
</p><div class="table-wrap"><table class="confluenceTable"><tbody><tr><th colspan="1" rowspan="1" class="confluenceTh"><p>Tapestry.ElementEffect Function</p></th><th colspan="1" rowspan="1" class="confluenceTh"><p>Result</p></th></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p>highlight()</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>(the default) highlight changes to an already-visible zone</p></td></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p>show()</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>make the zone visible if it isn't already visible</p></td></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p>slidedown()</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>scroll the content down</p></td></tr><tr><td colspan="1" rowspan="1" class="confluenceTd"><p>slideup()</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>slide the content back up (opposite of slidedown)</p></td></tr><tr><td colspan="1" row
span="1" class="confluenceTd"><p>fade()</p></td><td colspan="1" rowspan="1" class="confluenceTd"><p>fade the content out (opposite of show)</p></td></tr></tbody></table></div><p>To have Tapestry update a zone without the usual yellow highlight effect, just specify "show" for the update parameter:</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[<t:zone t:id="myZone" t:update="show">]]></script>
</div></div><p>You may also define and use your own JavaScript effect function (with lower-case names), like this:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<script class="theme: Default; brush: js; gutter: false" type="syntaxhighlighter"><![CDATA[Tapestry.ElementEffect.myeffectname = function(element){ YourJavascriptCodeGoesHere; };
@@ -239,7 +248,7 @@ Object onActionFromRegister()
return result;
}
]]></script>
-</div></div><p>This presumes that <code>findByPartialAccountName()</code> will sort the values, otherwise you will probably want to sort them. The Autocomplete mixin does <em>not</em> do any sorting.</p><p>You can return an object array, a list, even a single object. You may return objects instead of strings ... and <code>toString()</code> will be used to convert them into client-side strings.</p><p>Tapestry's default stylesheet includes entries for controlling the look of the floating popup of selections.</p><p>You may override <code>DIV.t-autocomplete-menu UL</code> to change the main look and feel, <code>DIV.t-autocomplete-menu LI</code> for a normal item in the popup list, and <code>DIV.t-autocomplete-menu LI.selected</code> for the element under the cursor (or selecting using the arrow keys).</p></div>
+</div></div><p>This presumes that <code>findByPartialAccountName()</code> will sort the values, otherwise you will probably want to sort them. The Autocomplete mixin does <em>not</em> do any sorting.</p><p>You can return an object array, a list, even a single object. You may return objects instead of strings ... and <code>toString()</code> will be used to convert them into client-side strings.</p></div>
</div>
<div class="clearer"></div>
Modified: websites/production/tapestry/content/cache/main.pageCache
==============================================================================
Binary files - no diff available.
Modified: websites/production/tapestry/content/client-side-javascript.html
==============================================================================
--- websites/production/tapestry/content/client-side-javascript.html (original)
+++ websites/production/tapestry/content/client-side-javascript.html Mon Jun 23 18:19:32 2014
@@ -94,7 +94,7 @@
if memo.translated.length < min
memo.error = (@attr "data-min-length-message") or "TOO SHORT"
return false]]></script>
-</div></div><p>The <code>t5/core/events</code> module defines constants for different custom event name, it's also a handy place to hang <a shape="rect" class="external-link" href="http://tapestry.apache.org/5.4/coffeescript/events.html">hang documentation</a> about those events.</p><p>The <code>t5/core/dom</code> namespace is the abstraction layer.  <code>onDocument</code> is a handy way to attach a top-level event handler.</p><p>Fields that are required will have the attribute <code>data-optionality=required</code>; the event handler is passed a <em>memo</em> object that includes a <code>value</code> property, the value from the field. This makes it easier to generate an error if the value is blank.  Because the exact error message may be customized or localized, it is provided in the element as well, as the <code>data-required-message</code> attribute. Setting <code>memo.error</code> to a validation error string will cause the fie
ld to be decorated with the error message and will indicate that the form itself is in error and not ready for submission.</p><p>A different event is triggered after the optionality check; The <code>memo.translated</code> property is the value translated before validation (for a numeric field, it would be translated from a string to a number, for example). Again, the <code>error</code> property is set, and the <code>return false</code> ensures that the event will stop bubbling to containing elements or event handlers.</p></div>
+</div></div><p>The <code>t5/core/events</code> module defines constants for different custom event name, it's also a handy place to hang <a shape="rect" class="external-link" href="http://tapestry.apache.org/5.4/coffeescript/events.html">hang documentation</a> about those events.</p><p>The <code>t5/core/dom</code> namespace is the abstraction layer.  <code>onDocument</code> is a handy way to attach a top-level event handler.</p><p>Fields that are required will have the attribute <code>data-optionality=required</code>; the event handler is passed a <em>memo</em> object that includes a <code>value</code> property, the value from the field. This makes it easier to generate an error if the value is blank.  Because the exact error message may be customized or localized, it is provided in the element as well, as the <code>data-required-message</code> attribute. Setting <code>memo.error</code> to a validation error string will cause the fie
ld to be decorated with the error message and will indicate that the form itself is in error and not ready for submission.</p><p>A different event is triggered after the optionality check; The <code>memo.translated</code> property is the value translated before validation (for a numeric field, it would be translated from a string to a number, for example). Again, the <code>error</code> property is set, and the <code>return false</code> ensures that the event will stop bubbling to containing elements or event handlers.</p><p>What's very useful in this overall approach is that it no longer matters whether the fields were rendered by Tapestry on the server, or rendered locally (perhaps using Backbone or AngularJS) on the client. As long as they have the correct <code>data-</code> attributes, then they can participate in Tapestry's overall form validation and submission cycle, and even leverage the default validation decoration behavior.</p><h3 id="Client-SideJavaScr
ipt-TheAbstractionLayer">The Abstraction Layer</h3><p>The abstraction layer is defined by the <code>t5/core/dom</code> module. This module is two different implementations - one is a wrapper around Prototype, and the other is a wrapper around jQuery.</p><p>The result is a a bit schizophrenic; it mostly looks like jQuery, but events look a bit more like jQuery. It also doesn't have jQuery's concept of a matched set of elements.</p><p>The abstraction is both transitional and permanent. It is transitional in that it is about allowing existing sites with a heavy investment in Prototype to continue to operate with Prototype in the mix. It is permanent in that it is desirable to keep an abstraction layer between Tapestry's client-side code and any underlying framework, so that particular applications can provide their own abstraction layer and operate without breaking built-in components.</p><p>Most applications should transition to jQuery and feel free to use jQuery directly.  
It is still best to inject module <span style="font-family: monospace;">jquery</span> into your own modules (usually as parameter <code>$</code>). </p><p>If you are writing a third-party application and want to maximize re-use, then use the abstraction.</p><p>It is often easier to use the abstraction to respond correctly to custom Tapestry events.</p></div>
</div>
<div class="clearer"></div>
Added: websites/production/tapestry/content/coffeescript.html
==============================================================================
--- websites/production/tapestry/content/coffeescript.html (added)
+++ websites/production/tapestry/content/coffeescript.html Mon Jun 23 18:19:32 2014
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+
+ <!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+<html>
+<head>
+ <meta http-equiv="x-ua-compatible" content="IE=9">
+ <title>
+ CoffeeScript -- Apache Tapestry
+ </title>
+ <link type="text/css" rel="stylesheet" href="/resources/space.css">
+
+
+ <link href="/styles/style.css" rel="stylesheet" type="text/css"/>
+
+</head>
+<body>
+ <div class="wrapper bs">
+
+<div id="navigation"><div class="nav">
+<ul class="alternate" type="square"><li><a shape="rect" href="index.html" title="Index">Home</a></li><li><a shape="rect" href="getting-started.html" title="Getting Started">Getting Started</a></li><li><a shape="rect" href="documentation.html" title="Documentation">Documentation</a></li><li><a shape="rect" href="download.html" title="Download">Download</a></li><li><a shape="rect" href="about.html" title="About">About</a></li><li><a shape="rect" href="community.html" title="Community">Community</a></li><li><a shape="rect" class="external-link" href="http://www.apache.org/">Apache</a></li><li><a shape="rect" class="external-link" href="http://www.apache.org/foundation/sponsorship.html">Sponsorship</a></li><li><a shape="rect" class="external-link" href="http://www.apache.org/foundation/thanks.html">Thanks</a></li></ul>
+</div></div>
+
+<div id="top">
+<div id="smallbanner"><div class="searchbox" style="float:right;margin: .3em 1em .1em 1em">
+<p>
+<span style="color: #999; font-size: 90%">Tapestry docs, issues, wikis & blogs:</span>
+</p><form enctype="application/x-www-form-urlencoded" method="get" action="http://tapestry.apache.org/search.html">
+ <input type="text" name="q">
+ <input type="submit" value="Search">
+</form>
+
+</div>
+
+<div class="emblem" style="float:left"><a shape="rect" href="index.html" title="Index"><span class="image-wrap" style=""><img src="small-banner.data/tapestry_s.png" style="border: 0px solid black"></span></a></div>
+<div class="title" style="float:left; margin: 0 0 0 3em">
+<h1><a shape="rect" name="SmallBanner-PageTitle"></a>CoffeeScript</h1></div></div>
+<div class="clearer"></div>
+</div>
+
+<div class="clearer"></div>
+
+ <div id="breadcrumbs">
+ <a href="index.html">Apache Tapestry</a> > <a href="documentation.html">Documentation</a> > <a href="user-guide.html">User Guide</a> > <a href="coffeescript.html">CoffeeScript</a>
+ <a class="edit" title="Edit this page (requires approval -- just ask on the mailing list)" href="https://cwiki.apache.org/confluence/pages/editpage.action?pageId=42567262">edit</a>
+ </div>
+
+<div id="content">
+<div id="ConfluenceContent"><p><a shape="rect" class="external-link" href="http://coffeescript.org" >CoffeeScript</a> is a language to compiles down to JavaScript.</p><p>It can be quite controversial, but also quite effective.</p><p>On the controversial side, it uses significant whitespace to denote blocks of code (like Python or Haskell) rather than curl braces (like Java, JavaScript, or Ruby). In fact, it draws influences from a wide rage of other languages, incorporating many functional programming features, a rudimentary class system, string interpolation, destructuring assignment, and more.</p><p>However, for all that, it is very close to JavaScript; it simply rounds out many of the rough edges of JavaScript (and adds a few of its own). As wide ranging as CoffeeScript syntax can be, there's generally a very close mapping from CoffeeScript to JavaScript.</p><p>CoffeeScript code often approaches Python's goal of being a "executable psuedo-code"; code that looks like a placeholder
will actually run. Some people find it more pleasant to read than JavaScript ... more <em>essence</em> and less <em>ceremony</em>.</p><p>You can still write bad code in CoffeeScript. You can write bad code in any language.</p><p>All of Tapestry's client-side code in written in CoffeeScript and compiled, at build-time, to JavaScript.</p><p>The tapestry-web-resources module adds the ability to dynamically compile CoffeeScript to JavaScript in the running application, It is recommended for anyone who want to use CoffeeScript in their application ... just do the compilation at runtime (with access to Tapestry's full exception reporting capabilities).</p></div>
+</div>
+
+<div class="clearer"></div>
+<div id="footer">
+<div id="footer"><p>Apache Tapestry, Tapestry, Apache, the Apache feather logo, and the Apache Tapestry project logo are trademarks of The Apache Software Foundation.<br clear="none">
+</p><p><script type="text/javascript">
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-400821-1']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+</script></p><p></p></div>
+</div>
+ <div id="comments_thread"></div>
+ <script type="text/javascript" src="https://comments.apache.org/show_comments.lua?site=tapestry&page=http://tapestry.apache.org/coffeescript.html" async="true">
+ </script>
+ <noscript>
+ <iframe width="100%" height="500" src="https://comments.apache.org/iframe.lua?site=tapestry&page=http://tapestry.apache.org/coffeescript.html"></iframe>
+ </noscript>
+ </div>
+</body>
+</html>
Modified: websites/production/tapestry/content/css.html
==============================================================================
--- websites/production/tapestry/content/css.html (original)
+++ websites/production/tapestry/content/css.html Mon Jun 23 18:19:32 2014
@@ -95,7 +95,7 @@
<span class="icon icon-page" title="Page">Page:</span> </div>
<div class="details">
- <a shape="rect" href="javascript.html">JavaScript</a>
+ <a shape="rect" href="legacy-javascript.html">Legacy JavaScript</a>
</div>
@@ -109,7 +109,7 @@
</div>
</li></ul>
-</div><p>Most web applications delegate to <strong>Cascading Style Sheets</strong> (CSS) the stylistic details of the page – fonts, colors, margins, borders and alignment. This helps the remaining HTML to remain simple and semantic, which usually makes it easier to read and maintain.</p><p>Tapestry includes sophisticated support for CSS in the form of annotation-based linking, far-future expire headers, automatic duplicate removal, and other features provided for <a shape="rect" href="assets.html">assets</a>.</p><h2 id="CSS-Defaultstylesheet">Default style sheet</h2><p>Tapestry includes a built-in style sheet, default.css, in all HTML documents (documents that have an outer <html> element and a nested <head> element). The default.css style sheet is always ordered <em>first</em> ... any additional style sheets will come after. This allows you to override Tapestry's default styles with your own.</p><p>All the styles in the default style sheet are prefixed with "t-" (
for Tapestry).</p><h2 id="CSS-AddingyourownCSS">Adding your own CSS</h2><p>A page or component (for example, a <a shape="rect" href="layout-component.html">layout component</a>) that is rendering the <head> tag can add a style sheet directly in the markup.</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
+</div><p>Most web applications delegate to <strong>Cascading Style Sheets</strong> (CSS) the stylistic details of the page – fonts, colors, margins, borders and alignment. This helps the remaining HTML to remain simple and semantic, which usually makes it easier to read and maintain.</p><p>Tapestry includes sophisticated support for CSS in the form of annotation-based linking, far-future expire headers, automatic duplicate removal, and other features provided for <a shape="rect" href="assets.html">assets</a>.</p><h2 id="CSS-Defaultstylesheet">Default style sheet</h2><p>Tapestry includes a built-in style sheet, tapestry.css, in all HTML documents (documents that have an outer <html> element and a nested <head> element), as part of the "core" JavaScript stack. The core JavaScript stack also includes the CSS for <a shape="rect" class="external-link" href="http://getbootstrap.com/" >Bootstrap 3.1.1</a>.</p><h2 id="CSS-AddingyourownCSS">Adding your own CSS</h2><p>A page
or component (for example, a <a shape="rect" href="layout-component.html">layout component</a>) that is rendering the <head> tag can add a style sheet directly in the markup.</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[<head>
<link href="/css/site.css" rel="stylesheet" type="text/css"/>
. . .
@@ -119,14 +119,14 @@
<link href="${context:css/site.css}" rel="stylesheet" type="text/css"/>
. . .
]]></script>
-</div></div><p>The "context:" prefix means that the remainder of the expansion is a path to a context asset, a resource in the web application root (src/main/webapp in your workspace). By contrast, the "asset:" prefix tells Tapestry to look in the class path. See <a shape="rect" href="assets.html">Assets</a>.</p><h2 id="CSS-Usingthe@Importannotation">Using the @Import annotation</h2><p>Another approach to adding a style sheet is to include an @<a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/annotations/Import.html">Import</a> annotation (starting with Tapestry 5.2) on your component class:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
+</div></div><p>The "context:" prefix means that the remainder of the expansion is a path to a context asset, a resource in the web application root (<code>src/main/webapp</code> in your workspace). By contrast, the "asset:" prefix tells Tapestry to look in the class path. See <a shape="rect" href="assets.html">Assets</a>.</p><h2 id="CSS-Usingthe@Importannotation">Using the @Import annotation</h2><p>Another approach to adding a style sheet is to include an @<a shape="rect" class="external-link" href="http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/annotations/Import.html">Import</a> annotation (starting with Tapestry 5.2) on your component class:</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[@Import(stylesheet="context:css/site.css")
public class MyComponent
{
}
]]></script>
-</div></div><p>(For Tapestry 5.0 and 5.1, use the deprecated <a shape="rect" class="external-link" href="http://tapestry.apache.org/5.2/apidocs/org/apache/tapestry5/annotations/IncludeStylesheet.html">@IncludeStyleSheet</a> annotation instead.)</p><p>As with <a shape="rect" href="javascript.html">included JavaScript libraries</a>, each style sheet will only be added once, regardless of the number of components that include it via the annotation.</p><h2 id="CSS-ConditionallyloadingIE-onlystylesheets">Conditionally loading IE-only style sheets</h2><p>For Tapestry 5.2 and later, if you need to load a different style sheet for Internet Explorer browsers, or for certain versions of IE browsers, you can use Tapestry's built-in support for IE conditional comments. Just add something like the following to your page or component (or layout) class:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
+</div></div><p>(For Tapestry 5.0 and 5.1, use the deprecated <a shape="rect" class="external-link" href="http://tapestry.apache.org/5.2/apidocs/org/apache/tapestry5/annotations/IncludeStylesheet.html">@IncludeStyleSheet</a> annotation instead.)</p><p>As with <a shape="rect" href="legacy-javascript.html">included JavaScript libraries</a>, each style sheet will only be added once, regardless of the number of components that include it via the annotation.</p><h2 id="CSS-ConditionallyloadingIE-onlystylesheets">Conditionally loading IE-only style sheets</h2><p>For Tapestry 5.2 and later, if you need to load a different style sheet for Internet Explorer browsers, or for certain versions of IE browsers, you can use Tapestry's built-in support for IE conditional comments. Just add something like the following to your page or component (or layout) class:</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[@Environmental
private JavaScriptSupport javaScriptSupport;
@@ -144,14 +144,14 @@ void afterRender() {
<link type="text/css" rel="stylesheet" href="/assets/1.0-SNAPSHOT/ctx/layout/ie-only.css"></link>
<![endif]-->
]]></script>
-</div></div><p>Naturally, the conditional part can be any other IE <a shape="rect" class="external-link" href="http://en.wikipedia.org/wiki/Conditional_comment" >conditional expression</a>, such as "lt IE 8".</p><h2 id="CSS-Suppressingthedefaultstylesheet">Suppressing the default style sheet</h2><p>Though it should be rarely needed, you can prevent Tapestry's default style sheet from loading by overriding the configuration in your application's module (normally AppModule.java):</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">
+</div></div><p>Naturally, the conditional part can be any other IE <a shape="rect" class="external-link" href="http://en.wikipedia.org/wiki/Conditional_comment" >conditional expression</a>, such as "lt IE 8".</p><h2 id="CSS-Suppressingthedefaultstylesheet(Tapestry5.3andearlier)">Suppressing the default style sheet (Tapestry 5.3 and earlier)</h2><p>Though it should be rarely needed, you can prevent Tapestry's default style sheet from loading by overriding the configuration in your application's module (normally AppModule.java):</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[@Contribute(MarkupRenderer.class)
public static void deactiveDefaultCSS(OrderedConfiguration<MarkupRendererFilter> configuration)
{
configuration.override("InjectDefaultStyleheet", null);
}
]]></script>
-</div></div><p>Note: In Tapestry 5.3 and later, the misspelled "InjectDefaultStyleheet" is corrected to "InjectDefaultStylesheet".</p></div>
+</div></div><p>Note: In Tapestry 5.3 and later, the misspelled "InjectDefaultStyleheet" is corrected to "InjectDefaultStylesheet".</p><p>In Tapestry 5.4, the "core" JavaScript has a configuration into which you may inject overrides.</p></div>
</div>
<div class="clearer"></div>