Registering Scripts and CSS files


General

Why do we need to register scripts and css files? You can add script tags in your HTML document (view file, template or directly in output code). 

<script type="text/javascript" src="myscripts.js"></script>
You may do this using CHtml helper, like it's described in the sample below: 
// Include CSS file
echo CHtml::cssFile("templates/setup/css/main.css");

// Include CSS files
echo CHtml::cssFiles(
    array(
        'bootstrap.min.css' => array('media'=>'all'),
        'theme.css',
        'font-awesome.min.css',
        'custom.css',
        (A::app()->getLanguage('direction') == 'rtl' ? 'custom.rtl.css' : '')
    ),
    'templates/default/css/'
);

// Include JS file
echo CHtml::scriptFile('assets/vendors/jquery/jquery.js');

// Include JS files
echo CHtml::scriptFiles(
    array(
        'bootstrap.min.js',
        'jquery.flexslider-min.js',
    ),
    'templates/default/js/',
);
So when all code will be rendered to the browser, it will handle this tag as required. But what to do, if you need to place this tag in HEAD section of your webpage or somewhere in the BODY or footer? Or what to do, if you need to take all script files and minify them by placing in one global file? You may also don't know where exactly to include script file or it may be done only while running your PHP code. Also, you may need to have all files in one place to allow framework to run the minify feature. That's why we need to use registering feature.

Registering feature allows you to tell to framework to collect script files or CSS files while running the code and include them using HTML tags in specific places of you HTML document (according to your directives). Let see how it's possible.

Registering JS Scripts

To register script use the following code. The second and third parameters define script position (in the <head>, at the beginning of the <body> etc.) and script level (the order of script file in the defined section). 

// Register single JS file. By default script will be rendered in the <head> section of the page
A::app()->getClientScript()->registerScriptFile('assets/vendors/tinymce/tiny_mce.js');
// Register multiple JS files
A::app()->getClientScript()->registerScriptFiles(
    array(
        'bootstrap.min.js',
        'jquery.flexslider-min.js',
        'jquery.easing.js',
    	'theme-core.js'
    ),
    'templates/default/js/',
    2
);

Registering JS Codes

To register script code use the following code. The first parameter represents a code identifier, the second - the code itself, and the third - code position: in the <head>, at the beginning of the <body> etc. 

A::app()->getClientScript()->registerScript(
    $formName,
    '$("select#language").change(function(){
        $("form[name='.$formName.']").attr("action","news/edit");
        $("form[name='.$formName.']").submit();
    });
    $(".intro-delete").click(function(){
        $("input[name=act]").val("delete-intro");
        $("form[name='.$formName.']").submit();
    });'.
    (($errorField != '') ? 'document.forms["'.$formName.'"].'.$errorField.'.focus();' : ''),
    5
);

Registering CSS files

To register CSS file use the following code. 

// Register single CSS files
A::app()->getClientScript()->registerCssFile('assets/vendors/timepicker/jquery.timepicker.min.css'); ?>
// Register multiple CSS files
A::app()->getClientScript()->registerCssFiles(
    array(
        'bootstrap.min.css',
        'theme.css',
        'font-awesome.min.css',
        'custom.css',
        (A::app()->getLanguage('direction') == 'rtl' ? 'custom.rtl.css' : '')
    ),
    'templates/default/css/'
);

Registering CSS codes

To register CSS codes use the following code. 

A::app()->getClientScript()->registerCss(
    'news-edit',
    'img.intro-image {width:82px;} a.intro-delete {margin-left:100px; margin-top:10px; display: inline-block;}'
);