Handling Scripts and CSS in Yii Framework

Yii provide CClientScript to manage the scripts and css files in Yii.

Registering Core scripts that comes with Yii

To register the core jquery library that comes with yii, use the following methods.

Yii::app()->clientScript->registerCoreScript('jquery');
Yii::app()->clientScript->registerCoreScript( 'jquery.ui' );
//We need to pre-render the jquery.yiiactiveform.js on the view where we are going to place the AJAX functionality
Yii::app()->clientScript->registerCoreScript('yiiactiveform');

The above statement register the Jquery library and jquery ui, if YII_DEBUG is false then yii will register minimized version of Jquery & Jquery UI library.

To register inline scripts and css files

Yii::app()->clientScript->registerScript('unique scriptname','js code',position)

Yii::app()->clientScript->registerCss('unique css','csscode','media=>print/handheld/screen')

Script Positions

CClientScript::POS_HEAD : the script is inserted in the head section right before the title element. .
CClientScript::POS_BEGIN : the script is inserted at the beginning of the body section.
CClientScript::POS_END : the script is inserted at the end of the body section.
CClientScript::POS_LOAD : the script is inserted in the window.onload() function.
CClientScript::POS_READY : the script is inserted in the jQuery's ready function.

so if you use,

Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . '/script/test.js',CClientScript::POS_END);

then the script will be inserted to the body section

To register external scripts and css files

Yii::app()->clientScript->registerCssFile($yourscript_asset. '/test.css');
Yii::app()->clientScript->registerScriptFile($yourscript_asset. '/test.js')

Publishing scripts to assets directory

Asset manager in brief

CAssetManager is a Web application component that manages private files (called assets) and makes them accessible by Web clients. It achieves this goal by copying assets to a Web-accessible directory and returns the corresponding URL for accessing them.
you can compress and minify and otherwise process your assets with the asset publishing system, and it makes it easier to host your JS and CSS on a CDN since it's separate from your codebase.With assets, a component can be used easily without worrying about what files to be copied to public directories and what their URLs are
Consider a scenario, if we have two scripts which is located in scripts/testscript, the directory has two files namely test.js and test.css. We are going to publish it to asset and then we consume that files from asset directory, here is the snippet

$yourscript_asset= Yii::app()->assetManager->publish(Yii::app()->basePath . '/scripts/testscript /');

//Register JS and CSS files        
Yii::app()->clientScript->registerCssFile($yourscript_asset. '/test.css');
Yii::app()->clientScript->registerScriptFile($yourscript_asset. '/test.js');

Tips

Load files from google server

Cleans all registered scripts before any script register

Cleans all registered scripts.

Yii::app()->getClientScript()->reset();

Prevent loading jquery files

Yii::app()->clientScript->scriptMap['jquery.js'] = false;
//or if more than one script to be prevent from registering
$cs=Yii::app()->clientScript;
$cs->scriptMap=array(
'jquery.js'=>false,
'jquery.ajaxqueue.js'=>false,
'jquery.metadata.js'=>false,
);

Avoiding scripts download on AJAX renderPartial request

Suppose we created a function to display the AJAX active form and its contents are returned by a call to a controller’s action that will partially render a view.

// Just before rendering the view that
// has our activeform
Yii::app()->clientScript->corePackages = array();

Now controller doesn't return script files.
It is very important that we set corePackages to array() instead of null, as setting it to null will make CClientScript to reload the packages.php file (located in framework/web/js/) and we won’t stop the duplication of the script.

How to minify Javascript, CSS files automatically in YII Framework

We are going to reduce the HTTP calls for resources files by merging several resources files into a single (or more) files, so that the application load faster. E Client Script can automatically detect the required list of files, and generate a unique filename hash, so boldly ease of use.

CSS Files:

CSS files are merged based on there media attribute, background images with a relative path in file can also be displayed correctly.

Script files:

Script files are merged based on their position, If you use the 'CClientScript::POS_HEAD' you will end up with a single file for all the script files you've used on that page.

If you use 'CClientScript::POS_HEAD' and 'CClientScript::POS_END' for example then you'll end up with two files for each page on that request, Since those resources are located in different positions.


Add the following code to components array in protected/config/main.php

Add to configuration:
First you have to download EClientScript extension

 'clientScript' => array(
            'class' => 'ext.minify.EClientScript',
            'combineScriptFiles' => true,
            'combineCssFiles' => true,
            'optimizeCssFiles' => true,
            'optimizeScriptFiles' => false,
        ),

Then you'd use the regular 'registerScriptFile' & 'registerCssFile' methods as normal and the files will be combined automatically

Prevent right click in browser using Javascript

Just add the following code inbetween section of your html file

 <script language="javascript">
            var message="Sorry, you do not have permission to right click.";
            function RestrictIE(){
                if (event.button==2){
                    alert(message);
                    return false;
                }
            }
            function RestrictNS(e){
                if (document.layers||document.getElementById&&!document.all){
                    if (e.which==2||e.which==3){
                        alert(message);
                        return false;
                    }
                }
            }
            if (document.layers){
                document.captureEvents(Event.MOUSEDOWN);
                document.onmousedown=RestrictNS;
            }
            else if (document.all&&!document.getElementById){
                document.onmousedown=RestrictIE;
            }
            document.oncontextmenu=new Function("alert(message);return false;")
        </script>

now you can test in your browser.

TESTED WITH : IE 8.0, Firefox 3.5+, Chrome 12.0