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;
use Jet\Tr;
use Jet\UI;
use Jet\UI_badge;
$dialog = UI::dialog(
id: 'example-dialog',
title: Tr::_('Example dialog'),
width: 500
);
?>
<?=UI::button(Tr::_('Show dialog'))
->setOnclick("$('#example-dialog').modal('hide');")
->setIcon('pen')?>
<?=$dialog->start()?>
<p><?=UI::localeLabel( new Locale('cs_CZ') )?></p>
<p>Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Etiam quis quam.</p>
<p><?=UI::badge(UI_badge::WARNING, Tr::_('Warning'))?></p>
<?=$dialog->footer()?>
<?=UI::button(Tr::_('Cancel'))->setOnclick("$('#example-dialog').modal('hide');")?>
<?=UI::button_save()?>
<?=$dialog->end()?>
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 init( MVC_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;
use Jet\UI_button_edit;
$btn = new UI_button_edit(Tr::_('Edit something'));
$btn->setUrl( $some_edit_url );
echo $btn;
Which really isn't very comfortable ....
Sure, you can shorten it like this:
use Jet\Tr;
use Jet\UI_button_edit;
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;
use Jet\UI;
echo 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 |