1. Requirements
2. The library (need to be imported)
3. Usage through a minimal example, without using inline actions
4. Using inline actions
5. Resources

EJsWidget is a behavior class helps to make Yii widgets to act more like self-contained "mini apps".

EJsWidget provides a structured, inheritable client-side behavior representation for Yii widgets.
It also includes an experimental part supporting "inline actions" for widgets, by making the controllers' action provider feature more handy.

Requirements ¶

PHP 5.3+, Yii 1.1.8+

The library (need to be imported) ¶

ESimpleActionWidget.php - base widget class for using inline widget actions (optional)
EJsWidgetBehavior.php - contains the behavior (works without ESimpleActionWidget)

Usage through a minimal example, without using inline actions ¶

File structure of the widget: ~~~ /etest

/assets
    /js  
    /etestwidget.js (js class for the widget)
/css  
    /etestwidget.css (css for the widget, optional)  
/views  
    /index.php (main view of the widget)
/ETestWidget.php (the widget class)

ETestWidget.php:

```php
//Widget class
class ETestWidget extends CWidget {
	public $name;

	public function init() {
		parent::init();
		//attaching the behavior, link widget assets, initialize widget js object
		EJsWidgetBehavior::prepare($this);
		$this->render('index');
	}

	//params to pass to the widget js object
	public function jsAttributes() {
		return array_merge(parent::jsAttributes(), array(
			'name'
		));
	}
}
```
/assets/js/etestwidget.js:

[javascript] //js prototype holding client side behaviors of the widget ;$.ejswidget.define("ETestWidget", {

opt : {
	//stuffs from ETestWidget::jsAttributes() loaded here
	count : 0
},

onCreate : function() {
	//runs right after the widget has been rendered
},

//custom method
hello : function() {
	alert("hello, my name is " + this.opt.name + ", " + ++this.opt.count + "th click.");
}

}); ~~~ /assets/css/etestwidget.css: ~~~ [css] / may control the widget's l&f, optional/ .etestwidget {

background-color: #ccc;

} ~~~ /views/index.php

<!-- main view of the widget -->
<div id="wg<?php echo $this->id; ?>" class="widget etestwidget">
	<h3>ETestWidget: minimal example, without inline actions</h3>
	<a href="javascript:;" onclick='<?php echo $this->jsObj();?>.hello();'>call hello() method</a>
</div>

Rendering the widget:

$this->widget('path.to.ETestWidget', array(
	'id'=>'mytest',
	'name'=>'mytest'
)); 

Using inline actions ¶

The widget may have methods named "actionXyz" what i call inline actions (known term for controllers). The javascript object may call these actions by ajax, through an existing controller.
In order to get it work, you have to derive the widget from ESimpleActionWidget, and prepare the controller's action() method.

To see sample codes for it, download the extension from here containing a fully functional demo, together with the library. The library is in the /protected/extensions/ directory.

Or go to the demo, try it and check the sources with comments.

Resources ¶

• Try out a demo