Yii Framework Wiki
Difference between
#1 and
#3 of
How to create a wrapper for a js library
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
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
The first step is to create a widget that will replace this file field.
[...]
class ZUploadify extends CInputWidget{
```php
<?php
```php
<?php $this->widget('ZUploadify', array('model'=>$model, 'attribute'=>'file')); ?>
```
Excellent! Now we have a widget which works exactly how CHtml::activeFileField() worked.
We can move forward to use uploadify.
Import uploadify
----------------
Following [uploadify 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/components/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);
} ```
```php
<?php $this->widget('ZUploadify', array('model'=>$model, 'attribute'=>'file')); ?>
```
Excellent! Now we have a widget wich works exactly how worked CHtml::activeFileField(), we can move forward for use uploadify
Import uploadify
The other instructions publishes the script and css file. Please note that we are including the yii version of jquery, not the uploadify one to avoid conflicts.
### Register the script
Our objective is to register the following js script, and to reserve us the possibility to customize it.
```php
<script type="text/javascript">
$(document).ready(function() {
$('#file_upload').uploadify({
'uploader' : '/uploadify/uploadify.swf',
'script' : '/uploadify/uploadify.php',
'cancelImg' : '/uploadify/cancel.png',
'folder' : '/uploads',
'auto' : true
});
});
</script>
```
Let's add a property options:
```php
public $options;
```
And then we prepare the options like this:
```php
$options= CJavaScript::encode(array_merge(
array(
'uploader' => $assetsFolder.'/uploadify.swf',
'script' => $assetsFolder.'/uploadify.php',
'cancelImg' => $assetsFolder.'/cancel.png',
'folder' => '/uploads',
'auto' => true
),
$this->options
));
```
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.
To register the script we need only the id, we can generate the id with CHtml, respecting any choice of the user:
```php
if (isset ($htmlOptions['id']))
$id= $htmlOptions['id'];
else
$id= CHtml::activeId($this->model, $this->attribute);
```
And finally register the script:
```php
Yii::app()->clientScript->registerScript($id, "$(document).ready(function() { $('#$id').uploadify($options);});");
```
That's it, our uploadify widget is ready to be used.
Conclusion
------------------
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:
```php
<?php
class ZUploadify extends CInputWidget
{
public $options = array();
public function run()
{
$assetsFolder= Yii::app()->assetManager->publish(Yii::getPathOfAlias('application.modules.administrator.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');
$options= CJavaScript::encode(array_merge(
array(
'uploader' => $assetsFolder.'/uploadify.swf',
'script' => $assetsFolder.'/uploadify.php',
'cancelImg' => $assetsFolder.'/cancel.png',
'folder' => '/uploads',
'auto' => true
),
$this->options
));
if (isset ($htmlOptions['id']))
$id= $htmlOptions['id'];
else
$id= CHtml::activeId($this->model, $this->attribute);
Yii::app()->clientScript->registerScript($id, "$(document).ready(function() { $('#$id').uploadify($options);});");
echo CHtml::activeFileField($this->model, $this->attribute, $this->htmlOptions);
}
}
```
For any customization, follow the documentation of uploadify. The work of Yii framework is only to give a structure in which to include all needed file.
20 followers
Viewed: 23 376 times
Version: 1.1
Category: How-tos
Written by: zaccaria
Last updated by: Maurizio Domba Cerin
Created on: Jun 8, 2011
Last updated: 13 years ago
Revisions
View all history-
13 years ago by
Maurizio Domba Cerin fixed typos
-
13 years ago by
zaccaria completed the article
- 13 years ago by zaccaria