AssetHelper is a wrap of JDocument helpe us add JS and CSS to html.

Get AssetHelper

$asset = Container::getInstance('com_flower')->get('helper.asset');

Every sub container has their own asset helper, we have to choose sub container first. AssetHelper will auto scan component folders to find css & js files.



Asset Helper will scan these folders:

  • (1) templates/[template]/css/[com_flower]/
  • (2) templates/[template]/css/
  • (3) components/[com_flower]/asset/css/
  • (4) components/[com_flower]/asset/
  • (5) media/[com_flower]/css/
  • (6) media/[com_flower]/
  • (7) media/windwalker/css/
  • (8) media/windwalker/
  • (9) libraries/windwalker/resource/asset/css/

And add first found main.css.

Also, we can add sub folders:


Add Internal CSS

$asset->internalCss('body {color: #666;}');

This css code will add in <style> of <head>.

Add JS

Same as CSS


Asset Helper will scan these folders:

  • (1) templates/[template]/js/com_flower/
  • (2) templates/[template]/js/
  • (3) components/com_flower/asset/js/
  • (4) components/com_flower/asset/
  • (5) media/com_flower/js/
  • (6) media/com_flower/
  • (7) media/windwalker/js/
  • (8) media/windwalker/
  • (9) libraries/windwalker/Resource/asset/js/ (For legacy)
  • (10) libraries/windwalker/assets/ (For legacy)
  • (11) libraries/windwalker/assets/ (For legacy)

Add Internal JS


This js code will add in <head>.


We will need add md5 suffix after asset to clean cache:

<link href="css/bootstrap.css?1ed040df04b9d6caf47ba55057bed72d" rel='stylesheet' type='text/css'>

So, for every css or js file, we can add a md5 sum file in it's folder:


We can use some tools to generate md5sum in main.css.sum file, just one line:


Now AssetHelper will auto fetch this md5 sum as url suffix.

Note: the suffix will be random in Joomla Debug mode.

Core Scripts

Windwalker has some JS library in core:





Script Dependency

AbstractScriptManager is a dependency manager, we can create methods as dependency handler and call it anywhere.

This is an example to load a sakura.js and init it for different HTML selectors, and dependency to flower.js.

namespace Flower\Script;

use Windwalker\Script\AbstractScriptManager;
use Windwalker\Utilities\ArrayHelper;

 * The FlowerScript class.
 * @since  {DEPLOY_VERSION}
class FlowerScript extends AbstractScriptManager
    public static function core()
        if (!static::inited(__METHOD__))
            // flower.js need jquery.js first

            // Windwalker will auto check min file exists or not
            // If min file not exists, normal file will instead, vise versa.

    public static function sakura($selector = '.hasSakura', $options = array())
        $asset = static::getAsset();

        // Include asset file first.
        if (!static::inited(__METHOD__))
            // We need flower.js first

            // If not in debug mode, Windwalker will auto get min file instead.

        // Call once if options same
        if (!static::inited(__METHOD__, func_get_args()))
            $defaultOptions = array(
                'foo' => 'bar',
                'callback' => '\\function () {}' // Start with \\ will be real JS function

            // Recursive merge options to defaultOptions.
            $options = $asset::getJSObject(ArrayHelper::merge($defaultOptions, $options));

            $js = <<<JS
jQuery(document).ready(function($) {

            // Add inline JS in <head>

Now use this code to include Bootstrap Calendar every where:

\Flower\Script\FlowerScript::sakura('.mySakura', array('foo' => 'baz'));

Found a typo? Help us improve this document.

This document is for Windwalker Joomla RAD, if you are finding Windwalker PHP framework, please see: Windwalker Framework