MLM (Multi Layout Manager)
Nexacro 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.
Fluid Layout
You can set the components to be placed automatically according to the rules without fixing the position of the components placed in the Form Layout. This can be used to implement a feature for dynamically adding the components or automatically changing the component arrangement method according to the screen size.
Setting component placement standards
In Form objects and container components (Div, Tab, View), you can set the default placement criteria in the type property of the Layout object or the type property of the Panel component.
Form object
You can change and create the Layout Type selection value in the Form Wizard or change the type property value in the properties window after creating the form. The type property is a layout object property and can be set for each layout.
Container component
When placing a component directly in a container component without connecting another form file, the type property can be set.
Panel Component
The default value for the type property is "horizontal."
Placing components (horizontal, vertical)
Here is an example of the Div component with the type attribute value set to "vertical”.
Select a components and move with the mouse
If you select a component to be placed and drag it over the Div component area, the currently selected type property information will be displayed on the design screen and the location where the component will be placed is shown in blue.
This can also be placed in the middle of an already placed component.
The location of the placed component can be changed.
Grouping and moving the components
The Layout Order Editor allows you to set the layoutorder property value of components as well as the layout order of components.
The Panel component does not support the Layout Order Editor.
You can change the order of connected components in the items property editor of the component.
The component's layoutorder property value is used to dynamically create a component and place it in a desired location. In the Layout Order Editor, you can change the position of multiple components at once by setting components to have the same layoutorder property value and changing the layoutorder property value.
1
Select a container component and select Edit from the context menu or double-click the container component to enter the editing mode.
2
Select Layout Order Editor from the context menu.
3
In the Layout Order Editor, select and move the Button component with the mouse to change the order.
If the layoutorder property value is not set, it is applied as 0.
4
Click the [+] button to add a layoutorder item and set the value to 1.
5
Select the Button component with the mouse and move it under the added layoutorder(1).
Confirm that the component is placed under the layoutorder(1) group.
6
Click on the layoutorder(0) item and change the value from 0 to 2.
Modifying the value will change the order of the layoutorder items and subcomponents.
Placing components (table)
Here is an example of the Div component with the type attribute value set to “table”.
Placing a component at a specific cell position
If you set the type property value to "table", the editing window is displayed with the default tabletemplate property default value (1 column, 1 row) applied.
Description | ||
|---|---|---|
1 | Reset Table | Click the table icon at the top left of the editing window to display the Reset Table window where the number of columns and rows can be changed. |
2 | Column editing | Right click to display the context menu for adding, inserting, or deleting the columns. When the column item is clicked, it switches to a editable mode and the value can be changed. Drag the border with the mouse to change the value. If the item value is in units of px or %, it is changed by 1, and if it is in the unit of *, it is changed by 0.5. |
3 | Row editing | Right click to display the context menu for adding, inserting, or deleting rows. When a row item is clicked, it switches to editable mode and the value can be changed. Drag the border with the mouse to change the value. If the item value is in units of px or %, it is changed by 1, and if it is in the unit of *, it is changed by 0.5. |
This is an example of the layout set with three columns and two rows. When you drag it to the Div component, a virtual table cell area is displayed and you can place it in the desired cell area.
If you check "Display table guidelines" in [Options > Form Design > Layout > Table Layout], the line dividing the table cell area and the value specified as the tabletemplatearea property value are always displayed.
When placing the Button component, if you adjust the size so that it spans over two or more cell areas, you can place the component as if two or more cell areas were merged (Becomes the selected state only when the area to be selected by dragging two or more cells is 50% or more of each cell area).
Regardless of the default size of the component, it is resized to fill the cell area (width and height property values are set to 100%). After placing the component, it can be resized.
In the case of container components such as Div, double click to display the editing screen where you can use the Reset Table feature which is available only it the editing mode.
Even when you are not in the editing mode, the guideline information is displayed for reference when the mouse cursor moves over a container component.
Add, insert, delete columns and rows
Columns or rows can be added, inserted, or deleted in the context menu.
Add
Add columns or rows to the last position.
When components are placed in all cells, if you want to add a component to a non-cell area, a window is displayed, asking whether to add the component after adding a row. If no row is added, components are added overlapping the last cell.
Insert
Inserts columns or rows before the selected column or row.
If a column or a row is inserted between the components spanning over two or more cell areas, the tablecellarea property value is changed to include the inserted column or row.
Delete
Delete the selected columns or rows.
When deleting a column or a row, if a component is placed in the corresponding column or row, a window is displayed asking whether or not to delete the component.
If a component is not deleted, the component may overlap or be placed in an invalid cell area depending on the position of the deleted component.
When deleting the last column or row
The component's tablecellarea property value becomes invalid and is placed to the right or the bottom of the table area.
If the size of the component is set in %, it will not be visible on the screen because there is no cell to refer to.
When deleting a column or row that is not the last
The tablecellarea property value of the component placed in the deleted column or row is maintained, and the tablecellarea property value of the components placed in the next column or row is moved up by one. Therefore the component in the deleted column or row and the component in the next column or row are overlapped and displayed.
When deleting a column or row that contains a component that spans over two or more cell areas
The tablecellarea property value is changed to fit the remaining cell area, not including the deleted columns and rows.
Placing components in the area set with the same cell name
You can set the same cell name for two or more cells and place the component in the area set with the cell name. The cell area with the same cell name must be in the form of a rectangle composed of consecutive cells.
1
In the properties window, click the button in the tabletemplatearea property item.
The Table Template Area window will open and display a simple example. Set the desired tabletemplatearea property value according to the set column or row. You can also copy and use the values in the example.
Enter the tabletemplatearea property value as "A A B" "A A B".
2
Place the button component.
When you drag it to the Div component, a virtual table cell area is displayed and the cell name is displayed.
3
If you press the Shift key while the mouse pointer is located on a specific cell, the cell with the same name is displayed as selected.
4
When you select a cell with the same name and click the mouse button, the component is placed in that area.
The tablecellarea property value of the component placed as such is set to the cell name. In the example above, the tablecellarea property value is "A"
Setting component placement standards and spacing
When placing a component on the screen, it is not placed from the starting position. Function buttons are placed on the right side of the screen at regular intervals to be easily recognizable.
Standards for placing components
If the type property value is “horizontal,” the horizontal axis becomes the main axis, and if it is “vertical,” the vertical axis becomes the main axis. The axis that intersects with the main axis is the cross axis. If the property value is “horizontal,” the vertical axis is the cross axis and if it is “vertical,” the horizontal axis is the cross axis.
If the property values of flexmainaxisalign and flexcrossaxisalign are not set, they are set to "start" as follows.
Setting the property values of flexmainaxisalign and flexcrossaxisalign to "end" and "center" will change the placement of the component. The order of placement will not change.
Setting the component spacing
This is what it looks like when the spacing property value is set to "5px" and the horizontalgap property value is set to 5. The spacing property sets the spacing between the layout container and the components. The spacing between each component is set with the horizontalgap property.
The spacing can be set in the flexmainaxisalign property instead of setting a specific value for the spacing.
flexmainaxisalign | Placement method |
|---|---|
spacebetween | (1) Place the first and last components at the start and end points of the main axis. (2) Set the remaining margin to the spacing between each component. |
spacearound | Divide the total margin by the number of components to set the space in front and behind the components. Spacing between the components is processed as twice the spacing between the layout container and the components. |
spaceevenly | Divide the total margin by the number of components + 1 to set the spacing between the components and the spacing between the layout container and the components. All intervals are processed as the same value |
Handling line breaks
If the component's flexshrink property value is not set, it is set to 1 by default. When the placed component exceeds the layout container area, the component is resized to prevent that.
However, if the component's width or height value is set in px and the flexshrink property value is set to 0, the component may exceed the layout container area. The scrollbar is displayed while running
If the flexwrap property value is set to "wrap", components that exceed the area of the layout container are broken and placed on the next line.
Setting the table cell spacing
When setting the tabletemplate property value, you can select one of three units: "px", "%", and "*". When setting the column and row by clicking one the Create Table button in the Table template Editor, each value is set to "1*".
If there are columns and rows that use "*" as a unit, the remaining margin is divided and set as the size. For example, if the tabletemplate property value is "1* 1* / 30px 2* 1*", the width of the first column is set to 30px, and the widths of the other two columns are set to 2/3 and 1/3 of the remaining margins.
To set the table cell spacing, there must be no column or row that uses "*" as a unit. In the figure below, the tabletemplate property value was set to "100px 100px / 30px 100px 30px" and the tablecellalign property value to "spacebetween spacebetween”
Resizing Based on Placed Components
Div and Panel components support the fittocontents property, which allows automatic adjustment of the width and height of the internal content area based on the component placed.