Form Designing | Arranging, Selecting, Moving and Setting

Component

Component Arrangement

In the Form Design editor, components can be added to the Form by selecting them on the Component bar.

Button component

When you drag the mouse on the empty space of the Form Design window, a rectangular region will be selected. The starting and ending points, width and height of the rectangle, in pixels, will be displayed.

If a component has been selected from the Component Toolbox or toolbar, the component will be created in the identified area. If you do not drag the mouse and just click on the screen, the component will created at the default size specified in the TypeDefinition.

The Form Design toolbox includes components that are not displayed to the user. These components may be displayed on the screen during app development so that component properties can be managed.

Invisible Layout

Selection Change

When designing a Form, you can select one or more component by using various key combinations.

Key combination

Description

Tab

You can select the component that comes next in the designated tab order.

If the currently-selected object is a Form, the first component in the tab order will be selected.

Shift + Tab

You can select the component that comes one step earlier in the designated tab order.

If the currently-selected object is a Form, the last component in the tab order will be selected.

Ctrl or Shift

You can select multiple components with Ctrl or Shift key pressed.

Esc

You can select the component that is one-level higher than the current component.

Ctrl + a

You can select all components except a Form.

Alt

When selecting a specific component by clicking the mouse while pressing the Alt key, all components of the same type are selected.

The tab order does not include a Form. Therefore, you cannot select a Form with the Tab key while a component is selected.

Select Type

The following instruction is how you change the way in which you drag a rectangle on the Form design panel to select components: adjust the setting in [Tools > Options > Form Design > General > Select Type]

Select the parent component(Container Selector)

If there are components placed within a container component or Panel component, an additional UI (container selector) is provided for convenience in selecting the component.

When a placed component is selected, the "▲" button is displayed in the upper area of the component. Hover the mouse pointer over the “▲” button and the parent component area is displayed with a blue border.

Click “▲” and it switches to the state where the parent component is selected. For Div, PopupDiv, View, and Panel components, the UI for moving the component or executing the context menu is provided.


Description

1

The component id property value is displayed.

When you move the mouse pointer over the area, the component becomes movable and you can be drag and move it.


If there are other parent container components to the container component, the "▲" button is displayed and the components are displayed next to it.

2

Run the context menu.

Click the button with the mouse to run the context menu.

You can set the container selector UI to be displayed or not.

Options > Form Design > Guide > Container Selector

Select overlapping components

When components have the same size and position values, they are displayed overlapping. In the design screen, when the mouse pointer is moved over the overlapping components, the overlapping components are expanded, and you can select a component you want.

Move Component

You can move a selected component to the place you want.

Use mouse

You can move a selected component through mouse drag and drop. While using a mouse, you can press a few keys to employ special features.

Combining key

Description

Ctrl

You can copy and move a component.

Shift

You can make only straight horizontal (leftward/rightward) or vertical (upward/downward) movement.

Alt

You can deactivate the Snap feature.

Drag and drop the selected component into the container component area and a blue border will appear and it will be added as a child of the container component.

Use keyboard

You can move a selected component with arrow keys. Whenever you enter an arrow key, the component will move as far as you specified in the menu [Options > Form Design > Grid > Dot grid size]. If you enter an arrow key with the Ctrl key pressed, the component will move for the minimum length, which is 1px.

Size Change

When component tracker points are activated, dragging and dropping one point changes the size of the component.

If you adjust the size of just one component, Nexacro Studio will display the information on the size. In this case, the unit for measuring the size will follow the unit of the ruler.

If several components are selected, all of the component sizes will change in the same proportion.

Change Multi Selection Component Size

Pressing Shift while changing a component's size will modify the width and height in fixed proportion to each other.

Change Component Size to used Shift Key

Pressing Ctrl while changing a component's size, will change the size equally on both sides of the middle of the component.

Change Component Size to used Ctrl Key

Pressing Shift+Ctrl while changing a component's size will increase both the width and the height in proportion to one another and equally on both sides of the center of the component.

You can also change the component size by pressing the direction keys while pressing Shift key. In this case, pressing a direction key once will change the size as much as the value of the dot grid size specified in the menu [Tools > Options > Form Design > Guide].

Copy Component

A selected component (or components) can be moved by using the arrow keys on keyboard. If you move the components with the mouse while pressing CTRL, the component(s) will be copied to the destination.

