diff options
Diffstat (limited to 'demos/quickstart/protected/pages/Controls/ClientScriptLoader.page')
| -rw-r--r-- | demos/quickstart/protected/pages/Controls/ClientScriptLoader.page | 123 |
1 files changed, 123 insertions, 0 deletions
diff --git a/demos/quickstart/protected/pages/Controls/ClientScriptLoader.page b/demos/quickstart/protected/pages/Controls/ClientScriptLoader.page new file mode 100644 index 00000000..590aa2d8 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/ClientScriptLoader.page @@ -0,0 +1,123 @@ +<com:TContent ID="body" > + +<h1>TClientScriptLoader</h1> + +<com:DocLink ClassPath="System.Web.UI.WebControls.TClientScriptLoader" /> + +<com:SinceVersion Version="3.1b" /> + +<p class="block-content"> +The <tt>TClientScriptLoader</tt> publish a collection of javascript files as assets. +For example, suppose we have a directory name "<tt>mylib</tt>" in +the <tt>protected/pages</tt> directory of our application.</p> +<com:TTextHighlighter Language="prado" CssClass="source block-content"> +assets/ +protected/ + pages/ + mylib/ + file1.js + file2.js + file3.js + file4.js + packages.php +</com:TTextHighlighter> + +<p class="block-content">The <tt>PackagePath</tt> property can be an existing asset directory +or a namespace path to the directory containing javascript files. +For example, to publish the javascript files in the <tt>mylib</tt> +directory, we can specify the <tt>PackagePath</tt> as follows. +The first tag <tt>TClientScriptLoader</tt> relies on the asset template tag and +assumes that the page template containing the <tt>TClientScriptLoader</tt> tag instance +is in the <tt>protected/pages</tt> directory. +The second <tt>TClientScriptLoader</tt> tag uses the namespace notation to +specify the path. +</p> + +<com:TTextHighlighter Language="prado" CssClass="source block-content"> +<com:TClientScriptLoader PackagePath=<%~ mylib %> /> +<com:TClientScriptLoader PackagePath="Application.pages.mylib" /> +</com:TTextHighlighter> + +<p class="block-content"> +When the files in the <tt>PackagePath</tt> are published as assets, a script loader + php file "<tt>clientscripts.php</tt>" is automatically copied + to that asset directory. + The script loader, combines multiple javascript files and serve up as gzip if possible. +</p> +<h2>Grouping Javascript Files</h2> +<p class="block-content"> +Allowable scripts and script dependencies can be grouped by using a "<tt>packages.php</tt>" file +with the following format. This "<tt>packages.php</tt>" is optional, if absent the file names +without ".js" extension are used. The "<tt>packages.php</tt>" must be in the directory given by +<tt>PackagePath</tt>. +</p> + +<com:TTextHighlighter Language="php" CssClass="source block-content"> +<?php + $packages = array( + 'package1' => array('file1.js', 'file2.js'), + 'package2' => array('file3.js', 'file4.js')); + + $deps = array( + 'package1' => array('package1'), + 'package2' => array('package1', 'package2')); //package2 requires package1 first. + + return array($packages,$deps); //must return $packages and $deps in an array +?> +</com:TTextHighlighter> + +<p class="block-content">The first element of the array returned by the <tt>packages.php</tt> should +contain an array of javascripts files relative to the <tt>packages.php</tt> +that corresponds to a particular grouping. For example, in the above <tt>packages.php</tt>, +the grouping '<tt>package1</tt>' combines two javascript files, namely, '<tt>file1.js</tt>' +and '<tt>file2.js</tt>'. +</p> + +<p class="block-content">The second element of the array returned by the <tt>packages.php</tt> should +contain an array of grouping dependencies ordered in the way that the groups should be combined. +For example, grouping '<tt>package1</tt>' only depends on the '<tt>package1</tt>' grouping files +(i.e. '<tt>file1.js</tt>' and '<tt>file2.js</tt>'). While '<tt>package2</tt>' depends +on both '<tt>package1</tt>' and '<tt>package2</tt>' groupings. That is, '<tt>package2</tt>' +will combine, in order, '<tt>file1.js</tt>', '<tt>file2.js</tt>', '<tt>file3.js</tt>', and '<tt>file4.js</tt>'. +</p> + +<h2>Loading Javascript Packages</h2> + +<p class="block-content">To load a particular javascript file or package, set the <tt>PackageScripts</tt> +property with value '<tt>package1</tt>' to load the '<tt>package1</tt>' scripts. +A maximum of 25 packages separated by commas is allowed. +Dependencies of the packages are automatically resolved by the script loader php file. +</p> + +<com:TTextHighlighter Language="prado" CssClass="source block-content"> +<com:TClientScriptLoader PackagePath=<%~ mylib %> PackageScripts="package2" /> +<script type="text/javascript"> + //javascript code utilizing javascript code loaded in 'package2' above +</script> +</com:TTextHighlighter> + +<p>Each <tt><com:TClientScriptLoader></tt> generates an HTML <tt><script></tt> +element to load the required javascript files.</p> + +<h2>Removing Javascript Comments</h2> +<p class="block-content">The <tt>DebugMode</tt> property when false +removes comments and white spaces from the published javascript files. If +the <tt>DebugMode</tt> property is not set, the debug mode is determined from the +<a href="?page=Advanced.Performance">application mode</a>. +</p> +<div class="note"><b class="note">Note:</b> +If the <tt>DebugMode</tt> is false either explicitly or when the application mode is non-debug, +then cache headers are also sent to inform the browser and proxies to cache the file. +Moreover, the post-processed (comments removed and zipped) are saved in the assets +directory for the next requests. That is, in non-debug mode the scripts are cached +in the assets directory until they are deleted. +</div> + +<h2>Compressing Javascript with GZip</h2> +<p class="block-content"> +The <tt>EnableGzip</tt> property (default is true) enables the +published javascripts to be served as zipped if the browser and php server allows it. +</p> +<div class="last-modified">$Id: ClientScript.page 1650 2007-01-24 06:55:32Z wei $</div> + +</com:TContent>
\ No newline at end of file |