-
Notifications
You must be signed in to change notification settings - Fork 12
ComponentManager
Components are a core concept in Elation, and are responsible for handling all input and generating all output for your application. Each component consists of some combination of controller (PHP), template (Smarty), CSS, and/or JS code. Each component can also have any number of subcomponents, allowing you to build a full heirarchy of components from which you can compose your pages and use to define other components.
Each component is accessible either directly via the URL, or called in from templates, PHP, or Javascript. The following are equivalent (* note - not exactly, since accessing via URL returns a whole HTML page with a <head> and a <body> rather than just an HTML snippet - more on that later):
URL : /sample/test?thingy=whatever&style=red
Template : {component name="sample.test" thingy="whatever" style="red"}
PHP : ComponentManager::fetch("sample.test", array("thingy" => "whatever", "style" => "red"));
Javascript : elation.ajax.get('/sample/test', {thingy: "whatever", style: "red"})
##Sample Component## Here's how a a typical component looks. We start with the PHP file: ###components/sample/sample.php:### <? class Controller_sample extends Component { function controller_sample($args) { $vars["thingy"] = any($args["thingy"], "whatever"); return $this->GetComponentResponse("./sample.tpl", $vars); } function controller_test($args) { $vars["thingy"] = $args["thingy"]; $vars["style"] = $args["style"]; return $this->GetComponentResponse("./test.tpl", $vars); } }
We've actually defined two components here. The main one, called "sample", is defined as a class which allows it to hold multiple controller functions. Each of these controller functions is responsible for handling some specific task - retrieving, storing, or processing some data, and returning to the user some sort of output. This output can be anything - HTML, JS, XML, PNG/JPGs, XSL, etc - but most commonly used are HTML and JS. JS and XML output will simply return the contents of the $vars array for the requested component, either json or XML encoded. HTML output is handled by Smarty templates, as seen below:
###components/sample/templates/sample.tpl###
This is a sample component. Thingy is {$thingy|escape:html}.
{component name="sample.test" thingy=$thingy style="red"}###components/sample/templates/test.tpl###
You may wish to add some styling to this, so the "style" parameter does something: ###components/sample/css/test.css### .sample_test_red { color: #600; background: #fcc; border: 1px solid #600; } .sample_test_green { color: #060; background: #cfc; border: 1px solid #060; } .sample_test_blue { color: #006; background: #ccf; border: 1px solid #006; }
##Client/Server Component Interaction## You will often want to build components which have both client and server side components. Elation provides several ways to make this easy: