PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • This lesson will teach you the following concepts
  • Overview
  • Discovering styles
  • A control: several elements
  • Discovering the styles via an example
  • Selecting the CSS style of a control
  • Editing the CSS style of a control
  • The WEBDEV styles
  • Implementing styles: a practical example
  • Overloading a CSS style for a control
  • Modifying a CSS style for all controls
  • Styles and rich text
Lesson 7.1. The styles
This lesson will teach you the following concepts
  • The CSS styles
  • The WEBDEV styles

Estimated time: 1 h
Previous LessonTable of contentsNext Lesson
Overview
WEBDEV allows you to "design" your sites. To help you with this task, WEBDEV proposes to use two types of styles:
  • The CSS styles,
  • The WEBDEV styles.
Using styles for your controls presents a huge benefit: a modification performed in a WEBDEV or CSS style is automatically applied to all controls that use this style.
Discovering styles
Before using the styles, let's see their application support: the controls.

A control: several elements

Each WEBDEV control includes several elements,
  • Let's consider the edit control for example. This control includes three elements:
    • the caption.
    • the input area.
    • an additional area containing the caption and the input area.
  • How are the styles applied to the edit control? The mode for applying styles depends on the type of style used (WEBDEV or CSS).
    • The CSS styles in WEBDEV will be applied to the control elements.
      For the edit control, a specific CSS style can be applied to the caption of edit control or to the input area.
    • The WEBDEV styles will be applied to the entire control.
      A WEBDEV style includes several CSS styles.
      For example, on the edit control, the WEBDEV style contains:
      • The CSS style for the caption,
      • The CSS style for the input area,
      • The different style options for the global area of control.

Discovering the styles via an example

  • To discover the styles in WEBDEV, a simple example was prepared for you:
    1. Start WEBDEV 23 (if not already done). Close (if necessary) the current project in order to display the home window.
    2. Open the "Styles" project. To do so, in the home window, click "Tutorial" and select the first "Styles (Answer)" project.

      Tip

      If the home window is not displayed, on the "Home" pane, in the "Online help" group, expand "Tutorial" and select "Styles (Answer)".
    3. Open the "PAGE_Styles" page in the editor.
    4. Display the description window of "Name" edit control (display the popup menu of control and select "Description").
    5. Select the "Style" tab. This tab is used to define the style characteristics of control.
    6. The following window is displayed:
This window allows you to manage the CSS styles (section 1 of window) and the WEBDEV styles (section 2 of window) for the control. Let's take a look at the features of this window.

Selecting the CSS style of a control

  • To select the CSS styles of a control:
    1. In the "Style" tab of the description window of control, in the "Element" combo box, choose the element with the requested style.

      Note: All elements flagged "(CSS)" can use a CSS style directly: all you have to do is select its name.
    2. The "CSS style" combo box is used to choose the CSS style of element: this style will be applied to the element.

Editing the CSS style of a control

  • To create or edit a CSS style:
    1. In the "Style" tab of the description window of control, click "..." found beside the "CSS style" combo box.
    2. The window for editing the CSS styles is opened.
    3. This window allows you to create or modify all CSS styles of project.
  • Let's study this window. This window includes 2 sections:
    • Section 1. The status of control onto which the style will be applied: normal, rollover, active, ...
    • Section 2. The CSS properties associated with the selected status. Each CSS property can be modified for each status.
  • Let's check the characteristics of the CSS style named "MyCustomStyle_InputArea":
    1. Select the "MyCustomStyle_InputArea" style in the combo box of section 1 if necessary.
    2. Select the "Normal" status (the first status of section 1).
    3. Click the "Background" tab: the background color is white.
    4. Select the "Editable" status (the 4th status of section 1).
    5. In the "Background" tab, the background color of input area is pastel yellow. The CSS style contains the style for each one of the states..
    6. Close the description window of CSS style.
  • The "Style" tab found in the description window of control is redisplayed. In the bottom section of window, you have the ability to quickly access the style elements that are frequently modified:
    • Font,
    • Size,
    • Bold, Italic, Underlined, Strikeout,
    • Vertical and horizontal alignment,
    • Background color.

Caution

These options are used to quickly overload the CSS style for the current control. In this case, the modifications performed in these options will not be applied to the other controls that use this CSS style.
The "More options" link is used to overload all other properties of CSS style.
Let's now discover the WEBDEV styles.

The WEBDEV styles

