Curl Style Sheets

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 readers 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.

Once you have installed the COM.CURL.CUI.STYLED-CONTROLS package, you are able to access and include the default style sheet within your application. This style sheet provides an updated look and feel to Curl controls and can be used across all applications.

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.
• The second item on the dropdown list displays formatted controls using our default style sheet.
• 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.

Creating Standard Login functionality

Before we style controls, let's first create the login interface using standard functionality. 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.

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..

Accessing the Default Style Sheet

In order to use a style sheet in Curl, you must first install the COM.CURL.GUI.STYLED-CONTROLS. The library includes Curl style sheets as well as styleable controls. To use the default skin, you will do the following:

1. Download the styled controls library and unzip it in a convenient location.
2. Install the documentation from the downloaded library. (This step is optional as it provides the API documentation and User's Guide)

Downloading the External Library

You can find the COM.CURL.CUI.STYLED-CONTROLS external library that is from the Curl web site. First download a zip file of the external library that can be found here: http://www.curl.com/developer/libraries/styled-controls/style-library-intro.php. On this page, you will have 2 options:

• For development purposes, download COM.CURL.GUI.STYLED-6.0-en.zip
• For deployment purposes, download COM.CURL.GUI.STYLED-6.0-pcurl-en.zip

When you unzip the library, place the files in a directory that is easily accessible from your development environment; e.g. C:\Curl_Libraries. Note that you may have additional external libraries that may be grouped under the same parent directory.

Installing the Library Documentation

To install the documentation in the Curl IDE, select Install Documentation from the Help menu in the Curl IDE. Click the Install button and then navigate to the location where you unzipped your copy of the library and select the manifest.mcurl file. Now you can access the associated documentation using Curl's Documentation Viewer.

Note that you only need to install the docuementation once, when you download the library (or if you download an update, you'll want to uninstall and install the updated documentation).

Using the Default Style Sheet

We can add 3 statements to our 'standard login' applet to implement the defult styling. In your applet, first declare the location of the STYLED-CONTROLS in the manifest, then import the STYLED-CONTROLS package and call install-style-sheet. The steps below provide the code that needs to be added.

1. Delcare the location of the package in your applet using {applet manifest = "libs/COM.CURL.GUI.STYLED-6.0-pcurl-en/manifest.mcurl"}. Note that for our example we are using the pcurled version.
2. Import the package in your Curl applet using {import * from COM.CURL.GUI.STYLED-CONTROLS}.
3. Declare the location of the default style sheet. This file is named DEFAULT-STYLE-SHEET and is located in the COM.CURL.GUI.STYLED-CONTROLS package. Add the DEFAULT-STYLE-SHEET in the manifest declaration: {install-style-sheet{manifest-url "file", "DEFAULT-STYLE-SHEET"}}.

The following example adds these three lines. Notice the change in the control display.

Note: If you have multiple files contained within an IDE project, any file that uses the styled controls library must delegate-to the library manifest. To delegate-to the package manifest, select the Add Delegate-to option on the IDE Project menu and navigate to the manifest.

For more information regarding style sheets, please refer to the Curl Styled Controls Library User's Guide that you installed in the Curl Documentation