Component

Component Array

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

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.

Frequently used components are listed in the following table.

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 application development so that component properties can be managed.

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

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

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)

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

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.

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

Size Change

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

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.

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.

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.

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

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.

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.

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:

• Bring to Front

• Send to Back

• Bring Forward

• Send Backward

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.

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.

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.

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.

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.

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.

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.

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:

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.

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

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

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

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.

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

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.

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

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:

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.

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:

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:

• Select Show Sub Layout Name to check the name of the sub-layout applied to the current component

• Select Sub Layout Edit to edit the sub-layout

• Select Set Sub Layout to adjust the sub-layout to the size of component

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.

The Sub Layout Editor has the following properties:

• In sub layout editor mode, the area of the parent component (Div component) is indicated by a red dotted line.

• Allows editing of subordinate components hidden from view on form design status

• Only components and lower-level components can be selected or edited

• Although you can revise the size of a sub layout, you cannot change its location

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.

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

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.

positionstep

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

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

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.

Ruler / DotGrid

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

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.

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.

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.

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.