Copy Component

Lock Control

You can prevent components from being moved or resized by setting Lock Components. If you want to set or lift Lock Components, access [DESIGN > Lock > Lock Components] in the ribbon interface or [Design > Lock Components] in the command bar interface. Otherwise, open the context menu from the Form design panel and select [Lock Components].

The Lock Components feature only can prevent the moves by a mouse drag. The feature will not work for the moves by arrow keys or by changing position properties.

Tab Order

The tab order refers to the sequence in which you make moves among components by pressing the tab key in the middle of running an app.

Tab Order(Z-Order) View

The Tab Order view is used for checking the tab order defined on the current screen. You can toggle the function by selecting the menu [Design > State View > Tab Order]. When the function is activated, you can see two numbers on the top left of the component, as shown in the picture below.

The numbers in the blue boxes indicate the order of tabs. Change the order by revising the tab order property of components or by using the Tab Order Editor function.

The numbers in the green boxes indicate the Z-Order of components. Z-Order defines the display order of components when the components are overlapped. A component that has a bigger number is moves to the front.

Change the Z-Order by using one of the four functions on Align toolbar, or by changing the order of arranged XML code on Source tab:

If you want to change the Z-Order according to the tab order after changing the tab order in the Tab Order Editor, you can change the Z-Order by selecting the menu [Design > Arrange to Tab Order].


Tab Order Editor (View Type)

You can control the tab order for components by pressing the Ctrl + T key in the Design pane. Otherwise, you should access the menu [Design > Tab Order Editor(View Type)].

The mouse cursor is labelled with an index number that indicates a next tab order to be set. If you click a certain component, the foregoing tab order will be given to the component, with the tab orders of other components adjusted automatically.

When you move a mouse cursor over a certain component, its color will change to green while the component of the next tab order will be highlighted in orange. If multiple components overlap, those components will be spread out for easy editing.

The Tab Order Edit mode supports the below context menu.

Menu

Shortcut

Description

Set Next Tab Order


Specifies the value of Next Tab Order

Tab Order Decrease

PageDown

Minimizes the gap between current tab orders.

Adjusts the value of the first tab order to 0 and arranges the others in consecutive sequence.

Next Tab Order Value by 1

Up

Increases the Next Tab Order value by 1

Previous Tab Order Value by 1

Down

Decreases the Next Tab Order value by 1.

The minimum value is 0

Next Tab Order Value by 10

Right

Increases the Next Tab Order value by 10

Previous Tab Order Value by 10

Left

Decreases the Next Tab Order value by 10.

If the current Next Tab Order value is 10 or smaller, the value will become 0.

Tab Order Increase

PageUp

Increases all the tab order values by 10 times.

This function is useful when you intend to insert components between tab orders. For instance, assume that there are two components whose tab order values are 3 and 4, respectively. You can insert other components between them by multiplying their values to 30 and 40—in this case, you can insert up to 9 components ranging from 31 to 39.

End Edit

Enter

Ends the Tab Order Edit mode after saving changes

Cancel Edit

Esc

Ends the Tab Order Edit mode without saving changes

Tab Order Editor (List Type)

The Tab Order List window presents tab order in the form of an editable. You can change tab order by selecting one or more items and then pressing one of the below four buttons.

You can open the Tab Order List window by accessing the menu [Design > Tab Order Editor (List Type)].

You cannot edit the other information items (i.e. id, text, tabstop) in the list than tab order.

Set Properties

The properties for a selected component are displayed in the Properties Window. When you modify the property values, they are immediately applied to the component.

Change Property

When a property has subordinate properties as shown in the figure below, an icon that can expand the properties will be shown in front of the property. Properties are automatically synchronized with their subordinate properties and vice versa.

Expand Property

Outlineview

The components placed on the screen are displayed in a tree map. This operates when the Outlineview is selected from the View menu and the mode is in Form design mode.


Description

1

Displaying the list of components placed in the Form object

The component list is displayed in order according to the following standards.

  • The tablecellarea property of the component if the type property value is “table”

  • The layoutorder property of the component if the type property value is “horizontal” or “vertical”

  • Z-order of the components

2

Form name (type property)

When a different layout is selected, the type property of the selected layout is displayed.

3

Search according to the component id

You can select a component in the Outlineview panel and use the following features

Other Features

Paste Special

