Web User Interface

From all the PHP frameworks and toolkits who tried to create User Interface you will find Agile Toolkit to contain the perfect mix between "template customizability" and "content awareness". In Agile Toolkit you have a full control over every line of HTML produced. At the same time Agile Toolkit offer AJAX and JavaScript integration on object-level allowing you to reload objects on the page, assign JavaScript and AJAX events.

To make things simpler, Agile Toolkit already comes with a full-featured theme for you.

Agile Toolkit CSS Framework

In it's aim for maximum flexibility, Agile Toolkit CSS framework is built on top of jQuery UI CSS Framework. That means not only it looks awesome, but your UI will be compatible with thousands of jQuery plugins relying on the same set of CSS classes. You will find CSS framework similar and somewhat compatible with Bootstrap.

  • Compatible with jQuery UI Themeroller. Generate a theme and drop into your templates folder.
  • All the CSS is built on LESS. You can tweak the theme by adjusting some variables.
  • Comes with 12-grid system (static or full-screen), Typography, Percent-based columns and CSS Reset.
  • Form styles – vertical, horizontal, multi-column or mixed.
  • Fully integrated in your PHP code.
  • Works out of the box. You don't need to be a nerd to use it.

Demo of CSS framework elements
Full Documentation on Agile CSS Framework

View Objects

Agile Toolkit takes everything there is to make a fully-featured form and hides it behind a simple "Form" class. This class relies on CSS stylesheets, jQuery UI widget, other views such as buttons and fields, jQuery Chains, Form templates. However to use form, you need to know very little of that:

$form=$page->add('Form');
$form->addClass('stacked'); // labels over fields
$form->addField('line','Subject');
$form->addField('text','Body');
$form->addSubmit('Send');
$form->addButton('Cancel');

Any component of the form can be adjusted or replaced completely. You may even design your own form class which is displayed in the way you like.

Full Documentation on Forms

SMLite - Agile Template Engine

Template is a common practice to separate HTML markup from business logic. Unfortunately many template engines and frameworks have been walking all over the principle saying "do not mix business logic with HTML".

SMLite remains true to it's goals and has no way to complicate HTML logic. More importantly it's syntax allows to leave HTML code un-altered as you populate tags throughout the template. When developers work side-by-side with designers, it's very important that the two have a really clear line on their involvement with the templates and SMLite draws a clear line.

Example

If your designer have sent you the following file:

<div class="greeting">Templates are simple</div>

You can add the template tag inside without changing the code:

<div class="greeting">Templates are <?tag?>simple<?/?></div>

Designer, browsers and even applications such as Dreamweaver will ignore inserted tags without removing them. Yet now you have control over the template and can substitute contents of a tag inside your PHP code:

$html $tpl->set('tag','powerful')->render();  // outputs "Templates are powerful"

This is as simple as templates engine can be. It is also all we need from the template engine — ability to get and set region values. This simplicity is significant to the way how templates are used by the User Interface.

Why?

There are several reasons why we decided to build our own template engine. First reason is the speed. Agile Toolkit can produce huge amount of views and can render thousands of template instances just on a single page in a split second. With a built-in template engine we have control over the simplicity of the template and it's performance.

The other reason is the way how Views are using templates. All views rely on templates. When you add view, you can instruct it to use either a whole file as a template or a region from a file. View can also use region in it's owner's view as the template. Views can have default templates, such as Grid and Form but you can always re-define template for any object instance or substitute template globally.

Full Documentation on SMLite

View - your Window into HTML Widget

The web page you are reading right now is built on Agile Toolkit. Every character of produced HTML is coming from a template of some Object. Objects which participate in HTML generation are called "Views". Quite often Views will contain other Views. Scroll up to see a "Menu" object. Below is a Form objects but to the right of this paragraph you will see a custom-made View implemented as a class "Alex".

Objects are rendered automatically and recursively by Agile Toolkit. Objects rely on SMLite which can be accessible through $object->template which is ideal if you need to tweak something very minor in the object without redefining it. You can also specify a different template for an object and have same UI logic applied on different chunk of HTML.

The two-pass rendering allows application to determine which objects are visible on the first pass and then render required objects into HTML.

$view $page->add('Alex');

The code above is the fundamental building block of your application in Agile Toolkit. You don't fit your application into HTML. You build your application by adding one object into another. That's the secret to unified Web Application Interface.

Full Documentation on Views

View + jQuery UI Widget = Love

Once your PHP code is focused on a View, the ability to fine-tune it open immense capabilities. The Views are similar to dashboard widgets or gadgets. Agile Toolkit makes sure you can have multiple views on your pages working properly without conflicts. Each view can also have it's own JavaScript bindings. Those bindings will be kept even if you reload your page through AJAX or use your View in different conditions.

Result

 

Code

$form $page->add('Form');
$form->addField('line','name')->validateNotNull();
$form->addSubmit('Greet');

if(
$form->isSubmitted()){
    
$form->js()->univ()
        ->
alert('Hello, '.$form->get('name'))
        ->
execute();
}

The Revelation

When all parts of your application simply do their job, building a higher-level code becomes a joy.

You are now familiar to how the core part of Agile Toolkit works. Given the flexibility and Object-Oriented design of the foundation, it is not difficult at all to imagine what kind of views you might be developing next. But before then, let's connect the "Views" with "Data Layer". This is the intersection between the UI logic and Business logic and the honour to integrate them goes to "Controllers".

Full Documentation on jQuery Chains Next: Controllers