Widgets

A widget is an interface element that can contain just about anything. To help create widgets we've designed the Widget, or WidgetClient helper, which is automatically loaded for all views created in a controller that inherits (either directly or indirectly) from AppController. The Widget helper is loaded for the staff interface, and the WidgetClient helper is loaded for the client interface. The two are almost identical, except that the WidgetClient helper doesn't provide some additional options. In all of the examples below simply replace Widget with WidgetClient if working in the client interface.

The Structure

Every widget needs at least two things: a beginning, and an end.

<?php
$this->Widget->clear();
$this->Widget->create();

#
# TODO: Place widget contents here
#

$this->Widget->end();
?>

In the example above we do three things:

1. On line 2 we clear the widget using the clear() method. This allows us to ensure that our widget is in its default state.
2. On line 3 we begin the widget with create().
3. On line 9 we end the widget with end().

The create() method accepts a few parameters, described below:

• $title - The title to display for the widget window
• $attributes - An array of HTML attributes to set for the widget's primary container.
• $render - The are of the widget to render. This is necessary when renderings widgets via AJAX, so you can control the content that's replaced. Acceptable values include:
  
  • 'full' - The default value, will render the entire widget.
  • 'content_section' - The full content including navigation (everything excluding box frame and title section). Use 'inner_content' if using WidgetClient.
  • 'common_box_content' - The content only ('content_section' excluding the navigation). Use 'inner' if using WidgetClient.

<?php
$this->Widget->clear();
$this->Widget->create("My Widget Title", array('id' => "my_widget_id", 'class' => "my_widget_class"), "full");

#
# TODO: Place widget contents here
#

$this->Widget->end();
?>

Window Decorations

Window decorations are set on the title bar of the widget. There are currently two types of window decorations: arrow, and setting. The arrow decorations allows the widget to be minimized and restored, while the setting decoration may be linked another page or URI loaded via AJAX.

<?php
$this->Widget->clear();
// Allow the widget to be minimized
$this->Widget->setWidgetButton("arrow");
// Allow this widget's setting to be updated using ClientMain::settings()
$this->Widget->setWidgetButton(array('class' => "setting ajax", 'href' => $this->base_uri . "widget/my_plugin/client_main/settings/"));
$this->Widget->create("My Widget Title", array('id' => "my_widget_id", 'class' => "my_widget_class"), "full");

#
# TODO: Place widget contents here
#

$this->Widget->end();
?>

You'll notice on line 6, above, we've set both a "setting" and "ajax" class for our window decoration. The "setting" class works just line the "arrow" parameter on line 4, except it renders a different icon. The real difference here is the addition of the "ajax" class. What this does is tell Blesta to fetch the URI specified in the 'href' attribute via AJAX. Blesta will automatically request the data and perform the replacement of the data in the DOM. Therefore, the response of the request must be properly formatted. To do that, simply invoke the AppController::renderAjaxWidgetIfAsync() method.

<?php
class ClientMain extends MyPluginController {
	...
	public function settings() {
		
		$this->set("var1", "hello");
		$this->set("var2", "world!");

		return $this->renderAjaxWidgetIfAsync(false);
	}
}
?>

The renderAjaxWidgetIfAsync() method will automatically determine the format of the response and act accordingly.

Tabs and Links

Widgets and Plugins

Widgets can appear anywhere within your plugin, but Blesta reserves a few Plugin Actions especially for rendering widgets. These actions will automatically load your widgets to display in various locations (if the Staff member has enabled the widget to appear). This allows plugins to display custom data/forms on pages that plugins can't otherwise access. For more information on registering your widgets with these actions see the Plugin Actions section of this manual.

Custom Styles

Style Sheets

You can load custom style sheets in your widget simply by using the setStyleSheet() method. You may call it as many times as necessary.

<?php
$this->Widget->clear();
$this->Widget->setStyleSheet($this->view_dir . "css/styles.css");
$this->Widget->create("My Widget Title", array('id' => "my_widget_id", 'class' => "my_widget_class"), "full");

#
# TODO: Place widget contents here
#

$this->Widget->end();
?>

Theming 

You can enable links in your widgets to be themed by Blesta by adding the "override" class to each link.

...
<a class="override" href="/">Click me!</a>
...