Core Concepts

Agile Toolkit and Agile UI is built by following the core concepts. Understanding the concepts is very important especially if you plan to write and distribute your own add-ons.


In any Agile UI application you would always need to have an App class. Even if you do not create this class explicitly, components generally, will do it for you, however the common pattern is:

$app = new \atk4\ui\App('My App');


Agile UI is developed to be easy to read and with simple and concise syntax. We make use of dynamic nature of PHP, therefore two syntax patterns are supported everywhere:

$app->add(new \atk4\ui\Button('Hello'));


$app->add(['Button', 'Hello']);

Method add() supports arguments in a various formats and we call that “Seed”. The same format can be used elsewhere, for example:

$button->icon = 'book';

We call this format ‘Seed’. This section will explain how and where it is used.

Render Tree

Agile Toolkit is allows you to create components hierarchically. Once complete, the component hierarchy will render itself and will present HTML output that would appear to user.

You can create and link multiple UI objects together before linking them with other chunks of your UI:

$msg = new \atk4\ui\Message('Hey There');
$msg->add(new \atk4\ui\Button('Button'));


To find out more about how components are linked up together and rendered, see:

Type Presentation

Several components are too complex to be implemented in a single class. Table, for example, has ability to format columns by utilising type-specific column classes. Another example is Form which relies on Field-specific FormField component.

Agile UI uses a specific pattern for those definitions, which makes overal structure more extensible by having an ability to introduce new types with consistent support throughout the UI.

Agile Data

Agile UI framework is focused on building User Interfaces, but quite often interface must present data values to the user or even receive data values from user’s input.

Agile UI uses various techniques to present data formats, so that as a developer you wouldn’t have to worry over the details:

$user = new User($db);

$view = $app->add(['template'=>'Hello, {$name}, your balance is {$balance}']);

Next section will explain you how the Agile UI interacts with the data layer and how it outputs or inputs user data.


By relying on the ability of generating Unique Name, it’s possible to create several classes for implementing PHP call-backs. They follow the pattern:

  • present something on the page (maybe)
  • generate URL with unique parameter
  • if unique parameter is passed back, behave differently

Once the concept is established, it can even be used on a higher level, for example:

$button->on('click', function() { return 'clicked button'; });


Building on the foundation of Callbacks, components VirtualPage and Loader exist to enhance other Components with dynamically loadable content. Here is example for Tabs:

$tabs = $app->add('Tabs');
$tabs->addTab('First tab is static')->add('LoremIpsum');

$tabs->addTab('Second tab is dynamic', function($vp) {

As you switch between those two tabs, you’ll notice that the Button label on the “Second tab” reloads every time. Tabs implements this by using VirtualPage, read further to find out how:

Documentation is coming soon.