Can't find what you are looking for? Try these pages!


Introduction to WebApp Styling

October 12,2016
By Harm Wibier

One of the major advantages of using the DataFlex WebApp Framework is that it takes away the need to master all the techniques that are involved with the creation of web applications. In case of the styling it does this by providing a set of themes that provide great looks your application. So, without knowledge outside of DataFlex, one can write good looking applications. But taste and functional needs can be reasons to go outside of what the framework delivers by default. Customizing the looks is done using Cascading Styles Sheets (CSS) which is an industry standard used all over the web. This series of blogs will not be a CSS training as there are already numerous great resources available for that (for example,

The framework itself also uses CSS to define the standard styles and for a big part of its functionality. For example, hiding controls using pbRender and pbVisible is done by changing the display and visibility style tags. These properties are mapped to inline CSS styles set directly on the so-called Document Object Model (or DOM, the HTML elements in memory) by the JavaScript classes. Some other properties like pbPromptButton are translated into a specific CSS Classname being added to DOM elements. The pbPromptButton property of cWebForm adds the "WebFrm_HasPrompt" classname to the DOM structure which makes sure that the prompt button is actually shown. The CSS rules for this classname are defined in the System.css and Theme.css include files, where System.css is responsible for the basic functionality of hiding / showing the button and Theme.css for the cosmetics of that button. There is only one System.css that is always used and there are multiple versions of Theme.css (the actual themes).

Both files usually use the same selectors, and it is the order in which they are included that determines which rules are applied. The Theme.css is always included after the System.css, so if the selectors are equal, the rules of the theme override those of the system. The third and last include file is Application.css. This file is empty when creating a new workspace and this is where minor styling customizations and styles for extensions of the framework can be placed, especially when using one of the default themes, as it is good to keep small customizations separate to ease the process of migrating to a newer version.

If the customizations get too big then you should consider making your own theme. The process of making your own theme is simple by just copying one of the existing theme folders and renaming it into the name of your theme. The Df_ prefix is reserved for the standard themes and we do not guarantee that the studio will not overwrite your changes if the theme name starts with Df_.

A big challenge when styling Web Framework Applications is to find out the HTML structure that the framework uses. The HTML is generated by the JavaScript classes of the framework, and usually has the same nested structure as the control objects have in the DataFlex code. The HTML generation is a process that is divided over the control class and its base classes. There is an important difference between controls (like cWebForm, cWebButton, ..) and containers (like cWebPanel, cWebView, ..).

<div class="WebControl WebForm Web_Enabled" data-dfobj="oVendor.oWebMainPanel.oVendorAddress" style="float: left; clear: left; margin-left: 0%; width: 100%;">
<div class="WebCon_Inner WebCon_LeftLabel">
<label for="_df_53" style="text-align: right;">Street:</label>
<div style="-webkit-user-select: text;">
<div class="WebFrm_Wrapper">
<span class="WebFrm_Prompt"></span>
<div class="WebFrm_PromptSpacer">
<input type="text" name="oVendorAddress" value="" id="_df_53" placeholder="" title="Street Address." class="dfData_Text" maxlength="30" style="-webkit-user-select: text;">

The example above shows the HTML structure for a cWebForm with all of the CSS classes and inline styles applied to it. The elements outside of the <div class="WebFrm_Wrapper" are all generated by the cWebBaseControl class and are the same for other controls (like cWebButton, cWebCheckbox). These elements are used to render the label (psLabel, peLabelPosition, ..) and for the control positioning (piColumnIndex and piColumnSpan). The positioning properties mainly translate into the inline styles applied on the outermost div element. Looking at the outermost div element we see that controls always have the WebControl CSS class applied and Web_Enabled (or Web_Disabled) is available depending on pbEnabled.

<div class="WebContainer WebPanel Web_Enabled" data-dfobj="oDemoTreeView.oLeftPanel" tabindex="-1" style="position: absolute; top: 0px; left: 0px; bottom: 0px; width: 400px;">
<div class="WebCon_Sizer" style="min-height: 865px;">
<div class="WebCon_Content">
<!-- This is where HTML of controls inside the panel goes -->
<div style="clear: both;"></div>

<div class="WebPanel_DividerVertical" style="right: 0px;"></div>

The example above shows the HTML structure of a cWebPanel with all the CSS classes and inline styles applied to it. Instead of WebControl we now see the WebContainer class being applied to the outermost element. The only thing containers have in common is that they all can contain controls or panels. All different types of containers have their own logic for positioning themselves.

So the challenge of styling web framework applications is to get to know the HTML structures generated by the JavaScript controls. What can be done from CSS is limited as the framework determines the structure and the positioning of controls. Styling web framework applications should be seen as skinning or theming which is different as to what most web designers are used to.