properties.mxml

flex书效果代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:degrafa="http://www.degrafa.com/2007"
	xmlns:controls="com.san.styling.controls.*"
	verticalScrollPolicy="off" horizontalScrollPolicy="off"
	width="600" height="120"
	xmlns:components="com.san.components.*">	 
	
	
	
	
	
	<mx:states>
		<mx:State name="shape">
			<mx:SetProperty target="{drawer}" name="y" value="0"/>
			<mx:SetProperty target="{shapeProperties}" name="visible" value="true"/>
			<mx:SetProperty target="{b_close}" name="visible" value="true"/>
		</mx:State>
		<mx:State name="text">
			<mx:SetProperty target="{drawer}" name="y" value="0"/>
			<mx:SetProperty target="{textProperties}" name="visible" value="true"/>
			<mx:SetProperty target="{b_close}" name="visible" value="true"/>
		</mx:State>
	</mx:states>


	
	<mx:transitions>
		<mx:Transition fromState="" toState="shape" >
			<mx:Sequence targets="{[drawer,shapeProperties]}">
				<mx:Move target="{drawer}" />
				<mx:SetPropertyAction target="{shapeProperties}" name="visible" />
				<mx:SetPropertyAction target="{b_close}" name="visible" />
			</mx:Sequence>
		</mx:Transition>
		<mx:Transition fromState="" toState="text" >
			<mx:Sequence targets="{[drawer,textProperties]}">
				<mx:Move target="{drawer}" />
				<mx:SetPropertyAction target="{textProperties}" name="visible" />
				<mx:SetPropertyAction target="{b_close}" name="visible" />
			</mx:Sequence>
		</mx:Transition>
		<mx:Transition fromState="*" toState="" >
			<mx:Sequence targets="{[drawer,shapeProperties,textProperties]}">
				<mx:SetPropertyAction target="{textProperties}" name="visible" />
				<mx:SetPropertyAction target="{shapeProperties}" name="visible" />
				<mx:SetPropertyAction target="{b_close}" name="visible" />
				<mx:Move target="{drawer}" />
			</mx:Sequence>
		</mx:Transition>
	</mx:transitions>

		
	
	<mx:Script>
		<![CDATA[
			import com.san.styling.utils.FillUtil;
			import com.san.styling.utils.StrokeUtil;
			import com.san.components.movable.MovableText;
			import com.san.components.movable.MovableShape;
			import com.san.components.movable.MovableImage;
			import mx.binding.utils.ChangeWatcher;
			import com.mh.movable.core.MovableCanvas;
			import com.mh.movable.core.MovableComponent;
			
			[Bindable]
			private var _target:MovableCanvas;
			
			public function set target( value:MovableCanvas ):void
			{
				_target = value;
				
				ChangeWatcher.watch( value, "selectedComponent", selectedComponentChanged );	
			}
			
			public function get target():MovableCanvas
			{
				return _target;
			}
						
						
			private function selectedComponentChanged( event:Event = null ):void
			{
				if( _target.selectedComponent is MovableShape )
					currentState = "shape";
				else if( _target.selectedComponent is MovableText )
					currentState = "text";
				else
					currentState = "";
			}
			
		]]>
	</mx:Script>
	
	
	
	<mx:Move id="e_move" duration="400" />
	
	
	<mx:Canvas id="drawer" x="0" y="{height+2}" width="{width}" height="{height}"	>


		<degrafa:Surface>
			<degrafa:GeometryGroup>
				<degrafa:strokes>
					<degrafa:SolidStroke id="bgStroke" color="#9B9B9B" weight="2" />
				</degrafa:strokes>
				<degrafa:fills>
					<degrafa:LinearGradientFill id="bgFill" angle="90" >
						<degrafa:GradientStop color="#E5E5E5" ratio="0" />
						<degrafa:GradientStop color="#D0D0D0" ratio="0.3" />
						<degrafa:GradientStop color="#D0D0D0" ratio="1" />
					</degrafa:LinearGradientFill>
				</degrafa:fills>	
				
				<degrafa:RoundedRectangleComplex width="{width}" height="{height}" topLeftRadius="10" topRightRadius="10" fill="{bgFill}" stroke="{bgStroke}" />
				
			</degrafa:GeometryGroup>
		</degrafa:Surface>
	
	
			
		<mx:Canvas id="shapeProperties" left="0" right="0" top="0" bottom="0" visible="false" verticalScrollPolicy="off" >
			
			<mx:HBox paddingTop="10" paddingLeft="20" paddingRight="10" width="100%" height="100%" verticalScrollPolicy="off" horizontalGap="0">			
			
				<mx:Label text="Fill: " fontWeight="bold" fontSize="14" />
				
				<controls:FillSelector id="fillSelector" target="{_target.selectedComponent}" property="fill"  width="185" height="88" />
				
				<mx:VBox verticalGap="2" moveEffect="e_move">
					<mx:FormItem label="color" horizontalGap="0" direction="horizontal" visible="{fillSelector.selectedFill==FillUtil.SOLID_FILL || fillSelector.selectedFill==FillUtil.LINEAR_GRADIENT_FILL || fillSelector.selectedFill==FillUtil.RADIAL_GRADIENT_FILL}" 
							includeInLayout="{fillSelector.selectedFill==FillUtil.SOLID_FILL || fillSelector.selectedFill==FillUtil.LINEAR_GRADIENT_FILL || fillSelector.selectedFill==FillUtil.RADIAL_GRADIENT_FILL}" labelWidth="50" width="180">
						<controls:StylingColorPicker target="{_target.selectedComponent}" property="fColor1" toolTip="color"/>
						<controls:StylingHSlider target="{_target.selectedComponent}" property="fAlpha1" width="80" toolTip="alpha" />
					</mx:FormItem>
		
					<mx:FormItem label="color" horizontalGap="0" direction="horizontal" visible="{fillSelector.selectedFill==FillUtil.LINEAR_GRADIENT_FILL || fillSelector.selectedFill==FillUtil.RADIAL_GRADIENT_FILL}" 
							includeInLayout="{fillSelector.selectedFill==FillUtil.LINEAR_GRADIENT_FILL || fillSelector.selectedFill==FillUtil.RADIAL_GRADIENT_FILL}" labelWidth="50" width="180">
						<controls:StylingColorPicker target="{_target.selectedComponent}" property="fColor2" toolTip="color" />
						<controls:StylingHSlider target="{_target.selectedComponent}" property="fAlpha2" width="80" toolTip="alpha" />
					</mx:FormItem>
					<mx:FormItem label="angle" visible="{fillSelector.selectedFill==FillUtil.LINEAR_GRADIENT_FILL}" includeInLayout="{fillSelector.selectedFill==FillUtil.LINEAR_GRADIENT_FILL}" labelWidth="50" width="180">
						<controls:StylingHSlider target="{_target.selectedComponent}" property="fAngle"  minimum="0" maximum="360" snapInterval="1" width="102" toolTip="angle" />
					</mx:FormItem>
				</mx:VBox>
				
				<mx:Spacer width="20" moveEffect="e_move"/>
				
				<mx:Label text="Border: " fontWeight="bold" fontSize="14" moveEffect="e_move"/>
				
				<controls:StrokeSelector id="strokeSelector" target="{_target.selectedComponent}" property="stroke" width="88" height="88" moveEffect="e_move"/>
				
				<mx:VBox verticalGap="2" moveEffect="e_move">
					<mx:FormItem label="weight" visible="{strokeSelector.selectedStroke!=StrokeUtil.NONE}" includeInLayout="{strokeSelector.selectedStroke!=StrokeUtil.NONE}" labelWidth="50">
						<controls:StylingNumericStepper target="{_target.selectedComponent}" property="sWeight" minimum="0" maximum="100" stepSize="1" toolTip="weight" />
					</mx:FormItem>
					<mx:FormItem label="color" horizontalGap="0" direction="horizontal" visible="{strokeSelector.selectedStroke!=StrokeUtil.NONE}" includeInLayout="{strokeSelector.selectedStroke!=StrokeUtil.NONE}" labelWidth="50">
						<controls:StylingColorPicker target="{_target.selectedComponent}" property="sColor1" toolTip="color"/>
						<controls:StylingHSlider target="{_target.selectedComponent}" property="sAlpha1" width="80" toolTip="alpha"/>
					</mx:FormItem>
					<mx:FormItem label="color" horizontalGap="0" direction="horizontal" visible="{strokeSelector.selectedStroke==StrokeUtil.LINEAR_GRADIENT_STROKE || strokeSelector.selectedStroke==StrokeUtil.RADIAL_GRADIENT_STROKE}" 
							includeInLayout="{strokeSelector.selectedStroke==StrokeUtil.LINEAR_GRADIENT_STROKE || strokeSelector.selectedStroke==StrokeUtil.RADIAL_GRADIENT_STROKE}" labelWidth="50" >
						<controls:StylingColorPicker target="{_target.selectedComponent}" property="sColor2" toolTip="color"/>
						<controls:StylingHSlider target="{_target.selectedComponent}" property="sAlpha2" width="80" toolTip="alpha" />
					</mx:FormItem>
					<mx:FormItem label="angle" visible="{strokeSelector.selectedStroke==StrokeUtil.LINEAR_GRADIENT_STROKE}"	includeInLayout="{strokeSelector.selectedStroke==StrokeUtil.LINEAR_GRADIENT_STROKE}" labelWidth="50" >
						<controls:StylingHSlider target="{_target.selectedComponent}" property="sAngle"  minimum="0" maximum="360" snapInterval="1" width="102" toolTip="angle" />
					</mx:FormItem>
				</mx:VBox>
				
			</mx:HBox>
			
		</mx:Canvas>
		
		
		
		
		<mx:Canvas id="textProperties" left="0" right="0" top="10" bottom="0" visible="false" verticalScrollPolicy="off" >
			
			<controls:StylingRichTextEditor target="{_target.selectedComponent}" property="htmlText" x="460" y="-10" width="170" height="110"  />
			
		</mx:Canvas>
		
		
		
		<mx:Button id="b_close" visible="false" width="22" height="22" top="10" right="10"  icon="@Embed(source='../../../icons/cancel.png')" toolTip="close properties panel" click="{this.currentState=''}"/>		
	</mx:Canvas>
	
</mx:Canvas>