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.
Fluid Layout
type: "horizontal" | "vertical"
In a Fluid Layout environment, when the type property is set to "horizontal" or "vertical," the added Layout will not allow drag operations or changing component positions using the Layout Order Editor.
In a Fluid Layout environment, when the type property is set to "horizontal" or "vertical," the added Layout will not allow drag operations or changing component positions using the Layout Order Editor.
For example, if you want to change the position of a Panel component (Panel00) within a Div component in the added Layout (Layout0) to the right, select the Panel component and change its layoutorder property to 1.
type: "table"
In a Fluid Layout environment, when the type property is set to "table," you can change the position of components by dragging. When changing the position of components, the tablecellarea property value is modified, allowing changes in all layouts.
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
To place a component, drag it over the Div component area, and a bold blue line will show the location where the component will be placed.
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 the container component and choose "Layout Order Editor" from the context menu.
2
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.
3
Click the [+] button to add a layoutorder item and set the value to 1.
4
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.
5
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.
When a container component has a Panel component
When a container component has a Panel component, if you select the "Show panel items" icon in the Layout Order Editor, the components corresponding to each Panel Item will be displayed.
For example, place 2 Panels inside a Div component, and place an Edit and a Button component in each Panel.
When the Layout Order Editor is run, only the two Panel components are displayed.
To check and adjust the positions of the components within each Panel, click the "Show panel items" icon.
A list of components corresponding to the Panel Items will also be displayed. The order in which they appear is based on the placement order of the components within the Div component, so changing the order of the Panel Items will not affect the arrangement of components within the Panel.
When using the tracker for placement, the top label can be checked to see which component the new one will be placed under. If placed within the Div component, the Div component label becomes active, and focus is shown across the entire Div component area. If placed within the Panel component, the Panel component label becomes active, and focus is shown only within the Panel component area.
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.