Designer
The Designer is a tool for graphical design of web-based user interfaces, and is available on the Design view when working on a web page.
The Code Editor and the Designer can be used combined, since both are synchronized: changes on one of them are immediately reflected in the other. This is what makes HTML5 Builder such a powerful editor, because you can combine the ease of visual development with the flexibility of source code edition.
Contents
Usage
Workflow
Interface Design
To design a webpage, drag and drop controls from the Tool Palette into the Designer. Those controls will be rendered so they are displayed on the Designer as they would look on a real web browser.
You can then modify them:
- Resize them on the Designer and change their location.
- Use the Object Inspector to edit their properties. Those control properties with visual repercusions (such as colors or fonts) will result in the control being refreshed on the Designer.
Logic Development
You can also use the Designer to speed up logic development. Drag and drop from the Tool Palette, or property edition from the Object Inspector, are examples of features you can use with non-visual components to set them up quickly.
You can also, for example, generate event handlers to manage events on components quickly; just double-click the event on the Object Inspector, and you will be taken to the Code Editor, where the surronding code of the event handler will be waiting for you to write the logic. You can also double-click a component on the Designer itself to generate an event handler for its OnClick event.
Note: For controls without an OnClick event, the first of the following events available will get an event handler instead: OnChanged, OnChange, OnCreate.
Component Selection
To select a component from the Designer, click on it. Selected components will be surrounded by points you can use to resize them (as long as they are controls). When you select a component, there are several widgets that get updated as a reaction. For example: the Structure will highlight the selected component, the Object Inspector will display properties and events for that component, and the Tag Viewer will display the code the component generates.
You can also select several components at the same time, so modifications affect them all. Hold Shift while you click on the target components. The Object Inspector, for example, will then only display those properties common to the selected components, and changes to those properties will affect all the components. The components will act as a single component also when you drag them around the webpage.
Features
Control Commands
When you right-click a control on the Designer, you get a context menu with the following standard entries:
- Align to Grid
- Modifies the location of the control so it is aligned with the grid.
Note: You can change the dimensions of grid cells.
- Bring to Front
- Puts the control on top of any other control that overlaps it.
- Send to Back
- Puts the control under any other control it overlaps.
- Align…
- Opens a dialog window that lets you change the alignment of the component or components selected. This feature is specially usefull when you work on several components at once, since it has a lot of options to align them relative to each other.
- Size…
- Open a dialog window that lets you change the size of the component or components selected. This feature is specially usefull when you work on several components at once, since it lets you change their size based on the current size of one of the selected components.
- Flip Children
- Flips horizontally the children of either All the containers or the Selected container and its children containers.
Certain controls might have additional commands as well, that will be displayed on top of the list on the context menu.
Overlapping Warning
As opposed to non-visual components, controls have a visual representation, so they render code that is supposed to be displayed on the space taken by the control on the Designer.
Whenever you locate two controls on the Designer so they take space from each other (overlap), a little icon will be displayed on the top-left square of those controls at design time (will not be there when you actually run your application). That icon is to warn you about the overlapping, since it can be troublesome with certain web browsers.
If you are looking for that behavior, however, you can take advantage of layered containers. These special containers let you distribute your controls on layers, so you can define the order in which they should appear on the webpage, which ones above, which ones below.
Settings
You can configure the Designer from Home > Options > Environment Options > Designer. The following settings are available:
- Display grid
- Displays dots on the form to make the grid visible.
- Use designer guidelines
- When checked, enables the designer guidelines. The designer guidelines appear when moving components on the Designer, making it easier to align them with each other.
- Snap to grid
- Automatically aligns the components on a form with the nearest grid line. If enabled, you cannot place a component between grid lines.
- Grid size/Snap tolerance
- Sets the grid spacing in pixels. You can set different values for the x and y axes.
- Show component captions
- When selected, captions will be displayed below the icons representing non-visual components with the name of those components. Uncheck this option to hide the caption.
- For example, if you drop an Geolocation component named Geolocation1 onto a form, the caption "Geolocation1" will be displayed below the icon of the component.
- Show designer hints
- When hovering a component, display a tooltip with the name of the component and its class.
- Show extended control hints
- When hovering a component, display additional information on its tooltip, such as its position and size on the form.
See Also
- Mobile Designer.
- Related widgets: Structure, Object Inspector, Tag Viewer, Tool Palette.