Advise When Register Js And Css Files

Yii 1.1 General Discussion
1

Hi All,

I have problems when I register some js and css files, I’m very new on this task.

I have a main layout, with this as header and footer where the files used for the all application:




<head>

    <!-- CSS Global Compulsory-->

    <link rel="stylesheet" href="<?php echo Yii::app()->theme->baseUrl; ?>/assets/plugins/bootstrap/css/bootstrap.css">

    <link rel="stylesheet" href="<?php echo Yii::app()->theme->baseUrl; ?>/assets/css/style.css">

    <link rel="stylesheet" href="<?php echo Yii::app()->theme->baseUrl; ?>/assets/css/headers/header1.css">

    <link rel="stylesheet" href="<?php echo Yii::app()->theme->baseUrl; ?>/assets/css/responsive.css">

    <link rel="shortcut icon" href="favicon.ico">        

    <!-- CSS Implementing Plugins -->    

    <link rel="stylesheet" href="<?php echo Yii::app()->theme->baseUrl; ?>/assets/plugins/font-awesome/css/font-awesome.css">

    <!-- CSS Theme -->    

    <link rel="stylesheet" href="<?php echo Yii::app()->theme->baseUrl; ?>/assets/css/themes/default.css" id="style_color">

    <link rel="stylesheet" href="<?php echo Yii::app()->theme->baseUrl; ?>/assets/css/themes/headers/default.css" id="style_color-header-1">    

</head>

<body>

...

...

<!-- JS Global Compulsory -->			

<script type="text/javascript" src="<?php echo Yii::app()->theme->baseUrl; ?>/assets/plugins/jquery-1.10.2.min.js"></script>

<script type="text/javascript" src="<?php echo Yii::app()->theme->baseUrl; ?>/assets/plugins/jquery-migrate-1.2.1.min.js"></script>

<script type="text/javascript" src="<?php echo Yii::app()->theme->baseUrl; ?>/assets/plugins/bootstrap/js/bootstrap.min.js"></script> 

<script type="text/javascript" src="<?php echo Yii::app()->theme->baseUrl; ?>/assets/plugins/hover-dropdown.min.js"></script> 

<script type="text/javascript" src="<?php echo Yii::app()->theme->baseUrl; ?>/assets/plugins/back-to-top.js"></script>

<!-- JS Page Level -->           

<script type="text/javascript" src="<?php echo Yii::app()->theme->baseUrl; ?>/assets/js/app.js"></script>

<script type="text/javascript">

    jQuery(document).ready(function() {

      	App.init();

        //App.initSliders();

        //Index.initParallaxSlider();

    });

</script>

<!--[if lt IE 9]>

    <script src="<?php echo Yii::app()->theme->baseUrl; ?>/assets/plugins/respond.js"></script>

<![endif]-->


</body>

My home view needs some js and css files that needs to be located in a right place, the html code should look like this:




<head>

    <!-- CSS Global Compulsory-->

    <link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.css">

    <link rel="stylesheet" href="assets/css/style.css">

    <link rel="stylesheet" href="assets/css/headers/header1.css">

    <link rel="stylesheet" href="assets/css/responsive.css">

    <link rel="shortcut icon" href="favicon.ico">        

    <!-- CSS Implementing Plugins -->    

    <link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.css">

    <link rel="stylesheet" href="assets/plugins/flexslider/flexslider.css">    	                  //These are specific for the view

    <link rel="stylesheet" href="assets/plugins/bxslider/jquery.bxslider.css">                    //These are specific for the view

    <link rel="stylesheet" href="assets/plugins/layer_slider/css/layerslider.css" type="text/css">//These are specific for the view

    <!-- CSS Theme -->    

    <link rel="stylesheet" href="assets/css/themes/default.css" id="style_color">

    <link rel="stylesheet" href="assets/css/themes/headers/default.css" id="style_color-header-1">    

</head>

<body>

...

...

<!-- JS Global Compulsory -->			

<script type="text/javascript" src="assets/plugins/jquery-1.10.2.min.js"></script>

<script type="text/javascript" src="assets/plugins/jquery-migrate-1.2.1.min.js"></script>

<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script> 

<script type="text/javascript" src="assets/plugins/hover-dropdown.min.js"></script> 

