Thread Rating:
  • 563 Vote(s) - 2.77 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.)
#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 Files
.curl   loginform.curl (Size: 7.36 KB / Downloads: 1,116)


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


Users browsing this thread:
1 Guest(s)

MyBB SQL Error

MyBB has experienced an internal SQL error and cannot continue.

SQL Error:
1017 - Can't find file: 'mybb_threadviews' (errno: 2)
Query:
INSERT INTO mybb_threadviews (tid) VALUES('28')