tapestry-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From build...@apache.org
Subject svn commit: r913404 - in /websites/production/tapestry/content: ajax-and-zones.html cache/main.pageCache client-side-javascript.html coffeescript.html css.html
Date Mon, 23 Jun 2014 18:19:33 GMT
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 &lt;div&gt;, 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 &lt;div&gt;. 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 &lt;div&gt; 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 &lt;div&gt;.</p><p>A
zone is recognizable in the DOM because it will have the attribute&#160;<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 &lt;div&gt;. 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 &lt;div&gt; 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[&lt;t:actionlink
t:id=&quot;someLink&quot; zone=&quot;myzone&quot;&gt;update&lt;/t:actionlink&gt;
 ...
 &lt;t:zone t:id=&quot;myZone&quot; id=&quot;myzone&quot;&gt;
@@ -193,7 +193,13 @@ Object onActionFromRegister()
         registrationHelp);
 }
 ]]></script>
-</div></div><p>&#160; &#160; <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>&#160; &#160; <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;">&#160;</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[&lt;t:zone
t:id=&quot;myZone&quot; id=&quot;myzone&quot;&gt; ... &lt;/t:zone&gt;
 
 &lt;t:actionlink t:id=&quot;update&quot; zone=&quot;myzone&quot;&gt;update&lt;/t:actionlink&gt;
@@ -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 &lt;div&gt; may contain an update &lt;div&gt;.</p><p>An
Update &lt;div&gt; is specifically a &lt;div&gt; element marked with the CSS
class "t-zone-update", <em>inside</em> the Zone's &lt;div&gt;.</p><p>If
an Update div exists within a Zone div, then when Tapestry updates a zone only the update
&lt;div&gt;'s content will be changed, rather than the entire Zone &lt;div&gt;.</p><p>The
show and update functions (see Zone Functions, below) apply to the Zone &lt;div&gt;,
not just the update &lt;div&gt;.</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 &lt;div&gt; may contain an update &lt;div&gt;.</p><p>An
Update &lt;div&gt; is specifically a &lt;div&gt; element marked with the CSS
class "t-zone-update", <em>inside</em> the Zone's &lt;div&gt;.</p><p>If
an Update div exists within a Zone div, then when Tapestry updates a zone only the update
&lt;div&gt;'s content will be changed, rather than the entire Zone &lt;div&gt;.</p><p>The
show and update functions (see Zone Functions, below) apply to the Zone &lt;div&gt;,
not just the update &lt;div&gt;.</p><h3 id="AjaxandZones-ZoneEffectFunctions(Tapestry5.3andearlier)">Zone
Effect Functions (Tapestry 5.3 and earlier)</h3><p>&#160;</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>&#160;</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[&lt;t:zone
t:id=&quot;myZone&quot; t:update=&quot;show&quot;&gt;]]></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 &lt; min
         memo.error = (@attr &quot;data-min-length-message&quot;) or &quot;TOO
SHORT&quot;
         return false]]></script>
-</div></div><p>The&#160;<code>t5/core/events</code> module
defines constants for different custom event name, it's also a handy place to hang&#160;<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&#160;<code>t5/core/dom</code>
namespace is the abstraction layer. &#160;<code>onDocument</code> is a handy
way to attach a top-level event handler.</p><p>Fields that are required will have
the attribute&#160;<code>data-optionality=required</code>; the event handler
is passed a&#160;<em>memo</em> object that includes a&#160;<code>value</code>
property, the value from the field. This makes it easier to generate an error if the value
is blank. &#160;Because the exact error message may be customized or localized, it is
provided in the element as well, as the&#160;<code>data-required-message</code>
attribute. Setting&#160;<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&#160;<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&#160;<code>error</code> property is set, and the&#160;<code>return
false</code> ensures that the event will stop bubbling to containing elements or event
handlers.</p></div>
+</div></div><p>The&#160;<code>t5/core/events</code> module
defines constants for different custom event name, it's also a handy place to hang&#160;<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&#160;<code>t5/core/dom</code>
namespace is the abstraction layer. &#160;<code>onDocument</code> is a handy
way to attach a top-level event handler.</p><p>Fields that are required will have
the attribute&#160;<code>data-optionality=required</code>; the event handler
is passed a&#160;<em>memo</em> object that includes a&#160;<code>value</code>
property, the value from the field. This makes it easier to generate an error if the value
is blank. &#160;Because the exact error message may be customized or localized, it is
provided in the element as well, as the&#160;<code>data-required-message</code>
attribute. Setting&#160;<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&#160;<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&#160;<code>error</code> property is set, and the&#160;<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&#160;<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&#160;<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. &#160;
 It is still best to inject module <span style="font-family: monospace;">jquery</span>&#160;into
your own modules (usually as parameter&#160;<code>$</code>).&#160;</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 &amp; 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>&nbsp;&gt;&nbsp;<a
href="documentation.html">Documentation</a>&nbsp;&gt;&nbsp;<a href="user-guide.html">User
Guide</a>&nbsp;&gt;&nbsp;<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&#160;<em>essence</em>
and less&#160;<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&amp;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&amp;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 &#8211; 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 &lt;html&gt;
element and a nested &lt;head&gt; 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 &lt;head&gt; 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 &#8211; 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 &lt;html&gt;
element and a nested &lt;head&gt; 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 &lt;head&gt; 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[&lt;head&gt;
   &lt;link href=&quot;/css/site.css&quot; rel=&quot;stylesheet&quot;
type=&quot;text/css&quot;/&gt;
   . . .
@@ -119,14 +119,14 @@
   &lt;link href=&quot;${context:css/site.css}&quot; rel=&quot;stylesheet&quot;
type=&quot;text/css&quot;/&gt;
   . . .
 ]]></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=&quot;context:css/site.css&quot;)
 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() {
 &lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;/assets/1.0-SNAPSHOT/ctx/layout/ie-only.css&quot;&gt;&lt;/link&gt;
 &lt;![endif]--&gt;
 ]]></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&lt;MarkupRendererFilter&gt;
configuration)
 {
     configuration.override(&quot;InjectDefaultStyleheet&quot;, 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>



Mime
View raw message