How many times have you seen a JavaScript widget that you wished you could integrate into your application? Integrating JavaScript widgets into Yii is very simple and would like to share that with you. Yii of course has the jQuery UI integrated.

All web UIs can be grouped into two (2) based on their functions.

  1. Widgets that help to display data/content: For example, the tab widgets help to display content in a limited space on a page that would have otherwise required a number of pages.
    jQuery Tab
  2. Collect user input (Form input elements): Some inputs required from our visitors to our websites require a specific format. For instance, you may require a user to enter a date in a specific format. The jQuery DatePicker can help in this case. We can also make mention of the numerous WYSIWYG editors that transforms a simple textarea.jQuery Tab

No matter what widget type you want to integrate into a Yii application, you can. In this post, we are going to develop two base classes we can extend to add a JavaScript widget to our application. Let’s call the first class we are going to look at JsWidget. As with any Yii widget, it will extend the Yii CWidget class. This class will serve as the base class for developing any widget that falls under category one(1) above. If $obj is an instance of JsWidget, the following properties and methods are defined.

//array the initial JavaScript options that should be passed to the UI.
 $obj->$options = array();
 
 //array the HTML attributes that should be rendered in the HTML 
 //tag representing the UI widget.
 $obj->$htmlOptions = array();

To develop the base class for widgets that fall under category two(2), we will create a class name JsInputWidget which will subclass our JsWidget. When developing in Yii, an instance of CModel is usually used to collect user inputs. JsInputWidget will be given a CModel to work with. The following properties and methods are defined for our JsInputWidget.

/**
     * @var CModel the data model associated with this widget.
     */
    public $model;
 
    /**
     * @var string the attribute associated with this widget.
     * The name can contain square brackets (e.g. 'name[1]') 
     *which is used to collect tabular data input.
     */
    public $attribute;
 
    /**
     * @var string the input name. This must be set if {@link model} 
     *is not set.
     */
    public $name;
 
    /**
     * @var string the input value
     */
    public $value;
 
    /**
     * @return array the name and the ID of the input.
     */
    protected function resolveNameID()
 
    /**
     * @return boolean whether this widget is associated with a 
     *data model.
     */
    protected function hasModel()

You can download the classes to see the implementation of methods associated with each class.

If you are very familiar with Yii, you will notice that these two classes are clones of the Yii CJuiWidget and CJuiInputWidget. So why do we create new classes? We could have sub classed them but I believe they are too jQuery UI centric. They provide additional properties that will normally not be needed by other JavaScript widgets.

Now that we have our base classes, an example of how we can use them will be in order. This post will show you how to add the popular NicEdit WYSIWYG editor to our widgets library.

Resources

Attachment Size
Javascriptui 1.21 kb