Difference between #2 and #3 of
How to create a wrapper for a js library

Revision #3 has been created by Maurizio Domba Cerin on Jun 9, 2011, 7:40:15 AM with the memo:

fixed typos
« previous (#2)

Changes

Title unchanged

How to create a wrapper for a js library

Category unchanged

How-tos

Yii version unchanged

Tags unchanged

wrapper, js, uploadify

Content changed

In tThis wiki will be explained how to include a javascript library in a widget.

We will use as example [uploadify](http://www.uploadify.com/ "uploadify"), a flash/javascript plugin for file uploading.
[...]
------------------

Let's imagine we have a page with a file field, and we want to exchange
it with uploadify.

The first step is to create a widget that will replace this file field.
[...]
class ZUploadify extends CInputWidget
{

 
public function run() {
 
echo CHtml::activeFileField($this->model, $this->attribute); }
 
} ``` We extend CInputWidget, the base widget for input field. This masterparent class gives use the attributes 'model' and 'attribute'. AndNow, instead of the file field in our form we can place:
[...]
```

Excellent! Now we have a widget w
hich works exactly how worked CHtml::activeFileField(), worked.
 
 
W
e can move forward forto use uploadify.
[...]
Following [uploadify's documentation](http://www.uploadify.com/documentation/ ""), we have to download the package and import it on the web page. Let's save the package in protected/compomnents/assets for now. Now we have to publish this directory and to include the files. All simple as:
[...]
```php
public function run()
{
 
   $assetsFolder= Yii::app()->assetManager->publish(
 
      
Yii::getPathOfAlias('application.components.assets.uploadify')
 
   
);    Yii::app()->clientScript->registerCssFile($assetsFolder.'/uploadify.css');    Yii::app()->clientScript->registerScriptFile($assetsFolder.'/swfobject.js');    Yii::app()->clientScript->registerScriptFile(
 
      
$assetsFolder.'/jquery.uploadify.v2.1.4.min.js'
 
   
);    Yii::app()->clientScript->registerCoreScript('jquery');    echo CHtml::activeFileField($this->model, $this->attribute); }
 
``` The first instruction (assetsManger->publish) publishes the directory and returns the path created. The other opinstructions publishes the script and css file. Please note that we are includeing the yii version of jquery (), not the uploadify one forto avoid conflicts. ### Register the script Our objective is to register this script:e following js script, and to reserve us the possibility to customize it.
[...]
```

And to reserve us the possiblity of customize it.
 
Let's add a property options:
[...]
```

And then we prepare the options like th
atis:
[...]
```

The options are made up by some
default standard options (uploader, script , cancelImg, folder and auto) that will be merged with the user defined options. User defined options will take precedence (they are the second array in array_merge), so we will have the possibility of override the default ones. This options will be encoded with Cjavascript::encode(), a magic function that allow to give javascript functions as parameters, we have just to write 'js:' at the beginning. ForTo register the script we need only the id, we can generate the id with CHtml, respecting any chouice of the user: ```php if (isset ($htmlOptions['id']))         $id= $htmlOptions['id'];     else         $id= CHtml::activeId($this->model, $this->attribute);
```
[...]
```php
Yii::app()->clientScript->registerScript($id,
 "$(document).ready(function() { $('#$id').uploadify($options);});");
```
[...]
In summary:

Create a widget Download the library somewhere Publish the library Include needed script/css Prepare options and register the script

Here is the complete result:
[...]
For any customization, follow the documentation of uploadify. The work of Yii framework wais only to give a structure in which easyto inlclude all needed file.
[...]
16 1
22 followers
Viewed: 15 820 times
Version: 1.1
Category: How-tos
Written by: zaccaria
Last updated by: Maurizio Domba Cerin
Created on: Jun 8, 2011
Last updated: 6 years ago
Update Article

Revisions

View all history