Tutorials

Cascading Stylesheets – 1

Tutorial Series: Layout and Style Display Objects, with CSS

Tutorial 1: Creating and Linking an External Style Sheet

Introduction

GestureWorks 3 allows us to set the style properties of CML (GestureWorks’ own Creative Markup Language) component kit objects through the use of external Cascading Style Sheets (CSS). CSS has become the standard way to define the look and formatting of documents written in markup languages such as HTML, SVG, and XML. CSS is useful for separating the scripting of CML objects and the application’s presentation style. This tutorial requires Open Exhibits 2 SDK (download the sdk).

Getting Started

In this tutorial we’ll use CML to create a background graphic and style it using an external stylesheet.

First, we’ll  set up our application project. We’ll use the default templates that get installed with Open Exhibits 2 and copy the tutorial’s files into the template. The Open Exhibits 2 templates are located in the user’s home directory, within the “OpenExhibits2/templates” folder. Make a copy of the Open Exhibits 2 template which corresponds to the IDE of choice (Flash, Flash Builder, FlashDevelop). Rename the copy: “CSS_Tutorial”.

Now let’s download the “CSS_Tutorial1″ folder and copy its contents to our newly created “CSS_Tutorial” project folder overriding any files with the same name. Let’s examine the contents.

Open the file “my_styles.css” found in the bin/library/css application sub-directory. We’ll use this file to define the CSS styles for our layout page.

First, let’s create a graphic element in CML. This will be the background for text that we’ll create in the next tutorial. Open the my_application.cml file:

1
2
3
4
5
6
7
8
<!--?xml version="1.0" encoding="UTF-8"?-->

<GestureWorksApplication version="1.0.0" gml="library/gml/my_gestures.gml" css="library/cml/styles/my_styles.css" xmlns:cml="http://gestureworks.com/cml/version/1.0" key="">

    <CanvasKit>

        <ComponentKit>

            <GraphicElement id="background" />

        </ComponentKit>

    </CanvasKit>

</GestureWorksApplication>

There are two important things to note. First, the GestureWorksApplication’s css attribute correctly references the filename and path of our CSS file:

1
css="library/cml/styles/my_styles.css"

Second, the GraphicElement’s id attribute contains the value: background. We’ll use this value to reference this particular element within the CSS.

Now that the display object has been created, we can create its style definition. We’ll create our first style definition inside of the my_styles.css file:

1
2
3
4
5
6
7
8
#background {

    x:10;

    y:10;

    width:780;

    height:93;

    alpha:1;

    color:0xb5780e;

}

Note the style name background matches the TextElement’s id exactly with the exception of the # symbol prefix. The # prefix indicates to the CSS selector engine that we are targeting an element’s id attribute. This complies with CSS standards, so web developers should find this practice familiar.