<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>jquery</tt> : <a href="https://jquery.com/">jQuery</a> javascript framework</li> <li><tt>prado</tt> : basic PRADO javascript framework based on jQuery</li> <li><tt>bootstrap</tt> : <a href="http://getbootstrap.com/">Bootstrap</a> front-end framework</li> <li><tt>effects</tt> : visual effects based on <a href="https://jqueryui.com/">jQueryUI</a></li> <li><tt>ajax</tt> : ajax and callback related based on jQuery</li> <li><tt>validator</tt> : widgets validation</li> <li><tt>logger</tt> : javascript logger and object browser</li> <li><tt>datepicker</tt> : TDatepicker control</li> <li><tt>colorpicker</tt> : TColorPicker control</li> <li><tt>dragdrop</tt> : basic support for "drag and drop" control</li> <li><tt>dragdropextra</tt> : extra support for "drag and drop" controls</li> <li><tt>slider</tt> : TSlider control</li> <li><tt>keyboard</tt> : software keyboard control</li> <li><tt>tabpanel</tt> : TTabPanel control</li> <li><tt>inlineeditor</tt> : TInPlaceTextBox. control</li> <li><tt>activedatepicker</tt> : ajax version of the datepicker control</li> <li><tt>activefileupload</tt> : ajax version of the fileupload control</li> <li><tt>accordion</tt> : TAccordion control</li> <li><tt>ratings</tt> : TRatingList control</li> <li><tt>htmlarea</tt> : <a href="http://www.tinymce.com/">tinyMCE</a> version 3 editor</li> <li><tt>htmlarea4</tt> : <a href="http://www.tinymce.com/">tinyMCE</a> version 4 editor</li> <li><tt>prototype</tt> : <a href="http://prototypejs.org/">prototype</a> javascript framework (only for compatibility with old custom controls)</li> <li><tt>dragdrop</tt> : compatibility package for old, prototype-based drag&drop controls</li> <li><tt>dragdropextra</tt> : compatiblity package for old, prototype-based drag&drop controls</li> <li><tt>autocomplete</tt> : compatibility package for prototype-based TAutoComplete control</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> </com:TContent>