Paste Special is a feature used to copy and paste a component while applying just particular attributes of the component—such as properties, events and bound items—selectively. You can use This function by accessing the menu [Edit > Paste Special].

The component is pasted with only the selected Option information applied. If the "Option Save" item is checked before clicking the [OK] button, the currently selected Option information is reflected in [Option > Form Design > Paste Special].

Hotkey editor

This function allows you to set hotkeys to apply to the components in a Form. To this end, you need to access the menu [Design > Hotkey Editor]. Basically, the editor presents hotkeys that have been already set. If certain components do not have hotkeys, their editable fields are empty. If you change an existing hotkey, the changed one will be displayed in bold type. If more than one component have the same key combination, the relevant hotkeys will be displayed in red.

Go to Event Handler

If a selected component holds an event handler, this function will bring you to the codes of the handler in the script. Right-click a component to open the context menu, select [Go to Event Handler] from the menu, and then choose an event handler you want to see.

If a selected component does not hold any event handler, [Go to Event Handler] will not appear on the context menu.

Copy ID

This function copies the ID of a selected component onto the clipboard. For a component that belongs to a Div or Tab component, this function copies the value that includes the IDs of the parent components. You can use this function in three ways: by accessing the menu [Edit > Copy ID (Include Parent)]; by right-clicking a certain component on the Form design pane to open the context menu; and by opening the component list situated at the top of the Properties pane and right-clicking a certain component from the list to open the context menu.

In the case illustrated in the above picture, the value copied onto the clipboard is as below.

Div00.form.Button00

Add and Use Component Preset

Component presets allow you to manage and reuse components whose properties and events are set repeatedly.

Add Preset

You can add a preset by following the below steps.

1

Enter any Form and set the properties of a component that you want to add as a preset.

In this demonstration, a Calendar is placed on the Form with its properties set as below.

width: 200
height: 200
showmonthspin: true
showyearspin: true
type: monthonly
usetrailingday: true
weekformat: S M T W T F S

2

Right-click the component and select [Add Component preset] from the context menu.

If the Component Preset pane is already activated, you can also add the component as a preset by clicking the Add Preset button on the toolbar of the pane.

3

The Component Preset pane appears and the component is added as a preset in the default category.

Allocate Preset

An added preset can be placed on the Form by following the below steps.

1

In the Component Preset pane, choose a preset that you want to use.

2

When you move the cursor onto a Form, you can see the cursor change to the icon of the preset you chose.

3

Click the position where you want to place the component preset.

You can see the allocated component has the preset properties just as defined.

Manage Preset and Category

Change name

Choose a preset or category in the Component Preset pane. Then, double-click the item or press F2 to enter the editable mode in which you can change the name of the preset or category.

Delete

Choose a preset or category in the Component Preset pane. Then, press the Delete key on the keyboard or click the delete button on the toolbar of the pane to remove the preset or category.

If you delete a category, all the presets under the category will be removed as well.

Change order

With a preset or category selected in the Component Preset pane, you can change the order by dragging the selected item.

If you change the order of a category, all the presets under the category will be moved as well.

Filtering

Although you can sort presets by using categories, you can also do it by filtering preset names. This method is particularly useful when you apply certain rules in preset names.

Update preset

You can update an added preset by following the below steps.

1

Place a preset on a Form.

2

Select the preset and change its properties.

3

While the component on the Form is selected, go to the Component Preset pane and choose a preset you want to update. Then, you will find the Update Preset button appearing beside the name of the selected preset.

4

Upon clicking the Update Preset button, you are asked whether to update the preset. If yes, the preset will be updated.

Export and Import Component Preset File

The settings of categories and presets can be exported as a file and be used in other projects or by other users. If you click the Export button on the toolbar of the Component Preset pane, your settings will be saved as a file (with the xpreset extension).

If you click the Import button, you can import an already-saved file. Once you import a file, the Component Preset pane will display the new settings, which has replaced the existing settings.

Toolbar on Component Preset Pane

Standard Bar

Menu

Description

1

Add Category

Adds a category to the pane

2

Add Preset

A component selected in the Form is added as a preset.

3

delete

Deletes a category or preset

4

Import

Imports the component preset file that was set in advance or selects the xpackage file to execute the Import Wizard.

5

Export

Exports component presets as a file

6

Options

Sets the component preset file location.