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.
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.
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
End_Object
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:"
End_Object
Object oSalesPName is a cWebForm
Entry_Item SalesP.Name
Set piColumnSpan to 7
Set piColumnIndex to 3
Set psLabel to "Name:"
End_Object
End_Object
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.
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.
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.
The F7 Hotkey toggles the WebApp Designer panel open or closed.
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.
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 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
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.
Object Selection and Manipulation