Chapter 2. Creating a Widget
Prev		Next

Creating a Widget

Table of Contents

Directory Structure
Creating PHP Controller File
Creating a View Template
Creating a JavaScript Controller File
Creating a Widget CSS File
Summary

In this section I'll show you how to create a widget. This will only be a basic widget that demonstrates the most basic development details; more advanced topics are covered later in this guide.

In this example we will create a widget called custom_example.

Directory Structure

All Control Panel widgets belong within the widgets directory in the Recite library (that is, in ./lib/widgets).

You must create a new sub-directory for your widget. This can either be within one of the existing directories or you can create your own.

We are creating a widget called custom_example, so we create the directory ./lib/widgets/custom/example. All of our widget files belong this directory. No other widgets can then belong within this widget.

We will create this widget based on the Application_Cp_Widget_Module_Abstract class, which dictates the directory structure of the widget.

This directory then has the following structure:

./lib/widgets/custom/example
  | - files/               Holds files that can be loaded in the Control Panel
  |    | - js/             
  |    |    | - index.js   Holds JavaScript controller file for "index" action
  |    | - css/
  |    |    | - index.css  Holds a stylesheet to help render the template
  | - templates/           Holds templates used to render the widget
  |    | - index.tpl       Template for the "index" action
  | - controller.php       Main controller for widget

We'll now cover how each of these files should be structure.

Prev		Next
Chapter 1. Introduction	Home	Creating PHP Controller File