Form Design

Component

Component Array

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

Button component

By using Component Toolbox, which is a collection of defined components in the TypeDefinition, you can create components by dragging and dropping them. Open the Component Toolbox by selecting View > Toolbox from the menu.

Component Toolbox

Frequently used components are listed in the following table.

Component Toolbox

Icon

Component Name

Description

Select

Select components by clicking and dragging with a mouse

Div

Used to include one or more forms within another or when handling related components in one group

Button

Used to place a button control on a form

PopupDiv

Used when constructing several sections in one screen

Combo

Used to place a combo (dropdown) control on a form

CheckBox

Used to place a checkbox (true/false) control on a form

ListBox

Used to place a listbox (list of items) control on a form

Edit

Used to place an Edit (editable text box) control on a form

MaskEdit

Used to place a MaskEdit control on a form. MaskEdit allows control of data formatting for items such as dates, times, phone numbers, and long numeric values

TextArea

Used to place TextArea (multi-line text box) control on a form

Menu

Used to construct menu items

Tab

Used to construct a page with multiple, tabbed sections

ImageViewer

Used to display images on a form

Radio

Used to place a radio button (pick one item of many) control on a form

Calendar

Used to allow a user to enter a date by selecting from a calendar

Static

Used to place a static (fixed text) control on a form

Grid

Used to display the contents of a Dataset in tabular form

Spin

Used to allow users to enter data using a "spinner" control - a control that allows the user to increment or decrement the value in the fiedl

PopupMenu

Used to construct a popup menu

GroupBox

Groups related components

ProgressBar

Used to place a graphic representing the status of a process on a form

Plugin

Used when using a plugin

Dataset

Saves data in tabular form

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.

Rubber Band

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.

Button component 생성

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

Invisible Layout

If the Invisible Layout window is not displayed, you can show it by selecting Show Invisible Object Area from the Design Window [Popup Menu].

Show Invisible Object Area Menu

In the Invisible Layout, functions such as icon display are provided in the popup menu as illustrated below:

Invisible Layout[Popup Menu]

Invisible Layout[Popup Menu]

Menu

Function

Edit

Opens the appropriate editor for the selected object

Cut

Cuts the selected object

Copy

Copies the selected object

Paste

Pastes an object

Delete

Deletes the selected object

View

Changes the way invisible objects are displayed: Big, List, Small, and Report

Selection Change

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

By pressing Tab, you can move the selection from one component to the next, based upon the defined tab order, Shift+Tab will move the selection in the reverse order.

(See Tab Order)

Change Selection

The multi-selection function can add or delete a selection by using the Ctrl key or Shift key.

Multi Selection

If you activate the selection function and click-and-drag over an area with the mouse, all components in the area will be selected. If you do the same while pressing the Shift key, items already selected will be undone and all other items will be selected.

Reverse Selection

By pressing ESC and selecting a component, you can select the superior component of the selected component.

Parent Selection

Size Change

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

Change Component Size

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.

Change Component Size to used Shift + Ctrl Key

You can also change the component size by pressing the direction keys while pressing <Shift> key.

Location Change

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

Use the Magnetic function to make minute adjustments automatically if you put other components or options close to the DotGrid. The Magnetic function can be activated based on the option value on the [Tools - Options - Form Design] menu for DotGrid or other components.

Magnetic

The Magnetic function can be overridden by pressing ALT while moving 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 application.

Tab Order Edit

You can control the run-time tab order for components by pressing Ctrl+D when the Design Window is activated, or through the Tab Order Edit Menu in the Design Window [Popup Menu].

Tab Order Edit

When you move a mouse cursor over a certain component, its color will change to red 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

Accessibility

Simulation Mode


Toggles on/off the simulation in which you can see how focus actually moves by pressing the Tab key in an accessibility-enabled application.

- Toggled off: If a component's tabstop property is set to false, focus will not move to the component.

- Toggled on: If a component's accessibility.enable property is set to false, focus will not move to the component.

Set Next Tab Order


Specifies the value of Next Tab Order

Next Tab Order

Up

Increases the Next Tab Order value by 1

Previous Tab Order

Down

Decreases the Next Tab Order value by 1.

The minimum value is 0

Next Tab Order(10)

Right

Increases the Next Tab Order value by 10

