FlashCamo CSS Parser Demo

@author jessefreeman

by FlashBum 12 Aug 2009

Tags

App系　CSS CSS FlashBum FlashCamo Parser PropertySheet PropertySheetManager
Embed

/**
 * Copyright FlashBum ( http://wonderfl.net/user/FlashBum )
 * MIT License ( http://www.opensource.org/licenses/mit-license.php )
 * Downloaded from: http://wonderfl.net/c/b8Xi
 */

package
{
	import camo.core.property.PropertySelector;
	import camo.core.property.PropertySheet;

	import com.bit101.components.Label;
	import com.bit101.components.PushButton;
	import com.bit101.components.Text;

	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;

	/**
	 * @author jessefreeman
	 */
	public class FlashTest extends Sprite 
	{

		private var uiContainer : Sprite = new Sprite( );
		private var cssTextPreview : Text;
		private var cssTextPreviewLabel : Label;
		private var _propertySheet : PropertySheet;
		private var updateStyleSheet : PushButton;
		private var clearSheet : PushButton;
		private var resetCSS : PushButton;
		private var defaultCSS : String;
		private var getSelectorLabel : Label;
		private var getSelectorText : Text;
		private var getSelector : PushButton;
		private var clearSelector : PushButton;
		private var selectorPreviewLabel : Label;
		private var selectorPreview : Text;
		private var selectorContainer : Sprite;
		private var pickSelectorLabel : Label;

		protected function get propertySheet() : PropertySheet
		{
			if(!_propertySheet)
				_propertySheet = new PropertySheet( );
				
			return _propertySheet;
		}

		public function FlashTest(autoStart : Boolean = true)
		{
			if(autoStart)
			{
				configureStage( );
				start( );
			}
		}

		protected function configureStage() : void
		{
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
		}

		public function start() : void
		{
			configureStage( );
			uiContainer.x = uiContainer.y = 0;
			addChild( uiContainer );

			createUIDisplay( );
		}

		private function createUIDisplay() : void
		{
			// Just using XML to keep CSS formatting, this has nothing to do with
			// the Framework.
			var xml : XML = <css><![CDATA[/* 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;
}
		]]>
			</css>;
			
			defaultCSS = xml.toString( );
			
			cssTextPreviewLabel = new Label( uiContainer, 0, 0, "CSS Text:" );
			
			cssTextPreview = new Text( uiContainer, cssTextPreviewLabel.x, cssTextPreviewLabel.y + cssTextPreviewLabel.height, defaultCSS );
			cssTextPreview.width = 230;
			cssTextPreview.height = 380;
			
			
			
			updateStyleSheet = new PushButton( uiContainer, cssTextPreview.x, cssTextPreview.y + cssTextPreview.height + 10, "Update PropertySheet", onUpdateSheet );
			updateStyleSheet.width = 120;
			
			clearSheet = new PushButton( uiContainer, updateStyleSheet.x + updateStyleSheet.width + 10, updateStyleSheet.y, "Clear CSS", onClearSheet );
			clearSheet.width = 70;
			resetCSS = new PushButton( uiContainer, clearSheet.x + clearSheet.width + 10, clearSheet.y, "Reset CSS", onReset );
			resetCSS.width = 80;
			// Right Column
			getSelectorLabel = new Label( uiContainer, cssTextPreview.x + cssTextPreview.width + 20, cssTextPreviewLabel.y, "Get Selector (separate selectors by a space)" );
			getSelectorText = new Text( uiContainer, getSelectorLabel.x, getSelectorLabel.y + getSelectorLabel.height, "interactive #playButton" );
			getSelectorText.width = 230;
			getSelectorText.height = 40;
			
			getSelector = new PushButton( uiContainer, getSelectorText.x, getSelectorText.y + getSelectorText.height + 10, "Get Selector", onGetSelector );
			clearSelector = new PushButton( uiContainer, getSelector.x + getSelector.width + 10, getSelector.y, "Clear Selector", onClearSelector );
			
			selectorPreviewLabel = new Label( uiContainer, getSelector.x, getSelector.y + getSelector.height, "PropertySelector Preview" );
			selectorPreview = new Text( uiContainer, selectorPreviewLabel.x, selectorPreviewLabel.y + selectorPreviewLabel.height );
			
			pickSelectorLabel = new Label( uiContainer, selectorPreview.x, selectorPreview.y + selectorPreview.height + 10, "Current Selectors" );
			
			onUpdateSheet( ); 
		}

		private function onClearSelector(event : Event) : void
		{
			getSelectorText.text = selectorPreview.text = "";
		}

		private function onGetSelector(event : Event) : void
		{
			var list : Array = getSelectorText.text.split( " " );
			
			var selector : PropertySelector = propertySheet.getSelector.apply( null, list );
			
			selectorPreview.text = selector.toString( );
		}

		private function onReset(event : Event) : void
		{
			propertySheet.clear( );
			cssTextPreview.text = defaultCSS;
			propertySheet.parseCSS( defaultCSS );
		}

		private function onClearSheet(event : Event) : void
		{
			propertySheet.clear( );
			cssTextPreview.text = "";
		}

		private function onUpdateSheet(event : Event = null) : void
		{
			propertySheet.clear( );
			try
			{
				propertySheet.parseCSS( cssTextPreview.text );
				parseSelectorNames( );
			}
			catch(error : Error)
			{
				clearSelectors( );
				cssTextPreviewLabel.text = "CSS Text <b>*Style Sheet is malformed*</b>:";
			}
		}

		protected function clearSelectors() : void
		{
			if(selectorContainer && uiContainer.contains( selectorContainer ))
			{
				uiContainer.removeChild( selectorContainer );
				selectorContainer.removeEventListener( MouseEvent.CLICK, onSelectorClick );
				selectorContainer = null;	
			}
		}

		private function parseSelectorNames() : void
		{
			clearSelectors( );
			
			selectorContainer = new Sprite( );
			selectorContainer.addEventListener( MouseEvent.CLICK, onSelectorClick, false, 0, true );
			
			selectorContainer.x = pickSelectorLabel.x;
			selectorContainer.y = pickSelectorLabel.y + pickSelectorLabel.height + 10;
			
			var selectors : Array = propertySheet.selectorNames;
			var total : Number = selectors.length;
			var lastY : Number = 0;
			
			for (var i : int = 0; i < total ; i ++) 
			{
				var button : PushButton = new PushButton( selectorContainer, 0, lastY, selectors[i] );
				lastY += (button.height + 5);	
			}
			
			uiContainer.addChild( selectorContainer );
		}

		private function onSelectorClick(event : MouseEvent) : void
		{
			getSelectorText.text += " " + PushButton( event.target ).label;
		}
	}
}