Introduction

The panel UI is composed by one or more view, e.g. a home view with a list of items, a new item view, an item operation view, and so on.

Each one of these views is implemented as a method inside the panel views file. Such methods must be called “view” + “view name”, e.g. “viewDefault()”.

Every panel must implement at least the “default” view, that is the home view for that panel and also the default one when no view has been specified.

View methods should accept the event data argument, containing input from the UI (e.g. view options).

View code example

Simple example of a view:

class BasicappPanelViews extends \Innomatic\Desktop\Panel\PanelViews
{
    public function update($observable, $arg = '’) {}
    public function beginHelper() {}
    public function endHelper() {}
 
    public function viewDefault($eventData)
    {
        echo ‘Main view’;
    }
}

Inside the view methods you build the UI for your panels, using the WUI framework (explained later). The underlying business logic (database queries, algorithms, etc.) should be kept in other layers of your application (e.g. in their own classes).

Panel view example

This is a panel view for editing tasks in the “Tasks” application.

The first two bars in the page header (blue bar and menu bar) are provided by the Innomatic Desktop, while the toolbar with buttons is provided by each panel.

Helpers

The panel view class supports a begin and end helper that are called just before and after a view is executed.

These helpers are useful for setting common interface parts and objects like panel localization catalog, top toolbar, bottom status bar, etc.

public function beginHelper() {
    $this->localeCatalog = new \Innomatic\Locale\LocaleCatalog(
        'example-basic-app::panel',
        $this->container->getCurrentUser()->getLanguage()
    );
}
 
public function endHelper() {
    $this->pageTitle = $this->localeCatalog->getStr('panel_title');
}

Next: Step 6: Panel actions