Previous Tab Order(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 feature 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.

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.

Tab Order List


Opens the Tab Order List window, which shows tab order in a list form and allows you to edit the list

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 List

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 [Design > Tab Order List] in the menu or [Tab Order List] in the context menu opened from the Design panel.

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

Tab Order View

The Tab Order view is used for checking the tab order defined on the current screen. Turn on/off (toggle) the function by using the Tab Order View in the Design window [popup menu]. 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 Edit 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:

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.

Guide Line

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.

Setting 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

Components that are visibly expressed on the Form Canvas can show Style Attributes. Each attribute can be edited, changing the style of component.

Set Font

For components with text properties including fonts, you can modify the font properties.

Designate color properties directly instead of using the font dialog box.

Nexacro Platform applications do not have their own fonts. They use the fonts installed with the operating system. You can prioritize available fonts so that you can find them more easily when developing applications. How are available fonts prioritized?

Data and Event Processing

Bind

In Form Design, you can bind selected components to datasets by dragging and dropping a dataset onto the component, or by selecting Bind mode from the Properties Window.

Bind Global Dataset

When using drag and drop, depending on the type of component, the Inner Bind Dataset function or Bind Item Editor function will be accessed.

Inner Bind Dataset

When a dataset is bound to components that can display data in a list form, such as List Box or Combo, the Inner Bind Dataset is accessed because it can designate the dataset column to use in a list.

Inner Bind Dataset

Inner Bind Dataset

Properties

Description

Codecolumn

Designates column that is used internally

Datacolumn

Designates column that is displayed to the user in the component

Bind Item Editor

When the dataset is bound to components that can display one item like Edit or Button, the Blind Item Editor function is accessed.

Bind Item Editor

Bind Item Editor


Properties

Description

1

Bind ID

User classification ID

2

Component

ID of component that dataset is bound to

3

Property

Component property that dataset is bound to

4

Dataset

Dataset that is bound to the component

5

Column ID

The dataset Column ID that is bound to the component

6

Adds Bind Item

Adds a new bind item

7

Delete Bind Item

Deletes the selected bind item

When a dataset is bound toi typo a form or component, it is displayed in the Project Explorer window on the item for easy verification, as shown below:

Bind Mark

Grid Contents Editor

The Grid Contents Editor is used to edit the grid’s contents properties. There are many cell unit properties besides the properties that can be seen in the Properties window.

Access the Grid Contents Editor by double-clicking the Grid component on the Design Window.

Where exactly is this? This entire section needs clarification. Need to add content about how to get the GCE open.

The Grid Contents Editor is composed of the main edit window and the Design Source window.

In the main edit window, you can add or delete a cell by using the popup menu and shortcut keys, or the edit properties. The main edit window displays the column index at the top, followed by the head, body, and summary.

Grid Contents Editor[Formats]

Add a column or row from the Popup Menu of main edit window.

Grid Contents Editor[Add Popup Menu]

Grid Contents Editor[Add Popup Menu]

Menu

Function

Add Column

Add a column

Add Head Row

Add a header row

Add Body Row

Add a body row

Add Summ Row

Add a summary or footer row

In a situation where cells are selected, the context menu will be supported as shown below.

Grid Contents Editor[Cell Popup Menu]

Grid Contents Editor[Cell Popup Menu]

Menu Function

Description

Cut

Cut a column or row

Copy

Cut and copy a column or row

Paste

Paste copied contents to the clipboard:

• Append - paste to last

• Insert - Paste by inserting

Add

Add a column or row

Insert

Insert a column or row

Delete

Delete a column or row

Merge Cells

Merge selected cells

Split Cell

Split merged cells

Same Width

When the entire area is selected, change all columns to have the same width as the first column

Undo

Undo function

Redo

Redo function

Select the Design Source tab to display the Grid Contents in XML. You can edit the XML directly.

Grid Contents Editor[Design Source]

Adding Events

You can add an event to a component by selecting the component, and then Event Edit Mode from the Properties Window. You can enter the event directly, or create it automatically by double-clicking the relevant event listed in the Properties.

Create Event Function

Double-clicking the component in the toolbar above the Form Design window will create the main event for that component automatically.

Screen layout

Form layout

When creating a new form, you can designate the layout, or set additional layouts, after creating the form in the “New Form Wizard.” Form layout is used to provide optimized screen composition based on the user’s screen size.

Screen Composition

The following figure shows three layouts for the form using a tabbed display (with the tabs on the left). The location of the tabs can be changed by using [Tools > Options > Form Design > Layout Manager > Layout Tab Style].

Layout Tab

Selecting a newly added layout tab will display that tab's layout. From the context menu you can add or delete layouts, as well as view a list of available layouts. The selected layout is displayed as the area of the form enclosed by a red dotted line.

Layout Tab Popup Menu

Layout Tab Menu

Menu Function

Description

Add Layout

Creates a new layout at the end of the “layout tab”. The layout name must be unique.

Copy &

Add Layout

Adds a layout at the end of the “layout tab” by copying the currently selected layout.

Delete Layout

Deletes the selected layout

Layout List

Shows a dialog box with information about the layouts currently in use.

When you select the form from the Project Explorer, the context menu lists options for viewing layout information.

Design Popup Menu

The following figure illustrates the Layout List for the sample DragForm.

Layout List Dialog

Layout List Dialog


Layout Property

Description

1

Template

Functionality that brings and adds layout information created with a template

2

Add Layout

Button that adds layout information to be used in the form

3

Delete

Button that deletes the layout selected on the list

4

Grid that shows

layout information for the form

• Name: layout name (Default name is case sensitive. Name must be unique in form.)

• Screen: screen name used by layout

• Width: layout width in pixels

• Height: layout height in pixels

Restricted Design Functionality

The "Default" tab provides all layout functionality, most notably the ability to add new controls. Additional layouts mostly support only rearranging the controls added to the default layout. Details are shown in the table below:

제한된 Design 기능

Design Functionality

Default

Additional Layout

Component creation, deletion

Component copying, cut, and paste

Component move

Tab order change

Form domain indication

Invisible Object addition,deletion, selection


Properties Window

Height and width form properties can be revised by each layout. When changing the size by dragging the mouse tracker, the property values of height and width for the layout will be changed accordingly. The property values related to form size shown on the Properties window are identical to those shown on the Layout List.

Properties Window ? Layout Information

Property values changed from the default values in a new layout tab are displayed in bold blue color.

Bold and color formatting are used on the Properties window to indicate additional information about property values:

Display Property Information

Color

Bold?

Information

Black


Default values with themes and styles are applied

Black

Values revised on the Default tab are different from those default values applied with themes and styles

Blue

Values revised on the newly added layout tab are different from those of the Default tab

Component IDs can be revised only on the default layout tab.

Sub-layout

Components such as Div, PopupDiv, and TabPage that contain content within themselves can have several layouts just like forms. To distinguish a component layout from a form layout, a component format is called a "Sub Layout". A sub layout differs from a form layout.

You cannot edit button components included in a Div component directly on a new form layout. For this reason you need the screen composition optimized for the given component’s size. With a sub-layout, the target component’s size will change as the form layout changes. That way, you can have a fully optimized screen by simply changing sub layouts.

Layout Option

To edit content included in components such as Div on an additional layout:

Sub Layout ? Popup Menu

Sub Layout Editor

If you select the Sub Layout Edit option from the context menu or double-click components, you can see the Sub Layout Editor displayed as below. The default sub layout’s size is identical to that of the selected component.

Sub Layout ? Sub Layout Editor

If the URL’s properties are linked with other forms, a sub layout edit is not supported. Instead, you can edit by opening the linked form with the context menu or by double-clicking the component.

The Sub Layout Editor has the following properties:

The appearance of the context menu may differ slightly depending on whether or not you select a subordinate component as well as by the type of component.

Sub Layout ? Sub Layout Editor Popup Menu

Sub Layout ? Sub Layout Editor Popup Menu

Sub Layout Editor – Sub Layout List

Menu Function

Description

Add Sub Layout

Opens a dialog box to create a new sub layout.

The default size of an added sub layout is equal to the current size of a relevant component.

You cannot enter the name of a sub layout currently in use.

Delete Sub Layout

Deletes the currently selected sub layout from the list. The Default sub layout cannot be deleted.

Sub Layout List

Displays a dialog box to revise all sub layouts in use on the component.

The name of the default sub layout cannot be changed freely.

What does this last sentence mean?

Show Sub Layout Name

Checks the name of the sub layout applied to the current component.

Fit to Componet

Adjusts the size of the currently-edited sub layout for the relevant component.

Apply Size &

End Edit

Applies the size of the sub layout currently being edited to the target component and exits the Sub Layout Editor

End Edit

Applies the revision to the sub layout and exits the Sub Layout Editor

Cancel Edit

Cancels all edits and exits the Sub Layout Editor

The Sub Layout Editor manages form design and separate Undo data. Once the Sub Layout Editor is terminated, the Undo data will be deleted as well.

The content in the Sub Layout Editor can be undone within the Editor itself. However, once the Editor is terminated, the data will be treated as a single task and added to the undone data. If you execute Undo on form design, all items revised on the Sub Layout Editor will be reverted to their status before the Sub Layout Editor was invoked.

In a case where a Div component is included within another Div, the included Div can be edited just like any other subordinate components. Moreover, an additional sub layout for the lower-level component is available. Just select the Div component you want to edit and double-click to launch a sub layout editor.

The lower-level Div component cannot be selected when its layout is not a default. However, double-clicking will launch a sub layout editor.

If you double-click another Div component while using a sub layout editor, you can change the sub layout to edit.

If the area of a subordinate component is larger than that of the parent Div component, the followings are how to select the Div component by mouse. Use the following methods in order.

1) Select the subordinate component first.

