YII UI Dialog Widget to keep you DRY

November 20, 2012 | In: dialog, dry, modal, Widget, yii

This is my second post for this wonderful PHP Framework called YII.
On my last post about YII’s widget, I just mentioned how to include/use it in your site.

Now I’m having some progress, I’ll create a “reusable” widget for those of you who wants to make a UI Dialog(modal window) as easy to use as possible.

Nuff said, let’s start coding…

First we will create a widget(guess the name please):

 $this->widgetId,
			'title' => $this->title,
			'width' => $this->width,
			'height' => $this->height,
			'modal' => $this->modal,
			'contentView' => $this->contentView,
		);
		
		$this->render('uiDialog', $data);
	}
	
}

Next, is the view file for this widget, i named this “uiDialog.php”, you can name it whatever you want as long as it’s the same name as the one being called in the Widget class (see $this->render() call above):

beginWidget('zii.widgets.jui.CJuiDialog', array(
	'id'=>$widgetId,
	'options'=>array(
		'title'=>$title,
		'autoOpen'=>false,
		'modal'=>$modal,
		'width'=>$width,
		'height'=>$height,
	),
));
Yii::app()->controller->renderPartial($contentView);
$this->endWidget('zii.widgets.jui.CJuiDialog');

Maybe now you have a question in your mind why we need another view inside this view file. That’s a good question actually, well since we want to make it “DRY”, the content that we want to be displayed as “modal” will be put in a “partial” view file instead of making the content as a “string” variable.

Now , the final part is to call our widget, codes below will be put in a view file where you want the “dialog” window be called and displayed:

widget('application.widgets.UiDialogWidget',
	array(
		'contentView'=>'sampleView',
		'widgetId' => 'testId',
		'title' => 'Testing UI Widget',
	)
);

echo CHtml::link('Open Dialog', '#', 
       array(	'onclick'=>'$("#testId").dialog("open"); return false;',
));
?>

There are two very important variables here that needs our attention in order for this to work. First is the value for ‘contentView’ array key named “sampleView”. It must point to an actual “view file” relative to the controller/view (see MVC) that is currently loaded in your browser.

The next one is the value for ‘widgetId’ array named “testId”. This must be the same on your call to “CHtml::link”‘s third parameter’s array(onclick) event handler.

Comment Form