Post Reply 
 
Thread Rating:
  • 329 Votes - 2.84 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Styling1:Curl Styles
06-16-2011, 09:14 AM (This post was last modified: 06-16-2011 10:48 AM by kino.)
Post: #1
Styling1:Curl Styles
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


Attached File(s)
.curl  loginform.curl (Size: 7.36 KB / Downloads: 443)
Find all posts by this user
Quote this message in a reply
Post Reply 


Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  Styling3:Creating Styles with the Style Designer kino 0 4,290 06-16-2011 09:52 AM
Last Post: kino
  Serving Content3:Dynamically Generating Curl Content kino 0 4,353 06-15-2011 05:19 PM
Last Post: kino
  Serving Content2:Launching and Embedding Curl in HTML kino 0 8,086 06-15-2011 05:15 PM
Last Post: kino
  Serving Content1:Launching a Curl Applet kino 0 4,451 06-15-2011 05:12 PM
Last Post: kino
Forum Jump:


User(s) browsing this thread:
1 Guest(s)