2) Press Esc key to select the parent component (Div component).

3) Press Menu key to call a context menu and select Sub Layout Edit.

Properties Window

You can revise a component's style and some of the properties within a sub layout. For a Div component, the revision is saved in the <Div> tag on the default sub layout while the revision made in additional sub layouts is saved in <Layout>.

This is the first time, I think, that XML is shown in this document. We should add general content in an appropriate location about the XML representations of various components.

...
<Layouts>
     <Layout>
          <Div id="Div00" left="10" top="10" width="250" height="250" 
          style="background:red;">
               <Layouts>
                    <Layout width="250" height="250"/>
                    <Layout name="iOS" width="150" height="150" 
                    style="background:blue;"/>
               </Layouts>
          </Div>
     </Layout>
</Layouts>
...

Step

Step is a function which can develop pages that consist of several steps in one form. When you control the stepcount property value, the step will appear as shown in the figure below.

stepcount

Step ? Form Design

  1. Indicates the step area currently being edited. The edited area may change depending on the location of the mouse pointer.

  2. Each step area is indicated by the blue dotted line.

Even if there are several steps, the form’s size does not change. At runtime, only one step is visible with the step changing according to the user interaction.

positionstep

The positionstep property corresponds to the component's position to the step areas.

positionstep value

Description

