F*CSS: Flash’s missing CSS Parser

F*CSS ist ein CSS-Parser für Flash. Das Ziel des Open Source Projekts ist eine verbesserte CSS-Unterstützung in Flash. Diese soll nicht nur auf Textfelder ausgelegt sein, sondern allgemein auf Objekte.

The main class called FStyleSheet (found inside of the com.flashartofwar.fcss.stylesheets package), goes well beyond the native StyleSheet class by supporting style inheritance, pseudo selectors, and merging styles on the fly.

F*CSS funktioniert mit Flash Player 9 und 10, Flex 3 und AIR. Die Bibliothek kann sowohl mit dem Flex SDK als auch mit Flash CS3/4 kompiliert werden.

Beispiel

Hier das Beispiel aus dem QuickStart Guide.

[as]
package {
import com.flashartofwar.fcss.factories.TextFieldFactory;
import com.flashartofwar.fcss.managers.StyleSheetManager;
import com.flashartofwar.fcss.styles.IStyle;
import com.flashartofwar.fcss.stylesheets.FStyleSheet;
import com.flashartofwar.fcss.stylesheets.IStyleSheet;
import com.flashartofwar.fcss.stylesheets.IStyleSheetCollection;
import com.flashartofwar.fcss.utils.StyleApplierUtil;
import com.flashartofwar.fcss.utils.TextFieldUtil;

import flash.display.Shape;
import flash.display.Sprite;
import flash.text.TextField;
 
 
 

public class Main extends Sprite
{
public function Main()
{
 
/** Sample CSS ***/
 
// Get some css. Normally you would load CSS from an external file but
// for this example we are going to put some CSS in a XML variable.
var css:XML = ;
 
/** Style A TextField **/
 
// Create a new StyleSheet
var styleSheet:IStyleSheet = new FStyleSheet( );
styleSheet.parseCSS(css.toString());
 
// Get a style (Returns an object with properties as strings)
var style:IStyle = styleSheet.getStyle(„#demoStyle“);
 
// Trace out the style’s properties
trace(„style“, style);
 
// Create a TextField
var tf:TextField = new TextField();
 
// Use TextFieldUtility to apply the style to the TextField
TextFieldUtil.applyStyle(tf, style);
 
// Use TextField like you would normally
tf.htmlText = „F*CSS – Hello World“;
addChild(tf);
 
 
/** Merging styles at runtime **/
 
// You can merge styles on the fly when you call getStyle().
// Here we merge .TextField with #demoStyle2 to setup a new TF.
 
// Lets get the 2 styles. Simply pass in any number
// of style names and separate them with a comma.
var style2:IStyle = styleSheet.getStyle(„.TextField“, „#demoStyle2“);
 
// Trace out the style we just created
trace(„style2 (Merged .TextField + #demoStyle2)“, style2);
 
// Create a TextField
var tf2:TextField = new TextField();
 
// Use TextFieldUtility to apply the style to the TextField
TextFieldUtil.applyStyle(tf2, style2);
 
// Use TextField like you would normally
tf2.htmlText = „F*CSS Demo 2 – Hello World“;
addChild(tf2);
 
 
/** Global StyleSheetManager **/
 
// If you want to make the CSS available globally use the
// StyleSheetManager/StyleSheetCollection
 
// Get a reference of the StyleSheetCollection from the StyleSheetManager
var styleSheetCollection:IStyleSheetCollection = StyleSheetManager.collection;
 
// Register style sheet with the Collection.
styleSheetCollection.addStyleSheet(styleSheet, „defaultSheet“);
 
 
/** How To Use The TextFieldFactory **/
 
// This assumes you are using the StyleSheetManager. If not, you will have to
// create a new FStyleSheet, parse css data then pass that into the factory.
 
// Create a new factory and pass in a reference to a IStyleSheet
var tff:TextFieldFactory = new TextFieldFactory(StyleSheetManager.collection);
 
// The first param is the id and the second is the calls. It will
// automatically add # and . to the string to „emulate“ how
// HTML/CSS would work.
var tf3:TextField = tff.createTextField(„demoTextFieldFactroy“, „TextField“);
 
// Use TextField like you would normally
tf3.htmlText = „F*CSS TextFactory – Hello World“;
addChild(tf3);
 
 
/** Add Native StyleSheets To TextField with F*CSS **/
 
// To use native StyleSheets you simply add the Style names into the
// F*CSS’s StyleSheet param on any F*CSS Style. Check out
// .demoInlineStyleSheet to see what I am talking about
var tf4:TextField = tff.createTextField(„demoInlineStyleSheet“);
 
// Use TextField like you would normally
tf4.htmlText = „F*CSS Native StyleSheet – Hello World“;
addChild(tf4);
 
 
/** Style Any Object With StyleApplierUtil **/
 
// For this demo we are going to create a simple shape
// then use CSS to position it and change it’s dimensions
var shape:Shape = new Shape();
shape.graphics.beginFill(0xff0000);
shape.graphics.drawRect(0,0,10,10);
shape.graphics.endFill();
addChild(shape);
 
// Get a Style
var shapeStyle:IStyle = StyleSheetManager.collection.getStyle(„#demoShapeStyle“);
 
// Now you can apply the style to any object, lets use the
// shape as our target.
StyleApplierUtil.applyProperties(shape,shapeStyle);
}
}
}
[/as]

Link: fcss.flashartofwar.com/

[ad]