WebApp Designer

The WebApp Designer is used to visually model the currently selected file in the Code Editor. The file can only be visually modelled if it contains a web application component such as a web view or a web dialog. The Studio expects that a single component will be created in a single file. For example, if a file contains more than one web view the WebApp Designer will not model it correctly.

Designer Window Location

WebApp Designer is a docking panel and renders a visual much like the Code Explorer Panel. You can unpin this window and drag it to any position on your monitor, independent of the main Studio window. If you have a large monitor, or a dual monitor setup, it is common to drag the designer completely outside of the main Studio window so you can work in the Code Editor and see the visual model simultaneously.

WYSIWYG Modeling

When you are modelling a web application component, only the web objects in that component are rendered in the designer. A web object is any object based on the cWebObject class or a cWebObject subclass.

For example the following object structure would be recognized as a web view and rendered in the designer…

Object oSalesPerson is a cWebView

    Set piColumnCount to 10

    Set psCaption to "Sales Person Maintenance"

    Set piWidth to 600


    Object oSalesP_DD is a SalesP_DataDictionary



    Set Main_DD To oSalesP_DD

    Set Server  To oSalesP_DD


    Object oSalesPID is a cWebForm

        Entry_Item SalesP.ID

        Set piColumnSpan to 3

        Set piColumnIndex to 0

        Set psLabel to "ID:"



    Object oSalesPName is a cWebForm

        Entry_Item SalesP.Name

        Set piColumnSpan to 7

        Set piColumnIndex to 3

        Set psLabel to "Name:"



In the above example the cWebView and two nested cWebForm objects would be rendered in the designer. These are both cWebObject subclasses.

Various visual attributes of the web objects are controlled by setting web property values. In the above example: piColumnCount, psCaption, piWidth, piColumnSpan, piColumnIndex and psLabel are all web properties. Each web property value of each web object is rendered in the designer.

As you edit the component in the Code Editor or modify the component via the Properties Panel, the designer is automatically updated.

Switching Components

The designer operates the same as other Studio modeling panels such as Code Explorer and the Properties Panel. As you switch from editing one file to another the designer is refreshed to render only the currently selected file.

If the currently selected file is not able to render then the “Nothing to Render” message is displayed.

Drag & Drop

The designer supports Drag & Drop operations from the Class Palette and the DDO Explorer Panel.

As you drag the selected object over the designer you will see an “I” beam symbol following your mouse pointer. The “I” beam will “snap” to the nearest object location to your mouse position. When you drop the object it will be created at the location that follows the object indicated by the “I” beam.

Designer Window Toggling

The F7 Hotkey toggles the WebApp Designer panel open or closed.

Context Menu

The following actions are available from the designer’s context menu:


This will delete the currently selected object. The name of the object is indicated in the context menu.


This will refresh all of the objects rendered in the designer. This is sometimes useful when some attribute has been changed in an external file that would affect the web view’s appearance, e.g. some CSS property.

Modeling Limitations



The WebApp Designer utilizes the Internet Explorer OCX as its rendering engine. Each browser type and version will render HTML slightly differently. You should make sure that you have Internet Explorer installed and updated to one of the latest versions.

Web Properties

Web Property values are only rendered when set to a static value. Expression values are ignored by the designer. Example:

Set psLabel to "Hello: "             // this is rendered

Set psLabel to ("Hello " + "World")  // this is not rendered


Custom Controls

The designer can only render controls that are built-into the JavaScript library that is installed with DataFlex. Any custom JavaScript controls that you develop will be rendered using an empty place holder.


See Also

Object Selection and Manipulation