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>
