Overview

The Style Designer is a Curl application that allows you to define styling preferences that can be written out as a Curl style sheet. This application allows you to easily create your own control styles without coding. You can...

• visually modify control styles including buttons, tabs, group boxes, text fields, and more

• create style templates for use with different applets

• share styles with other developers

• write out style sheets for use in Curl applets

Launching the Style Designer

The Style Designer is designed to run as a Curl detached applet, meaning that it can run from the web but without a web browser. You can run the Style Designer two different ways: directly from our website or from a downloaded copy.

1. To launch the Style Designer as a detached applet, by copy and paste this link into your browser: curl://launch/http://developers.curl.com/demos/style-designer/style-designer.dcurl

2. Download and unzip the source code from the bottom of the following page: Style Designer.         Once you have unzipped the contents, navigate to the style-designer folder and double-click on style-designer.dcurl.

In the case of the downloaded version, you will also need to grant privilege to the style-designer directory. You can do this by selecting the Curl RTE icon on the Windows task bar to bring up the Curl control panel (when the Curl RTE is running). Select the Security tab, then click This Computer heading to open the security settings for your computer. Click the Add Privileged Directory... link and enter the directory where you unzipped the Style Designer (or a parent directory). Click OK. From now on, any Curl applet launched from this directory will have full access to the local machine.

Using the Style Designer

Once you have launched the Style Designer applet, use this graphical interface to create your own unique look for the Curl styled controls. The left side of the applet is a collection of properties for individual Curl controls as well as general color preferences.

Each style created has an associated Name that is specified in the General Information section. When you initially launch the Style Designer, the default name is S-001.

Adjust the colors, highlighting, and other attributes to design custom look.  Each section displays attributes that can be changed until you are satisfied with the desired look. When an attribute is modified, for example Dialog Color, the sample controls on the right hand side of the window will automatically refresh to display the updated value.

The control groupings in this pane include the following:

• General Information: includes the style name, a place for you to record your personal rating of this style, and any notes.  Error messages will also appear here if selection values are invalid.

• Global Colors, Gradient Angle: sets general colors for all controls.

• Controls Options: grouped in a set of tabs, allows you to specify specific attributes for buttons, tabs, group labels, fields, and other controls.     Each control has control-specific attributes that can be set.

Changing Attribute Values

All field selections can be modified by either typing in a value or selecting a check box.  If a selection is not valid, an error message will be displayed in the General Information section.

You can also modify color selections by selecting the associated color next to the text field.  In this case, a Color Chooser dialog will appear, allowing you to select a color visually.

If you are unsure about choosing a color, you can let the Style Designer compute a color for you. Attributes that have an associated 'Compute' button provide a suggested value associated with the Start color, or first color of the color gradient. For example, if we select skyblue as the Start color and press the compute buttons for End and Border, the Style Designer will compute suggested colors.

Once you are satisfied with your color selections on your monitor, you may want to view the colors by printing a test page. Select Style >Test and the following dialog will appear. Select the appropriate tab that displays controls that you would like printed and click on the Print button.

Managing Styles

The Style Designer maintains a collection of styles.

Each time you create a new style, modify a style, or delete a style, the information will be updated in the Style Designer. You can access each style using the dropdown list in the top right corner.

From the Style menu:

• Use <font color="navy">Style > New Style</font> to create a new style or select the <font color="navy">New</font> button.

• Use <font color="navy">Style > Clone Style</font> to create a copy of the currently viewed style or select the <font color="navy">Clone</font> button.

• Use <font color="navy">Style > Delete Style</font> to delete the currently viewed style

Saving Styles

Before you exit the applet, you will  need to save your styles. The styles you have created can be stored in a csv (comma separated values) file that is saved on your local disk drive or network. Choose Save or Save As... to save the file.  You can have multiple csv files, each that can contain one or more styles.

• Select <font color="navy">File > New</font> to create a new csv file

• Selct <font color="navy">File > Open</font> to open an existing csv file

Note that if you exit the application before saving, you will lose all unsaved styles.

You can also export and import one style at a time to a text file. This is useful if you want to share or exchange one or a few styles with others using Style Designer.

Creating a Style Sheet

When you are happy with a style you've created you can write out a style sheet file that you can use in any Curl 6.0 applets you develop. Choose File > Write Style Sheet... to write out a Curl style sheet.

Note that style sheets use the styled controls library that was introduced with Version 6.0 of the Curl RTE. Therefore, in order to use the style sheet and associated skinned controls in your applets, you must first download the library from the the Curl web site and integrate it into your development environment. If you have not downloaded the library, please select the following link: STYLED-CONTROLS Library.