Lycia with Material Design

Lycia is moving to Material Design.

This will have an effect on not only the look of your 4gl applications but on the runtime behavior and your development procedures as well.

This page summarizes the most significant differences between jquery Lycia and MD Lycia.

Application window

1. Window header, footer, and sidebar are always present with MD Lycia and cannot be removed by means of the 4gl code.

   You can remove them via css style sheets or js scripts.

   For example,

   a fragment of the js script

   window.top.document.body.classList.add('hidden-header-footer-sidebar');

   a fragment of the css style sheet:

   .hidden-header-footer-sidebar #qx-main-layout {

   padding-top: 0 !important;

   padding-bottom: 0 !important;

   }

   .hidden-header-footer-sidebar #qx-main-layout > header,

   .hidden-header-footer-sidebar #qx-main-layout > aside,

   .hidden-header-footer-sidebar #qx-main-layout > footer {

   display: none !important;

   }

2. By default, all applications created and run via MD Lycia have the topbar – the element containing title and toolbar buttons.

   This topbar cannot be removed.

   You can hide the title displayed at the topbar by a css style sheet.

Menus

With Material Design, all the menus get a button, Show / Hide all items, that allows collapsing and expanding all the menu groups at once.

This button appears for all the menus regardless of how they were created – by the corresponding widgets in Lycia Form Designer, by 4gl functions, or via ui methods.

In jquery Lycia, this button is absent:

 

With Material Design, you can add a sidebar with the shortcuts of the top-level menu groups for the menus created dynamically (by fgl functions or ui methods).

For this, you have to add the class name, md-sidebar, after setting the menu type:

Menu without a sidebar:

Menu with a sidebar:

The shortcut displays the image set for the menu group (if any) or two first letters of its title (if the image is absent):

Containers

Tab and TabPage

1. Arrow buttons are used to scroll through the open tabs. The buttons are enabled when the area is scrollable and disabled if there are too few tabs to scroll. The arrow buttons cannot be removed:

   

Widgets

Toolbar buttons

1. With MD Lycia, toolbar consists of two logical parts – navigation bar (= application bar) and drop-down menu (= overflow menu).

2. In the navigation bar, toolbar buttons are always rendered as icon-only (= without text).

3. In the navigation bar, default icon is used for toolbar buttons which dosn't have an icon.

4. 1-6 toolbar buttons are rendered to the navigation bar. 7+ toolbar buttons are rendered to the drop-down menu.

5. Toolbar buttons with the class expose are always rendered to the navigation bar.

More details are here.

Buttons

1. Image-only buttons in MD Lycia are always round.

2. Button text is capitalized by default.

   The case of the button text can be changed by the css style sheet via the style text-transform: none.

Properties

helperText, labelText, placeholderText

Some widgets have additional properties that allow setting their helper, label, and placeholder texts:

• helperText is used to specify the helper text = additional information about the input field itself.

  Associated widgets: Calendar, ComboBox, FunctionField, TextArea, TimeEditField, TextField

• labelText sets the label text = additional information about what end-users must enter to the input field.

  Associated widgets: Calendar, ComboBox, FunctionField, TextArea, TimeEditField, TextField

• placeholderText sets the placeholder text = text displayed by default to a TextArea or TextField.

Display console

MD console performs the same functions as the classic jquery console – displays the application output not redirected to other containers (like dialog boxes or form widgets).

Compare:

jquery Lycia:

MD Lycia:

 

The differences between MD and jquery consoles are these:

• MD console is always located at the bottom of the application window.

• Width of the MD console depends on the size of the application window.

  Height of the MD console can be changed by the user. Minimum height of MD console is equal to 3 lines.

• MD console can be expanded and collapsed by the user.

  

  When the MD console is collapsed, the last message is displayed to its header:

  

• The number of messages displayed to the MD console is given at its header.

  

• You can clear the MD console, when necessary.

  

All the features of the MD console are summarized in this video: