One of the first phases of web application development is the design of the user interface and database view(s) for the application. This is accomplished in the IDE by using the WYSIWYG (What You See Is What You Get) form and database designers.
The form and database designers have the following layout:
The unit of measure used by the designers is the pixel, and the resolution is always assumed to be 96 pixels per inch. All modern web browsers use a virtual resolution of 96 pixels per inch, regardless of the actual resolution on the client machine's display. The web browser automatically handles the translation between the virtual resolution and the display resolution of the client machine.
By default, the designers show a grid to aid with component placement and alignment, and the grid guides (dots) are spaced apart at 8 pixel intervals. Please see the Modifying Environment Options topic for more information on modifying the designer grid properties.
Adding a Component to a FormThe component palette is available at the top of the main IDE window, and reflects all installed components in the component library, organized by their installation category:
The component palette is used to add both non-visual components and visual controls on to the form and database designers for use with your forms and databases. Non-visual components are represented visually at design-time, but are actually non-visual components at runtime.
The database designer only allows for non-visual components to be placed on the designer surface, and the visual size of the database instance in the designer is exclusively a design-time property.
To see more information about a particular component, hover the mouse over the component icon. The IDE will display the name of the component and the unit in which it resides in a tooltip window.
To add a non-visual component or visual control to the active form or database in the designer, click on the desired component/control on the component palette, and then click on the active form or database's client area. A form's client area is the area inside of the borders and caption bar (if present), whereas the database's client area is the database's entire designer space.
Selecting a ComponentTo select a single component in the form and database designers, click on the desired component with the left mouse button. To select more than one component, hold down the Shift key while clicking on the desired components with the left mouse button. Selecting multiple components is desirable when one wants to resize or align multiple components at the same time to ensure that their placement or size is uniform, or when one wants to copy and paste a group of controls or components.
Any time you hover the mouse over any component on the active form or database, tooltip information will be displayed about the component, including the name and position/size.
You can also use the mouse to directly select a group of components using a lasso:
If the group of components are placed on the form or database itself, you can click and hold down the left mouse button to begin the selection. Then, while keeping the left mouse button down, move the mouse to lasso the desired component(s).
If the group of components are placed on a sub-container (such as a panel), you can click and hold down the left mouse button, while also pressing the Ctrl key, to begin the selection. Then, while keeping the left mouse button and Ctrl key down, move the mouse to lasso the desired component(s).
Resizing a ComponentOnce a component has been placed on the active form or database's client area, you will see that the component will have designer handles on all four sides and corners of the component:
These designer handles can be used to change the origin and size of a component on the form or database. To accomplish this, click on a designer handle with the left mouse button, hold the left mouse button down, and drag the designer handle in the desired direction. You can also use the keyboard to resize a component by holding down the Shift key while using the up, down, right, and left arrow keys to resize the component on a pixel-by-pixel basis.
Certain components may have constraints on how tall/wide they can be, and non-visual components cannot be resized at all. In such cases, attempts to resize the component will result in the component size not exceeding the constraints imposed by the type of component. Also, you cannot use the left mouse button to resize components when multiple components are selected. In such cases, you can only use the keyboard to do so (Shift+Arrow Keys).
Moving a ComponentTo move a component, click on the component with the left mouse button, hold the mouse button down, and drag the component to the desired location on the form or database. You can also use the keyboard to move a component by holding down the Ctrl key while using the up, down, right, and left arrow keys to move the component on a pixel-by-pixel basis. Both of these techniques also work when multiple components are selected.
Component Layout and AlignmentThe layout toolbar on the form and database designers can be used to adjust the alignment, layering (send to back/bring to front), and tab ordering of components on the active form or database:
Each layout toolbar button has tooltip help that explains the purpose of the button.
Deleting a ComponentTo delete a component, select the desired component in the form or database designer and hit the Delete key. This will also work when multiple components are selected.
Undo functionality is currently not available for the form and database designers, so any modifications or deletions of components cannot be undone. Please be careful when deleting components to ensure that one does not lose a lot of hard work. If you do accidentally delete a component from a form or database, you can fix the issue by simply closing the form or database without saving the modifications, and then re-opening the form or database. However, this depends upon how much other work has been done to the form or database since the last save point, so it is wise to save your modifications on a regular basis.
Default Event HandlersIf you double-click on a component in the form and database designers, a new event handler will be created for the default event property for the component. For most visual or bindable controls, the default event property is the OnClick or OnChange event. Please see the Events topic in the Language Reference for more information on default events.
Toggling Between the Code Editor and DesignerIn order to toggle between the code editor and the designer, hit the F12 key, click on the toggle button at the bottom left-hand corner of the code editor and designer, or use the Toggle Designer/Unit option on the View menu:
Context-Sensitive HelpYou can get context-sensitive help on any component in the form and database designers by selecting the desired component and hitting the F1 key. For more information on using the help browser, please see the Accessing Help topic.