第1章Flex基础入门.pptVIP

第一章 Flex基础入门 本章内容 Flex简介 创建第一个Flex程序 MXML语言简介 使用容器控制界面布局 本章目标 理解Flex相关概念 掌握并创建Flex应用程序 理解MXML文件结构 能够编写简单的ActionScript 理解Flex程序的界面布局 1. Flex简介 传统的网络程序一般都采用页面表现内容，在页面中使用HTML标记语言来表现界面层 而HTML只适合于图文内容，在形式上受到很多限制，已经渐渐不再能满足用户更高的、全方位的体验要求 用户已经厌倦了网页上单调的表达式，希望网页在内容表现上更“花哨”一些，更有趣一些，更有个性化特 RIA将桌面应用程序的强交互性与传统WEB应用的灵活性结合起来，为用户带来全新的体验 RIA的富客户端采用异步方式和服务器端通信，这是一种安全、具备良好适应性的服务器运行模式 富客户端的优点还表现在界面内容上，大量的界面控制和数据紧密结合在一起，还可以整合声音、视频等桌面元素，这些都体现了富互联网应用程序的优越性 1.1 RIA(Rich Internet Application)概述 Flex是一个针对企业级富互联网应用的表示层解决方案 Flex是一种应用程序框架，由一系列的技术和软件产品组成,比如集成开发环境、程序开发套件、数据库服务器软件等 通过Flex技术，开发人员可将RIA程序编译成为Flash文件，为Flash Player所接受 一个完整的Flex程序由MXML代码和ActionScript代码组成 MXML基于XML标准，用于配置和设置Flex程序的界面及编写表现层数据模型 ActionScript基于ECMAScript，用于设置Flash动画，其语法类似JavaScript Flex4是Flex的一个新版本，它的产品集包含以下几个部分 Adobe Flex4 SDK Flash Builder 4 Adobe LiveCycle Enterprice Suite 1.2 什么是Flex 2.1 安装Flash Builder 2. 创建第一个Flex程序 Flash Builder 4 是一个基于Eclipse的集成开发环境 通过Flash Builder可以在很大程度上提高Flex的开发效率 2.2 创建Flex Project 创建一个Flex应用程序的步骤如下 选择“开始”→”程序”→” Adobe” →”Adobe Flash Builder Plug-in Beta 2 Eclipse 启动程序”启动Adobe Flash Builder 选择“文件”→ ”新建“ → ”Flex项目“,弹出“新建Flex项目”对话框,在“项目名”文本框中输入“flexapp”项目名称，其它的使用默认设置 单击“完成”按钮，Adobe Flash Builder将创建一个Flex项目并自动生成所有基本文件，包括主程序文件、项目库文件、HTML页面模板等 bin-debug文件夹：用来存放程序编译后输出的SWF和HTML等一系列文件 html-template文件夹：生成HTML页面的文件模板，包括检测用户浏览器Flash播放器插件版本号的JS脚本文件和一个自动下载最新Flash播放器插件的SWF文件 libs文件夹：存放Flex应用程序引用的库文件 flexapp.mxml文件：这个文件即为项目的主程序文件 2.3 添加组件和代码 ?xml version=1.0 encoding=utf-8? s:Application xmlns:fx=/mxml/2009 xmlns:s=library:///flex/spark xmlns:mx=library:///flex/halo minWidth=1024 minHeight=768 s:Button y=“154” label=“计算” x=“82” 　 click=this.txtResult.text=String(int(this.txtNum1.text)+int(this.txtNum2.text))/ s:Label x=73 y=54 text=第一个数： width=75 height=19 / s:TextInput x=133 y=54 id=txtNum1/ s:Label x=73 y=89 text=第二个数： width=75 height=19/ s:TextInput x=133 y=84 id=txtNum2/ s:Label x=73 y=121 text=运算结果： width=75