对 Flex 的总体认识

简介:

Flex用于RIA应用开发,有数以万计的开发者将Flex作为项目UI界面的构建,UI构建是一个比较大的话题,里面也融入了MVC分层架构思想,有如ajax应用模式一样。目前对Flex了解甚浅,一周内零零散散花了一些的时间学习了Flex基础,写几篇文章作为小结,如果挨砖,绝对是受之无愧!

    Flex应用程序引入了两种不同的语言:MXML和ActionScript。MXML属于XML标记语言的一种,AS也早有所闻,有点类似于Javascript,经过学习后,发现完全没有太多联系,其OO思想更加接近于传统OO语言,JS精髓在于prototype原型,AS中压根儿就找不到prototype身影,反而是语法稍感别扭,可能大家容易将MXML+AS和HTML+JS类比,所以才产生这种印象,并且两者开发方式的区别还是很大的,所以还是专心于MXML+AS学习吧,不要左顾右盼了。

    1.Flex-SWF-AIR

    Flex开发出的应用程序,可以编译为基于Adobe Flash Player的swf,也可以编译为基于Adobe AIR的air,两者之间最大区别在于air能够直接和本地资源进行交互,更多信息请直接Google吧。

    2.MXML-AS

    之前提到了MXML和AS,我们写一两个demo例子就能明白两者之间的关系,除此之外,文档中有关于两者的一些描述。

    MXML filenames must adhere to the following naming conventions:
    Filenames must be valid ActionScript identifiers, which means they must start with a letter or underscore character (_), and they can only contain letters, numbers, and underscore characters after that.
    Filenames must not be the same as ActionScript class names, component id values, or the word application. Do not use filenames that match the names of MXML tags that are in the mx namespace.
    Filenames must end with a lowercase .mxml file extension.

    ActionScript is an object-oriented procedural programming language, based on the ECMAScript (ECMA-262) edition 4 draft language specification. You can use a variety of methods to mix ActionScript and MXML, including the following:
    Use ActionScript to define event listeners inside MXML event attributes.
    Add script blocks using the 

复制代码
<? xml version="1.0" ?>
<!--  mxml\HellowWorld.mxml  -->
< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml" >
    
< mx:Panel  title ="My Application"  
        paddingTop
="10"  
        paddingBottom
="10"
        paddingLeft
="10"  
        paddingRight
="10"
    
>
        
< mx:Label  text ="Hello World!"  fontWeight ="bold"  fontSize ="24" />
    
</ mx:Panel >
</ mx:Application >
复制代码


    嵌入到网页中的主要代码:

复制代码
< noscript >
    
< object  classid ="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        id
="hello"  width ="100%"  height ="100%"
 codebase
="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab" >
 
< param  name ="movie"  value ="hello.swf"   />
 
< param  name ="quality"  value ="high"   />
 
< param  name ="bgcolor"  value ="#869ca7"   />
 
< param  name ="allowScriptAccess"  value ="sameDomain"   />
 
< embed  src ="hello.swf"  quality ="high"  bgcolor ="#869ca7"
     width
="100%"  height ="100%"  name ="hello"  align ="middle"
     play
="true"
     loop
="false"
     quality
="high"
     allowScriptAccess
="sameDomain"
     type
="application/x-shockwave-flash"
     pluginspage
="http://www.adobe.com/go/getflashplayer" >
 
</ embed >
    
</ object >
</ noscript >
复制代码

 

    运行效果:


    联想到ArcGIS Flex API,如果只是想做一个单独的WebGIS应用,或希望基于Flex技术重新开发一套WebGIS+MIS系统,ArcGIS Flex API可以实现非常绚丽的效果,但如果已有一套业务系统,并希望引入WebGIS和原有业务系统进行交互,ArcGIS Javascript API更合适,JS去处理传统网页逻辑结构和页面显示的方法是再成熟不过了。

    4.MVC

    Model-View-Control模式已经成为经典了,早年从Struts刚出来时跳入我的视线,分层、解耦成为过去几年B/S开发的热点关键字,Flex开发同样可以遵循这一经典思想。

    Flex用户接口组件为View,分为两种类型:控件和容器。数据和业务规则为Model,如控件中的数据来源,在什么情况下显示什么数据等。Flex没有提供像Struts这么清晰的ActionServlet控制器,但可以根据应用需求去设计自己的控制器。

    以后会分析一个完整的例子。

    5.flex-config.xml和mxml-manifest.xml

    flex-config.xml在flex_install_dir/frameworks下,可用于基于命令行进行Flex编译,flex-config.xml涵盖flex编译及其他控制的所有选项,对于命令行编译来说,mxmlc复杂的编译选项对于命令行的输入简直就是噩梦,而使用flex-config.xml可以方便的修改编译选项,并且一次修改就可以在后续的所有mxmlc编译过程中保存下来,并且flex-config.xml文件是一个xml文件,易读易用,其中每个参数都有详细的注释,对于编译参数的调整也更方便。

    详细方法:http://blog.eshangrao.com/2007/01/30/335/ 

    同样在flex_install_dir/frameworks目录下,mxml-manifest.xml包含了Flex所有组件类和id之间的对应关系。


本文转自Flyingis博客园博客,原文链接:http://www.cnblogs.com/flyingis/archive/2008/11/29/1343778.html,如需转载请自行联系原作者

相关文章
|
3月前
|
前端开发 容器
Flex布局的三个属性要深刻理解!
Flex布局的三个属性要深刻理解!
|
8月前
|
开发者 容器
Flex基础布局
Flex基础布局
|
11月前
|
容器
Flex布局学习
Flex布局学习
|
容器
flex弹性盒布局知识点
flex弹性盒布局知识点
114 0
|
Java 程序员 容器
Flex弹性盒子(一篇带你掌握潮流 Flex 布局)(下)
5.当切换容器排列方式后,水平对齐以及垂直对齐的 应用 变化(重点、难点⭐⭐⭐⭐⭐) 当使用flex-direction: (例 column) ;时 justify-content 、 align-content 、align-items发生的变化 当排列为column / column-reverse 时,其实容器的主轴发生了变化 主轴现在是竖轴,副轴是横轴
101 0
Flex弹性盒子(一篇带你掌握潮流 Flex 布局)(下)
|
前端开发 安全 容器
Flex弹性盒子(一篇带你掌握潮流 Flex 布局)(上)
Flex弹性盒子 1.说在前头 1.1.Flex布局出现之前 我们知道传统的页面布局依赖于 盒状模型 依赖于display、position、float属性 对于某些特殊布局来说特别不方便,比如垂直居中(比较不容易实现) 1.2.Flex布局出现后 2009年,W3C提出Flex布局 简便、完整、响应式的各种实现页面布局(目前已得到所有主流浏览器的支持)
253 0
Flex弹性盒子(一篇带你掌握潮流 Flex 布局)(上)
|
移动开发 数据可视化 前端开发
3分钟精通flex布局 - flex布局可视化学习工具
现在大前端中被使用最多的布局方式非flex莫属,像h5、pc、小程序、rn、甚至native都在使用flex布局,可见掌握好flex布局是多的重要。 然而在flex布局兴起时,我们学习flex布局的方法大部分就是看一些博客文章的解析,官方文档说明,然后挨个去看各个属性的作用和示例,然后再自己手敲实践几次。这也是我当初学习flex布局的方法,常规手段,也很有效。如果愣是要说一些不足的地方,应该就是不直观,效率不太高。 那有没有一种更直观、更高效的学习方式呢? 为了能解决这个问题,flex布局可视化工具就诞生了。
311 0
3分钟精通flex布局 - flex布局可视化学习工具