第一个Flex程序
现在AJAX技术及其相关框架在WEB开发过程中比较火。其中尤其以微软，SUN，Adobe这些大公司相关的AJAX技术更为流行，毕竟有大公司支撑，用户用得也放心嘛。今天重点介绍Adobe公司的FLEX，感觉FLEX确实在这三者之间更为上流，更为实用，不仅支持ASP.NET，还支持JAV A，PHP，CodeFunsion语言，另外它的控件更实用，更利用用户体验程序的应用。另外Adobe一贯的跨平台能力，也众所周知，因此勿庸置疑。
今天我们就到www.adobe上下载一个30天以上试用期的flex builder3来开发FLEX程序吧。让我们体验一下FLEX程序带给我们的快乐吧。Are you ready now?Let's go on now!
第一步，新建一个FLEX工程。FLEX工程大约有3种类型。一种是FLEX类型，第二种是ActionScript类型，第三种就是库类型的。下面我们建立的就是一个FLEX类型的。FLEX类型还分为在flash player执行的和基于flash AIR 桌面类型。服务器端执行的语言，我们可以选择None,ASP.NET,ColdFunsion,J2EE，PHP等，默认方式我们选择None. 详见下
第二步，切换到Design设计模式，我们将Components中的一个按钮控件拖放到窗口中。另外，如果要使窗口背景更好看，我们可以在右边属性面板上的Fill处设置其背景.也可以设置其分辨率大小。总之FlexBuilder3类似Eclipse界面，它有许多奇妙的东东，我们都可以设置，初学者一定要亲身多试验一番，才能体会到其中的乐趣。下图中就是效果。
第三步，切換到代码模式，输入你的代码，如果你对flex程序十分精通，可以直接输入以下代码代替在设计模式下做事也是可行的。
www.adobe/2006/mxml" layout="absolute" color="#F8370A" borderColor="#0E85D9" themeColor="#0790E7" backgroundGradientAlphas="[0.67, 1.0]" backgroundGradientC olors="[#FA1D00, #1F98EC]">
第四步，按CTRL+F11运行你的程序，如果要调试，请直接按F11即可。在下图中，点击show按钮，将调用doShow()显示一个对话框。
fontweight属性bold
小结：开发flex程序，其实就是基本上由以上几步组成。只要我们好好理解了flex框架，编写flex程序就没有什么太难的了，相反，我们会为flex能打造使得用户体验十分精彩而又简捷的程序而欢呼。相信偶，没错的。FLEX
第二课Flex使用textInput
曾经使用过C#，VB等其它高级语言编程的人们一定对textBox记忆犹新，在Flex中我们可以利用textIn
put 实现textBox的相关功能。以下的mxml文件就是一个FLEX程序，我们通过在设计模式下，将控件先拖放到界面上，然后设置其相关风格，如背景，字体大小等。接着系统就会产生如何代码，<mx:script>和</mx:script>中间的部分一般由我们程序员自己手工完成。
下面利用textInput控件实现了用户登录界面，这一应用比较典型，textInput即可以实现文本框，也可以实现密码框。点击login控钮，将进行相关登录的判断，点击cancel按钮，将对textInput清空。输入下面代码后，按F11可以直接调试你的应用程序。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="www.adobe/2006/mxml" layout="absolute" color="#F8370A" borderColor="#0E85D9" themeColor="#0790E7" backgroundGradientAlphas="[0.67,    1.0]" backgroundGradientColors="[#F A1D00, #1F98EC]">
<mx:Script>
<![CDATA[
ls.Alert;
public function doLogin():void
{
if (=="jack" && =="123")
Alert.show("用户名["++"]成功登录系统!");
else
Alert.show("非法的用户名["++"]或者密码!");
}
public function doCancel():void
{
<="";
<="";
}
]
]>
</mx:S cript>
<mx:Panel width="443" height="292" layout="absolute" borderStyle="inset" borderColor="#E46213" backgroundColor="#FB7600" horizontalCenter="93" verticalCenter="-6">
<mx:Button x="181.5" y="150" label="Login" click="doLogin();" color="#0A20F8" id="btnLogin"/>
<mx:Label x="94" y="46" text="用户名称" color="#0A20F8"/>
<mx:Label x="94" y="90" text="用户密码" color="#310AF8"/>
<mx:TextInput x="165" y="44" id="txtUserName" maxChars="30" editable="true" color="#0A37F8"/>
<mx:TextInput x="165" y="88" editable="true" maxC hars="20" id="txtPassword" color="#0A31F8" displayAsPassword="true"/>
<mx:Button x="269" y="150" label="Cancel" click="doCancel();" color="#0A20F8" id="btnCancel"/>
</mx:Panel>
</mx:Application>
FLEX使用CHECKBOX
我们经常在一些高级语言的IDE（如V B，VC）中应用到CHECKBOX控件，该控件可以满足多选的需要。幸运的是，我们在FLEX中也可以应用它。
下面的MXML文件，就是我们将checkbox拖放到界面上，并进行相关设置和布局产生的代码，另外在<mx:S cript> 和</mx:Script>之间，我们手工也添加了相关代码。详见下方。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="www.adobe/2006/mxml" layout="absolute" color="#F8370A" borderColor="#0E85D9" themeColor="#0790E7" backgroundGradientAlphas="[0.67,    1.0]" backgroundGradientColors="[#F A1D00, #1F98EC]">
<mx:Script>
<![CDATA[
ls.Alert;
public function doShow():void
{
var strCountry:String="";
if (checkBox1.selected)
strCountry+=checkBox1.label;
if (checkBox2.selected)
strCountry+=" " +checkBox2.label;
if (checkBox3.selected)
strCountry+=" " +checkBox3.label;
Alert.show("您选择的国家有:"+strCountry);
}
]
]>
</mx:S cript>
<mx:Panel width="396" height="261" layout="absolute" borderStyle="inset" backgroundColor="#EA6F0B" borderColor="#F50E0E" horizontalCenter="30" verticalCenter="-7">
<mx:CheckBox x="131" y="22" label="中国" color="#0A20F8" fontSize="16" fontWeight="bold" id="checkBox1"/>
<mx:CheckBox x="131" y="58" label="英国" color="#0A20F8" fontSize="16" fontWeight="bold" id="checkBox2"/>
<mx:CheckBox x="131" y="94" label="美国" color="#0A20F8" fontSize="16" fontWeight="bold" id="checkBox3"/>
<mx:Button x="131" y="152" label="S how" click="doS how()" color="#0A15F8"/>
</mx:Panel>
</mx:Application>
FLEX中使用VSlider和HSlider控件
FLEX中使用VSlider和HSlider控件，可以实现许多由用户自行调整值的功能，比如用户要调整音量大小，就用得上Slider控件了，Slider控件分为VSlider(行式)和HSlider(列式)。下面，我们分别将这两个控件拖放到界面上，并进行相关设置，拖放时触发change事件，将调整后的当前值在Label中显示。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="www.adobe/2006/mxml" layout="absolute" color="#F8370A" borderColor="#0E85D9" themeColor="#0790E7" backgroundGradientAlphas="[0.67,    1.0]" backgroundGradientColors="[#F A1D00, #1F98EC]">
<mx:Script>
<![CDATA[
ls.Alert;
]]>
</mx:S cript>
<mx:Panel width="396" height="261" layout="absolute" borderStyle="inset" backgroundColor="#EA6F0B" borderColor="#F50E0E" horizontalCenter="30" verticalCenter="-7">
<mx:Label x="46" y="10" text="当前值为0" width="100" color="#0A37F8" id="label1"/>
<mx:VSlider x="69" y="57" id="vSlider1" allowTrackClick="true" minimum="0" maximum="100" snapInterval="1" enabled="true" change="='当前值为'+String()"/>
<mx:Label x="205" y="10" text="当前值为0" width="100" color="#0A37F8" id="label2"/>
<mx:HSlider x="212" y="57" id="hSlider1" minimum="0" maximum="100" snapInterval="1" change="='当前值为'+String();"/>
</mx:Panel>
</mx:Application>
Flex使用Image和Label控件
Flex中使用Label控件，我们可以实现相关的标签。使用Image控件，我们可以显示一些图片，有了该控件，就可以丰富Flex应用程序，使得Flex程序更加漂亮美观。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="www.adobe/2006/mxml" layout="absolute" color="#F8370A" borderColor="#0E85D9" themeColor="#0790E7" backgroundGradientAlphas="[0.67,    1.0]" backgroundGradientColors="[#F A1D00, #1F98EC]">
<mx:Image width="125" autoLoad="true" scaleContent="true" source="../21.gif" horizontalCenter="69" verticalCenter="90"/>
<mx:Label text="哈哈大笑的Mouse" color="#F2F4F9" horizontalCenter="67" verticalCenter="-49" fontWeight="bold" fontSize="17"/>
</mx:Application>
输入完如上代码后，按F11调试程序，效果如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。