Describes how to use the frontend resource package in the Yii Framework of PHP, and the yii Framework _ PHP Tutorial.

Describes how to use the frontend resource package in the Yii Framework of PHP. This section describes how to use the front-end resource package that comes with PHP Yii Framework. the resources in yii Framework Yii are files related to Web pages, which can be CSS files, JavaScript files, images or videos, resource Details: use of front-end resource packages self-contained in the PHP Yii Framework, and use of the yii Framework

Yii resources are files related to Web pages. they can be CSS files, JavaScript files, images or videos. resources are placed in accessible Web directories and directly called by Web servers.

It is better to use programs to automatically manage resources. for example, when you use the yii \ jui \ DatePicker widget on the page, it automatically contains the required CSS and JavaScript files, instead of requiring you to manually find and include these files, when you upgrade the widget, it will automatically use the new version of the resource file. in this tutorial, we will detail the powerful resource management functions provided by Yii.

Resource Package

Yii manages resources in the resource package. In short, the resource package is a resource set placed in a directory. when a resource package is registered in the view, when rendering a Web page, the CSS and JavaScript files in the package are included.

Define a resource package

The resource package is specified as the PHP class that inherits yii \ web \ AssetBundle. the package name is the PHP class name that can be automatically loaded. in the resource package class, you must specify the resource location, which CSS and JavaScript files are contained and their dependencies with other packages.

The following code defines the main resource packages used by the basic application template:

<? php

namespace app \ assets;

use yii \ web \ AssetBundle;

class AppAsset extends AssetBundle
{
 public $ basePath = '@webroot';
 public $ baseUrl = '@web';
 public $ css = [
  'css / site.css',
 ];
 public $ js = [
 ];
 public $ depends = [
  'yii \ web \ YiiAsset',
  'yii \ bootstrap \ BootstrapAsset',
 ];
}

As mentioned above, the resource file specified by the AppAsset class is placed in the @webroot directory, the corresponding URL is @web, the resource package contains a CSS file css / site.css, there is no JavaScript file, and it depends on the other two packages yii \ web \ YiiAsset and yii \ bootstrap \ BootstrapAsset, more details about the properties of yii \ web \ AssetBundle are as follows:

yii \ web \ AssetBundle :: sourcePath: Specify the root directory of the package containing the resource file. This attribute should be set when the root directory cannot be accessed by the Web. Otherwise, the yii \ web \ AssetBundle :: basePath attribute and yii \ web \ AssetBundle should be set :: baseUrl. The path alias can be used here;
yii \ web \ AssetBundle :: basePath: specifies the directory that contains the resource files in the resource bundle and can be accessed by the web. When the yii \ web \ AssetBundle :: sourcePath property is specified, the resource manager will publish the packaged resources to a web-accessible and overwrite This attribute should be set if your resource files are in a web accessible directory, so that you do not need to publish it again. Path aliases can be used here.
yii \ web \ AssetBundle :: baseUrl: specifies the URL corresponding to the yii \ web \ AssetBundle :: basePath directory, similar to yii \ web \ AssetBundle :: basePath, if you specify the yii \ web \ AssetBundle :: sourcePath attribute, resource management The router publishes these resources and overrides this property, where path aliases can be used.
yii \ web \ AssetBundle :: js: An array containing JavaScript files for this resource bundle. Note that the forward slash "/" should be used as a directory separator. Each JavaScript file can be specified in one of two formats:

The relative path is expressed as a local JavaScript file (such as js / main.js). The actual path of the file is preceded by yii \ web \ AssetManager :: basePath, and the actual URL of the file is preceded by yii \ web \ AssetManager :: baseUrl.
The absolute URL address is expressed as an external JavaScript file, such as http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js or //ajax.googleapis.com/ajax/libs/jquery/ 2.1.1 / jquery.min.js.
yii \ web \ AssetBundle :: css: an array containing JavaScript files of the resource bundle, the format of the array is the same as yii \ web \ AssetBundle :: js.
yii \ web \ AssetBundle :: depends: a list of other resource bundles that this resource bundle depends on (described in detail in the next two sections).
yii \ web \ AssetBundle :: jsOptions: When calling yii \ web \ View :: registerJsFile () to register the package for each JavaScript file, specify the options passed to this method.
yii \ web \ AssetBundle :: cssOptions: When calling yii \ web \ View :: registerCssFile () to register each package, specify the options passed to this method.
yii \ web \ AssetBundle :: publishOptions: specify the options passed to this method when calling yii \ web \ AssetManager :: publish () to publish the package resource file to the web directory, only if yii \ web \ AssetBundle :: sourcePath is specified Used for attributes.
Resource location

Resources can be divided into:

Source resources: Resource files and PHP source code are placed together and cannot be accessed directly by the Web. In order to use these source resources, they must be copied into a Web-accessible Web directory to become published resources. This process is called publishing resources. Will be introduced in detail.
Publishing resources: Resource files are placed in a Web directory that can be directly accessed through the Web;
External resources: resource files are placed on different web servers of your web application;
When defining a resource bundle class, if you specify the yii \ web \ AssetBundle :: sourcePath attribute, it means that any resource that uses a relative path will be regarded as the source resource; if this attribute is not specified, it means that these resources are published resources ( Therefore, yii \ web \ AssetBundle :: basePath and yii \ web \ AssetBundle :: baseUrl should be specified to let Yii know their location).

It is recommended to put the resource file in the Web directory to avoid unnecessary publishing of resources. This is the previous example that specifies yii \ web \ AssetBundle :: basePath instead of yii \ web \ AssetBundle :: sourcePath.

For extensions, because their resources and source code are in a directory that cannot be accessed by the Web, you must specify the yii \ web \ AssetBundle :: sourcePath attribute when defining the resource bundle class.

Note: Do not use @ webroot / assets for the yii \ web \ AssetBundle :: sourcePath attribute. The path defaults to the path of the storage resource after the yii \ web \ AssetManager resource manager publishes the source resource. All contents of the path will be considered temporary files , May be deleted.
Resource dependence

When a Web page contains multiple CSS or JavaScript files, they have a certain order to avoid attribute coverage. For example, before using a jQuery UI widget on a Web page, you must ensure that the jQuery JavaScript file has been included. We call this resource sequence Order is called resource dependency.

The resource dependency is mainly specified by the yii \ web \ AssetBundle :: depends attribute. In the AppAsset example, the resource package depends on two other resource packages: yii \ web \ YiiAsset and yii \ bootstrap \ BootstrapAsset, which is the CSS and JavaScript of the resource package The file must be included after the two dependent package files are included.

The resource dependency is transitive, that is, people say that A depends on B, and B depends on C, so A also depends on C.

Resource options

You can specify yii \ web \ AssetBundle :: cssOptions and yii \ web \ AssetBundle :: jsOptions attributes to customize the way the page contains CSS and JavaScript files. These attribute values will be passed to yii \ web \ View :: registerCssFile () and yii, respectively \ web \ View :: registerJsFile () method, when calling these methods in the view contains CSS and JavaScript files.

Note: The options set in the resource bundle class will be applied to each CSS / JavaScript file in the bundle. If you want to use different options for each file, you should create different resource bundles and use an option set in each bundle .
For example, if you only want IE9 or higher browser to include a CSS file, you can use the following options:

public $ cssOptions = ['condition' => 'lte IE9'];
This would be the CSS file included in the package using the following HTML tags:


Include for link tags