Tutorials

Cascading Stylesheets – 3

Tutorial Series: Layout and Style Display Objects, with CSS

Tutorial 1: Style an Image with an External Stylesheet

Introduction

Open Exhibits 2 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 Adobe Flash CS5+ and Open Exhibits 2 (download the sdk).

Getting Started

In the final tutorial in this section we’ll use CML to add an image to our page layout and style it using an external stylesheet.

If you’ve already closed the project from part two of this tutorial then re-open it. We’ll use the the same project for the remaining section of this tutorial.

Open the “my_styles.css” file found in the “library/cml/styles/” application sub-directory.

1
2
3
4
5
6
7
8
9
10
<?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" />

                <TextElement id="caption" text='"I have tried to express the idea that the cafe is a place where one can ruin oneself, go mad, or commit a crime."                         ...Van Gogh writing on The Night Cafe.' />

                <ImageElement id="image" src="library/assets/Vincent_Willem_van_Gogh_076.jpg" />

        </ComponentKit>

    </CanvasKit>

</GestureWorksApplication>

We’ll define the image’s position in the “my_styles.css” file:

1
2
3
4
#image {

    x:10;

    y:108;

}

You can use CSS to apply a value to almost any property of the various CML component kit objects. For a full list of these objects and their properties see the Open Exhbits 2 API documentation.

Future versions of Open Exhibits will adhere to CSS specifications. This will make the capabilities of CSS in Open Exhibits much more powerful and familiar to web developers.