ejswidget

EJsWidget makes widgets act more like self-contained "mini apps".
4 followers

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:

//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:

//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:

/* 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

Be the first person to leave a comment

Please to leave your comment.

Create extension