MLM (Multi Layout Manager)
Nexacro Platform provides the Multi-layout Manager (MLM) feature to allow users to develop multiple layouts for one screen, making it possible to handle various devices with various screen sizes at once. A Form that composes an app can have multiple layouts according to screen sizes while the use of sub-layouts enables customized arrangements of inner components. The Step feature also can provide mobile devices with optimum screens.
Layout
A component that can have editable layouts must have a layout named "default." You can add further layouts in the process of creating a Form. After the creation, you can also add or delete layouts by or assessing the context menu opened from the design pane.
"default" layouts cannot be modified or deleted.
Icon | Description | |
---|---|---|
1 | Add Layout | Adds a layout |
2 | Copy & Add Layout | Copies the selected layout and adds it as a new layout |
3 | Delete Layout | Deletes the selected layout |
4 | Rename Layout | Renames the selected layout |
5 | View | Displays the information on defined layouts (You can select/deselect items including names, screens and sizes) Even if you choose to hide names, the default layout's name will not be hidden. |
Layout Toolbar
Nexacro Studio provides a toolbar that helps you select and edit layouts under a certain screen.
The toolbar shows three types of information.
Layout icons indicating screen types
(none, desktop, tablet, phone, desktop + tablet, desktop + phone, tablet + phone, all)
Layout name
Size (width x height)
Tooltips appearing over the layout tabs give additional information.
screenid
stepcount
stepindex
description
You can edit a certain layout by selecting the relevant layout tab on the toolbar.
Div, PopupDiv, Tabpage Layout
Div, PopupDiv and Tabpage components basically follow the layouts of their parent Forms rather than having their own layouts. However, you can change the component arrangements inside them by double-clicking them or by right-clicking to open a context menu and selecting [Edit].
In a case where a Form is liked to those container components through the url property, Nexacro Studio will open the editor to allow you to edit the linked Form.
Layout Tooltip
If a Form is connected to a component through the url property, Nexacro Studio will provide you with the relevant layout information in the form of a tooltip in the design mode. If components overlap, the studio will provide the layout information on the all overlapping components simultaneously.
Property Values in Different Font Styles
Color | Indicated information |
---|---|
Bold | Edited in the default layout |
Blue | Edited in added layouts (Values are displayed in blue only when you select the relevant layout.) |
Initialize
In some cases, initial property values entered by users must be changed according to the switch in layouts. Such values can be managed in Init Info. You can apply This function only to few of the whole properties, excluding the ones related to layout information.
You cannot confirm the implementation of the Init Value feature in the editing process. You can do it only when you actually execute the relevant application.
Step
Step is a function which can develop pages that consist of several steps in one Form. When you control the stepcount
property value, the step will appear as shown in the figure below.
Call-out | Description | |
---|---|---|
1 | Add Step | Adds a step page. The value of the stepcount property will increase by 1. |
2 | Delete Step | Deletes a step page. The value of the stepcount property will decrease by 1. |
3 | Add/Delete Step | You can change the number of step pages by clicking the buttons. In addition, you can specify the number of step pages by typing a number in the input box. |
stepcount
Indicates the step area currently being edited. The edited area may change depending on the location of the mouse pointer.
Each step area is indicated by the blue dotted line.
Even if there are several steps, the Form’s size does not change. At runtime, only one step is visible with the step changing according to the user interaction.
If you change the value of the positionstep property of a component while the component is selected, the component will move to the given step.
If the value of positionstep is out of the step’s boundary, the value will be treated as 0.