样式的使用（二）

和css样式一样，也分为外部样式和本地样式。

本地样式的例子：

	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/halo";
		@namespace TestFor4 "TestFor4.*";
		.myButton{
			font-size:18;
			color:#9933ff;
		}
	</fx:Style>
	<s:VGroup>
		
		<s:Button label="click me" />
		<s:Button label="click me" styleName="myButton"/>
	</s:VGroup>

 

下一个例子，在flex 4中存在两个命名空间，这个例子就是把某一样式适用于Spark的例子。

	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/halo";
		@namespace TestFor4 "TestFor4.*";
		s|Button{
			font-size:18;
			color:#9933ff;
		}
	</fx:Style>
	<s:VGroup>
		
		<s:Button label="click me" />
		<s:Button label="click me" />
		<mx:Button label="click me mx"/>
	</s:VGroup>

下一个例子，使用StyleManager来控制样式。

在应用程序的inialize事件中调用initApp()方法

	<fx:Script>
		<![CDATA[
			private function initApp():void{
				styleManager.getStyleDeclaration("spark.components.Button").setStyle("fontSize",18);
				styleManager.getStyleDeclaration("spark.components.Button").setStyle("color","red");
			}
		]]>
	</fx:Script>
	<s:VGroup>
		
		<s:Button label="click me" />
		<s:Button label="click me" />
		<mx:Button label="click me mx"/>
	</s:VGroup>

下一个例子，样式的属性中使用数组。

	<fx:Style>
		@namespace mx "library://ns.adobe.com/flex/halo";
		mx|Tree {
			depth-colors:red,blue,green;	
		}
	</fx:Style>
	<fx:Declarations>
		<fx:XMLList id="treeData">
			<node label="Mail Box">
				<node label="Inbox">
					<node label="Marketing"/>
					<node label="Product Management"/>
					<node label="Personal"/>
				</node>
				<node label="Outbox">
					<node label="Professional"/>
					<node label="Personal"/>
				</node>
				<node label="Spam"/>
				<node label="Sent"/>
			</node>
		</fx:XMLList>
	</fx:Declarations>
	<s:Panel title="Tree Control Example" width="100%">
		<mx:Tree id="myTree" width="100%" labelField="@label" dataProvider="{treeData}"/>
	</s:Panel>

通过内联样式实现上面相同的效果：

<fx:Declarations>
<fx:Array id="myDepthColors">
<fx:Object>red</fx:Object>
<fx:Object>blue</fx:Object>
<fx:Object>green</fx:Object>
</fx:Array>
<fx:XMLList id="treeData">
<node label="Mail Box">
<node label="Inbox">
<node label="Marketing"/>
<node label="Product Management"/>
<node label="Personal"/>
</node>
<node label="Outbox">
<node label="Professional"/>
<node label="Personal"/>
</node>
<node label="Spam"/>
<node label="Sent"/>
</node>
</fx:XMLList>
</fx:Declarations>
<s:Panel title="Tree Control Example" width="50%">
<mx:Tree id="myTree"
width="100%"
labelField="@label"
dataProvider="{treeData}"
depthColors="{myDepthColors}"
/>
</s:Panel>