CSS Classnames

One of the major advantages of using the DataFlex WebApp Framework is that it takes away the need to master all the techniques involved with the creation of web applications. In the case of styling, it does this by providing a set of themes that provide great looks to your application from directly within DataFlex, without having to learn other techniques. However, your application’s specific styling and functional needs may demand that you go outside of what the DataFlex framework delivers by default. In this second blog about styling DataFlex WebApps, I’ll explain how classnames are used by the framework, and how they can be used by developers and designers to enhance the style of your web framework applications.

CSS rules are applied by selecting elements using a so-called selector. A selector is built from classnames, IDs and or element tagnames. Classnames and IDs are applied to HTML elements using the class and ID attributes. The difference between classnames and IDs is that classnames can be used multiple times within an HTML page and IDs should be unique. A weight system determines which rules apply when multiple selectors apply to the same element. Selectors with an ID are always stronger than classnames. Classnames are stronger than tagnames.

As discussed in the previous blog the WebApp Framework applies a lot of classnames to its HTML. They are used by the Theme.css and System.css to determine default functionality and styling. An example is the cWebButton class that adds the "WebButton" classname to its outermost div element. When changing the default style of all buttons, this classname should be used. To change a single button, an extra CSS class can be applied in DataFlex code by using the psCSSClass web property. This property can also be changed at runtime using WebSet to change the style at runtime.

Object oWebButtonColor is a cWebButton
    Set piColumnSpan to 2
    Set psCaption to "Change color"
    Set psCSSClass to "ButtonGreen"

    Procedure OnClick
        String sClass
        
        WebGet psCSSClass to sClass
        
        If (sClass = "ButtonGreen") Begin
            WebSet psCSSClass to "ButtonBlue"
        End
        Else Begin
            WebSet psCSSClass to "ButtonGreen"
        End
    End_Procedure
End_Object

Looking at the example code above we see a cWebButton with the CSS class "ButtonGreen" applied. Clicking the button will change the class into "ButtonBlue". The CSS below actually changes the background color of the button. Do remember that CSS class names are case sensitive and therefore the value set in the DataFlex psCSSClass web property must match the CSS class name’s casing.

.ButtonGreen button{
    background-color: #0ea00e;
}
.ButtonBlue button{
    background-color: #4545dc;   
}

This code would typically be placed in Application.css. Note that the background color is actually applied to the button element inside the div with classname "ButtonGreen". This is because the HTML for this button will look like this:

<div class="WebControl WebButton Web_Enabled ButtonGreen" data-
dfobj="oOrder.oWebMainPanel.oColorButton" style="..">
    <div class="WebCon_Inner">
        <div>
            <button id="_df_4" title="">Change color</button>
        </div>
    </div>
</div>

When running the example one will notice an issue (depending on the used theme). If the button has the focus it will show a different color. This is because the theme applies a different color with a stronger selector when the button has the focus. For Df_Flat_Desktop the following selector is used for this:

.WebButton.Web_Enabled button:hover, .WebButton.Web_Enabled button:focus. 

This selector is stronger than our custom selector because it has two classnames and an additional pseudo selector. This CSS is applied when the control is enabled (Web_Enabled Class) and when the button has the focus or is hovered over by the mouse (:hover and :focus pseudo selector). To complete this example we will add a slightly lighter focus color for our ButtonGreen and ButtonBlue classes:

.ButtonGreen button{
    background-color: #0ea00e;
}
.ButtonGreen.Web_Enabled button:hover, .ButtonGreen.Web_Enabled button:focus{
    background-color: #1aec1a;
}

.ButtonBlue button{
    background-color: #4545dc;   
}
.ButtonBlue.Web_Enabled button:hover, .ButtonBlue.Web_Enabled button:focus{
    background-color: #7777f9;
}

So the psCSSClass is always applied to the outermost element of a control. The exceptions to this rule are list / grid columns, but these are special components anyway. One can also apply multiple classnames by providing them in a single string, separated by spaces.

This blog is the second entry in a series about DataFlex WebApp Styling. The first entry is Introduction to WebApp Styling. Stay tuned for more!