User interface generation

If you're already familiar with form display, this part of Jet will be familiar to you. It's basically the same thing, exactly the same principle and virtually identical functionality.

Only the UI is not focused on displaying forms, but as the name suggests it is about unifying and facilitating the display of other UI elements that are not form-based. That is buttons, data grids, icons, user messages and so on.

But if you're not familiar with forms, let's demonstrate and recap. Using them in view is simple and involves creating instances of the appropriate objects, setting them up, and simply converting them to a string. Let's say we need to generate a modal dialog box with a number of other UI elements. Let's do it like this:

use Jet\Locale;

$dialog UI::dialog(
titleTr::_('Example dialog'),

<?=UI::button(Tr::_('Show dialog'))


    <p><?=UI::localeLabel( new Locale('cs_CZ') )?></p>

    <p>Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Etiam quis quam.</p>



It is also important to remember the identical principles that apply to form display:

  • Jet (meaning the Jet library) doesn't actually display anything itself. It just provides an interface (in terms of the MVC paradigm, it's actually a Model) to display everything in view scripts.
  • All view scripts are part of the application space. This means that the view is completely under your control. Of course, the sample application includes ready-made view scripts that you may or may not use. Thus, even the fact that the sample application uses the Bootstrap framework and the Font Awesome icons is nothing definite and fixed. You can make your own view using a completely different CSS framework, or purely based on your CSS and HTML.
  • The UI view system can do a lot more things than the demo. This means you can fully control everything, change everything, pass HTML tags with attributes, have completely unique view scripts for certain elements, and so on.
  • Despite the unlimited flexibility of the view, it remains a unified interface. In simple terms, this means that you can completely "rebuild" the view, but the UI elements are still defined the same way in the application.
  • The purpose of this system is to unify the form of the user interface in the application and at the same time to facilitate and unify the work in its creation.

Renderer - what is it?

Renderer is the basis of every UI element. So we can say that every UI element is also a renderer. (This is different from forms, where the renderer is a subentity of the form element).

Thus, each UI element inherits either from the Jet\UI_Renderer_Single class or Jet\UI_Renderer_Pair and both of these classes inherit from a common parent class Jet\UI_Renderer.

Some elements may consist of more than one element. This applies, for example, to Jet\UI_dataGrid. However, each sub-element is again a rederm and thus inherits from one of the specified classes.

Renderer a view

We said that the renderer is the model by which view displays the element. Now let's show exactly how to do that.

I assume you already know how view works in Jet. So I'll leave out the full details here.

As you know, for view to work, it needs these basic things:

  • Root directory where to look for view scripts
  • Name of the view script to be displayed
  • And of course some data to show what the view is supposed to show

Root directory of view scripts

Like the forms system, the UI system also assumes that this directory is set up with system configuration, specifically, for example, as follows:

//... ... ...
public static function initMVC_Router $router ): void
//... ... ...
SysConf_Jet_UI::setViewsDir$router->getBase()->getViewsPath() . 'ui/' );
//... ... ...
//... ... ...

I have deliberately used a piece of the MVC base initializer as an example, which is the appropriate place to do this setup.

But of course, it is not always necessary to use the whole MVC system and the root directory can be simply and easily used as follows: SysConf_Jet_UI::setViewsDir$some_dir.'ui/' );

View directories in the sample application

You have probably already noticed that there are four directories with view UI scripts in the sample application:

  • ~/_installer/views/ui/
    UI of microapplication installer
  • ~/_tools/studio/application/views/ui/
    UI of Jet Studio tools
  • ~/application/bases/admin/views/ui/
    UI of administration
  • ~/application/bases/web/views/ui
    UI of the sample website

Why this is so is described in the forms display chapter.

View Script Name

The principle is almost the same as for forms. The only difference is that each element already has predefined view script names and unlike forms, these do not need to be set.

However, it is also true here that the system configuration is used, specifically SysConf_Jet_UI_DefaultViews.

Class Jet\UI

The Jet\UI class plays a special role in facilitating the use of the UI generator. Let's see how it would be necessary to use renderers without it. For example, like this:

use Jet\Tr;

$btn = new UI_button_edit(Tr::_('Edit something'));
$btn->setUrl$some_edit_url );


Which really isn't very comfortable ....

Sure, you can shorten it like this:

use Jet\Tr;

echo (new 
UI_button_edit(Tr::_('Edit something')))->setUrl$some_edit_url );

But that's still not it... Although such use is of course possible and there is nothing wrong with it in principle.

However, the common use is this:

use Jet\Tr;

UI::button_edit(Tr::_('Edit something'))->setUrl$some_edit_url );

Prepared elements

Here is the list of elements and their renderers that Jet has in the base.

Element Renderer
Badge of a certain color scheme. Jet\UI_badge
A general button that can (and should) be further configured. Jet\UI_button
Predefined "Create" button. It has a predefined color and icon. Jet\UI_button_create
Predefined "Delete" button. It has a predefined color, icon and label. Jet\UI_button_delete
Predefined "Edit" button. It has a predefined color, icon and label. Jet\UI_button_edit
Predefined "Back" button. It has predefined color, icon, label and URL. Jet\UI_button_goBack
Predefined "Save" button. It has a predefined color, icon and label. Jet\UI_button_save
Complex element for data listing. Jet\UI_dataGrid
Subpart of the data listing element and also the data column display column definition. Jet\UI_dataGrid_column
Subpart of the data listing element. Jet\UI_dataGrid_body
Subpart of the data listing element. Jet\UI_dataGrid_footer
Subpart of the data listing element. Jet\UI_dataGrid_header
Dialog - more precisely modal dialog window Jet\UI_dialog
Icon Jet\UI_icon
Flag of a certain locale Jet\UI_flag
Name of certain locale Jet\UI_locale
Title of certain locale Jet\UI_localeLabel
A system for displaying user messages (e.g. after some operation). Jet\UI_messages
Represents and displays the message within the user message system. Jet\UI_messages_message
Displays navigation in the form of tabs. Jet\UI_tabs
In tab navigation, the tab itself represents the. Jet\UI_tabs_tab
Displays the element in the form of switchable tabs Jet\UI_tabsJS
Within the switchable tabs, it represents the tab itself. Jet\UI_tabsJS_tab
Within switchable tabs, it represents the contents of the tab. Jet\UI_tabsJS_content
Displays navigation in a tree structure (for example, a tree of directories, pages, and so on). Jet\UI_tree
Previous chapter
Next chapter