On Nexacro Platform, you can designate the location of forms or components by specifying the left, top, right, bottom, width, and height property values. Each property value can adapt either pixel unit (px) or percentage (%). Nexacro Studio provides such functions as Position Editor, Ruler, DotGrid (Dots in the background for layout arrangement) and Guidelines to support layout design.
Coordinate System
The coordinate system on Nexacro Platform makes use of four property values out of the following six values: left, right, width, top, bottom, and height.
<Button id="Button00" text="Button00" width="120" height="50" left="20" top="20"/>
<Button id="Button00" text="Button00" left="20" top="20" right="260" bottom="230"/>
<Button id="Button00" text="Button00" right="260" bottom="230" width="120" height="50"/>
Component Position Setting
When specifying component locations, you can use four property values out of the following six: left, right, width, top, bottom, and height. In case of forms, only width and height can specified.
You can easily change the property unit between pixel (px) and percentage (%). Once the property unit is changed, the value will change accordingly.
Position2 Unit Change
The percentage (%) unit can't be applied to forms. Only the pixel unit is used to specify the size.
When designating locations in the script, you can use the setter method as below. You can also set the unit. However, if the unit you designate is not available, pixel (px) is used.
this.Button.set_left(10);
this.Button.set_left("10px");
this.Button.set_left("30%");Form Design
Tracker
When selecting a component with the mouse, the tracker will be shown in red along the fixed side. The tracker shows how the component's property values are designated.
Tracker | Property Value |
|---|---|
| |
| |
|
Ruler / Dot Grid
Choose the unit (either pixel or percentage) for the ruler so that you can arrange the layouts based on the unit you prefer while designing the form.
Ruler Popup Menu
You can change the Dot Grid display mode by using Show Pixel Ruler / Show Percent Ruler on the context menu for the ruler.
Pixel Ruler / Dot Grid
Percent Ruler / Dot Grid
Component Resize Info
When you select one component and want to resize the component, the size information is displayed. The size unit is determined by the ruler unit.
Pixel Resize Info
Percent Resize Info
Position Editor
The position editor is provided for you to set the position information easily. The position editor can be executed on the mini toolbar that appears when selecting a component.
Form Design Minitoolbar
With the mini toolbar, you can revise frequently used style properties.
Position Editor
The values revised in the position editor will be reflected in the property values (left, top, right, bottom, width, and height) of the associated components.
Precautions about Position
When introducing an additional layout using the layout manager, components may not be visible if the layout's coordinates are specified only with left, top, right and bottom values.
For example, if you specify the location of the button component using left, top, right and bottom properties, the button is shown on the default layout normally.
However, on the additional layout, the designated right and bottom values exceed the size of the form. For that reason, the button is not shown on the additional layout. Given that the component's left and top locations are fixed, since its right and bottom property values are larger than the form, the button seems to disappear off the screen.