Agile UI

Agile UI is a web component framework that integrates with SQL, NoSQL or RestAPIs.

The motivation to build Agile UI is mainly in improving efficiency and reducing time to build a Web Application interfaces that are built arount CSS frameworks (Such as Semantic UI or Bootstrap CSS).

Agile UI in action

To start using Agile UI, you simply need to install dependencies by typing:

composer require atk4/ui

And then you can start using any of our beautifully designed and fully interractive components. Lets start with a Registration Form. You will need a basic model first (See Agile Data for more information):

class User extends \atk4\data\Model {
  public $table = 'user';
  function init() {
    parent::init();

    $this->addField('name', ['mandatory'=>true]);
    $this->addField('email', ['mandatory'=>true]);
    $this->addField('password', ['type'=>'password', 'mandatory'=>true]);
    $this->addField('is_admin', ['type'=>'boolean', 'default'=>false]);
    $this->addField('is_subscribed', ['ui'=>['caption'=>'Send me Newsletter']]);
  }
}

Creating Signup page in 20 lines of code

Next, you need to combine model above with your database connection and UI component. I will use the standard Form:

$form = new \atk4\ui\Form();

$db = new \atk4\Persistence_SQL($pdo);
$form->setModel(new User($db), ['name','email','password']);
$form->addField('terms', ['ui'=>['caption'=>'Accept terms and conditions']]);

$form->onSubmit(function($form) {
    if (!$form->model['terms']) {
        return $form->error('terms', 'You must accept ToS');
    }
    $form->model->save();
    return $form->success('Registration Successful');
});

The code will not output anything yet, however it will create an object $form that can either be further modified, rendered or added into another view. To only get HTML for the form use echo $form->render(), but I want to make my form into a part of a fully featured responsive web application:

$app = new App('Hello World');
$app->setLayout('Centered');

$app->layout->add($form);

echo $app->render();

Once you open your PHP file through the browser you'll see a beautiful application with a registration form, that uses JavaScript to submit itself, automatically display errors and take care of anything there is in the UI implementation. Once terms and conditions are accepted, new user data will be stored inside your SQL or NoSQL database.

Admin Interface in 10 lines of code

In Agile UI one View can rely on another and a more complex interactive components can be built. Place the next code snippet into a separate file dashboard.php to create an Admin interface.

$app = new App('Hello World Admin');
$app->setLayout('Fluid');
$db = new \atk4\Persistence_SQL($pdo);

$app->layout->menu->addItem('dashboard');
$app->layout->menu->addItem('sign-up', ['Sign-up Form Test', 'icon'=>'book']);

$app->layout->add(new \atk4\UI\CRUD())
  ->setModel(new User($db));

echo $app->render();

At this point you may have a few questions - how to add Admin authentication? How to store audit data? How to include CSR-token in form? How to send email to the user? How to upload images?

All of those and many other features can be added using our "add-on" system. Type this code inside console:

composer require atk4/auth

then on the line 4 add:

$auth = $app->add(new \atk4\auth\Controller());
$auth->setModel(new User($db), 'email', 'password')
  ->addCondition('is_admin', true);
$auth->check();

After next refresh you will be asked to provide username/password for to access your admin page.

The "add-ons" which are built for Agile Toolkit are typically designed to work out-of-the-box and make use of the standard layouts. You might have noticed that your name now appears in the right-top corner of your Admin / Fluid interface with your Gravatar photo and a drop-down for such actions such as changing your password or logging out.

Integration with other frameworks

We have made Agile UI very simple to integrate into any existing PHP framework. If your existing application is not built using a framework, you can still integrate Agile UI / Data just by following our step-by-step guide.

Remember - as long as Agile UI is installed, you'll be able to choose from a wide selection of components, add-ons and extensions. Agile UI is a great and efficient way to refactor your legacy application or build something new.


For Companies


Recent News

20 jan: Form finished

Finished implementation for Forms

6 jan: Callback Events

Implemented server-side PHP callbacks for jQuery

20 dec: jQuery chains

Implemented JavaScript and jQuery chain integrations, expressions and more

Full Release History