Flex实例【Shangle.net】解析【二】

我们首先来看两个简单的views：views:Paper和views:Welcome

views:Paper

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init()">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			private function init():void{
				content.text="心情测试";
				addTime.text="2011年3月26日";
			}
		]]>
	</fx:Script>
	<s:Rect height="146" width="181">
		<s:fill>
			<s:BitmapFill source="@Embed('net/shangle/assets/paper.png')"/>
		</s:fill>
	</s:Rect>
	<s:RichText textAlign="center" verticalAlign="middle" id="content" x="29" y="36" width="130" height="60"/>
	<s:Label id="addTime" x="70" y="101"/>
</s:Group>

在这个views中主要放了一个Rect区域并用位图填充，这里要注意的是引入资源的@Embed标记，然后在该区域上放置了一个RichText组件和Label组件，用来显示文字和时间。具体的值在init函数中设定。而init函数的调用是在这个views的根Group组件的creationComplete事件中产生。

在init函数中设置两个组件的文本内容都是使用了固定值，那么我们如何来对时间进行修改，修改为自动获取当前时间？我们利用了Date系统类。代码如下：

old:
   addTime.text="2011年3月26日"
new:
    var currentDate:Date=new Date();
    addTime.text=currentDate.fullYear+"年"+(currentDate.month+1)+"月"+currentDate.date+"日";

views:Welcome的组件代码更简单，就放了两个IMAGE这里就不列了。

比较麻烦的是剩下的那个views:ControlBar

【待续……】