Introduction

Camo’s custom CSS parser, the CamoStyleSheet (found inside of the camo.core.style package), goes well beyond the native StyleSheet class by supporting style inheritance, Pseudo Selectors, and merging styles on the fly. The goal of the CamoStyleSheet is to make styles something you can apply to any of your classes instead of just TextFields. CSS as a great way to define your class’s visual properties in an external file and Camo helps convert these css styles into objects that other classes can parse.

Details

Here is a simple CSS sheet:

/* This is a comment in the CSS file */
baseStyle {
	x: 10px;
	y: 10px;
	width: 100px;
	height: 100px;
	padding: 5px;
	margin: 10px;
}

baseStyle .Button{
	x: 0px;
	y: 0px;
	background-color: #000000;
}

#playButton {
	background-color: #FFFFFF;
 	background-image: url('/images/full_screen_background.jpg');
}

#fullScreenButton{
	background-color: #FF0000;
	background-image: url('/images/full_screen_background.jpg');
}

#playButton:over {
	background-color: #333333;
}

interactive {
	cursor: hand;
}

Example CSS 


Formatting CSS

Before the CamoStyleSheet can use the above CSS text it will need to be formated by removing all unneeded spaces, tabs, returns, px, and comments. There are two ways of doing this, you can use server side compression or place your css text inside of the CompressedCSSText class. This class uses RegEx to compress and format the css in a way that the CamoStyleSheet requires¹. Here is what the compressed css would look like:

baseStyle{x:10px;y:10px;width:100px;height:100px;padding:5px;margin:10px;}baseStyle .Button{x:0px;y:0px;background-color:#000000;}#playButton{background-color:#FFFFFF;background-image:url('/images/full_screen_background.jpg');}#fullScreenButton{background-color:#FF0000;background-image:url('/images/full_screen_background.jpg');}#playButton:over{background-color:#333333;}interactive{cursor:hand;}


Compressed CSS

Parsing CSS

Now the CSS is ready to be parsed by calling the CamoStyleSheet’s parseCSS method. Once parsed, you can retrieve an Array of style names by calling the styleNames getter. The getStyle method will return the style as an object². New styles can be added to the CamoStyleSheet by calling setStyle and passing a style name and an object. You can test that a style exists by calling hasStyle. Finally, you can duplicate a new CamoStyleSheet by calling clone method³.

Inheritance

Selector inheritance is also supported by the CamoStyleSheet. From the previous CSS sample, lets look at the .Button style. As you can see the selector name in the CSS is “baseButton .Button”. Its formatting tells the parser that .Button inherits properties from baseButton. We refer to .Button as the subject and baseButton would be an ancestor element. If you were to call getStyle for .Button the parser will automatically return an Object with merged properties from baseButton and .Button. Any conflicting properties will be overridden by the subject style. Here is what the .Button object would look like:

{styleName: .BaseButton, x: 0, y: 0, width: 100, height: 100, padding: 5, margin: 10, background-color: #000000;
}

.BaseButton as an Object

Objects created by the CSS parser have a reference to their style name in the styleName property. Also, its important to note that in this example the x and y values from .BaseButton overrode the ancestor’s values. In this case they are 0 and not 10 as defined in the baseStyle.

Class and ID Selectors

Class (.class) and ID (#id) selectors are supported by the CamoStyleSheet. To the CSS parser there is no difference between Classes, IDs, or regular selectors so when making a style request it’s important to understand how to join them. In CSS, the inheritance rules dictate that a Base Styles is overridden by a Class Style that in turn is overridden by the ID Style. You can simulate this by formating the style name when calling the getStyle method. If we wanted to create a “play” button style that inherits the default Button class style and the base interactive style we would call getStyle and pass in “interactive,.BaseButton,#playButton” as the style name. By combining the names of each selector by lowest priority to highest priority the getStyle method will automatically parse out each style and merge them into a single style Object. The last style name becomes the Object’s styleName value.

Pseudo-Selectors

When Pseudo-Selector are requested, their parent style’s properties will be added to the returned Object. Adding a colon (selector:pseudo-selector) to any style name will alert the parser that it needs to also inherit properties from the style name on the left of the colon. In the above CSS example we request #playButton:over we will get back the following object:

{
	styleName: #playButton:over,
	background-color: #333333,
 	background-image: url('/images/full_screen_background.jpg')
}

#playButton:over as an Object

In this example the background-color and background-image properties are inherited from the #playButton selector but since #playButton:over has its own background-color the ancestor’s property is overridden.

It is important to keep in mind that there may be a performance hit when parsing large CSS files with lots of inherited styles. Also, the CompressedCSS class uses a complex RegEx pattern to clean up css text so it is better to do the compression on the server side instead of during run time. Outside of this limitation, the real power of the CSS parser comes into play when applying styles to CamoDisplay classes.

^{1 You can get formatted CSS out of CompressedCSSText classes by calling the toString method.}

^{2 It’s important to note that properties on style objects are strings. If you have numbers such as x or width in the CSS style they will have to be converted into numbers; this is discussed more the CamoDisplay section.}

^{3 By default, calling clone() on a CamoStyleSheet will copy all of the styles in the StylesSheet but what if you only want to clone a few styles? You can pass in a string of comma separated style names for the StyleSheet to duplicate.}