tapestry-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Apache Wiki <wikidi...@apache.org>
Subject [Tapestry Wiki] Update of "Tapestry5AndJavaScriptExplained" by BobHarner
Date Sat, 08 Oct 2011 22:55:22 GMT
Dear Wiki user,

You have subscribed to a wiki page or wiki category on "Tapestry Wiki" for change notification.

The "Tapestry5AndJavaScriptExplained" page has been changed by BobHarner:
http://wiki.apache.org/tapestry/Tapestry5AndJavaScriptExplained?action=diff&rev1=11&rev2=12

Comment:
Updated to Tapestry 5.2

  == Introduction ==
  
- || Note: This page needs to be updated for Tapestry 5.2, particularly using @Import instead
of @!IncludeJavascriptLibrary ||
+ || Note: This page refers to Tapestry 5.2 and later. For Tapestry 5.0 and 5.1, just use
@!IncludeJavascriptLibrary instead of @Import, and !RenderSupport instead of !JavaScriptSupport
||
  
+ Main Article: [[http://tapestry.apache.org/javascript.html|JavaScript]]
+ 
- !JavaScript is a critical element of modern web applications. Historically "real" software
developers have avoided !JavaScript either because they had more important things to do, or
because they simply didn't want to be bothered with front-end details. Well as we know, times
have changed and are changing still. If you want to have an application that can compete with
other modern applications, you have to use !JavaScript (including AJAX).
+ !JavaScript is a critical element of modern web applications. Historically "real" software
developers used to avoid !JavaScript either because they had more important things to do,
or because they simply didn't want to be bothered with front-end details. Well as we know,
times have changed and are changing still. If you want to have an application that can compete
with other modern applications, you have to use !JavaScript (including Ajax).
  
- Modern frameworks, and perhaps none more aggressively than [[http://www.rubyonrails.org/|RoR]],
go a long way in removing the pains of !JavaScript from developing web applications. Tapestry
5 is no exception and has come a long way in making !JavaScript transparent to developers
(not to mention 3rd party libraries).
+ Modern frameworks, such as GWT and Ruby on Rails, go a long way in removing the pains of
!JavaScript from developing web applications. Tapestry 5 is no exception and has come a long
way in making !JavaScript transparent to developers (not to mention 3rd party libraries).
  
- However, there are brave souls who wish to know how it all works. Perhaps you're tracing
some weird error, developing a sophisticated component with !JavaScript, or maybe you're just
curious. This article is for such people, so we'll have a look at how Tapestry 5 elegantly
weaves !JavaScript into your application by creating a mixin. This mixin can be applied to
links (that is, !PageLink or !ActionLink components) so that the user will be asked to confirm
that they would like to follow that link, which is ultimately accomplished by a !JavaScript
`confirm` dialog.
+ However, there are those who want to know how it all works. Perhaps you're tracing some
weird error, developing a sophisticated component with !JavaScript, or maybe you're just curious.
This article is for such people, so we'll have a look at how Tapestry 5 elegantly weaves !JavaScript
into your application by creating a mixin. This mixin can be applied to links (that is, !PageLink
or !ActionLink components) so that the user will be asked to confirm that they would like
to follow that link, which is ultimately accomplished by a traditional !JavaScript `confirm`
dialog.
- 
- ''The full project source is available [[http://thegodcode.net/tapestry5/jsclarity-project.zip|here]]''.
  
  == What You Should Already Know ==
  
@@ -43, +43 @@

  
  import org.apache.tapestry5.BindingConstants;
  import org.apache.tapestry5.ClientElement;
- import org.apache.tapestry5.RenderSupport;
+ import org.apache.tapestry5.services.javascript.JavaScriptSupport;
  import org.apache.tapestry5.annotations.AfterRender;
- import org.apache.tapestry5.annotations.IncludeJavascriptLibrary;
+ import org.apache.tapestry5.annotations.Import;
  import org.apache.tapestry5.annotations.InjectContainer;
  import org.apache.tapestry5.annotations.Parameter;
  import org.apache.tapestry5.ioc.annotations.Inject;
  
  /**
-  * A simple mixin for attaching a javascript confirmation box to the onclick
+  * A simple mixin for attaching a JavaScript confirmation box to the onclick
   * event of any component that implements ClientElement.
   *
   * @author <a href="mailto:chris@thegodcode.net">Chris Lewis</a> Apr 18, 2008
   */
- @IncludeJavaScriptLibrary("confirm.js")
+ @Import (library="confirm.js")
  public class Confirm {
  
      @Parameter(value = "Are you sure?", defaultPrefix = BindingConstants.LITERAL)
      private String message;
  
      @Inject
-     private RenderSupport renderSupport;
+     private JavaScriptSupport javaScriptSupport;
  
      @InjectContainer
      private ClientElement element;
  
      @AfterRender
      public void afterRender() {
+             javaScriptSupport.addScript("new Confirm('%s', '%s');", element.getClientId(),
message);
-             renderSupport.addScript(String.format("new Confirm('%s', '%s');",
-                     element.getClientId(), message));
      }
  
  }
  }}}
  
- The first thing you may ask is "What does the [[http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/annotations/IncludeJavaScriptLibrary.html|@IncludeJavascriptLibrary]]
do"? Naturally, it includes a !JavaScript library, but we'll have a closer look at it later.
For now let's look at the `afterRender` method.
+ The first thing you may ask is "What does the [[http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/annotations/Import|@Import]]
do"? It includes a !JavaScript library, but we'll have a closer look at it later. For now
let's look at the `afterRender` method.
  
  {{{
  	@AfterRender
  	public void afterRender() {
+ 		javaScriptSupport.addScript("new Confirm('%s', '%s');", element.getClientId(), this.message);
- 		renderSupport.addScript(String.format("new Confirm('%s', '%s');",
- 			element.getClientId(), this.message));
  	}
  }}}
  
@@ -92, +90 @@

  
  == Creating the Mixin's Javascript File ==
  
- Now let's create our !JavaScript class to accompany our mixin. Following the convention,
we'll place this file in the same package as our mixin class, such that it becomes a resource
on the classpath. This is useful because when we pass a relative name to the [[http://tapestry.apache.org/tapestry5/apidocs/org/apache/tapestry5/annotations/IncludeJavaScriptLibrary.html|@IncludeJavascriptLibrary]],
Tapestry will start in the package of the annotated class.
+ Now let's create our !JavaScript class to accompany our mixin. Following the convention,
we'll place this file in the same package as our mixin class, such that it becomes a resource
on the classpath. This is useful because when we pass a relative name to the [[http://tapestry.apache.org/tapestry5/apidocs/org/apache/tapestry5/annotations/Import.html|@Import]],
Tapestry will start in the package of the annotated class.
  
  ''Maven location: src/main/resources/net/godcode/jsclarity/mixins/confirm.js (notice this
is in `src/main/resources`)''
  
@@ -135, +133 @@

  
          <p> This is the start page for this application, a good place to start your
modifications.
              Just to prove this is live: </p>
- 
          <p> The current time is: ${currentTime}. </p>
- 
- 
          <p>
              [<a t:type="pagelink" t:mixins="confirm" page="index">Refresh</a>]
          </p>
@@ -219, +214 @@

  Fantastic! But how did it all happen? Well, it all starts with that annotation I said we'd
look at later.
  
  
- == @IncludeJavascriptLibrary ==
+ == @Import ==
  
  This annotation is a wonderful shortcut. To find where and how Tapestry implements the magic
behind it you'll need to dig into the T5 source. The beauty of course is that you don't need
to understand the ''how'' to understand what it does.
  
  You can apply this annotation to page, component, or mixin classes. You must provide it
with either the name of a !JavaScript file as a string, or an array of files. These strings
represent locations in the classpath, which will be searched in a relative manner. Whenever
you use this annotation, Tapestry also adds the prototype and scriptaculous libraries before
the files specified in the annotation automatically. It's also smart enough not to add the
same file twice. To top it off, if your files cannot be found Tapestry will fail fast by throwing
an exception. To me, this is just great. I don't want my application to just suck it up and
keep going. The assumption made by Tapestry here is the same for any injected asset files:
that they are an integral part of the application's front end and so the breaking of the application
is a logical consequence when they are missing.
  
  
- == RenderSupport ==
+ == JavaScriptSupport ==
  
- The last missing piece is the [[http://tapestry.apache.org/tapestry5/apidocs/org/apache/tapestry5/RenderSupport.html|RenderSupport]]
service. Look again at the `afterRender` method of the mixin class:
+ The last missing piece is the [[http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/services/javascript/JavaScriptSupport.html|JavaScriptSupport]]
service. Look again at the `afterRender` method of the mixin class:
  
  {{{
  	@AfterRender
  	public void afterRender() {
+ 		javaScriptSupport.addScript("new Confirm('%s', '%s');", element.getClientId(), this.message));
- 		renderSupport.addScript(String.format("new Confirm('%s', '%s');",
- 			element.getClientId(), this.message));
  	}
  }}}
  
@@ -250, +244 @@

  </script>
  }}}
  
- That basically says it all. Calls to `RenderSupport#addScript` result in a `<script>`
block being generated at the foot of your page. If you want to see exactly what happens in
the !JavaScript then you'll want to look at the `tapestry.js` file, where you can find the
source of `Tapestry.onDOMLoaded`. You could just take my word and know that the function argument
it receives is called after the document has loaded, effectively associating the contained
code with the `onload` event of the document. In our case we can know that the element to
which we are attaching our !JavaScript object will have loaded. 
+ That basically says it all. Calls to `JavaScriptSupport#addScript` result in a `<script>`
block being generated at the foot of your page. If you want to see exactly what happens in
the !JavaScript then you'll want to look at the `tapestry.js` file, where you can find the
source of `Tapestry.onDOMLoaded`. You could just take my word and know that the function argument
it receives is called after the document has loaded, effectively associating the contained
code with the `onload` event of the document. In our case we can know that the element to
which we are attaching our !JavaScript object will have loaded. 
  
- If multiple calls are made to `RenderSupport#addScript`, then the scripts will be accumulated
and output in a single call to `Tapestry.onDOMLoaded`.  Take note if you are calling `RenderSupport#addScript`
from a method used to restart the render cycle.  For instance, you could have a tree menu
component that uses an @AfterRender method to iterate over the list of tree nodes, while the
`RenderSupport#addScript` is used to initialize the tree.  Since you only want to initialize
the tree once, you may want to do something like this:
+ If multiple calls are made to `JavaScriptSupport#addScript`, then the scripts will be accumulated
and output in a single call to `Tapestry.onDOMLoaded`.  Take note if you are calling `JavaScriptSupport#addScript`
from a method used to restart the render cycle.  For instance, you could have a tree menu
component that uses an @AfterRender method to iterate over the list of tree nodes, while `JavaScriptSupport#addScript`
is used to initialize the tree.  Since you only want to initialize the tree once, you may
want to do something like this:
  
  {{{
  
@@ -277, +271 @@

  		jsString += " %s.initTree(); ";
  		jsString += " %s.expandAll(); ";
  		jsString += " } );";
- 		renderSupport.addScript(String.format(jsString, treeObjectName,
+ 		javaScriptSupport.addScript(jsString, treeObjectName,
  				treeObjectName, treeObjectName, treeObjectName, treeObjectName,
- 				treeObjectName, treeObjectName));
+ 				treeObjectName, treeObjectName);
  	}
  
  }}}

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@tapestry.apache.org
For additional commands, e-mail: dev-help@tapestry.apache.org


Mime
View raw message