positiontype Property
As the position2 property has been added, the positiontype property also has been added to determine which property, whether position or position2, to apply to a component. The Properties pane of UX-Studio will deactivate either property that is not selected by positiontype.
You can set a default value of positiontype by accessing the menu [Tools > Options > Form Design > Position] in UX-Studio. A default value will be applied when you place a component in a Form. Apart from a default value, you can change the value of positiontype.
Position & Anchor
The position property is used to specify the position and size of a component displayed on the screen. You can specify the x and y coordinates of a component and then the component's height and width. Instead, you can specify the values of the left and top properties to define the distances between a component and its parent (Form, Div, etc.).
If the size of a parent component is fixed, you do not need to change the position and size of its child. If the size of a parent component is changeable, however, you need to readjust the position and size of its child. With the position2 property applied, you can use a percentage to define the position and size of a child in proportion to its parent. Therefore, the child component will be automatically resized when the parent is resized. However, this mechanism does not apply to the position property since it uses only a pixel as a unit.
Accordingly, the anchor property is used to enable a child component to respond to the changes in the position and size of its parent even if the child adopts position. anchor is used to determine whether to fix the distances between a component and its parent. The distances are defined by specifying the four properties: left, top, right and bottom.
The Properties pane of UX-Studio activates the anchor property only when the positontype property is set to "position". Although the value of anchor is affected by position2, this adjustment is made by UX-Studio internally to prepare for the change in the value of positontype.
default
The "default" value of anchor works the same as the "left top" value. with the x and y coordinates of a component fixed, the position-related properties will not change. Accordingly, the component will remain its original position even when the position or size of its parent is changed.
Values | Description |
|---|---|
default | It works the same as "left top". |
left top | The x and y coordinates of a component are fixed. The component is fixed in the same position and size regardless of the position and size of its parent. |
Anchoring left and top
Like the "default" value, the "left top" value will not change the x and y coordinates of a component. Meanwhile, the width or height of the component can vary according to the other values of anchor.
Since the x and y coordinates are fixed, components can overlap after the resizing of the parent if they are placed near.
Values | Description |
|---|---|
all | It works the same as the value "left top right bottom". The component will be resized according to the resizing of its parent. |
left top right | The width of the component will be readjusted according to the change in the width of its parent. The height of the component will not change. |
left top bottom | The height of the component will be readjusted according to the change in the height of its parent. The width of the component will not change. |
Changes depending on values
If you specify a certain side of a component as a value of anchor, it is like that the designated side is anchored to the same side of the parent. If you specify "left top", for example, the component will be resized depending on the other values of anchor, with the x and y coordinates of the component fixed. By contrast, the component will leave off the existing position if the left and top sides are not anchored.
The below picture shows the example where anchor is set to "right bottom". You can see the x and y coordinates of the component move in response to the resizing of the parent. The area in light red marks the original position of the component.
There are cases where a child component becomes smaller when its parent becomes bigger. If anchor is set to "left", for example, the left side of a component will be anchored while other sides are not, with the x coordinate fixed. Accordingly, even after the parent becomes bigger, the child will not grow to the bottom-right direction. As a result, the height will decrease since the component's y coordinate has moved lower.
The below table presents how other values—a component's x and y coordinates and its size—change according the values of anchor.
Values of anchor | x coordinate | y coordinate | width | height |
|---|---|---|---|---|
default (left top) | X | X | X | X |
all | X | X | O | O |
none | O | O | O (decrease) | O (decrease) |
left top right | X | X | O | X |
left top bottom | X | X | X | O |
top right bottom | O | X | X | O |
left right | X | O | O | O (decrease) |
left bottom | X | O | X | X |
top right | O | X | X | X |
top bottom | O | X | O (decrease) | O |
right bottom | O | O | X | X |
left | X | O | X | O (decrease) |
top | O | X | O (decrease) | X |
right | O | O | X | O (decrease) |
bottom | O | O | O (decrease) | X |
Position2 (added in the version 9.2)
position2 means the property that makes Position designated with rate of “%”. At UX-Studio, the editing functions related to Position2 like Ruler and DotGrid(dots shown at the bottom of the screen) are provided.
Coordinate Description
The coordinate of the existing position uses the pixel distance that is apart from the reference point as the coordinate information with the basis of the left and top of the screen.
Position2 added at V9.2 is a coordinate system which is introduced to overcome the expression limit of the existing coordinate systems and is expressed by being input four among left, right, width, top, bottom and height which are input by the user as shown below:
Setting of Position 2 of Component
Position2 and positiontype are added as the Property of Component and the coordinate system of Component의 is determined by positiontype.
At Properties Window, both position and position2 are possible to be corrected but at Source of XFDL, they are saved by the designated coordinate system at positiontype.
In order to change the unit of Position2 which is added at Properties, px and % are supported.
The unit of Percent is supported only at position2 and in case that positiontype of Component uses this position, the value is not changed because of the applicable function.
Form Design
Tracker
In case that positiontype of Component is set to position2, the shape of tracker is displayed differently.
Positioin2 Tracker marks the fixed line with red color and so without checking the value for position2 individually, the state of Anchor is recognized.
Ruler / Dot Grid
Since Position2 supports to input Percent, the function to indicate the information with the unit of Percent is added in order to check easily on Form Design.
In case that at Popup Menu of Ruler, Show Pixel Ruler / Show Percent Ruler are selected, the way to indicate Ruler and Dot Grid is changed with the applicable unit.
Component Resize Info
In case that when just one Component is selected, resizing is done with Tracker, the information to be resized is indicated.
If the unit of Ruler is indicating with the unit of Percent, the information to be resized is also indicated with the unit of Percent.
Position Editor
The Editor which has UI is provided in order for the user to set the information about Position easily. Position Editor can call out at Minitoolbar of Form Design.
Minitoolbar is the function added at XPLATFORM 9.2 version. It can correct easily Style Property which is used frequently with menu.
The value corrected at Position Editor is changed to the value for position and poisiton2 which are fitted for positiontype that the target Component is using and then reflected.
New Project Wizard
In case those Components are generated at Form Design, the function is added in order for the default of positiontype of the generated Component to be input at new Project Wizard.
The input PositionType is saved at the XPRJ file and managed with the unit of Project.
PositionType selected at New Project Wizard can be changed at Tools > Options.
Precautions Related to Position2
Be cautious: In case that Form is designed by using the function of Layout Manager, if Position2 is not designated by using Left, Top, Width and Height, Components happens to disappear at the additional Layout.
For example, when Position2 is designated by using Left, Top, Right and Bottom as shown in the figure, the Button looks like normal at Default Layout.
But Button disappears at the additional Layout and isn’t shown as in the figure below.
The reason why this phenomenon occurs is that the position of left and top of Form is fixed.
Therefore, when the function of Layout Manager is used, set Position2 by using Left, Top, Width and Height.