介绍ActionScript开发环境Flex Builder

作者:网络 来源:佚名 更新时间:2009-03-26 00:09:21 点击:

“砍柴需先磨柴刀”这是长辈们从小就对我们说的话,对于一个从小在贫穷的农村长大的我来说,我决对肯定这句话是对的,大人们上山砍柴前都会先磨柴刀,眼见为识,哈哈!!很明显这就是所谓的“工欲其善,先利其器”的道理。

      这个系列我将会以adobe flex builder作为开发环境,和大家一起学习actionscript3这们技术。本文主要介绍actionscript的开发环境adobe flex builder,最后以大家都非常熟悉的“hello wrold”示例收场。

一、下载/安装adobe flex builder

     adobe flex builder软件大家可以去官方或是其他相关提供下载的站点下载,大家都是学软件的,下在软件这步我想就不用多说了吧。

二、启动flex开发环境
     这步也不用多说了,就一个启动软件,呵呵!下面整两张图先看看flex builder的开发环境。    
            


     下面为flex开发环境:


     
     用过eclipse的朋友看到这个开发环境的界面应该很熟悉了,flex的工作界面和eclipse的界面非常的相似,在使用上相差也不是很大,熟悉eclipse的朋友在flex环境下很快就可以入手actionscript的开发。

三、创建"hello wrold"的flex项目
     创建项目这个就不用我说也清楚,文件--新建--**,同microsoft visual studio开发环境一样,flex也是类似步骤创建项目,ok下面我们便来建立一个"hello world"项目,如下图示:
 



     新建项目中的详细设置这里暂时就不介绍,本系列的前半部分主要是介绍actionscript的基础,没有涉及到数据的交互和通信相关的知识 点,比如应用服务器这些暂时还用不到,不过需要注意一点,本系列的所有文章我都将会使用web应用程序的方式来写,所以在建立项目的时候将项目类型设置为 "web application(runs in flash player)",如上图。

四、开发"hello world"程序
     通过前面的几张图,我想大多数朋友多actionscript已经有了个大概的认识了,那好下面我们一起来看看在flex环境下怎么去开发actionscript程序。   

     在flex项目的开发中,有个很重要的文件mxml,他相当于是一个工作舞台(和flash的场景/舞台有类似效果),所有的用户交互界面都是 基于此文件来开发的,详细我将在后面介绍。在上面我们建立的flex项目里,就默认创建了一个mxml文件,ok有了这个文件,那我们就基于此基础上来做 "hello world"程序,在flex项目开发中,另一重要的技术就是基于组件的开发,这点和.net里的控件差别不大,本文示例中将用到button和 textarea组件,关于组件我也将在后续的文章里详细介绍,这里就先一笔代过。 

     示例的构思是界面上放置两个按扭,单击一个按扭就将"hello world"显示在textarea组件上,另一个按扭则完成清空textarea控件的值的功能。
     如同vs开发环境下一样,如果说winfrom或是aspx是工作舞台,那么工具箱是干什么的我想大家是非常的清楚。那么在flex下开发 actionscript同样如此,mxml则是舞台,组件箱则等同与vs里的工具箱。到这里或许大家已经想到了flex的开发模式,是不是和vs一样的 拖拽控件到界面上来做交互界面的开发呢?答案是肯定的,其实不管是在flex还是flash环境下开发actionscript都是这种开发模式。先看看 下面这张图示:

  

     通过上图可以很清楚的知道,在舞台上有两个按扭(点我、清空)和一个空白的文本域控件,通过右边的设计器上可以看出,“点我”按扭的id为btnclick,显示内容为:点我,同时还给他的单击事件指定了一个方法:onclick()。
     如上的界面设计便会生成相应的mxml标记,如同asp.net下生成html一样,我们可以通过“源视图”查看到所生成的mxml代码,我们接下来要写的代码也是嵌入在这些mxml代码中的。代码如下:

 <?xml version="1.0" encoding="utf-8"?>
 <mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" bordercolor="#3b8bf9" 
     themecolor=
"#fafdff" backgroundgradientalphas="[1.0, 1.0]" 
    backgroundgradientcolors=
"[#4d4df6, #ffffff]" 
     width=
"313" cornerradius="0" height="172">
     <mx:button x="24" y="35" label="点 我" id="btnclick" height="34" width="63" fontsize="14" 
         click=
"onclick()"/>
     <mx:textarea x="125.5" y="24" height="119" id="txt" maxchars="200" fontsize="14" 
         color=
"#070108" editable="true"/>
     <mx:button x="24" y="96" label="清 空" id="btnclear" height="34" width="63" fontsize="14" 
         click=
"onclear()"/>
 </mx:application>

 要完全实现"hello world"程序,现在只差最后一步编码了,完成onclick方法的定义,在flex项目下开发actinscript程序本文前面已经给出了很多和 vs下开发.net程序的相同点,那么写代码是不是也是和vs下的开发模式一样的呢?对的,是完全一样的。下面便是嵌入到mxml中的 actionscript代码:  

 <mx:script>
 <![cdata[
     internal function onclick():void {
         txt.text="hello world!";
     }
             
     internal function onclear():void {
         txt.text="";
     }
     ]]>
</mx:script>

通过<mx:script></mx:script>标签来嵌入actionscript代码到mxml中。mxml最终会生成一个.swf的flash文件,我们可以直接打开swf文件运行,也可以通过生成的html文件来运行程序。
     
五、mxml编程模型
     mxml是一种基于xml的标记语言,在flex技术中,mxml用于设计用户界面,实现丰富的 flex表现层。从作用上说,mxml和html的功能是基本一致的,都是设计用户界面,但是mxml提供了较html更为丰富的界面组件,并且在开发上 更为结构化,条理更加清晰。mxml的编写同样类似于html,它通过标签来定义和描述组件。这点可以从本文前面部分体会到。在mxml的编程模型中,需要注意的主要有三点:

     1、<mx:application></mx:application>标记

     2、<mx:script></mx:script>标记

     3、用户自定义可视化组件标记  

     第一点就不用多说了,这是每一个mxml应用必须具备的配置节点,然后便上<mx:script></mx: script>标记,我们可以通过<mx:script></mx:script>标签来嵌入actionscript代 码(详见本本前面部分的资料图),除了在里面直接嵌入actionscript代码外,我们还可以引入外部actionscript类/接口等文件 (.as),这点和java的编程模型是一样的,通过import 类/接口的全限定名d的方式导入相应的接口或是对象。最后便是用户自定义组件了,这个很简单就可以理解,这里就不用多说了,如上面的<mx: button></mx:button>便是用户根据实际需要而定义的组件。