Javascript in PRADO, Questions and Answers

How do I include the Javascript libraries distributed with Prado?

The javascript libraries distributed with Prado can be found in the framework/Web/Javascripts/source directory. Additional libraries installed through composer can be found in the protected/vendor directory. The packages.php file in that directory defines a list of available package names available to be loaded. They can be loaded as follows.

  • Adding libraries in the template
    <com:TClientScript PradoScripts="effects" />
    
  • Adding libraries in PHP code
    $this->getPage()->getClientScript()->registerPradoScript("effects");
    
The available packaged libraries included in Prado are
  • jquery : jQuery javascript framework
  • jqueryui : jQueryUI user interface javascript framework
  • prado : basic PRADO javascript framework based on jQuery
  • bootstrap : Bootstrap front-end framework
  • effects : visual effects based on jQueryUI
  • ajax : ajax and callback related based on jQuery
  • validator : widgets validation
  • logger : javascript logger and object browser
  • datepicker : TDatepicker control
  • colorpicker : TColorPicker control
  • slider : TSlider control
  • keyboard : software keyboard control
  • tabpanel : TTabPanel control
  • inlineeditor : TInPlaceTextBox. control
  • activedatepicker : ajax version of the datepicker control
  • activefileupload : ajax version of the fileupload control
  • accordion : TAccordion control
  • ratings : TRatingList control
  • htmlarea : tinyMCE version 3 editor
  • htmlarea4 : tinyMCE version 4 editor
  • texthighlight : TTextHighlighter javascript helpers for row numbering and clipboard access

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 TDatePicker component on the page, the datepicker and its dependencies will be automatically included on the page.

See TClientScript for options of adding your custom Javascript code to the page.