Position
The location of Forms and components on Nexacro Studio can be designated by setting the property values of left, top, right, bottom, width, and height. For each property value, you can choose one among absolute length unit ("px"), percentage unit ("%"), and relative length units ("em", "rem").
Basic Properties
As seen in the below picture, there are six basic properties related to positions: left, right, width, top, bottom and height. You can specify four values out of the six properties.
You can select the unit for position-related properties in the Properties pane. Absolute length unit ("px") and percentage unit ("%") are set based on the parent component, while relative length units ("em", "rem") are set based on the processing criteria for those units. If PositionBase is set, relative length units will not be supported, and the setting will be relative to the relevant component.
In the case of Form, Mainframe, and Childframe, the width and height actually used can only be specified in pixels.
For a Form, its left and right position values are fixed at 0. Therefore, you can only change the width and height values.
Two of the component's left, right, and width properties, and two of the top, bottom, and height properties must always be set.
If you select a component and select one of the previously set property items in the property window and delete the property value (or select Remove Property Value item from the context menu), it is replaced with another property, and the replaced property value is automatically converted and set.
When deleting the left property value, set the right or width property value
When deleting the top property value, set the bottom or height property value
When deleting the width property value, set the left or right property value
When deleting the height property value, set the top or bottom property value
When deleting the right property value, set the left or width property value
When bottom property value is deleted, set top or height property value
If one of the left, right, width, top, bottom, height property combinations is forcibly cleared and saved in the Source tab, the component may not be displayed in the Design tab.
Tracker
When you select a component, the relevant tracker is indicated in red (or blue) according to the position property.
Tracker-applied image | Properties |
|---|---|
left, top, width, height | |
left, top, right, bottom | |
left, top, width, bottom | |
left, top, right, height |
A PositionBase tracker appears at the center of a component unless the value of the component's positionstep property
If you select more than one component, only the trackers around the last-selected component will be filled with colors while other trackers are empty. In this case, the last-selected component will serve as the base for applying the Align, Space, Size, Position or Arrange features, which are all located in the menu [Design].
min-, max- and fittocontents Properties
You can set the minwidth, minheight, maxwidth or maxheight property to specify the minimum or maximum value of a component's height or width. If you set those properties, their values will override the values of the width and height properties when width and height exceed min- or max- properties.
You can set the fittocontents property to adjust the size (height and width) of a component so that it fits onto its contents (text, image, etc.). For example, you can resize an ImageViewer component according to the size of the image specified as a value of the image property.
The below order indicates the priority when more than one of those properties are set simultaneously.
minwidth > minheight > maxwidth > maxheight > fittocontents
For example, let us assume that you specify a 400x400 image as a value of the image property for a 300x300 ImageViewer with the maxheight property set to 350. If you set the fittocontents property in this case, the height of the ImageViewer will be 350.
The minwidth, minheight, maxwidth, maxheight, and fittocontents properties will materialize when the app is executed. If you want to realize those properties in the design mode of Nexacro Studio, you should select the relevant component and then select the menu [Fit to Contents], which can be found in the command bar (Design > Fit to Contents), toolbar or context menu.
If you execute an app without having performed the [Fit to Contents] feature in Nexacro Studio, the size of the relevant component may be seen differently between in the design mode of the studio and in the actual screen where the app is running.
The minwidth, minheight, maxwidth, maxheight, and fittocontents properties will be applied when the Form is loaded or when you set the values of those properties. When the component's contents are dynamically resized, therefore, the change will not be applied automatically.
PositionBase
You can arrange a component based on another component that has the same parent. If you have a parent component (Form, Div, etc.) as a base, you have to calculate all the distances between the parent and each internal component when you arrange a certain component. If you have a child component as a base, however, you can arrange components easily just by setting the gaps between components.
In the below picture, the top three buttons on the first row are arranged based on the parent component. In this case, you need to consider the width of the Button00 and the gap between the Button00 and Button01 to calculate the value of the Button01's left property—which is 183. By contrast, the Button01 on the second row is arranged based on the Button00 on the same row. In this case, you need to know just the gap between the Button00 and Button01 to specify the value of the Button01's left property; the value is like "Button00:28".
Restrictions
You cannot set a component as a base if the component's parent is different.
You cannot set a component as a base if the value of the component's positionstep property is different.
If a component's positionstep is set to -1—which means the component is a fixed component—the component cannot be the base of another component. At the same time, it cannot have another component as its base.
If you set Component A as the base of Component B, the Z-order value of A must be lower than that of B. Otherwise, the alert as shown in the below picture will appear to ask you whether to change the Z-order.
In the cases of the first three restrictions—positionstep is set to -1; different parent; and different positionstep value—PositionBase properties will not be activated in the Properties pane. Moreover, the PositionBase properties of a component whose Z-order value is higher will not be activated either.
PositionBase tracker
If you select one component, a PositionBase tracker, which takes the form of a four directional arrow, will appear at the center of the component. To set its base component, drag the tracker to a target component. Then, a prompt box will appear to allow you to set exact PositionBase values before you finish setting the base component.
1
Select a component and then press-and-hold its PositionBase tracker with a mouse.
2
Drag the tracker to the target component. If the target component can be designated as a base, its background color will change.
3
Determine which positional properties will be connected to the base component when a prompt box appears. The prompt box presents the properties that can be selected, which vary depending on the direction the tracker is dragged. Select the check box in front of the property that you want to edit.
The below table shows the properties that can be selected, which vary according to the directions the tracker is dragged.
top, left | top | top, right |
left | Component | right |
|---|---|---|
bottom.left | bottom | bottom, right |
4
After the completion of the setting, a solid line will be used to show the relation between the two components when the connected component is selected.
When the base component is selected, a dashed line will be used.
No line will be used when no component is selected.
Removing a connection
To remove a connection, select the line of the relation on the Form Design pane and press the Delete key. Otherwise, right-click the line and select [Delete] from the context menu. In another way, select the connected component and delete the values of PositionBase properties.
If you change the value of the positionstep property or Z-order, the relevant component's relation with its base component will also be removed. In these cases, an alert box will appear to present the PositionBase relation that will be removed. If you proceed with the change, the Output pane of Nexacro Studio will show the result of removing the PositionBase relation.
Position Editor
To open Position Editor, right-click a component to open a mini-toolbar and select the [Position Editor] icon illustrated in the below picture. Otherwise, access the menu [Design > Position Editor].
In the editor, you can change position properties of the selected component based on its parent component.
If you select [Use anchor position], you can change position properties with fixing two of them. In the below picture, the left and top properties are fixed, and you cannot delete those two properties' values.
Guides
You can adjust the options related to guides at [Tools > Options > Form Design > Guide]
Ruler
To assign layouts easily when designating locations on the Form design, the ruler unit can be either pixel unit (px) or percentage (%).
When a mouse cursor moves within the Form design panel, the position of the cursor is indicated on both rulers.
Guide Line
The Guide Line function is included with the Ruler and allows the developer to make vertical/horizontal lines wherever desired to help in aligning components.
Create a guide line by clicking a spot on the ruler. Move a guide line by selecting and dragging it with the mouse. Delete a guide line by selecting it and dragging and dropping it out of the Design Window or double-clicking on the inverted triangle on the guide line.
If a Form has two or more layouts, each has its own guide lines. In addition, guide lines will remain unchanged even if you exit Nexacro Studio.
If you fit components in between two guide lines, the component sizes will change according to the direction either guide line moves.
Background Grid
The background of the Form design panel features a Grid to allow users to identify component layouts with the naked eye. The Grid size will differ according to the measurement units of the rulers. The below pictures represent the four Grid patterns.
Dot | |
Grid | |
DotGrid | |
Tile |
The patterns of a background grid will be displayed according to its settings without being influenced by the measurement units of the rulers.
Snap
Use the Magnetic function to make minute adjustments automatically if you put other components or options close to the DotGrid. The Snap function can be activated based on the option value on the [Tools - Options - Form Design] menu for DotGrid or other components.
The Snap function can be overridden by pressing ALT while moving components.