Features for 1.1

Agile UI released it's first stable version 1.0 on 24 Feb. We have invited various students and companies to look into this release and received quite positive feedback. We understand that the 1.0 is just a very first step and we need to include many other components.

For the version 1.1 we are inviting you to give feedback by looking through our planned feature-set and telling us if we have missed anything. Please send email to [email protected].

Grid

The "Grid" as we have it right now will be renamed into class "Table". A new class "Grid" will be created to implement what we call Grid. Next table compares various classes for data listing:

	Lister	Table	Grid
Extends	View	Lister	View
Template	User-defined	Tabular	Interractive Grid
Composition	none	none	Table, Buttons, Paginatior, Quicksearch
Default Root	<ul>	<table>	<div>
Proxy Methods	none	none	addColumn(), addColumns(), setModel()
Data Formatting	yes	yes	yes
Column Formatting	no	yes	yes
Interractive Columns	no	yes	yes
Expander	no	yes	yes

The "Grid" will also implement features that were listed for "AdvancedGrid" here: http://agile-ui.readthedocs.io/en/latest/grid.html#advanced-usage.

Grid Features

Paginator: Grid will come with automatic paginator, that will become visible when more than 50 rows are in the table. You can specify a different amount by using 'ipp' property. Setting it to false would disable pagination.

$grid->ipp = 20;

Pagination will be implemented as a separate View, which can also be used externally with Lister and Table.

Grid pagination will use AJAX for loading elements.

Toolbar will appear on top of Grid if you either have any quick-search fields defined or have added any buttons:

$grid->quick_search = ['name', 'surname'];

$grid->addButton('Test');

Toolbar and Pagination can also be injected.

Action Column

All views in Agile UI are based on objects. Grid/Table, however are different. They use "Column" objects to format individual cells, but for performance reasons they don't create object for each individual cell.

The release 1.0 of Agile UI included several Columns such as Link, Template and Status. With 1.1 we will add a new column type- Action.

Some examples for Action columns are provided here: http://agile-ui.readthedocs.io/en/latest/grid.html#action-column but once you define Action column, you would be able to interract with your grid rows.

As anything else in Agile UI, you can create your own implementation of Action Column or you could define more Actions that go inside standard Action column.

(Note: as someone pointed out, I have forgot to include "Expander" support, so I'll be making sure that it's also included in 1.1)

Table row-based JS methods

Our tables contain "data-id" in each row and it can be accessed through a JavaScript chain when performing row-specific operations, but to simplify that, we are adding two methods:

• onRowClick( .. ); - similar to on('click', 'tr') but will suppliment call with a "id=123" GET argument.
• jsRowID(); - will return jsExpression for $(this).closest('tr').data('id');

View Reloading

There are situations in life when you need to reload part of your UI. The beautiy of component framework is this action can be done automatically.

"Refresh that grid"

Simplest Reloading can be done by binding Button to reload a Grid:

$button->js('click', new jsReload($grid));

The implementation is quite simple, jsReload() will create Callback internally, that will would perform an individual render of a $grid if triggered, then create code to replace contents of a View with the new ones.

Two-panel Grid

As example, observe the two-pannel Grid. Left grid lists Countries, right one list Cities. Clicking on a country will refresh right grid with the appropriate contents.

The code:

// Build the UI, side-by-side Grids:
$columns = new Columns(2);
$t_country = $columns->addColumn()->add(new Table());
$t_city = $columns->addColumn()->add(new Table());

// Limit column height
$columns->addStyle('height', '200px')->addStyle('overflow-y', 'scroll');

$t_country->setModel(new Country($db));
$t_city->setModel(new City($db));

// Set up reloading call-back.
$js_reload = new jsReload([$t_city, 'callback'=>function($view, $data)) {
	// this code is called when reloading only, $view points to $t_city
  	$view->model->addCondition('country_id', $data['country_id']);
  
  	// Technically you can return a different view here ;)
  	return $view;
  
  	// execution / rendering will stop here
}]);

$t_country->on('click', $js_reload);

// supports GET or POST requests
$js_reload->use_POST = true;

// we can pass some data to our AJAX call
$js_reload->data=['country_id'=>$t_country->jsRowID()];

Obviously, given the relation, the above code can be simplified and encapsulated.

ColumnBrowser

Will be released as a separate component that that takes advantage of table reloading. It will be perfect if you need a multi-column display consisting of various related tables. Clicking table on the left will affect the contents of the next table. I am using the component example here to illustrate potential use of reloading.

$cb = new ColumnBrowser();
$cb->setModel(new Country($db));
$cb->addTable('Cities');
$t_agents = $cb->addTable('Agents');

$t_agents->onRowClick($agent_input->js()->val($t_agents->jsRowID()));

More JS Actions

Our implementation of JavaScript actions can be extended by adding more expressionable classes. We're planning to add things like:

• jsModal() - creates a modal dialog when triggered optionally including a call-back and various actions
• js

Actions can be easily integrated and asigned to any View like this:

$table->onRowClick(new jsModal(function($view, $data){
    $view->add('HelloWorld, '.$data['id']);
}));

Messages and few other UI views

We continue to add "Basic" views and this time will be adding "Messages" such as "Info" or "Warning". The purpose of those is to contain some short textual information.