Introduction

The default system for building desktop panel views UI in Innomatic is the Web User Interface (WUI).

With WUI you don’t directly manipulate HTML; instead, HTML is created for you by a composition of WUI widgets.

All Innomatic desktop panels must use WUI to build their layout, in order to retain the same look and feel and adhere to the style guide.

Innomatic supports WUI themes for customizing the layout of the whole desktop (styles, icons, colors).

These slides only outline the main concepts for building WUI interfaces. The application example that comes along with this training contains commented code with more explanations and cases.

WUI structure

A WUI based layout is composed by a hierarchical tree of nested widgets.

There are two types of widgets:

• Containers: a container is a widget supporting children widgets;
• Widgets: a standard widget (leaf in the hierarchical tree).

Some of the WUI widgets also provide form functionality.

You can build complex desktop interfaces by combining multiple containers and widgets.

Applications can define new WUI widgets and containers.

WUI widgets

A widget is a PHP object that builds the HTML code for a UI element.

Widgets should have a name assigned (otherwise a default one will be assigned) and may accept arguments.

$label = new \Shared\Wui\WuiLabel(
  ‘mylabel’,
  [‘label’ => ‘Test’, ‘bold’ => ‘true’]
);

WUI containers

A container is like a widget but it also supports adding children, e.g.:

$group = new \Shared\Wui\WuiHorizgroup(‘mygroup’, [‘width’ => ‘100%’]);
$label = new \Shared\Wui\WuiLabel(‘mylabel’, [‘label’ => ‘Test’]);
$group->addChild($label);

WUI events

The web user interface is event driven. An event may contain one or more messages that are dispatched (routed) to the right view/action.

Views and actions have their own dispatchers (called “view” and “action”), so you can send a message both to the view and an action.

There are various event types in WUI:

• HTTP GET/POST requests (reloading the page)
• Ajax calls
• Javascript events

WUI forms

WUI supports forms.

Form elements are normal widgets that must be children at some level of a “form” container:

$form = new \Shared\Wui\WuiForm(‘task’, []);
$string = new \Shared\Wui\WuiString(‘name’, [‘disp’ => ‘action’, ‘value’ => ‘My test’]);
$form->addChild($string);

Form elements must declare the target dispatcher name (view or action) in the “disp” argument.

Main widgets

The full list of available WUI widgets with their APIs and attributes is available at the WUI Widgets reference page.

Some of the most common widgets:

• Containers: grid, table, horizgroup, vertgroup, form, toolbar, tab
• Widgets: button, label, link, tooltip, image
• Forms: checkbox, string, text, radio, listbox

WUI XML

WUI widget structures can also be defined using nested XML tags that are automatically converted to WUI objects, using the standard WuiXml widget:

$xml = ‘<vertgroup><!-- this is a container -->
  <children>
    <label><!-- this is a widget -->
  <args>
  <label>My label</label>
      <bold>true</bold>
      </args>
    <label>
  <label><!-- this is another widget -->
  <args>
  <label>Other label</label>
  </args>
  <label>
  </children>
</vertgroup>’;
 
$wui = new \Shared\Wui\WuiXml(‘xml’, [‘definition’ => $xml]);

Panel views WUI XML templates

When using WUI XML, you can mix your XML inside the PHP code.

However you should separate XML text from the panel view PHP code; Innomatic panels supports view template files defined in WUI XML format.

A template file is checked for each view inside the templates folder of the panel, e.g.:

domain/basicapp-panel/templates/default.xml.php

WUI XML templates are simple PHP scripts containing only XML plus pure presentation logic in PHP, while variables and objects are defined inside the view methods using the tpl attribute of \Innomatic\Desktop\Panel\PanelViews:

public function viewDefault($eventData) {
  $this->tpl->set(‘hello_world’, $eventData[‘mytext’]);

Next: Step 8: Desktop public files