Castelo 发表于 2013-3-31 10:32:10

FLEX 简单快速高效 + 3D

两年前用过FLEX,那时候的FLEX BUILDER已经不叫了,改名后意味深长——FLASH BUILDER。
Flex简单快速,出来的样子比单纯HTML,JSP等等好看的多。内种现代感的感觉不容易啊。

他的语言非常简单,基本就是顺手就能用。XML标签,如HTML般改属性,混杂一点actionscript,比较像JSP.
FLEX主攻前端,后端架构就随便选了。可与 ASP.NET, XFIRE , SILVER等。只用过ASP.NET,交互及其容易。
内些控件如.NET一样,内置的。扩展多多。

下面是转载来的一个简单的FLEX开头。





Flex学习记录(一)——MXML基本知识
我们使用两种语言来编写Flex程序:MXML和ActionScript。MXML是用来布局用户界面组件的XML标识语言,我们也可以使用MXML来定义一个程序的不可见部分,例如:到服务器数据源的访问以及用户界面组件和服务器数据源的数据绑定。

一.简单的MXML
新建一个HellowWorld.mxml文件,并拷贝下面的内容,看一下运行结果。http://common.cnblogs.com/images/copycode.gif
<?xml version="1.0"?><!-- mxml\HellowWorld.mxml --><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:mx="library://ns.adobe.com/flex/mx"    xmlns:s="library://ns.adobe.com/flex/spark">    <s:layout>      <s:VerticalLayout/>    </s:layout>    <s:Panel title="My Application">      <s:Label text="Hello World" fontWeight="bold" fontSize="24"/>    </s:Panel></s:Application>http://common.cnblogs.com/images/copycode.gif


这是一个最简单的MXML程序,从这个例子,我们可以学到如下几点:
1.<s:Application>是一个程序的root tag,代表一个Spark应用容器。一个项目应该只有一个root tag.
2.xmlns:fx="http://ns.adobe.com/mxml/2009是ActionScript元素所在的命名空间
xmlns:mx="library://ns.adobe.com/flex/mx是MX控件集所在的命名空间
xmlns:s="library://ns.adobe.com/flex/spark是Spark控件集所在的命名空间
MX和Spark控件集有很多相同的控件,Spark是为Flex4新出的,尽量使用Spark控件集中的控件,在Spark控件集里没有相应的控件时再用MX控件集的控件
3.MXML中的每个tag都和ActionScript中的类或属性对应,ActionScript中的类在MXML中用节点表示,属性可以用attribute表示,也可以用property表示。比如Panel和Label都是Spark控件集中的类。text,fontSize等都是Label类的属性
4.MXML的文件名不能和ActionScript里面的类和控件名相同,不能和MXML里的tag相同,也不能是application,且后缀必须是小写的mxml。

二.MXML中属性的赋值
MXML中的属性可以用attribute表示,也可以用property表示。如果属性的类型是简单的类型,用两种方式都能表示,如果是复杂的类型,则只能用属性的方式表示,其通用格式如下:<s:property><s:propertytype>   ...用property的形式列出属性对象里面的各个变量</s:propertytype></s:property>

下面对于几种常见的复杂类型,举例说明一下
1.MXML中数组的表示
MXML中可以用tag<fx:Array>和</fx:Array>来表示一个数组,且该tag可以省略。http://common.cnblogs.com/images/copycode.gif
<mynamespace:nameOfObjectProperty><fx:Array>    <fx:Number>94062</fx:Number>    <fx:Number>14850</fx:Number>    <fx:Number>53402</fx:Number></fx:Array></mynamespace:nameOfObjectProperty> http://common.cnblogs.com/images/copycode.gif


2.MXML中Vector的表示http://common.cnblogs.com/images/copycode.gif
<fx:Declarations>    <fx:Vector type="String">      <fx:String>one</fx:String>    <fx:String>two</fx:String>    <fx:String>three</fx:String></fx:Vector></fx:Declarations>http://common.cnblogs.com/images/copycode.gif


