Creating Components
In Form Design, you can create components selected from the Component bar.
By using Component Toolbox, which is a collection of defined components in Type Definition, you can create components with Drag & Drop. Component Toolbox can be activated by selecting View > Toolbox in menu.
Frequently used components are as below.
Icon | Name | Description | |
|---|---|---|---|
1 | Select | Component Select Icon | |
2 | Button | Component used when user input with mouse | |
3 | Div | Used when summoning other forms in a form and using all of them as one, or when handling related components in one group | |
4 | Combo | Component which has a combined function of Edit and Drop down List | |
5 | CheckBox | Component which has TRUE/FALSE value for check mark | |
6 | ListBox | Component used when selecting item after listing all the items | |
7 | Edit | Component with input-output control of character string | |
8 | MaskEdit | Component with input-output control of character strings with regulated forms like date and commas in numbers (yyyy/mm/dd hh:mi:ss) | |
9 | TextArea | Component with input-output control of character strings with several lines | |
10 | Menu | Component used when constructing Menu Item | |
11 | Tab | Component used when dividing one page into several tab pages | |
12 | ImageViewer | Component used when displaying images on screen | |
13 | Radio | Component used when selecting one item among provided list of selection | |
14 | Shape | Component used to draw shapes like lines, triangles, squares, circles, and rounded squares | |
15 | Calendar | Component used to input date | |
16 | Panel | Component used when constructing screen by organizing several components according to Panel | |
17 | Static | Component used when depicting names of other presentation components | |
18 | Grid | Component which handles the contents of Dataset in a chart form similar to spread sheet | |
19 | Spin | Component used when inputting numbers according to a set rule | |
20 | PopupMenu | Component used when constructing Popup Menu | |
21 | Splitter | Component to divide screen | |
22 | GroupBox | Component which groups related components when constructing screen | |
23 | ProgressBar | Component which shows the status of project progress using graphic | |
24 | ActiveX | Component used when using ActiveX | |
25 | PopupDiv | Component used when constructing several sections in one screen | |
26 | PropertiesAnimation | Properties Animation Component | |
27 | TransitionAnimation | Transition Animation Component | |
28 | MoveAnimation | Move Animation Component | |
29 | CompositeAnimation | Composite Animation Component | |
30 | Dataset | Component which saves data in a table form | |
31 | FilteredDataset | Component that binds an original dataset and saves it as logical table form | |
32 | GraphicPath | Component that can output shapes using lines and curves on form with the data from Graphic Path Data |
When you drag mouse on the empty space of Form Design, Rubber Band will be displayed in a square form. The locations of start pointer and end pointer and information on width and height of square will be displayed so that user can estimate the size of component to create and control it.
Component will be created in the area where user dragged mouse finally. If you do not drag mouse and just click on the screen, component will be created in default size which is defined in the Type Definition.
For the components that are used in Form Design but do not need design, Invisible Objects, which displays components in order to input, edit, and delete properties is provided.
If the Invisible Layout window is not displayed, you can see it by using ‘Show Invisible Layout window’ from Design Window [Popup Menu].
In the Invisible Layout, functions such as icon display are provided in popup menu as below.
Menu | Icon | Function | |
|---|---|---|---|
1 | Edit | Provides appropriate editor for the selected Invisible Object | |
2 | Cut | Cuts selected object | |
3 | Copy | Copies selected object | |
4 | Paste | Pastes selected object | |
5 | Delete | Deletes selected object | |
6 | View | Changes Invisible Objects Display by selecting from Big, List, Small, and Report |
Selection Change
In Form Design, many kinds of component selection are provided, using combination keys.
By using <Tab> key, you can change the selected component to other components. The order of moving is followed by Z-Order of component, and when using <Shift + Tab> keys, components move in reverse order of Z-order.
Multi Selection function which can add or delete selection by using <Ctrl> key or <Shift> key is provided.
By using <Shift> + Rubber Band selection, you can add or reverse selection in the designated area.
By pressing <ESC> key when component is selected, you can select the upper components of the selected component.
Size Change
When you Drag & Drop one point when component tracker points are activated, you can change the size of component.
If several components are multi selected, all components’ sizes will change in same proportion.
When you change size with mouse and press <Shift> key at the same time, the width and height will change in fixed proportion.
When you change size with mouse while pressing <Ctrl> key, the changed size will be proportionate to the previous size based on the middle.
When you change component size with mouse while pressing <Shift + Ctrl> keys, both functions will be applied to the component.
You can also change component size by pressing direction keys while pressing <Shift> key.
Location Change
Selected components can be moved by using the direction keys on keyboard, and the changed coordinates will be applied to Properties immediately. If you move components with mouse while pressing <Ctrl> key, they will be copied to the chosen spot.
In Form Design, Magnetic function, which is a function that automatically moves components when moving components near other components or guide line, is provided to make it easy for users to make small adjustments when moving components or changing their sizes according to the Option value.
You can choose how the Magnetic function will work by setting options in Menu [Tools – Options… - Design] and set if the function will react to dots or other components. If you move component while pressing <Alt> key, the Magnetic function will not work.
Guide Line
Guide Line is a function that is provided in Ruler. This function lets developer to randomly make vertical/horizontal line and organize components on line.
You can create guide line by clicking on the spot you want on ruler, and the created guide line can be moved by dragging mouse. Guide line can be deleted by dragging and dropping them out of the Design Window or double clicking on the inverted triangle on the guide line.
Tab Order
You can set the order of movement of components when they move to other components by pressing <Tab> key while the created Design is launched and is running.
You can run the function by pressing <Ctrl + D> key when Design Window is activated, or through Tab Order Edit Menu in Design Window [Popup Menu].
Setting Properties
Component properties selected in Form Design will be displayed in Properties Window, and when values are changed in the Properties Window, it will be immediately applied to components.
When a property has lower properties, an icon that can expand the properties will be shown in front of the property. Properties are synchronized with lower properties so if you edit properties or lower properties, it will be applied to both sides.
Bind
In Form Design, you can bind selected components by dragging and dropping created dataset to component or select Bind mode of Properties Window.
When binding dataset with component by Drag & Drop, depending on the type of component, Inner Bind Dataset function or Bind Item Editor function will be summoned.
Inner Bind Dataset
When dataset is bound to components that can display data in a list form like List Box or Combo, Inner Bind Dataset which can designate dataset column will be summoned.
Properties | Description | |
|---|---|---|
1 | Codecolumn | Designates column that is used internally |
2 | Datacolumn | Designates column that is shown in component |
Bind Item Editor
When dataset is bound to components that can display one item like Edit or Button, Blind Item Editor function will be summoned.
Properties | Description | |
|---|---|---|
1 | Bind ID | User classification ID |
2 | Component | ID of component that dataset is bound |
3 | Properties | Properties of component that dataset is bound |
4 | Dataset | Dataset that is bound on component |
5 | Column ID | The Column ID of dataset that is bound on component |
6 | Add Bind Item | Adds new bind item |
7 | Delete Bind Item | Deletes selected bind item |
When dataset is bound on form or component, it is displayed on Item of Project Explorer as shown in the figure so it can be easily checked.
Making Events
You can make events of components by selecting components to edit event, and selecting Event Edit Mode of Properties Window. Event can be directly entered by user but it can also be automatically created by double clicking on the relevant event from Properties.
If you double click the component above Form Design, main event of the relevant component will be created automatically.
Transform
Transform function, which can edit the forms or components in Form Design by rotating them or tilting them, is provided as a popup menu.
When the transform function is activated, red markers will be shown around the selected component as shown in the figure, and you can rotate or tilt the component by dragging the relevant markers.
Component rotates around the axis which is displayed in a white circle, and you can move the axis by dragging your mouse.
How to Use Graphic Path Component
This is a component that can express line and curves through Path Data information, and it provides the same path spec with SVG (Scalable Vector Graphics).
Starting GraphicPath Edit
You can edit Graphic Path by selecting ‘Graphic Path Edit’ Popup menu, which is provided when Graphic Path component is in a selected status.
Adding PathData
You can add Path Data by clicking mouse on where you want, starting point being the upper left side of Graphic Path component, or through popup menu, and construct the shape as you want.
Menu | Icon | Function | |
|---|---|---|---|
1 | End Edit | Apply changed Path Data and end | |
2 | Cancel Edit | Cancel changed Path Data and end | |
3 | Move To | Start new Path Data from current coordinate | |
4 | Line To | Draw line on current coordinate | |
5 | Curve To | Draw curve on current coordinate (Shown as line when it is first drawn) | |
6 | Elliptical Arc | Draw elliptical arc rx: Radius of x-coordinate ry: Radius of y-coordinate x-axis-rotation: X axis large-arc-flag: large arc flag sweep-flag: Sweep flag | |
7 | Close Path | Connect starting point and end point with a line and close | |
8 | Remove Current | Delete selected Path Data | |
9 | Remove All | Delete all Path Data | |
10 | Reset Current Control Point | Initialize control point of selected path data | |
11 | Reset All Control Points | Initialize control point of all Path Data | |
12 | Edit Elliptical Arc Properties… | Edit property value of created elliptical arc |
Editing PathData
PathData added through mouse click or popup menu can be moved with mouse or the direction keys on keyboard, and the lines can be changed to curves and curves can be changed to lines.
When the PathData to edit is clicked and activated, the point of PathData will be changed from gray to black.
When selecting a path data is difficult because there are many path data in the same location, you can select the data by using <Tab> key or select in a reversed order by using <Shift + Tab> key.
You can move the selected Path Data by dragging with mouse to wanted location or move by 1 point with the direction keys on keyboard.
Each Path Data have a control point to express curves. The control point will be located behind the coordinate point when line is first created, so to change the control point, you have to select control point by clicking it with mouse while pressing <ALT> key and change location by dragging it with mouse.
When control point is moved by dragging mouse while <Ctrl> key is pressed, another control point that is connected will move in the opposite direction of the direction of mouse symmetrically.
When control point is moved by dragging mouse while <Shift> key is pressed, another control point that is connected will move in the same direction as the direction of mouse at the same time.
Deleting PathData
You can delete specific path data by selecting it, or delete all path data. When a path data in between is deleted, the path data in front and back of the previous path data will be connected.
Ending GraphicPath Edit
You can apply the PathData that are added, edited, or deleted, and end by pressing <Enter> key or by selecting ‘End Edit’ from the Popup menu. You can also cancel PathData that are added, edited, or deleted, and end by pressing <ESC> key or selecting ‘Cancel Edit’ from Popup menu.
Style Attribute
Components that are visibly expressed on Form Canvas can show Style Attributes and each attribute can be edited, changing the style of component.
Layout Manager (V9.2 added)
‘Form Design function has changed so that it can display the layouts information that are entered from ‘New Form Wizard’.
Layout Tab
The layout being used in current form will be displayed as tab. The location of tab can be changed by user from Option.
You can convert screen to layout entered from ‘New Form Wizard’ by using tab, and the layout edit function is provided in a popup menu.
Menu | Icon | Function | |
|---|---|---|---|
1 | Add Layout | ‘Display dialog of creating new layout in the end of ‘Layout Tab’ * Layout Name that is already being used cannot be entered. | |
2 | Copy & Add Layout | Copy selected layout and add in the end of ‘Layouts’ | |
3 | Delete Layout | Delete selected layout | |
4 | Layout List | Display dialog where layout information being used in current form can be edited |
Design
All functions are provided in ‘Default’ tab, but part of design functions are limited in the added ‘Layout’ tab.
Design Function | Default | Added Layout |
|---|---|---|
Component Create, Delete | O | X |
Component Copy, Cut, Paste, Paste Special | O | X |
Tab Order Change | O | X |
Edit Form Size | O | X |
Display Form Size with Guide Line | X | O |
Display Form Tracker | O | X |
Edit lower components like Div, Tab, Popup | O | X |
Add, Delete, Select Invisible Object | O | X |
A function that edits information of layout being used in current form is added as a popup menu.
Properties | Description | |
|---|---|---|
1 | Template | Add layout information from template |
2 | Add Layout | Add layout information to use in form |
3 | Delete | Delete selected layout information from layouts grid |
4 | Grid that shows Layout information | Grid that shows layout information that will be used in form
|
‘When the property value of component is changed in ‘Default’ tab, a message window which confirms whether to apply changed contents to other layouts pops up.
The message window which confirms if edited contents in ‘Default’ tab will be applied to other layouts will popup only when conditions below are met.
No. | Conditions |
|---|---|
1 | The property to change in other layouts exist in source |
2 | The option value of ‘Layouts Edit’ is ‘Ask whenever a property is changed’ |
‘In the message window that confirms if edited contents in ‘Default’ tab will be applied to other layouts, if ‘Don’t ask me again’ is checked and ‘Yes’ or ‘No’ is selected, the option value of ‘Layouts Edit’ will change and after that the message window will not pop up.
Button | ‘Layouts Edit’ Option |
|---|---|
Yes | Change properties Default Layout with other layouts |
No | Changed properties is only Default Layout applied |
Properties Windows
When Form Designs information is being displayed in Properties Windows, how it is displayed is different depending on the layout tab.
If the Form Design is an added layout tab and it shows Form Properties, Layout information will be additionally displayed in Properties Window.
In Default Layout tab, if ‘position’ information among Form Properties is edited, height and width will be set according to the current size when multi layout is used. Width and Height are hidden properties in Default Layout tab. If you change size using Tracker, all information of ‘position’, ‘height’, and ‘width’ will change.
In the added layout tab, ‘position’ information among Form Properties cannot be edited, but the size can be changed by changing ‘height’ and ‘width’ which are ‘Layout Information’. When changing size by using Tracker, the ‘position’ information will not be saved and only ‘height’ and ‘width’ information will be saved.
Properties that are shown in ‘Layout Information’ are the same as the ‘Layout List Dialog’.
For the layout tab that has different information from ‘Default’ tab from Form Design, properties are shown in bold blue letters. Thus the information displayed in Properties Window has the meaning as below depending on the thickness and color of words.
Color | Bold | Information |
|---|---|---|
Black | X | Default value with only theme and CSS applied |
Black | O | Edited in the ‘Default’ tab, theme and CSS having different value from the default value |
Blue | O | The value edited from added layout tab and have different value from the information in ‘Default’ tab |
When displaying properties in the added Layout tab of Form Design, properties shown below becomes disabled so they cannot be edited.
Property Name | Description |
|---|---|
Id | All component IDs cannot be edited in the added Layout tab. |
taborder | All component taborders cannot be edited in the added Layout tab. |
inheritanceid | Among Form Properties, inheritanceid cannot be edited. |
position | Among Form Properties, position cannot be edited. |
Sub Layout
Components that have contents within, such as Div, PopupDiv, TabPage have Multi Layouts like Form, and these are called Sub Layouts. Sub Layout does not match 1:1 with Form Layout and it has its own Multi Layout, In the case of Tab, you can construct different multi layouts by TabPages.
Components that have Sub Layouts automatically display the optimal Sub Layout among its several layouts that fits the size of component.
When the size of target component changes, there will be a change in sub layout and the component automatically searches for optimal sub layout that fits the new size of component.
The lower contents of components that have sub layouts can be edited only in Default Layout of Form. (Same as previous way of editing)
The edited contents will be saved in the Sub Layout displayed by relevant component.
However, in added Layouts you cannot edit contents. (ex. iPhoneW Layout in figure) Thus, lower contents cannot be selected or edited, and if you select a lower content, the uppermost component will be selected. To edit contents in added layout, you must use Sub Layout Editor.
To edit contents in added layout, Sub Layout Editor must be used. Components that have sub layouts provide two popup menus – Sub Layout Edit and Set Sub Layout.
By selecting Sub Layout Edit menu, you can edit Sub Layout.
If you select Set Sub Layout menu, component size will be changed to the size of selected sub layout. Set Sub Layout appears only when there are other sub layouts other than Default Sub Layout.
When you select Sub Layout Edit, Sub Layout Editor will appear as below.
Sub Layout Editor cannot be executed for the components that have link URL.
It can be also started by double clicking like Contents Editor.
Before Sub Layout Editor starts, the default size of target component will be the size of default sub layout.
Components other than target component and lower components of the target component cannot be selected or edited.
Components that are hidden by scroll can be edited also.
Ruler that fits the size of target component will be provided.
Like For Layout, part of functions like creating components will be limited in layouts other than default in Sub Layout Editor.
Popup Menu for Sub Layout Editor will be provided.
If you select component, popup menu will appear a little differently.
Menu | Icon | Function | |
|---|---|---|---|
1 | Add Sub Layout | Displays dialog of creating new sub layout. But, name that is already being used in sub layout cannot be entered. | |
2 | Delete Sub Layout | Delete selected layout from the Sub Layout List. But, ‘Default’ cannot be deleted | |
3 | Sub Layout List | Displays dialog that can edit information of sub layout being used in current component. Information of all sub layout including default sub layout can be edited. Add Layout: Button that adds Sub Layout Delete: Button that deletes Sub Layout Name: Sub Layout Name But, name of default sub layout cannot be used Width: Width of Sub Layout Height: Height of Sub Layout | |
4 | Apply Size & End Edit | Set target component to the size of sub layout being edited, and add undo buffer that was being worked on in Sub Layout Editor to design undo list, binding them in one. | |
5 | End Edit | Add undo buffer that was being worked on in Sub Layout Editor to design undo list, binding them in one. | |
6 | Cancel Edit | Undo all works done in Sub Layout Editor and return |
You can change the size of Sub Layout, but the position of target component does not change.
Style and some properties of target component can be set up in each sub layout.
The contents edited of default layout will be saved in Tag such as <Div>.
The contents edited of other lower sub layouts will be saved in the relevant <Layout>.
Other notices related to operating Sub Layout Editor
Components that have lower contents in each sub layout can be edited only in default layout like Form Design.
You cannot start another Sub Layout Editor in Sub Layout Editor.
You can start Contents Editor
Other component operations are the same with Form Design.
Sub Layout Undo
Undo in Sub Layout Editor is separately managed with Form Design.
Undo before Sub Layout Editor running cannot be used in Sub Layout Editor.
Undo accumulated in Sub Layout Editor will disappear or be added in the Form Design Undo List when ending editor. (edited contents in Sub Layout Editor will be perceived as one set of Undo)
Step (V9.2 added)
Step is a function which can develop pages that consist of several steps in one Form.
When you control step count properties value of form, stem will appear as shown in the figure below.
No. | Description |
|---|---|
1 | Displays Step that is currently being edited Step being currently edited will be decided by the location of mouse pointer. |
2 | Guide line between steps |
The actual size of Form does not change even if there are several steps.
Only 1 Step is shown when you run it.
Position2 (V9.2 added)
Position2 property that can designate position with “%” is added. Position2 related editing function such as Ruler, DotGrid (dots shown on the screen floor) is provided in UX-Studio.
Tracker
When setting position type of component to position2, the shape of tracker will be shown differently.
Position2 Tracker displays the fixed side in red so you can check the anchor status without seeing the poition2 value.
Ruler / Dot Grid
Position2 assists percentage input, so a function that displays information in percentage unit from Form Design is added.
When selecting Show Pixel Ruler / Show Percent Ruler from the popup menu of Ruler, the display method of Ruler and Dot Grid will change to relevant unit
Component Resize Info
When resizing one selected component with Tracker, the information of resizing will be displayed
If the ruler unit is being displayed by percentage, the resize info will also be displayed in percentage unit.
Position Editor
Editor with UI is provided so that user can set up position information easily. Position Editor can be summoned from Mini toolbar of Form Design.
Minitoolbar is a function added in the 9.2 version, and it is a function that can easily edit Style Properties that are frequently used.
The edited value from Position Editor will be applied after changing to position value or position2 value that the target component is using.
Properties Window
In the Properties Window, functions that enable changing units of added Position2 is provided.
Percentage unit is only provided in position2, and when position type component is position, the value does not change to relevant function.