.. index:: Scolvo project, UI elements ****************************************** UI Elements ****************************************** Scolvo Development Platform clients (Android app, iOS app and Webapp) are based on UI elements and user interactions. This page gives an overview on the usually used elements and their nature. We describe in detail following UI element groups: - Menu system - Pages, page layouts - Lists - Buttons - Input fields and Labels - Popup windows - Notifications - Layout elements (Containers and Spacers) Menu system ========================= Every client application starts with the *menu page* - after a successful user login - where the authorized menu items are visible. The menu items drive the user workflows and let the logged-in user to use the feature set of the implemented application. The menu items can show a specific page or execute custom business logic. A menu item can have a text described in all supported language dictionary files with the same keys. You can see more details in :ref:`Menu` API page or in :ref:`Menu Structure lesson` page. Example menu structure from Webapp client ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ In our example there are 3 menu items: Sights (defaults), Shops and Restaurants, where texts are defined for all menu items. .. image:: images/ui_elements_menu_items_webapp.png :width: 600 :alt: The menu system in **browser** :class: with-border Example menu structure in mobile app ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Using the same example the UI in the mobile app is as below: .. image:: images/ui_elements_menu_items_android.png :width: 200 :alt: The menu system in **mobile app** :class: with-border Pages, page layouts ========================= Every UI use-case is implemented using a Page UI element. To show a page usually a menu item or a clickable page element (for example for opening modal pages) can be used. This is usually a Button element or a List Item element. You can see more details in :ref:`Page` API page or in :ref:`Page navigation lesson` page. Lists ========================= One kind of the main use cases to start the workflow on a list, where many relevant items are shown, and one can be selected for further operation. Usual requirement to have pagination and filtering. The filtering can be quick filtering on listed items or query filtering used when retrieving data from local database. Supported list types are: - Grid list (deprecated, only supported in Webapp), - Multiline list (see details on :ref:`Multiline list template lesson page `), - and Card template list (see details on :ref:`Card template list lesson page `). **The Grid list in Webapp** .. image:: images/ui_elements_list_grid_webapp.png :width: 600 :alt: The Grid list in **Webapp** :class: with-border **The Multiline list in Webapp** .. image:: images/ui_elements_list_multiline_webapp.png :width: 600 :alt: The Multiline list in **Webapp** :class: with-border **The Multiline list in mobile app** .. image:: images/ui_elements_list_multiline_android.png :width: 200 :alt: The Multiline list in **mobile app** :class: with-border **The Card template list in Webapp** .. image:: images/ui_elements_list_card_webapp.png :width: 600 :alt: The Card template list in **Webapp** :class: with-border **The Card template list in mobile app** .. image:: images/ui_elements_list_card_android.png :width: 200 :alt: The Card template list in **mobile app** :class: with-border Buttons ========================= The Button is a main element for UI actions, it can hold text or icon (or both) from the dictionary and the *template* attribute defined in the *button* element. Details and examples can be seen in Lessons section (e.g. on :ref:`Component communication page `). Input fields and Labels ========================= The appropriate component for a user input is the *inputField*. An *inputField* can hold *label* and *defaultText* in the dictionary files, *template* and *inputType* attributes in the element definition. Details and examples can be seen in Lessons section (e.g. on :ref:`Component communication page `). A *label* component can place a text to the UI according to the project needs: *defaultText* in the dictionary and *template* in the *label* element definition. Popup windows ========================= It is many times required to show a popup window for confirmation or other purposes. This can be done simply defining a *page* object where the *template* attribute of the element is defined as "popup". **Popup window in Webapp with dark theme** .. image:: images/ui_elements_popup_webapp.png :width: 600 :alt: Popup window in **Webapp** with dark theme :class: with-border **Popup window in mobile app** .. image:: images/ui_elements_popup_android.png :width: 200 :alt: Popup window in **mobile app** :class: with-border Notifications ========================= To give UI feedback to a user action a specific UI functionality can be used: :ref:`createShortToastNotificationTargetEvent()`. **Notification in Webapp** .. image:: images/ui_elements_notification_webapp.png :width: 600 :alt: Notification in **Webapp** :class: with-border **Notification in mobile app** .. image:: images/ui_elements_notification_android.png :width: 200 :alt: Notification in **mobile app** :class: with-border Layout elements (Containers, Tab containers, Fragment containers, IFrames, Fragments and Spacers) ================================================================================================== To be able to group the UI elements and place them as required for the use-cases the SVM supports *container* supporting vertical, horizontal, buttonGroups, tabs, iFrames, and fragments (on-the-fly added component structures) and *spacer* elements to precisely define the distance between UI elements. The example below contains vertical and horizontal containers, where tab containers and iFrame type containers are also used: **Containers in Webapp** .. image:: images/ui_elements_container_webapp.png :width: 600 :alt: Containers in **Webapp** :class: with-border .. code-block:: scolvoscript :caption: Definition of the above structure :linenos: page ExamplePage { layout: vertical; template: fullscreen; container DisclaimerContainer { layout: vertical; label MessageModificationDisclaimer { template: bodyCopy1CondensedSecondary; } } container InfoContainer { layout: horizontalButtonGroup; label InterpreterBuildResult { template: bodyCopy1CondensedSecondary; } } container Labels { layout: horizontal; label SelectedFileLabel { template: bodyCopy1CondensedPrimary; isBold: true; } spacer { span: 10; } label SelectedFileContent { template: bodyCopy1CondensedSecondary; } } container CodeAndViewContainer { layout: horizontal; span: 0; container CodeContainer { layout: vertical; span: 0; inputField EditorContentInput { inputType: codeEditor; span: 0; } container ActionContainer { layout: horizontalButtonGroup; button EditorCancelButton { template: secondaryMedium; } button EditorSaveButton { template: primaryMedium; } } } spacer Spacer { span: 20; } container ClientTabContainer { layout: tab; template: normal; } spacer Spacer { span: 20; } container DocumentationContainer { layout: vertical; fragmentContainer DocumentationFragmentContainer {} } } } ..