3.MXML中XML对象的表示http://common.cnblogs.com/images/copycode.gif
<mynamespace:value xmlns:a="http://www.example.com/myschema"><fx:XML>    <a:purchaseorder>    <a:billingaddress>      ...    </a:billingaddress>    </a:purchaseorder></fx:XML></mynamespace:value> http://common.cnblogs.com/images/copycode.gif


4.MXML中property的值可以用{静态变量}表示,也可以直接用常量表示。例如下面两种方式都可以<s:Wipe direction="{spark.effects.WipeDirection.LEFT}">    ...</s:Wipe><s:Wipe direction="left">    ...</s:Wipe>

5.MXML中用\来转义特殊字符,用{\n}或&#13来表示换行符,用&lt;String&gt;来表示<String>

三.定制Application的外观
1.控件库里有一些容器控件,可以进行控制应用的外观,比如HGroup和VGroup控制控件的排列方式,TabNavigator添加Tab查看方式等
2.用CSS控制外观,需要用<fx:Style>tag来包含CSS的定义,且该定义必须是root tag的子节点。http://common.cnblogs.com/images/copycode.gif
<?xml version="1.0"?><!-- mxml/CSSExample.mxml --><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:mx="library://ns.adobe.com/flex/mx"    xmlns:s="library://ns.adobe.com/flex/spark">      <fx:Style>      @namespace s "library://ns.adobe.com/flex/spark";      @namespace mx "library://ns.adobe.com/flex/mx";                /* class selector */      .myClass {            color: Red      }                /* type selector */      s|Button {            font-size: 18pt      }    </fx:Style>    <s:Panel title="My Application">      <s:Button styleName="myClass" label="This is red 18 point text."/>    </s:Panel></s:Application>http://common.cnblogs.com/images/copycode.gif


3.用skin控制控件外观
<s:Button skinClass="com.mycompany.skins.MyButtonSkin" />

四.ActionScript和MXML的交互
1.在MXML的事件中可以用简单的ActionScript语句
<s:Button label="Click Me" click="textarea1.text='Hello World';" />
2.在MXML中插入ActionScript语句http://common.cnblogs.com/images/copycode.gif
<fx:Script>      <!      public var s:Boolean;                public function doSomething():void {            // The following statements must be inside a function.            s = label1.visible;            label1.text = "label1.visible = " + String(s);      }      ]]></fx:Script><fx:Script source="includes/IncludedFile.as"/>http://common.cnblogs.com/images/copycode.gif


3.使用{}进行数据绑定http://common.cnblogs.com/images/copycode.gif
<fx:Script>    <!            public var myText:String = "Display" + "\n" + "Content";    ]]></fx:Script><s:TextArea width="100%" text="{myText}"/>http://common.cnblogs.com/images/copycode.gif


4.对MXML中的tag增加id attribute,这样可以在ActionScript语句中直接访问该对象。
5.用ActionScript创建可以在MXML中使用的控件。http://common.cnblogs.com/images/copycode.gif
<?xml version="1.0"?><!-- mxml/CustomMXMLComponent.mxml --><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:mx="library://ns.adobe.com/flex/mx"    xmlns:s="library://ns.adobe.com/flex/spark"    xmlns:MyComps="myComponents.boxes.*">    <s:Panel title="My Application"      height="150">      <MyComps:MyComboBox/>    </s:Panel></s:Application>http://common.cnblogs.com/images/copycode.gif


注:文中给出的例子均来自adobe


作者:Jingle Guo
出处:http://www.cnblogs.com/studynote/
若标题中有“转载”字样,则本文版权归原作者所有。若无转载字样,本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利.





namespace 发表于 2013-3-31 10:35:55

我了个去。。起这个名字还有这等好处。。。
Castelo 在主题 FLEX 简单快速高效 + 3D 中提到了您
页: [1]
查看完整版本: FLEX 简单快速高效 + 3D