Improve this Doc

User Interface

Behind the simple facade of the PHP objects, Agile Toolkit hides a flexible and robust implementation of User Interface based on best web development practices.

If you have only experienced Agile Toolkit (older versions) for the purposes of admin system, you will be thrilled to learn that Agile Toolkit is well suited for the most demanding UI practices.

Consider the following code on your page:

$menu = $this->add('Menu_Vertical')->addClass('atk-col-2');
$menu->addTitle('Customer Interaction');

$m_users = $menu->addMenu(['Customers', 'icon'=>'smile']);

$m_users->addItem(['Users',       'icon'=>'users'],      'users');
$m_users->addItem(['Purchases',   'icon'=>'money'],      'purchases');
$m_users->addItem(['Subscribers', 'icon'=>'chart-line'], 'subscribers');
$m_users->addItem(['Plans',       'icon'=>'basket'],     'plans');

$new_comments = "27"; //should be dynamic, set as static here to show functionality
$menu->addItem(['Comments','icon'=>'chat-1', 'badge'=>[$new_comments,'swatch'=>'red']]);
$menu->addItem(['Statistic', 'icon'=>'chart-bar', 'icon2' => 'export-1']);
_images/menu-ui-example.png

Menu in action

With just about 10 lines of PHP code thanks to abstraction, you achieved the following:

  1. Made use of modern responsive CSS framework
  2. Took advantage of Fontello icons
  3. Created cross-browser standard-compliant HTML5
  4. Assigned click and hover behaviour
  5. Placed your widget at the right place in your app
  6. Added JS injection protection for $new_comments
  7. Ensured that your code will work with any Agile CSS Theme
  8. Used solution based on JADE and LESS CSS
  9. Cleverly set ID tags to your objects
  10. Used template engine
  11. Ensured that your menu labels can be localized

Tip

Agile Toolkit allows you to use PHP Objects to build user Interface out of blocks. You can tweak existing views, create new ones and share.

UI Fundamentals - Hierarchy of detail

There are some things which you can do with the menu above, sucha as add sub-menus and assign icons. Some other things are however not supported by standard menu. You wouldn’t be able to fit 2 icons on the left of menu.

Usually those limitations are set to keep developers from doing poor choices when it comes to UI design. There are steps however to make any imaginable change possible and well integrated into the toolkit:

  1. Add more classes to your menu with View::addClass
  2. Use JavaScript binding with View::js and jQuery.
  3. Supply customized template through 4th argument of AbstractView::add
  4. Extend view class and redefine View::defaultTemplate
  5. Manually interract with GiTemplate through template property.
  6. Create your own Agile CSS Theme and tweak the look.
  7. Write your own HTML and create a new view.