[CONF] Apache Tapestry JavaScript Modules
Howard M. Lewis Ship edited the page: _javascript_ Modules ... In the earliest days, client-side _javascript_ was constructed as libraries that defined define simple functions and variables: ... View Online Like View Changes Stop watching space Manage Notifications This message was sent by Atlassian Confluence 5.0.3, Team Collaboration Software
[CONF] Apache Tapestry JavaScript Modules
Howard M. Lewis Ship added a file to the page _javascript_ Modules Tapestry_Integration_Test_Application_and_JavaScriptSupport__Tapestry_API_Documentation_.png - 15 kB PNG File View Attachments Stop watching space Manage Notifications This message was sent by Atlassian Confluence 5.0.3, Team Collaboration Software
[CONF] Apache Tapestry JavaScript Modules
Howard M. Lewis Ship edited the page: _javascript_ Modules ... In the first example, my-module exports a single function of two parameters. In the second example, my-module exports an object and the setup key is the function that is invoked. Development Mode In development mode, Tapestry will write details into the client-side console. Image Added This lists modulesexplicitly loaded (for initialization), but does not include modules loaded only as dependencies. You can see more details about what was actually loaded usingview source; RequireJS adds script tags to the document to load libraries and modules. Libraries vs. Modules Tapestry still supports _javascript_ libraries. When the page is loading, all libraries are loaded before any modules. Libraries are loaded sequentially, so if you can avoid using libraries, so much the better in terms of page load time. Libraries work in both normal page rendering, and Ajax partial page updates. Even in partial page updates, the libraries will be loaded sequentially before modules are loaded or exported functions invoked. Aggregating Modules An important part of performance for production applications is _javascript_ aggregation. In development mode, you want your modules and other assets to load individually. Unlike assets, modules can't be fingerprinted, so on each page load, the client browser must ask the server for the module again (typically getting a 304 Not Modified response). This is acceptable in development mode, but quite undesirable in production. With _javascript_ aggregation, the module can be included in the single virtual _javascript_ library that represents a _javascript_ stack. This significantly cuts down on both the number of requests from the client to the server, and the overall number of bytes transferred. Adding a module to the stack is not the same as require-ing it. In fact, you must still use _javascript_Support.require() regardless. What adding a module to a stack accomplishes is that the module's code is downloaded in the first, initial _javascript_ download. When (and if) the module is required as a dependency, the code will already be present in the browser and ready to execute. Tapestrydoes not attempt to do dependency analysis; that is left as a manual exercise. Typically, if you aggregate a module, your should look at its dependencies, and aggregate those. Failure to do so will cause unwanted requests back to the Tapestry server for the dependency modules, even though the aggregated module's code is present. Because Tapestry is open, it is possible to contribute modules even into thecore _javascript_ stack. This is done using your application's module: Code Block
[CONF] Apache Tapestry JavaScript Modules
Howard M. Lewis Ship edited the page: _javascript_ Modules ... What adding a module to a stack accomplishes is that the module's code is downloaded in the first, initial _javascript_ download; the download of the stack's virtual library. When (and if) the module is required as a dependency, the code will already be present in the browser and ready to execute. Tapestrydoes not attempt to do dependency analysis; that is left as a manual exercise. Typically, if you aggregate a module, your should look at its dependencies, and aggregate those as well. Failure to do so will cause unwanted requests back to the Tapestry server for the dependency modules, even though the aggregated module's code is present. ... The core stack includes several libraries and modules; the exact configuration is subject to a number of factors (such as whether Prototype or Scripaculous jQuery is the being used as the underlying framework). That being said, this is thecurrent list of modules aggregated into the core stack: jquery underscore t5/core/ alert ajax bootstrap console dom events exception-frame fields pageinit messages util validation The optimum configuration is always a balancing act between including too little and including too much. Generally speaking, including too much is less costly than including too little. It is up to you to analyze the requests coming into your application and determine what modules should be aggregated. View Online Like View Changes Stop watching space Manage Notifications This message was sent by Atlassian Confluence 5.0.3, Team Collaboration Software
[CONF] Apache Tapestry JavaScript
Howard M. Lewis Ship created a page: _javascript_ View Online Like Stop watching space Manage Notifications This message was sent by Atlassian Confluence 5.0.3, Team Collaboration Software
[CONF] Apache Tapestry JavaScript
Bob Harner created a page: _javascript_ The Tapestry documentation is being reorganized. For the _javascript_ topic, please see one of the following pages: Client-Side _javascript_ (Tapestry 5.4 and newer) Legacy _javascript_ (prior to Tapestry 5.4) View Online Like Stop watching space Manage Notifications This message was sent by Atlassian Confluence 5.0.3, Team Collaboration Software
[CONF] Apache Tapestry JavaScript
_javascript_
Page edited by Bob Harner
Comment:
Added a couple JumpStart links, and clarified addScript calling context as suggested by Rainer's comment
Changes (7)
...
Tapestry provides several ways to add a link to a _javascript_ library within your page or component. Although you can use direct {{script type=text/_javascript_ src="" approach, you should only use it for _javascript_ that resides outside of your application. For _javascript_ within your app, Tapestry provides _much_ better ways to do the same thing. Most users choose the simplest, the @Import annotation approach.
{float:right|background="" 1em} *JumpStart Demo:* [_javascript_|http://jumpstart.doublenegative.com.au/jumpstart/examples/_javascript_/_javascript_] {float}
h2. Approach 1: @Import
...
The {{setupRender}} method (the name is specifically linked to a [render phase|Component Rendering]) is the correct place to inform the _javascript_Support (or RenderSupport) service that the library is needed.
{float:right|background="" 1em} *JumpStart Demo:* [Reusable _javascript_|http://jumpstart.doublenegative.com.au/jumpstart/examples/_javascript_/reusable] {float}
h3. The {{addScript}} method
...
{column} {code:java|title=Tapestry 5.2 and later}
void afterRender() {
_javascript_Support.addScript(
$(%s).observe(click, hideMe());, container.getClientId());
}
{code} {column}
...
{column} {code:java|title=Tapestry 5.1 and earlier}
void addScript(String.format(
void afterRender() { _javascript_Support.addScript(String.format(
$(%s).observe(click, hideMe());, container.getClientId()));
}
{code} {column}
...
Full Content
Related Articles
Page:
Ajax and Zones
Page:
_javascript_
Page:
Assets
Page:
Ajax Components FAQ
Page:
Component Cheat Sheet
Page:
_javascript_ FAQ
_javascript_ is a first-class concept in Tapestry, and sophisticated _javascript_ support is provided right out of the box, including rich AJAX support, download optimization, client-side logging, and localization.
In production mode, by default, Tapestry will merge _javascript_ libraries, add version numbering, and set a far-future expires header to encourage aggressive browser caching. Starting with version 5.3, Tapestry can also automatically minify (compress) _javascript_ libraries when in production mode.
In addition, as will be described in detail below, Tapestry comes with the Prototype and Scriptaculous libraries, or you can easily swap in JQuery using a 3rd-party module.
Adding Custom _javascript_
When adding your own custom _javascript_ or third-party libraries, just follow the strategies below to take advantage of Tapestry's _javascript_ support mechanisms.
The recommended practice in Tapestry is to package up any significant amount of _javascript_ as a static _javascript_ library, a .js file that can be downloaded to the client. Keep your in-page _javascript_ code to a minimum, just the few statements needed to initialize objects and reference methods in the _javascript_ libraries.
Linking to your _javascript_ libraries
Tapestry provides several ways to add a link to a _javascript_ library within your page or component. Although you can use direct script type="text/_javascript_" src=""/script approach, you should only use it for _javascript_ that resides outside of your application. For _javascript_ within your app, Tapestry provides much better ways to do the same thing. Most users choose the simplest, the @Import annotation approach.
JumpStart Demo:
_javascript_
[CONF] Apache Tapestry JavaScript
_javascript_
Page edited by Bob Harner
Comment:
Minor updates about JS minification
Changes (11)
...
*_javascript_* is a first-class concept in Tapestry, and sophisticated _javascript_ support is provided right out of the box, including rich [AJAX support|AJAX and Zones], download optimization, client-side logging, and localization.
In production mode, by default, Tapestry will merge _javascript_ libraries, add version numbering, and set a far-future expires header to encourage aggressive browser caching. Starting with version 5.3, Tapestry will can also automatically minify (compress) _javascript_ libraries when in [production mode|Configuration#Configuration-ConfigurationSymbolNames].
In addition, as will be described in detail [below|#Built-in Libraries], Tapestry comes with the [Prototype|http://www.prototypejs.org/] and [Scriptaculous|http://script.aculo.us/] libraries, or you can easily swap in JQuery using a 3rd-party module.
...
h1. Adding Custom _javascript_
When adding your own custom _javascript_ or third-party libraries, just follow the strategies below to take full advantage of Tapestrys _javascript_ support mechanisms.
The recommended practice in Tapestry is to package up any significant amount of _javascript_ as a static _javascript_ library, a .js file that can be downloaded to the client. Keep your in-page _javascript_ code to a minimum, just the few statements needed to initialize objects and reference methods in the _javascript_ libraries.
...
{since:since=5.3}
In production mode, Tapestry can automatically _minifies_ _minify_ (intelligently compresses) _javascript_ libraries (and CSS) when the application starts up. This can significantly decrease the size of static content that the browser needs to download.
Minification is accomplished using the ResourceMinimizer service. By default a A YUI Compressor-based implementation is used, available, but this can be overridden.
Minification can be disabled by setting the SymbolConstants.MINIFICATION_ENABLED [configuration symbol|Configuration] to false in your applications module class (usually AppModule.java). By default it is enabled when in production mode and disabled otherwise.
IMPORTANT NOTE: The tapestry-core module only provides the empty infrastructure for supporting minification; the actual logic is supplied in the tapestry-yuicompressor module. To use it, youll need to update your dependencies to include this module.
The tapestry-core module provides the empty infrastructure for supporting minification; the actual logic is supplied in the tapestry-yuicompressor module. You will need to update your dependencies to include this module.
{code:xml|title=Maven pom.xml (partial)} dependency groupIdorg.apache.tapestry/groupId artifactIdtapestry-yuicompressor/artifactId version${tapestry-release-version}/version /dependency {code}
Please test your applications well: the YUI Compressor code can be somewhat finicky about application server and JDK version.
Gradle would be similar, of course. If you arent using something like Maven or Gradle, youll have to download the jar and its dependency (com.yahoo.platform.yui: yuicompressor) yourself.
Minification can be disabled by setting the SymbolConstants.MINIFICATION_ENABLED [configuration symbol|Configuration] to false in your applications module class (usually AppModule.java). By default it is enabled when in production mode and disabled otherwise. Please test your applications well: the YUI Compressor code can be somewhat finicky about the application server and JDK version.
h1. Client-side Logging
...
Full Content
Related Articles
Page:
_javascript_
Page:
Ajax and Zones
Page:
_javascript_ FAQ
Page:
Ajax Components FAQ
Page:
[CONF] Apache Tapestry JavaScript
_javascript_
Page edited by Bob Harner
Comment:
Noted Prototype version for Tap 5.3.5; added link to _javascript_ Rewrite page
Changes (5)
...
{float:right|width=30%|background="" {color:green}*Alternatives to Prototype*{color}
Tapestry can also works well with other _javascript_ libraries, such as JQuery and ExtJS:
* *[Tapestry5-Jquery module|https://github.com/got5/tapestry5-jquery]* -- Using JQuery _instead of_ Prototype * [Tapestry5HowToIntegrateJQuery|http://wiki.apache.org/tapestry/Tapestry5HowToIntegrateJQuery] -- Using JQuery _in addition to_ Prototype
* [Tapestry-Jquery module|http://tapestry.ioko.com/tapestry-jquery/] -- Using JQuery _in addition to_ Prototype
* [TAP5-999|https://issues.apache.org/jira/browse/TAP5-999] tracks work underway to introduce an agnostic tapestry.js layer to allow switching from Prototype to JQuery. See [_javascript_ Rewrite] for more info.
* [TAPS-1364|https://issues.apache.org/jira/browse/TAP5-1364] lists some starting points for ExtJS integration {float}
...
h2. Prototype and Scriptaculous Versions
|| Tapestry 5.3.5 | Prototype 1.7.1 | Scriptaculous 1.9 | Underscore 1.1.7 ||
|| Tapestry 5.3+ | Prototype 1.7 | Scriptaculous 1.9 | Underscore 1.1.7 ||
|| Tapestry 5.2.6 | Prototype 1.7 | Scriptaculous 1.9 || || Tapestry 5.2 | Prototype 1.6.1 | Scriptaculous 1.8.2 ||
...
Full Content
Related Articles
Page:
Ajax and Zones
Page:
_javascript_
Page:
_javascript_ FAQ
Page:
Component Cheat Sheet
Page:
Ajax Components FAQ
Page:
Assets
_javascript_ is a first-class concept in Tapestry, and sophisticated _javascript_ support is provided right out of the box, including rich AJAX support, download optimization, client-side logging, and localization.
In production mode, by default, Tapestry will merge _javascript_ libraries, add version numbering, and set a far-future expires header to encourage aggressive browser caching. Starting with version 5.3, Tapestry will also automatically minify (compress) _javascript_ libraries when in production mode.
In addition, as will be described in detail below, Tapestry comes with the Prototype and Scriptaculous libraries, or you can easily swap in JQuery using a 3rd-party module.
Adding Custom _javascript_
When adding your own custom _javascript_ or third-party libraries, just follow the strategies below to take full advantage of Tapestry's _javascript_ support mechanisms.
The recommended practice in Tapestry is to package up any significant amount of _javascript_ as a static _javascript_ library, a .js file that can be downloaded to the client. Keep your in-page _javascript_ code to a minimum, just the few statements needed to initialize objects and reference methods in the _javascript_ libraries.
Linking to your _javascript_ libraries
Tapestry provides several ways to add a link to a _javascript_ library within your page or component. Although you can use direct script type="text/_javascript_" src=""/script approach, you should only use it for _javascript_ that resides outside of your application. For _javascript_ within your app, Tapestry provides much better ways to do the same thing. Most users choose the simplest, the @Import annotation approach.
Approach 1: @Import
Use the @Import annotation (or @IncludeJavaScriptLibrary in Tapestry 5.0 and 5.1) to include links to _javascript_ (and CSS) files in your page or component. Tapestry ensures that each such file is only referenced once in your page.
For Tapestry 5.2 and later
@Import(library={"context:js/jquery.js",
"context:js/myeffects.js"})
public class MyComponent
{
. . .
}
For Tapestry 5.0 and 5.1
[CONF] Apache Tapestry JavaScript Rewrite
_javascript_ Rewrite
Page edited by Howard M. Lewis Ship
Comment:
added some notes about cdns
Changes (5)
...
* Compressible resources will be automatically GZip compressed if the client supports it
However, _javascript_ support in Tapestry is still unsatisfactory. Too often, Tapestry falls into an [uncanny valley|http://en.wikipedia.org/wiki/Uncanny_valley] where the framework (server-side and client-side) does so much automatically that it becomes accepted that it does everything ... developers later discover, to their dismay, that the last 10% of custom behavior they desire is very hard to implement, because of all the common problems that plague any complex system: insufficient APIs, unexpected leaky abstractions, or just plain bugs.Common examples of the challenges imposed by Tapestry include implementing a Confirm mixin, customizing behavior when a Zone component is dynamically updated, or any number of issues related to Forms, form elements, and Ajax updates. This document is a roadmap for how Tapestry 5.4 will revisit the relationship between server-side Java and client-side _javascript_. Ultimately, we hope to convert this relationship from an obstacle to using Tapestry into an essential reason to select Tapestry in the first place.
h1. Tapestry _javascript_ Limitations (through 5.3)
...
There has not, to date, been an adequate documentation of the {{T5}} and {{Tapestry}} namespaces, beyond the code itself.
h2. The Uncanny Valley Too often, Tapestry falls into an [uncanny valley|http://en.wikipedia.org/wiki/Uncanny_valley] where the framework (server-side and client-side) does so much automatically that it becomes accepted that it does everything ... developers later discover, to their dismay, that the last 10% of custom behavior they desire is very hard to implement, because Tapestry gets in the way. Common examples include implementing a Confirm mixin, customizing behavior when a Zone component is dynamically updated, or any number of issues related to Forms, form elements, and Ajax updates. In effect, Tapestry should get out of the business of doing most things, especially visual things, and stick to publishing messages about things (see the notes below on Publish/Subscribe). Specifically, Tapestry should avoid animations and other visual effects (which also significantly tie Tapestry to a specific client-side foundational framework), and simply facilitate the informing the client-side that events have happend, and allow the user application to decide how to present that information.
h2. Lack of Module Structure
...
In the (hopefully) common case that a module can operate without additional configuration, the @Require annotation will be analagous to the Tapestry 5.2 [@Import|http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/annotations/Import.html] annotation. It will allow one or more modules to be required. This is only useful when the modules are stand-alone (not needing any explicit configuration).
h2. Increased Used Of Publish/Subscribe
An inherent limitation of Tapestry 5.3 and earlier is the too-direct connection between DOM events and client behaviors. Coding in terms of the user clicks and the event handler submits a request makes it very hard to fine tune behavior. For example, much work and experimentation was needed in order to introduce a Confirm mixin that could be used to introduce a confirmation dialog before allowing an event (clicking a link or submitting a form) to continue.
...
Twitter Bootstrap also includes a number of jQuery-based plugins; these will be exposed in the module system.
h1. Content Delivery Network Integration
Tapestry 5.3 has limited ability to integrate into a [content delivery network|http://en.wikipedia.org/wiki/Content_delivery_network]; it can dynamically rewrite URLs for assets (including _javascript_ libraries, CSS files, image files, etc.). However, it assumes that the CDN can pull the content, as needed, from the live site. A desirable feature would be request URL that would produce a JSON-formatted report of all assets that should be mirrored by the CDN: this would include all files that might be exposed to the browser, including virtual assets (such as _javascript_ stacks, aggregated modules, and so forth). This could be leveraged by a tool that would use this information to extract the assets from the live application and exported to the CDN. Determining what assets are available is somewhat problematic as Tapestry mixes server-side only resources (.class files, .tml files, etc.) freely with assets that might be exposed to the
[CONF] Apache Tapestry JavaScript
_javascript_
Page edited by Bob Harner
Comment:
A couple typos
Changes (2)
...
{column} {code:java|title=Tapestry 5.2 and later}
@Inject @Path(${context:/js/myeffects.js)
private Asset myEffects;
...
{column} {code:java|title=Tapestry 5.1 and earlier}
@Inject @Path(${context:/js/myeffects.js)
private Asset myEffects;
...
Full Content
Related Articles
Page:
Ajax and Zones
Page:
_javascript_
Page:
Component Cheat Sheet
Page:
Ajax Components FAQ
Page:
_javascript_ FAQ
Page:
Assets
_javascript_ is a first-class concept in Tapestry, and sophisticated _javascript_ support is provided right out of the box, including rich AJAX support, download optimization, client-side logging, and localization.
In production mode, by default, Tapestry will merge _javascript_ libraries, add version numbering, and set a far-future expires header to encourage aggressive browser caching. Starting with version 5.3, Tapestry will also automatically minify (compress) _javascript_ libraries when in production mode.
In addition, as will be described in detail below, Tapestry comes with the Prototype and Scriptaculous libraries ... no extra download is required.
Adding Custom _javascript_
When adding your own custom _javascript_ or third-party libraries, just follow the strategies below to take full advantage of Tapestry's _javascript_ support mechanisms.
The recommended practice in Tapestry is to package up any significant amount of _javascript_ as a static _javascript_ library, a .js file that can be downloaded to the client. Keep your in-page _javascript_ code to a minimum, just the few statements needed to initialize objects and reference methods in the _javascript_ libraries.
Linking to your _javascript_ libraries
Tapestry provides several ways to add a link to a _javascript_ library within your page or component. Although you can use direct script type="text/_javascript_" src=""/script approach, you ordinarily shouldn't. Tapestry provides much better ways to do the same thing. Most users choose the simplest, the @Import annotation approach.
Approach 1: @Import
Use the @Import annotation (or @IncludeJavaScriptLibrary in Tapestry 5.0 and 5.1) to include links to _javascript_ (and CSS) files in your page or component. Tapestry ensures that each such file is only referenced once in your page.
For Tapestry 5.2 and later
@Import(library={"context:js/jquery.js",
"context:js/myeffects.js"})
public class MyComponent
{
. . .
}
For Tapestry 5.0 and 5.1
@IncludeJavaScriptLibrary(value={"context:js/jquery.js",
"context:js/myeffects.js"})
public class MyComponent
{
. . .
}
@Import may also be applied to individual methods, in which case the import operation only occurs when the method is invoked.
Note: When specifying a file to import, you'll often use the context: binding prefix to indicate that the file is stored in the web application context, and not on the classpath. Relative paths will be on the classpath, relative to the Java class. See Component Parameters for other binding prefix options.
Adding the same _javascript_ library multiple times does not create duplicate links. The subsequent ones are simply ignored. In this way, each component can add the libraries it needs, without worrying about conflicts with other components.
Approach 2: _javascript_Support
Alternatively, you can use _javascript_Support (for Tapestry 5.2 or later) or RenderSupport (for Tapestry 5.0 and 5.1) to include a _javascript_ library in your page or component. _javascript_Support and RenderSupport are environmental services that include a number of methods that will be used by components, or by services that are called from components. For example:
The
[CONF] Apache Tapestry JavaScript
_javascript_
Page edited by DEMEY Emmanuel
Changes (2)
...
void addScript(String.format( $(%s).observe(click, hideMe());,
container.getClientId()));
{code} {column}
...
private final AssetSource assetSource;
public myStack (final AssetSource assetSource) { this.assetSource = assetSource; }
public String getInitialization() { return null; }
public ListAsset getJavaScriptLibraries() { ListAsset ret = new ArrayListAsset();
ret.add(assetSource.getContextAsset(static/js/jquery.js, null));
ret.add(assetSource.getContextAsset(static/js/jquery.ui.core.js, null));
return ret; }
...
{ ListStylesheetLink ret = new ArrayListStylesheetLink();
ret.add(new StylesheetLink(assetSource.getContextAsset(static/css/style.css, null)));
return ret; }
...
{code}
When your new Stack is created, you have to define it in your AppModule.
{code:java|title=AppModule.java}
...
{code}
You can now use it in your pages and components, by using the @Import annotation or the _javascript_Support service :
{section}
...
Full Content
Related Articles
Page:
_javascript_
Page:
Ajax and Zones
Page:
Assets
Page:
Component Cheat Sheet
Page:
Ajax Components FAQ
Page:
_javascript_ FAQ
_javascript_ is a first-class concept in Tapestry, and sophisticated _javascript_ support is provided right out of the box, including rich AJAX support, download optimization, client-side logging, and localization.
In production mode, by default, Tapestry will merge _javascript_ libraries, add version numbering, and set a far-future expires header to encourage aggressive browser caching. Starting with version 5.3, Tapestry will also automatically minify (compress) _javascript_ libraries when in production mode.
In addition, as will be described in detail below, Tapestry comes with the Prototype and Scriptaculous libraries ... no extra download is required.
Adding Custom _javascript_
When adding your own custom _javascript_ or third-party libraries, just follow the strategies below to take full advantage of Tapestry's _javascript_ support mechanisms.
The recommended practice in Tapestry is to package up any significant amount of _javascript_ as a static _javascript_ library, a .js file that can be downloaded to the client. Keep your in-page _javascript_ code to a minimum, just the few statements needed to initialize objects and reference methods in the _javascript_ libraries.
Linking to your _javascript_ libraries
Tapestry provides several ways to add a link to a _javascript_ library within your page or component. Although you can use direct script type="text/_javascript_" src=""/script approach, you ordinarily shouldn't. Tapestry provides much better ways to do the same thing. Most users choose the simplest, the @Import annotation approach.
Approach 1: @Import
Use the @Import annotation (or @IncludeJavaScriptLibrary in Tapestry 5.0 and 5.1) to include links to _javascript_ (and CSS) files in your page or component. Tapestry ensures that each such file is only referenced once in your page.
For Tapestry 5.2 and later
@Import(library={"context:js/jquery.js",
"context:js/myeffects.js"})
public class MyComponent
{
. . .
}
For Tapestry 5.0 and 5.1
@IncludeJavaScriptLibrary(value={"context:js/jquery.js",
"context:js/myeffects.js"})
public class MyComponent
{
. . .
}
[CONF] Apache Tapestry JavaScript
_javascript_
Page edited by DEMEY Emmanuel
Changes (1)
...
_javascript_ assets of a stack may (when enabled) be exposed to the client as a single URL (identifying the stack by name). The individual assets are combined into a single virtual asset, which is then streamed to the client.
To group several static resources together in a single stack, you must create a new implementation of the _javascript_Stack interface . This interface has four methods: - *getStylesheets* : This method will return a list of stylesheet files (StylesheetLink-type object) associated to this stack - *getJavaScriptLibraries* : This method will return a list of _javascript_ files (Asset-type object) associated to this stack - *getStacks* : It is also possible to make a stack dependant of other stacks. All the stacks defined in this method will be loaded before the current stack. - *getInitialization* : this method makes it possible to call a _javascript_ initialization for the stack. Tapestry will automatically add this initialization to the page that imports the stacks. {code:java|title=myStack.java} public class myStack implements _javascript_Stack { private final AssetSource assetSource; public myStack (final AssetSource assetSource) { this.assetSource = assetSource; } public String getInitialization() { return null; }public ListAsset getJavaScriptLibraries() { ListAsset ret = new ArrayListAsset(); ret.add(assetSource.getContextAsset(static/js/jquery.js, null)); ret.add(assetSource.getContextAsset(static/js/jquery.ui.core.js, null)); return ret; } public ListStylesheetLink getStylesheets() { ListStylesheetLink ret = new ArrayListStylesheetLink(); ret.add(new StylesheetLink(assetSource.getContextAsset(static/css/style.css, null))); return ret; } public ListString getStacks() { return Collections.emptyList(); } } {code} When your new Stack is created, you have to define it in your AppModule. {code:java|title=AppModule.java} @Contribute(_javascript_StackSource.class) public static void addMyStack (MappedConfigurationString, _javascript_Stack configuration) { configuration.addInstance(MyNewStack, myStack.class); } {code} You can now use it in your pages and components, by using the @Import annotation or the _javascript_Support service : {section} {column} {code:java|title=With @Import} @Import(stack=MyNewStack) public class myPage { } {code} {column} {column} {code:java|title=With _javascript_Support} @Inject private _javascript_Support js; @SetupRender public importStack(){ js.importStack(MyNewStack); } {code} {column} {section}
Full Content
Related Articles
Page:
Ajax and Zones
Page:
_javascript_
Page:
Assets
Page:
_javascript_ FAQ
Page:
Component Cheat Sheet
Page:
Ajax Components FAQ
_javascript_ is a first-class concept in Tapestry, and sophisticated _javascript_ support is provided right out of the box, including rich AJAX support, download optimization, client-side logging, and localization.
In production mode, by default, Tapestry will merge _javascript_ libraries, add version numbering, and set a far-future expires header to encourage aggressive browser caching. Starting with version 5.3, Tapestry will also automatically minify (compress) _javascript_ libraries when in production mode.
In addition, as will be described in detail below, Tapestry comes with the Prototype and Scriptaculous libraries ... no extra download is required.
Adding Custom _javascript_
When adding your own custom _javascript_ or third-party libraries, just follow the strategies below to take full advantage of Tapestry's _javascript_ support mechanisms.
The recommended practice in Tapestry is to package up any
[CONF] Apache Tapestry JavaScript
_javascript_
Page edited by DEMEY Emmanuel
Changes (1)
...
@SetupRender
public void importStack(){
js.importStack(MyNewStack);
}
{code} {column}
...
Full Content
Related Articles
Page:
Ajax and Zones
Page:
_javascript_
Page:
Assets
Page:
_javascript_ FAQ
Page:
Component Cheat Sheet
Page:
Ajax Components FAQ
_javascript_ is a first-class concept in Tapestry, and sophisticated _javascript_ support is provided right out of the box, including rich AJAX support, download optimization, client-side logging, and localization.
In production mode, by default, Tapestry will merge _javascript_ libraries, add version numbering, and set a far-future expires header to encourage aggressive browser caching. Starting with version 5.3, Tapestry will also automatically minify (compress) _javascript_ libraries when in production mode.
In addition, as will be described in detail below, Tapestry comes with the Prototype and Scriptaculous libraries ... no extra download is required.
Adding Custom _javascript_
When adding your own custom _javascript_ or third-party libraries, just follow the strategies below to take full advantage of Tapestry's _javascript_ support mechanisms.
The recommended practice in Tapestry is to package up any significant amount of _javascript_ as a static _javascript_ library, a .js file that can be downloaded to the client. Keep your in-page _javascript_ code to a minimum, just the few statements needed to initialize objects and reference methods in the _javascript_ libraries.
Linking to your _javascript_ libraries
Tapestry provides several ways to add a link to a _javascript_ library within your page or component. Although you can use direct script type="text/_javascript_" src=""/script approach, you ordinarily shouldn't. Tapestry provides much better ways to do the same thing. Most users choose the simplest, the @Import annotation approach.
Approach 1: @Import
Use the @Import annotation (or @IncludeJavaScriptLibrary in Tapestry 5.0 and 5.1) to include links to _javascript_ (and CSS) files in your page or component. Tapestry ensures that each such file is only referenced once in your page.
For Tapestry 5.2 and later
@Import(library={"context:js/jquery.js",
"context:js/myeffects.js"})
public class MyComponent
{
. . .
}
For Tapestry 5.0 and 5.1
@IncludeJavaScriptLibrary(value={"context:js/jquery.js",
"context:js/myeffects.js"})
public class MyComponent
{
. . .
}
@Import may also be applied to individual methods, in which case the import operation only occurs when the method is invoked.
Note: When specifying a file to import, you'll often use the context: binding prefix to indicate that the file is stored in the web application context, and not on the classpath. Relative paths will be on the classpath, relative to the Java class. See Component Parameters for other binding prefix options.
Adding the same _javascript_ library multiple times does not create duplicate links. The subsequent ones are simply ignored. In this way, each component can add the libraries it needs, without worrying about conflicts with other components.
Approach 2: _javascript_Support
Alternatively, you can use _javascript_Support (for Tapestry 5.2 or later) or RenderSupport (for Tapestry 5.0 and 5.1) to include a _javascript_ library in your page or component. _javascript_Support and RenderSupport are environmental services that include a number of methods that will be used by components, or by services that are called from components. For example:
The importJavaScriptLibrary method
The importJavaScriptLibrary method (or addScriptLink for Tapestry 5.0 and 5.1) adds a link to a _javascript_ library. A component can inject such a script and pass one or more of assets to this method:
Tapestry
[CONF] Apache Tapestry JavaScript
_javascript_
Page edited by DEMEY Emmanuel
Changes (2)
{float:right|background=""
{contentbylabel:title=Related Articles|showLabels=false|showSpace=false|space=@self|labels=_javascript_,ajax} {float}
...
Tapestry will ensure that the necessary link elements are added to the _top_ of the document (in the head element). With Tapestry 5.3 and later the new elements are inserted at the bottom of the head element; in versions before 5.3 they appear at the top of the head element).
As with the annotation approach, adding the same asset multiple times does _not_ create duplicate links.
...
{column} {code:java|title=Tapestry 5.2 and later}
_javascript_Support.addScript( $(%s).observe(click, hideMe());,
...
{column} {code:java|title=For Tapestry 5.0 and 5.1}
{code:java}
public MyServiceImpl(RenderSupport support) {
...
{code:java}
Tapestry.debug(Field id is #{id}, value is #{value}, field);
...
The standard library adds a new function, {{$T()}}. This function is used much like Prototypes {{$()}}, except that instead of returning a DOM object, it returns a hash (an initially empty _javascript_ object) that is associated with the DOM object. This hash is known as _the Tapestry object_.
You may pass in an object id (as a string) or an object reference. The Tapestry Object is created on first invocation. Note: youll see it as a property name \_tapestry on the DOM object (which may be useful when debugging).
When Tapestry adds information to a DOM object, it does so in the Tapestry object. This helps avoid name conflicts, and groups all Tapestry-added properties into one place which is much easier to debug.
...
h2. Prototype and Scriptaculous Versions
|| Tapestry 5.3 | Prototype 1.7 | Scriptaculous 1.9 | Underscore 1.1.7 ||
|| Tapestry 5.2.6 | Prototype 1.7 | Scriptaculous 1.9 ||
|| Tapestry 5.2 | Prototype 1.6.1 | Scriptaculous 1.8.2 ||
|| Tapestry 5.1 | Prototype 1.6.0.3 | Scriptaculous 1.8.2 ||
|| Tapestry 5.0 | Prototype 1.6.0 | Scriptaculous 1.8.0 ||
Tapestry uses a modified version of the main Scriptaculous library, scriptaculous.js, with the librarys default [autoloading|http://wiki.script.aculo.us/scriptaculous/show/Usage] behavior turned off. This lets Tapestry and Tapestry components control which Scriptaculus scripts are loaded, rather than having _all_ of them loaded unnecessarily.
...
{code:java}
@Inject @Path(${tapestry.scriptaculous}/dragdrop.js) private Asset dragDropLibrary;
...
Full Content
Related Articles
Page:
Ajax and Zones
Page:
_javascript_
Page:
Assets
Page:
_javascript_ FAQ
Page:
Component Cheat Sheet
Page:
Ajax Components FAQ
_javascript_ is a first-class concept in Tapestry, and sophisticated _javascript_ support is provided right out of the box, including rich AJAX support, download optimization, client-side logging, and localization.
In production mode, by default, Tapestry will merge _javascript_ libraries, add version numbering, and set a far-future expires header to encourage aggressive browser caching. Starting with version 5.3, Tapestry will also automatically minify (compress) _javascript_ libraries when in production mode.
In addition, as will be described in detail below, Tapestry comes with the Prototype and Scriptaculous libraries ... no extra download is required.
Adding Custom _javascript_
When adding your own custom _javascript_ or third-party libraries, just follow the strategies below to take full advantage of Tapestry's _javascript_ support mechanisms.
The
[CONF] Apache Tapestry JavaScript
_javascript_
Page edited by Bob Harner
Comment:
Added mention of underscore.js for Tapestry 5.3. I guess underscore.js might move to 1.2 by release time?
Changes (3)
...
{float}
Tapestry comes with the [Prototype|http://www.prototypejs.org/] and [Scriptaculous|http://script.aculo.us/] libraries ... no extra download is required. Tapestry will automatically link into your pages the prototype.js, scriptaculous.js, and effects.js libraries, as well as the Tapestry library, tapestry.js (which largely consists of support for form input validation). Starting with Tapestry 5.3, [Underscore|http://documentcloud.github.com/underscore/] is also included.
h2. Prototype and Scriptaculous Versions
|| Tapestry 5.3 | Prototype 1.7 | Scriptaculous 1.9| Underscore 1.1.7 |
|| Tapestry 5.2.6 | Prototype 1.7 | Scriptaculous 1.9| || Tapestry 5.2 | Prototype 1.6.1 | Scriptaculous 1.8.2|
...
Tapestry uses a modified version of the main Scriptaculous library, scriptaculous.js, with the librarys default [autoloading|http://wiki.script.aculo.us/scriptaculous/show/Usage] behavior turned off. This lets Tapestry and Tapestry components control which Scriptaculus scripts are loaded, rather than having _all_ of them loaded unnecessarily.
Note that the Prototype, Scriptaculous main and effects libraries, and the standard Tapestry library (which largely consists of support for form input validation) are included automatically.
If you need access to other Scriptaculous libraries, you can provide them as follows:
...
Full Content
Related Articles
Page:
_javascript_
Page:
Ajax and Zones
Page:
Assets
Page:
_javascript_ FAQ
Page:
Component Cheat Sheet
Page:
Ajax Components FAQ
_javascript_ is a first-class concept in Tapestry, and sophisticated _javascript_ support is provided right out of the box, including rich AJAX support, download optimization, client-side logging, and localization.
In production mode, by default, Tapestry will merge _javascript_ libraries, add version numbering, and set a far-future expires header to encourage aggressive browser caching. Starting with version 5.3, Tapestry will also automatically minify (compress) _javascript_ libraries when in production mode.
In addition, as will be described in detail below, Tapestry comes with the Prototype and Scriptaculous libraries ... no extra download is required.
Adding Custom _javascript_
When adding your own custom _javascript_ or third-party libraries, just follow the strategies below to take full advantage of Tapestry's _javascript_ support mechanisms.
The recommended practice in Tapestry is to package up any significant amount of _javascript_ as a static _javascript_ library, a .js file that can be downloaded to the client. Keep your in-page _javascript_ code to a minimum, just the few statements needed to initialize objects and reference methods in the _javascript_ libraries.
Linking to your _javascript_ libraries
Tapestry provides several ways to add a link to _javascript_ library within your page or component. Although you can use direct script type="text/_javascript_" src=""/script approach, you ordinarily shouldn't. Tapestry provides much better ways to do the same thing. Most users choose the simplest, the @Import annotation approach.
Approach 1: @Import
Use the @Import annotation (or @IncludeJavaScriptLibrary in Tapestry 5.0 and 5.1) to include links to _javascript_ (and CSS) files in your page or component. Tapestry ensures that each such file is only referenced once in your page.
For Tapestry 5.2 and later
@Import(library={"context:js/jquery.js",
"context:js/myeffects.js"})
public class MyComponent
{
. . .
}
For Tapestry 5.0 and 5.1
[CONF] Apache Tapestry JavaScript
_javascript_
Page edited by Bob Harner
Comment:
Small tweaks corrections, clarified that _javascript_ libraries are only combined if part of a stack
Changes (12)
...
Alternatively, you can use [_javascript_Support|http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/services/_javascript_/_javascript_Support.html] (for Tapestry 5.2 or later) or [RenderSupport|http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/RenderSupport.html] (for Tapestry 5.0 and 5.1) to include a _javascript_ library in your page or component. _javascript_Support and RenderSupport are [environmental services|Environmental Services] that include a number of methods that will be used by components, or by services that are called from components. For example:
h3. The {{importJavaScriptLibrary}} method
The {{importJavaScriptLibrary}} method (or {{addScriptLink}} for Tapestry 5.0 and 5.1) adds a link to a _javascript_ library. A component can inject such a script and pass one or more of assets to this method:
...
As with the annotation approach, adding the same asset multiple times does _not_ create duplicate links.
The setupRender() {{setupRender}} method (the name is specifically linked to a [render phase|Component Rendering]) is the correct place to inform the _javascript_Support (or RenderSupport) service that the library is needed.
h3. The addScript() {{addScript}} method
The addScript() {{addScript}} method is used when you need to add some _javascript_ code directly to the page. This will be inserted at the _bottom of the document_, and will only be executed when the document has finished loading on the client (i.e., from the window.onload event handler).
{code:java}
...
In production mode, Tapestry automatically _combines_ _javascript_ libraries. A single request (for a _virtual asset_) will retrieve the combined content of all referenced _javascript_ library files.
Note: starting with Tapestry 5.2, _javascript_ libraries are only combined if they are part of a _javascript_ Stack (see below).
This is a very useful feature, as it reduces the number of requests needed to present a page to the user. It can be disabled, however, by setting the SymbolConstants.COMBINE_SCRIPTS [configuration symbol|Configuration] to false in your applications module class (normally AppModule.java). By default it is enabled when in production mode and disabled otherwise.
...
{deprecated:since=5.3}
In versions prior to 5.3, Tapestry uses a modified version of the [Blackbird|http://www.gscottolson.com/blackbirdjs/] _javascript_ console. The Tapestry object includes three functions: debug, warn and error.
Each of these functions take a message and an optional pattern; if the pattern is provided, the message is [interpolated|http://prototypejs.org/api/string/interpolate] on the pattern. The final message is displayed in the Blackbird console, which will make itself visible automatically.
...
{code}
The constant [MarkupConstants.WAIT_FOR_PAGE|http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/MarkupConstants.html] contains this snippet.
The constant [MarkupConstants.WAIT_FOR_PAGE|http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/MarkupConstants.html] contains the part of this snippet inside the quotes.
h1. The Standard Tapestry Library
...
@Environmental
private RenderSupport renderSupport;
private _javascript_Support _javascript_Support;
void setupRender() {
renderSupport.addScriptLink(dragDropLibrary); _javascript_Support.addScriptLink(dragDropLibrary);
}
...
A [_javascript_Stack|http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/services/_javascript_/_javascript_Stack.html] can be thought of as a generalization of Tapestry 5.1s ClientInfrastructure, which exists now to define the core _javascript_ stack.
A _javascript_ assets of a stack may (when enabled) be exposed to the client as a single URL (identifying the stack by name). The individual assets are combined into a single virtual asset, which is then streamed to the client.
Full Content
Related Articles
Page:
Ajax and Zones
[CONF] Apache Tapestry JavaScript FAQ
_javascript_ FAQ
Page edited by Howard M. Lewis Ship
Changes (4)
...
* If you have used a tool to minimize your _javascript_ libraries, this can lead to _javascript_ syntax errors, so check if it works with all the _javascript_ files unpacked.
h3. Whats the difference between the {{T5}} object and the {{Tapestry}} object in the browser?
Both of these objects are _namespaces_: containers of functions, constants, and nested namespaces.
{scrollbar}
The {{T5}} object is a replacement for the {{Tapestry}} object, starting in release 5.3. Increasingly, functions defined by the {{Tapestry}} object are being replaced with similar or equivalent functions in the {{T5}} object. This is part of an overall goal, spanning at least two releases of Tapestry, to make Tapestry _javascript_ framework agnostic; which is to say, not depend specifically on Prototype or jQuery. Much of the code in the {{Tapestry}} object is specifically linked to Prototype and Scriptaculous. The {{T5}} object represents a stable, documented, set of APIs that are preferred when building components for maximum portability between underlying _javascript_ frameworks. In other words, when building component libraries, coding to the {{T5}} object ensures that your component will be useful regardless of whether the final application is built using Prototype, jQuery or something else.
Full Content
Component Events FAQFrequently Asked QuestionsAjax Components FAQ
_javascript_
Main article: _javascript_
Why do I get a "Tapestry is undefined" error on form submit?
This client-side error is clear but can be awkward to solve. It means your browser has not been able to load the tapestry.js file properly. The question is, why? It can be due to multiple reasons, some of them below:
First, check if 'tapestry.js' is present in the head part of your resulting HTML page.
If you have set the tapestry.combine-scripts configuration symbol to true, Tapestry generates one single URL to retrieve all the JS files. Sometimes, this can produce long URLs that browsers are unable to retrieve. Try setting the symbol to false.
This only applies to Tapestry 5.1.
If you have included jQuery in conjunction with Tapestry's prototype, that will cause a conflict with the '$' selector used by both. In this case, you should put jQuery on top of the stack and turn on the jQuery.noConflict mode.
Also, if you have included a custom or third-party JS library on top of the stack that causes the _javascript_ parsing to fail, then check the _javascript_ syntax in that library.
If you have used a tool to minimize your _javascript_ libraries, this can lead to _javascript_ syntax errors, so check if it works with all the _javascript_ files unpacked.
What's the difference between the T5 object and the Tapestry object in the browser?
Both of these objects are namespaces: containers of functions, constants, and nested namespaces.
The T5 object is a replacement for the Tapestry object, starting in release 5.3. Increasingly, functions defined by the Tapestry object are being replaced with similar or equivalent functions in the T5 object.
This is part of an overall goal, spanning at least two releases of Tapestry, to make Tapestry _javascript_ framework agnostic; which is to say, not depend specifically on Prototype or jQuery. Much of the code in the Tapestry object is specifically linked to Prototype and Scriptaculous.
The T5 object represents a stable, documented, set of APIs that are preferred when building components for maximum portability between underlying _javascript_ frameworks. In other words, when building component libraries, coding to the T5 object ensures that your component will be useful regardless of whether the final application is built using Prototype, jQuery or something else.
Change Notification Preferences
View Online
|
View Changes
[CONF] Apache Tapestry JavaScript
_javascript_
Page edited by Bob Harner
Comment:
Updated Prototype/Scriptaculous versions for Tap 5.2.6
Changes (1)
...
h1. Prototype and Scriptaculous Versions
|| Tapestry 5.2.6 | Prototype 1.7 | Scriptaculous 1.9|
|| Tapestry 5.2 | Prototype 1.6.1 | Scriptaculous 1.8.2| || Tapestry 5.1 | Prototype 1.6.0.3 | Scriptaculous 1.8.2|
...
Full Content
Related Articles
Page:
Ajax and Zones
Page:
_javascript_
Page:
Component Cheat Sheet
Page:
Ajax Components FAQ
Page:
_javascript_ FAQ
Page:
Assets
Tapestry includes sophisticated _javascript_ support, based on the Prototype and Scriptaculous libraries. These libraries are all packaged with Tapestry itself ... no extra download is required.
Tapestry will automatically link in prototype.js, scriptaculous.js, effects.js and the Tapestry library, tapestry.js. You can add additional libraries as needed.
Prototype and Scriptaculous Versions
Tapestry 5.2.6
Prototype 1.7
Scriptaculous 1.9
Tapestry 5.2
Prototype 1.6.1
Scriptaculous 1.8.2
Tapestry 5.1
Prototype 1.6.0.3
Scriptaculous 1.8.2
Tapestry 5.0
Prototype 1.6.0
Scriptaculous 1.8.0
Alternatives to Prototype
There are both immediate and long-term efforts underway to allow Tapestry to work better with other _javascript_ libraries, such as JQuery and ExtJS:
Tapestry5HowToIntegrateJQuery Using JQuery in addition to Prototype
Tapestry-Jquery module Using JQuery in addition to Prototype
Tapestry5-Jquery module Using JQuery instead of Prototype
TAP5-999 proposes an agnostic tapestry.js layer to allow switching from Prototype to JQuery
TAPS-1364 lists some starting points for ExtJS integration
Changes to Scriptaculous
Tapestry uses a modified version of the main Scriptaculous library, scriptaculous.js, with the library's default autoloading behavior turned off. This lets Tapestry and Tapestry components control which Scriptaculus scripts are loaded, rather than having all of them loaded unnecessarily.
Basic _javascript_
The general strategy in Tapestry is that any significant amount of _javascript_ should be packaged up as a static _javascript_ library, a .js file that can be downloaded to the client.
Page specific _javascript_ should be in the form of minimal statements to initialize objects, referencing the _javascript_ libraries.
Most of this is accomplished via the RenderSupport object.
RenderSupport includes a number of methods that will be used by components, or event by services that are called from components.
addScriptLink()
void addScriptLink(Asset... scriptAssets);
This method adds a link to a script file, a _javascript_ library. A component can inject such a script and pass one or more of assets to this method. Tapestry will ensure that the necessary link elements are added to the top of the document (just inside the head element).
Adding the same asset multiple times does not create duplicate links. The subsequent ones are simply ignored. In this way, each component can add the assets it needs, without worrying about conflicts with other components.
Note that the Prototype, Scriptaculous main and effects libraries, and the standard Tapestry library (which largely consists of support for form input validation) are included automatically.
If you need access to other Scriptaculous libraries, you can provide them as follows:
@Inject @Path("${tapestry.scriptaculous}/dragdrop.js")
private Asset dragDropLibrary;
@Environmental
private RenderSupport renderSupport;
void setupRender()
{
renderSupport.addScriptLink(dragDropLibrary);
}
The Asset is injected, using the ${tapestry.scriptaculous} symbol to reference the location of the Scriptaculous library.
The RenderSupport is accessed as an Environmental service.
[CONF] Apache Tapestry JavaScript
_javascript_
Page edited by Bob Harner
Comment:
Noted $T() as deprecated (because it says so in the tapestry.js file, apparently per HLS 10/10/10 rev 1006321)
Changes (4)
...
It also adds a handful of methods to the Form class, and to Form elements. These are mostly related to input validation and determining element visibility.
h2. The Tapestry Object $T()
{deprecated:since=5.2 (no replacement)}
The standard library adds a new function, {{$T()}}. This function is used much like Prototypes {{$()}}, except that instead of returning a DOM object, it returns a hash (an initially empty _javascript_ object) that is associated with the DOM object. This hash is known as _the Tapestry object_.
...
{code}
h2. Coming Soon
* Additional Tapestry.ElementEffect functions, plus documentation
h1. Ajax Components and Mixins
...
Full Content
Related Articles
Page:
_javascript_
Page:
Ajax and Zones
Page:
Component Cheat Sheet
Page:
Assets
Page:
_javascript_ FAQ
Page:
Ajax Components FAQ
Tapestry includes sophisticated _javascript_ support, based on the Prototype and Scriptaculous libraries. These libraries are all packaged with Tapestry itself ... no extra download is required.
Tapestry will automatically link in prototype.js, scriptaculous.js, effects.js and the Tapestry library, tapestry.js. You can add additional libraries as needed.
Prototype and Scriptaculous Versions
Tapestry 5.2
Prototype 1.6.1
Scriptaculous 1.8.2
Tapestry 5.1
Prototype 1.6.0.3
Scriptaculous 1.8.2
Tapestry 5.0
Prototype 1.6.0
Scriptaculous 1.8.0
Alternatives to Prototype
There are both immediate and long-term efforts underway to allow Tapestry to work better with other _javascript_ libraries, such as JQuery and ExtJS:
Tapestry5HowToIntegrateJQuery Using JQuery in addition to Prototype
Tapestry-Jquery module Using JQuery in addition to Prototype
Tapestry5-Jquery module Using JQuery instead of Prototype
TAP5-999 proposes an agnostic tapestry.js layer to allow switching from Prototype to JQuery
TAPS-1364 lists some starting points for ExtJS integration
Changes to Scriptaculous
Tapestry uses a modified version of the main Scriptaculous library, scriptaculous.js, with the library's default autoloading behavior turned off. This lets Tapestry and Tapestry components control which Scriptaculus scripts are loaded, rather than having all of them loaded unnecessarily.
Basic _javascript_
The general strategy in Tapestry is that any significant amount of _javascript_ should be packaged up as a static _javascript_ library, a .js file that can be downloaded to the client.
Page specific _javascript_ should be in the form of minimal statements to initialize objects, referencing the _javascript_ libraries.
Most of this is accomplished via the RenderSupport object.
RenderSupport includes a number of methods that will be used by components, or event by services that are called from components.
addScriptLink()
void addScriptLink(Asset... scriptAssets);
This method adds a link to a script file, a _javascript_ library. A component can inject such a script and pass one or more of assets to this method. Tapestry will ensure that the necessary link elements are added to the top of the document (just inside the head element).
Adding the same asset multiple times does not create duplicate links. The subsequent ones are simply ignored. In this way, each component can add the assets it needs, without worrying about conflicts with other components.
Note that the Prototype, Scriptaculous main and effects libraries, and the standard Tapestry library (which largely consists of support for form input
[CONF] Apache Tapestry JavaScript FAQ
_javascript_ FAQ
Page edited by Howard M. Lewis Ship
Changes (5)
h2. _javascript_
{scrollbar}
h2. _javascript_
Main article: [_javascript_]
h3. Why do i I get a Tapestry is undefined error on form submit?
This client-side error is clear but can be awkward to solve. It means your browser has not been able to load the tapestry.js file properly. The question is, why? It can be due to multiple reasons, some of them below:
...
* Also, if you have included a custom or third-party JS library on top of the stack that causes the _javascript_ parsing to fail, then check the _javascript_ syntax in that library. * If you have used a tool to minimize your _javascript_ libraries, this can lead to _javascript_ syntax errors, so check if it works with all the _javascript_ files unpacked.
{scrollbar}
Full Content
Link Components FAQFrequently Asked QuestionsAjax Components FAQ
_javascript_
Main article: _javascript_
Why do I get a "Tapestry is undefined" error on form submit?
This client-side error is clear but can be awkward to solve. It means your browser has not been able to load the tapestry.js file properly. The question is, why? It can be due to multiple reasons, some of them below:
First, check if 'tapestry.js' is present in the head part of your resulting HTML page.
If you have set the tapestry.combine-scripts configuration symbol to true, Tapestry generates one single URL to retrieve all the JS files. Sometimes, this can produce long URLs that browsers are unable to retrieve. Try setting the symbol to false.
If you have included jQuery in conjunction with Tapestry's prototype, that will cause a conflict with the '$' selector used by both. In this case, you should put jQuery on top of the stack and turn on the jQuery.noConflict mode.
Also, if you have included a custom or third-party JS library on top of the stack that causes the _javascript_ parsing to fail, then check the _javascript_ syntax in that library.
If you have used a tool to minimize your _javascript_ libraries, this can lead to _javascript_ syntax errors, so check if it works with all the _javascript_ files unpacked.
Link Components FAQFrequently Asked QuestionsAjax Components FAQ
Change Notification Preferences
View Online
|
View Changes
[CONF] Apache Tapestry JavaScript FAQ
_javascript_ FAQ Page edited by Bob Harner Comment: Renamed Changes (0) ... Full Content _javascript_ Main article: Ajax _javascript_ Why do i get "Tapestry is undefined" error on form submit? This client-side error is clear but can be awkward to solve. It means your browser has not been able to load the tapestry.js file properly. The question is, why? It can be due to multiple reasons, some of them below: First, check if 'tapestry.js' is present in the head part of your resulting HTML page. If you have set the tapestry.combine-scripts configuration symbol to true, Tapestry generates one single URL to retrieve all the JS files. Sometimes, this can produce long URLs that browsers are unable to retrieve. Try setting the symbol to false. If you have included jQuery in conjunction with Tapestry's prototype, that will cause a conflict with the '$' selector used by both. In this case, you should put jQuery on top of the stack and turn on the jQuery.noConflict mode. Also, if you have included a custom or third-party JS library on top of the stack that causes the _javascript_ parsing to fail, then check the _javascript_ syntax in that library. If you have used a tool to minimize your _javascript_ libraries, this can lead to _javascript_ syntax errors, so check if it works with all the _javascript_ files unpacked. Change Notification Preferences View Online | View Changes
[CONF] Apache Tapestry Javascript
_javascript_ Page added by Bob Harner This page has moved to _javascript_ FAQ Change Notification Preferences View Online
[CONF] Apache Tapestry Javascript
_javascript_ Page added by Christophe Cordenier _javascript_ Why do i get "Tapestry is undefined" error on form submit? This client-side error is clear but can be awkward to solve, it means your browser has not been able to load tapestry.js file properly. The question is 'Why' ? It can be due to multiple reasons, some of them below: First, check if 'tapestry.js' is present in the head par of your resulting HTML page. If you have set the tapestry.combine-scripts configuration symbol to true, Tapestry generates one single URL to retrieve all the JS files. Sometimes, this can produce long URL that browsers are not able to retrieve. If you have included jQuery in conjunction with Tapestry prototype, that should generate conflict with prototype's '$' selector. In this case, i encourage you to put jQuery on top of the stack and turn on the jQuery.noConflict mode Also, if you have included a custom or third-party JS library on top of the stack that causes the _javascript_ parsing to fail, then check the _javascript_ syntax in those script If you have used a tool to minimize your _javascript_ libraries, this can lead to _javascript_ syntax errors, so check if it works with all the _javascript_ files unpacked. Change Notification Preferences View Online