A WEBDEV style includes several CSS styles. For example, on the edit control, the WEBDEV style contains:
  • The CSS style for the caption,
  • The CSS style for the input area,
  • The different style options for the global area of control.
  • To manage the WEBDEV styles, use the panel displayed on the right of "Style" tab of control:
    The name of WEBDEV style is displayed at the top of this window. You can:
    • Choose an existing style,
    • Add the style of current control to the style sheet of project.
      This option allows you to re-use this style in other project controls.
    • Dissociate this control.
      This option prevents the future style modifications from being applied to this control. This option is not recommended: we advise you to use style overloads.
The project skin defines a WEBDEV style for each type of control. This WEBDEV style can be used "as it is" or it can be modified on some control elements. For example, to specify that the caption must be bold on an edit control (and on this one only), you must:
  • Select the "Caption (CSS)" element in the bottom area of "Style" tab.
  • Select "Bold" in the bottom area.
This modification will not dissociate the WEBDEV style from the control: the Bold property will be overloaded in relation to the initial style.
Therefore, if the initial style is modified (to change the background color for example), this modification will be applied to this control while keeping the overload.

Note

To see the overloaded elements, all you have to do is click at the top of panel for managing the WEBDEV styles on the link that indicates the number of overloads performed for the control.
Implementing styles: a practical example
Enough theory, let's get down to work. We are going to create an edit control and to modify its styles in th "PAGE_Styles" page of "Styles" project.
Note: We will be using an edit control but the principle for handling styles can be applied to all controls available in WEBDEV.
  • To create the edit control:
    1. On the "Creation" pane, in the "Usual controls" group, click .
    2. This control is associated with a WEBDEV style (it is the default WEBDEV style defined in the skin chosen when creating the project).
  • Three methods can be used to select the WEBDEV style of a control:
    • Via the "Style" tab found in the control description of control (as already seen).
    • Via the "Modification" pane of ribbon: a preview of different WEBDEV styles available for the control is displayed.
    • By displaying the popup menu of control and by selecting "Choose a WEBDEV style".
  • This last method will be used to associate the control that was just created with the "EDT_Custom" style. This style is used by all other page controls.
  • Validate the window for style selection. The color of control caption changes: the style is not applied.
  • Save the page (Ctrl + S) and run the page test ( among the quick access buttons).
    1. The page is displayed in the browser.
    2. Enter in input in the new edit control: the input area is colored in yellow.
    3. Close the browser.

Overloading a CSS style for a control

  • We are now going modify the style of the input area found in the control:
    1. Display the description window of created control.
    2. In the "Style" tab, choose the "Input area (CSS)" element.
    3. Click the "More options" link to overload the CSS options of this element.
    4. Select the "Editable" status.
    5. In the "Background" tab, change the background color. Choose a mauve color for example.
    6. Validate. In the pane of WEBDEV styles, the link (top right) indicates "1 overload".
    7. By clicking it, you can see that the background color of editable inside area was overloaded.
    8. Validate the description window of control.
  • Save the page (Ctrl + S) and run the page test ( among the quick access buttons).
    1. The page is displayed in the browser.
    2. Move the cursor from a control to another one: the background color is yellow for all controls except for the control that was just created.
    3. Close the browser.

Modifying a CSS style for all controls

  • We are now going to modify the CSS style of input area in order to change the text color. This modification will be performed for all edit controls of the page.
    1. Display the description window of created control (Alt + Enter).
    2. In the "Style" tab, choose the "Input area (CSS)" element.
    3. Click the [...] button on the right of the name of CSS style. The window for editing the CSS style is displayed.
    4. Select the "Normal" status.
    5. In the "Text" tab, change the color. Choose a green color for example.
    6. Validate then validate the description window of control.
  • Save the page (Ctrl + S) and run the page test ( among the quick access buttons).
    1. The page is displayed in the browser.
    2. Type text in the different edit controls of the page: the text is displayed with the new selected color. This modification was taken into account even on the control that was created beforehand and whose style was overloaded.
    3. Close the browser.
Styles and rich text
You also have the ability to define rich text in the elements!
The rich text allows you to use different styles for the different words found in the control caption. Therefore, for the caption of an edit control, you have the ability to define that part of the caption will be using the default color while another part will be using a different color.
Let's take a simple example: adding a red asterisk to specify that a control is a mandatory control.
  • In our example:
    1. Select the "Name" control.
    2. Press the SPACE or ENTER key on the keyboard.
    3. The caption text becomes editable.
    4. Add a star at the end of caption.
    5. Select this star.
    6. On the "Text" pane, in the "Font" group:
      • Click the button to switch the star in exponent.
      • Change the text color to red with the button.
    7. Exit from the edit mode (ESC key).
    8. The red asterisk appears in the control caption.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 23
Comments
Click [Add] to post a comment