1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
<com:TContent ID="body" >
<h1 id="6801">Javascript in PRADO, Questions and Answers</h1>
<h2 id="6802">How do I include the Javascript libraries distributed with Prado?</h2>
<p id="880060" class="block-content">The javascript libraries distributed with Prado can be found in the
<tt>framework/Web/Javascripts/source</tt> directory. The <tt>packages.php</tt>
file in that directory defines a list of available package names available
to be loaded. They can be loaded as follows.
</p>
<ul id="u1" class="block-content"><li>Adding libraries in the template
<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_850268">
<com:TClientScript PradoScripts="effects" />
</com:TTextHighlighter>
</li>
<li>Adding libraries in PHP code
<com:TTextHighlighter Language="php" CssClass="source block-content" id="code_850269">
$this->getPage()->getClientScript()->registerPradoScript("effects");
</com:TTextHighlighter>
</li>
</ul>
The available packaged libraries included in Prado are
<ul id="u2" class="block-content">
<li><tt>prado</tt> : basic PRADO javascript framework based on Prototype</li>
<li><tt>effects</tt> : visual effects from script.aculo.us</li>
<li><tt>ajax</tt> : ajax and callback related based on Prototype</li>
<li><tt>validator</tt> : validation</li>
<li><tt>logger</tt> : javascript logger and object browser</li>
<li><tt>datepicker</tt> : datepicker</li>
<li><tt>colorpicker</tt> : colorpicker</li>
</ul>
<p id="850761" class="block-content">The dependencies for each library are automatically resolved. Components
that require a particular library will also automatically load the necessary libraries.
For example, if you add a <tt>TDatePicker</tt> component on the page, the <tt>datepicker</tt>
and its dependencies will be automatically included on the page.</p>
<p id="850762" class="block-content">See <a href="?page=Controls.ClientScript">TClientScript</a> for options of adding
your custom Javascript code to the page.</p>
<h2 id="176028">Publishing Javascript Libraries as Assets</h2>
<com:SinceVersion Version="3.1b" />
<p class="block-content">Use <a href="?page=Controls.ClientScriptLoader">TClientScriptLoader</a> to publish and combine multiple existing javascript files (e.g. javascript libraries distributed with Prado or otherwise)
as packages.</p> For greater control on what and when to publish, use the
<tt>registerJavascriptPackages($base, $packages, $debug=null, $gzip=true)</tt>
method in the <tt>TClientScriptManager</tt> class, which an instance can be obtained
using <tt>$this->getPage()->getClientScript()</tt> or its equivalents.
For example, if multiple controls will use the same set of javascript libraries,
write a class to handle the registration of packages required by those controls.
</p>
<com:TTextHighlighter Language="php" CssClass="source block-content">
class MyJavascriptLib extends TComponent
{
private $_packages=array(); //keep track of all registrations
private $_manager;
protected function __construct(TPage $owner)
{
$this->_manager = $owner->getClientScript();
$owner->onPreRenderComplete = array($this, 'registerScriptLoader');
}
public static function registerPackage(TControl $control, $name)
{
static $instance;
if($instance===null)
$instance=new self($control->getPage());
$instance->_packages[$name]=true;
}
protected function registerScriptLoader()
{
$dir = dirname(__FILE__).'/myscripts'; //contains my javascript files
$scripts = array_keys($this->_packages);
$url = $this->_manager->registerJavascriptPackages($dir, $scripts);
$this->_manager->registerScriptFile($url,$url);
}
}
// example control class using the javascript packages
class TestComp extends TControl
{
public function onPreRender($param)
{
parent::onPreRender($param);
MyJavascriptLib::registerPackage($this,'package1');
}
}
</com:TTextHighlighter>
<div class="last-modified">$Id$</div></com:TContent>
|
