Styling1:Curl Styles

[kino]

Curl supports custom style sheets that are similar in functionality to Cascading Style Sheets (CSS). It allows developers to control the style and layout of displayed Curl elements all at once.


A Curl style sheet is used to help authors of web pages to define colors, fonts, layout, and other aspects of document presentation. It is designed primarily to enable the separation of document content from document presentation. This separation can provide more flexibility and control in the specification of presentational characteristics and can reduce unnecessary complexity and repetition caused by intertwining the structural content with presentation styles.


In referring to the following applet, select the dropdown list to display three different login views.

•The first item in the dropdown list displays controls created with Curl by removing the default style options.

•The second item on the dropdown list displays controls using our default styles.

•The third item on the dropdown list displays formatted controls using a custom style sheet.


Note that the login screen does not implement a login procedure, rather it displays the controls for example purposes. We have, however, included validation on the text fields.


In this Curl Cue, we will be addressing the first two items: creating controls with Curl and using a default style sheet. Creating custom style sheets will be discussed in a subsequent Curl Cue.

Default Style

Before we style controls, let's first create the login interface using Curl's default styling. From working with Curl containers and controls, you should be familiar with creating the following login screens. The following code displays standard look and feel of Curl graphical objects created to display a standard login screen.

Code:

{curl 7.0 applet}

|| Form creation procs
{define-proc {login-dialog
                tf:TextField, pf:PasswordField, cb:CommandButton
            }:Graphic
   {return
       {GroupBox
           label = "",
           {Dialog
               {Table
                   {row
                       {cell {Label"Username:"}}
                       {cell {value tf}}
                   },
                   {row
                       {cell {Label "Password: "}}
                       {cell {value pf}}
                   },
                   {row
                       {cell
                           colspan = 2,
                           halign = "center",
                           {value cb}
                       }
                   }
               },
               {validate-with {DialogValidator}}
           }
       }
   }
}

{value
   let tf:TextField =
       {TextField
           width = 2cm,
           {validate-with ValidationPattern.email-address, required? = true}
       }

   let pf:PasswordField =
       {PasswordField width = 2cm,
           {validate-with {StringValidator}, required? = true}
       }

   let cb:CommandButton =
       {CommandButton
           label = "Submit",
           {on Action at cb:CommandButton do
               {if-non-null dlg = cb.dialog then
                   {if {validate-dialog dlg} then
                       let dlg:Dialog =
                           {Dialog
                               {GroupBox
                                   width = 4.5cm,
                                   label = "",
                                   {hcenter
                                       {VBox
                                           halign = "center",
                                           spacing = 0.1cm,
                                           {Label "Submitted"},
                                           {ok-button}
                                       }
                                   }
                               }
                           }
                       {dlg.show title = "Validated"}
                   }
               }
           }
       }

   {login-dialog tf, pf, cb}
}

[b]Removing Default Styling[.b]


We can remove all default styling by using install-standard-look-and-feel. This will remove all styling from the controls. Place this procedure at the top of your applet.

Code:

{curl 7.0 applet}

{install-standard-look-and-feel}

|| Form creation procs
{define-proc {login-dialog
                tf:TextField, pf:PasswordField, cb:CommandButton
            }:Graphic
   {return
       {GroupBox
           label = "",
           {Dialog
               {Table
                   {row
                       {cell {Label"Username:"}}
                       {cell {value tf}}
                   },
                   {row
                       {cell {Label "Password: "}}
                       {cell {value pf}}
                   },
                   {row
                       {cell
                           colspan = 2,
                           halign = "center",
                           {value cb}
                       }
                   }
               },
               {validate-with {DialogValidator}}
           }
       }
   }
}

{value
   let tf:TextField =
       {TextField
           width = 2cm,
           {validate-with ValidationPattern.email-address, required? = true}
       }

   let pf:PasswordField =
       {PasswordField width = 2cm,
           {validate-with {StringValidator}, required? = true}
       }

   let cb:CommandButton =
       {CommandButton
           label = "Submit",
           {on Action at cb:CommandButton do
               {if-non-null dlg = cb.dialog then
                   {if {validate-dialog dlg} then
                       let dlg:Dialog =
                           {Dialog
                               {GroupBox
                                   width = 4.5cm,
                                   label = "",
                                   {hcenter
                                       {VBox
                                           halign = "center",
                                           spacing = 0.1cm,
                                           {Label "Submitted"},
                                           {ok-button}
                                       }
                                   }
                               }
                           }
                       {dlg.show title = "Validated"}
                   }
               }
           }
       }

   {login-dialog tf, pf, cb}
}

For more information please refer to the User Interface Basics section of the Curl Cues or in the Curl documentation:

Curl Developer's Guide > Graphical User Interface > Dialogs and Controls..




For more information regarding style sheets, please refer to the Curl Styled Controls in the Curl Documentation