<script type="text/javascript" src="assets/plugins/back-to-top.js"></script>


//(start) Specific for the view

<!-- JS Implementing Plugins -->           

<script type="text/javascript" src="assets/plugins/flexslider/jquery.flexslider-min.js"></script>

<script type="text/javascript" src="assets/plugins/bxslider/jquery.bxslider.js"></script>

<!-- Layer Slider -->           

<script src="assets/plugins/layer_slider/jQuery/jquery-easing-1.3.js" type="text/javascript"></script>

<script src="assets/plugins/layer_slider/jQuery/jquery-transit-modified.js" type="text/javascript"></script>

<script src="assets/plugins/layer_slider/js/layerslider.transitions.js" type="text/javascript"></script>

<script src="assets/plugins/layer_slider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script>

<!-- End Layer Slider -->

//(end) Specific for the view


<!-- JS Page Level -->           

<script type="text/javascript" src="assets/js/app.js"></script>

<script type="text/javascript" src="assets/js/pages/index.js"></script> //These are specific for the view

<script type="text/javascript">

    jQuery(document).ready(function() {

      	App.init();

        App.initSliders();      //These are specific for the view

        App.initBxSlider();     //These are specific for the view

        Index.initLayerSlider();//These are specific for the view

    });

</script>

<!--[if lt IE 9]>

    <script src="assets/plugins/respond.js"></script>

    <script src="assets/plugins/layer_slider/assets/js/html5.js"></script>

<![endif]-->


</body>

I have tried to register the scripts in the controller before render the view, using different options POS_HEAD, POS_BEGIN, etc:




Yii::app()->clientScript->registerCssFile(Yii::app()->theme->baseUrl.'name');

Yii::app()->clientScript->registerScriptFile(Yii::app()->theme->baseUrl.'name', CClientScript::POS_BEGIN);

So my big question is… How can I place the scripts where I want? is there any alternative but working way to do it?

Im kind of new on this, so an explanation of how register files works is also more than welcome :)

Thanks to everyone in advance!

2

You can use ‘packages’ and ‘scriptMap’ config params of clientScript component.

AFAIR that’s the only way to resolve dependencies.

3

Thanks ORey for your response. I have been trying to figure something out. It’s clear to me that using packages you register a set of scripts with dependencies, but I have many doubts :S

where and how do I suppose to define the list of package names?




array(

  'package-name'=>array(

    'basePath'=>'alias of the directory containing the script files',

    'baseUrl'=>'base URL for the script files',

    'js'=>array(list of js files relative to basePath/baseUrl),

    'css'=>array(list of css files relative to basePath/baseUrl),

    'depends'=>array(list of dependent packages), //How do I set dependencies here?

  ),

  ......

)

And why do I need to use scriptMap property?, I’m not sure for what it is.

If you could drop me some example or tell me where I can find some, it would be more than perfect. I have never used this, although I have used Yii but always without regiter scripts, althought I knew it wasn’t a good practice, now I need to learn this.

Thanks again!

4

great! I have a good idea of how this works thanks to this link: http://danaluther.blogspot.com.es/2012/03/using-packages-with-clientscript.html, very helpful.

Just one stupid question… what is the different between register and publish a script, I mean, I know that publish create a folder in assets public folder, but… what is the reason of doing that?

Another thing… I have a package that is global, it used in every page, that means that I have to register that package in every action controller?

And the last thing… I use themes and I set the packages in config/main.php:




'clientScript'=>array(

            'packages' => array(

                'global'=>array(

                    'baseUrl'=> 'themes/default/assets/',   

                    'css'    => array('plugins/bootstrap/css/bootstrap.css',

					                  'css/style.css',

									  'css/headers/header1.css',

									  'css/responsive.css',

									  'plugins/font-awesome/css/font-awesome.css',

					),

                    'js'     => array('plugins/jquery-1.10.2.min.js',

					                  'plugins/jquery-migrate-1.2.1.min.js',

									  'plugins/bootstrap/js/bootstrap.min.js',

									  'plugins/hover-dropdown.min.js',

									  'plugins/back-to-top.js',

                    ),

                ),

In the base url I have to hardcode the theme name, is there a proper way to set baseUrl according to the current theme?

Thanks againg for your responses!

5

Does anyone know something about register/publish a script?