0

Component is out of all of the step areas

-1

The component is shown in all of the steps:

  • Component can be selected and edited in all the step areas.

  • If the component is not in the step which is currently being edited, it is displayed with increased transparency.

  • Component can select component which is shown at the applicable step among all of the steps and edit.

...
    <Layouts>
      <Layout width="300" height="450" stepcount="3">
        <Button id="Button00" text="Button00" 
          left="60" top="60" width="120" height="50"/>
        <Button id="Button01" text="Button01" 
          left="60" top="60" width="120" height="50" positionstep="1"/>
        <Button id="Button02" text="Button02" 
          left="60" top="60" width="120" height="50" positionstep="2"/>
        <Button id="Button03" text="Button03" 
          left="60" top="160" width="120" height="50" positionstep="-1"/>
      </Layout>
    </Layouts>
...

If a component is moved to a different step from the design form screen, the value of positionstep will change with an adjustment of the position value to the given step.

If the position property value is out of the step’s boundaries; however, the value of positionstep will not change.

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. Each property value can be indicated by pixel unit (px) or percentage (%).

Tracker

When you select a component, the relevant tracker according to the position property is indicated in red.

Position Tracker

Ruler / DotGrid

To assign layouts easily when designating locations on the form design, the ruler unit can be either pixel unit (px) or percentage (%).

Ruler Popup Menu

On the ruler context menu, you can change the way the ruler and DotGrid units are measured by selecting Show Pixel Ruler / Show Percent Ruler.

Pixel Ruler / Dot Grid

Percent Ruler / Dot Grid

The following figure illustrates size information when revising the size of only one selected component. The size unit in this case depends on the unit of the ruler.

Pixel Resize Info

Percent Resize Info

Position Editor

For the user to set up position information easily, a separate editor is provided. The Position Editor can be executed in the mini toolbar that appears when selecting a component.

Form Design Minitoolbar

The mini toolbar provides functionality that changes the frequently used style property menu directly.

Position Editor

The revised values on Position Editor will be reflected in the property values of left, top, right, bottom, width, and height.

Properties Window

You can change the unit of property values for left, top, right, bottom, width, and height on the Properties window.

Position Unit Change

The Form, Mainframe, and Childframe elements cannot be designated in percentage units. Width and height properties for these must be designated in pixel units only.