The Visual Designer

The Visual Designer is used to visually model Windows project components such as views and lookup lists. The Studio expects that a single component will be created in a single file. From the standpoint of the Visual Designer, the terms file and component can be used interchangeably.

To visually model web application components open the Studio’s WebApp Designer panel.

When a file is loaded and as it is changed the Studio will determine if a file contains a component that can be visually modeled. If it can, it will be displayed. If it cannot, the designer will display a message explaining why the file is not visually modeled. For more information about visual modeling, see “How The Studio Visually Models Objects”.

A component is represented in the Visual Designer as an MDI child window. The client area inside this window will contain all of the other objects that can be visually modeled in the component.

WYSIWYG Modeling

When you are modeling the components of a Windows project, most of the objects will have a visual representation in the running application (e.g. a button object). The Visual Designer will model these objects "what you see is what you get" (WYSIWYG) style.

If the Studio knows how to visually model an object it will do so. It determines if the object can be modeled by checking its class. A class is associated with a visual object by its DesignerClass meta-tag setting. If the meta-tag exists and the studio can model the designer class, the object will be modeled. If a class can not be visually modeled, it will not appear in the Visual Designer.

Using the Visual Designer

Objects on the visual design canvas can be created, destroyed, moved, re-sized and edited using the mouse and keyboard. A variety of views and tools are available in the Studio for manipulating objects in the Visual Designer. Refer to the see also section below for details.

The Visual Designer Context Menu, which is invoked by selecting any object in the designer and pressing the right mouse button, provides access to many of the capabilities of the designer.

The Visual Designer, the Code Editor and Code Explorer

The Visual Designer and the Code Editor are both representations of the same file.  These representations are called “views”. When changes are made in the Visual Designer, those changes are immediately made to the code editor. When changes are made in the code editor, those changes are eventually made to the Visual Designer. (Since code editor changes occur at the character-by-character level you do not want those changes to be immediately applied to other clients such as the Visual Designer.)

Because selections in the editor and the designer are closely related an easy mechanism is provided for switching between a File’s Code Editor and Visual Designer views. Pressing the F7 key in either client switches to the other. Double clicking on any object in the Visual Designer will switch to Code Editor. When you switch from the Visual Designer to the Code Editor, the source code for the current selected object will be shown.

The connection between the Visual Designer and the Code Editor is best seen and understood by looking at the Code Explorer Panel. The Code Explorer shows all objects, methods, etc. in a tree view. If any node (object, method, etc.) is selected, it will also be selected in the Code Editor and the Visual Designer. The Editor will locate the code that represented by the node. The Visual Designer will attempt to locate the object associated with the node. We use the word “attempt” because the node may not be something that can be represented in the designer (e.g., a class, an use statement, a non-visual object).

Undo and Redo in the Visual Designer

Every operation performed in the Visual Designer can be reversed via Undo and Redo. These operations can be performed from the Visual Designer or from the Code Editor.

Note that once a change has been made within the Code Editor, the Visual Designer can no longer Undo/Redo these operations. This restriction exists because the code editor is capable of making changes at a level smaller than designer can handle (i.e., it can change single characters). However, the changes made in the designer or the editor can always be reversed from the editor.

For example, let’s say you performed a number of Visual Designer operations. You can undo and redo any of these operations in the Visual Designer. Now you change something in the code editor. You can no longer perform undo/redo operations in the designer. You can, however, switch to the editor and perform undo/redo operations there. You can undo the changes made in the editor and you can undo changes made in the designer.


See Also

How The Studio Visually Models Objects

Selecting Objects

Dragging, Dropping and Resizing Objects

Menus, Toolbars & Statusbars

Grid Objects

Splitters and Scrolling Containers

The Visual Designer Context Menu

Object Properties

Class Palette

DDO Explorer

Locking Objects

The Background Resolution Grid

The Code Editor

The Code Explorer