Component

Component Arrangement

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

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.

Selection Change

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

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 All: the option in which a rectangle must include the whole area of a component in order to select the component.

• Select Part: the option in which you can select a certain component even if a rectangle includes just a part of the component.

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.

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.

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.

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

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

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.

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].

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:

• Bring to Front

• Send to Back

• Bring Forward

• Send Backward

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.

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)].

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.

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.

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.

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

• When a component is selected from the list, is is also selected on the design screen.

  When a component is selected on the design screen, it is displayed in the Outlineview panel list as selected.

• Double-clicking a component in the list performs the same action as double-clicking a component on the design screen.

  For example, when a Grid component is selected and double-clicked, the Grid Contents Editor is displayed.

• After selecting a component from the list, click the right mouse button to display the context menu.

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.

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.

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

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.

Allocate Preset

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

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.

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