1 / 14

第 1 章 Flex 简介

第 1 章 Flex 简介. Flex 是 Adobe 公司开发的支持 RIA （ Rich Internet Applications ）开发和部署的技术产品，主要面向企业级的应用。借助于 Flex 强大功能，能够开发出增强更富有交互性和标签的用户界面。 对于初识 Flex 的开发者，总是对 Flex 产生不同的疑问，什么是 RIA ？什么是 Flex ？ Flex 有哪些特点。本章将带着着这些问题 RIA 和 Flex 进行简要的介绍。. 1.1 RIA 技术概述.

jalila
Download Presentation

第 1 章 Flex 简介

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第1章 Flex简介 • Flex是Adobe公司开发的支持RIA（Rich Internet Applications）开发和部署的技术产品，主要面向企业级的应用。借助于Flex强大功能，能够开发出增强更富有交互性和标签的用户界面。 • 对于初识Flex的开发者，总是对Flex产生不同的疑问，什么是RIA？什么是Flex？Flex有哪些特点。本章将带着着这些问题RIA和Flex进行简要的介绍。

  2. 1.1 RIA技术概述 • RIA是Rich Internet Applications的缩写，翻译为丰富互联网应用程序。RIA的目标是将桌面程序的表现力与浏览器的程序的方便、快捷结合在一起。开发者可以在浏览器程序上部署C/S客户端的程序，得到比传统HTML更强大的表现力。

  3. 1.1.1 RIA的特点 • RIA最突出的特点为“Rich”，同时RIA最核心的部分也体现在“Rich”中。“Rich”包含了两层含义： • 1．丰富的数据模型 • RIA技术提供了多种数据模型来处理客户端复杂的数据操作。使用RIA可以将部分原本需要在后台程序处理的问题转移到客户端，使数据能够被缓存在客户端，从而可以实现一个比基于HTML的响应速度更快，且数据往返于服务器的次数更少的用户界面。 • 2．丰富的界面元素 • RIA技术提供了比HTML更为丰富的界面表现元素，密集、响应速度快和图形丰富的页面元素与数据模型结合在一起，为用户提供好的使用体验。

  4. 1.1.2 RIA的产生背景 • 互联网日益成为应用程序开发的主要平台。随着Web应用程序复杂性越来越高，传统的Web应用程序已经渐渐不能满足Web浏览者的要求，这就是所谓的“体验问题（Experience Matters）”。RIA的出现，解决了上述问题的新思路。 • RIA大致经历了三个发展过程，如图所示。 RIA发展图

  5. 1.1.3 RIA目前的发展趋势 • 由于RIA技术带来的巨大优势，RIA技术得到不断的推广和进步。而随着RIA技术的发展，出现数个各具特色的RIA客户端开发技术，推动RIA技术的发展。 • 1．Adobe Flash/Flex • 2．Laszlo • 3．Microsoft WPF/Expression：

  6. 1.2 什么是Flex • 在了解了什么RIA以后，本节开始介绍什么是Flex。2004年初，RIA技术的主要倡导者Macromedia发布了Flex。Flex是为满足希望开发RIA的企业级程序员的需求而推出的表示层服务器和应用程序框架，它可以运行于J2EE和.NET平台。Flex具有桌面应用程序的响应性与丰富性，又具有Web传播范围广的的特性。接下来首先介绍一下Flex的基本架构。

  7. 1.2.1 Flex的基本架构 • Flex的基本架构包括4部分，如图所示。 • 1．Adobe SDK • 2．Adobe Flex Charting • 3．Adobe Flex Data Services • 4．Adobe Flex Builder Flex基本架构

  8. 1.2.2 Flex的特点 • Flex弥补了许多传统Web应用缺乏的元素，减少了于服务器之间通信的次数，更为详细的展示数据的细节。最适用的应用程序包括：解决多步处理、客户端验证、控制可视数据，使桌面应用和Web应用结合在一起，表现出更强大的表现力。 • Flex在解决用户体验困难的同时，也带来了新的特点，具体如下。 • 1．高效性 • 2．易用性 • 3．灵活性 • 4．全面性

  9. 1.2.3 Flex工作机制 • 在介绍Flex工作机制之前，先简要介绍Flex应用程序的组成。一个Flex应用程序通常包含6种元素，如图所示。 • 1．Flex Framework • 2．MXML • 3．ActionScript • 4．CSS • 5．图形资源 • 6．数据 Flex应用程序包含元素

  10. 1.3 Flex开发环境安装及配置 • 本节以Flex 2为例，介绍Flex的开发环境及配置。 • Flex开发环境包含以下4个组成部分。 • SDK 2：Flex标准开发组件，包含Flex框架。 • Flex Charting 2：Flex图表组件。 • Flex Builder 2：开发Flex应用的集成开发工具，基于Eclipse创建。 • Flex Data Service 2：Flex数据服务，应用程序使用数据服务与服务器交换数据。 • 上述4个部分同时也是Flex的基本框架中的4个部分。本节讲述如何安装Flex的相关软件。

  11. 1.3.1 如何获得Flex • 在Adobe的官方网站（www.adobe.com）上，可以下载到Flex产品软件：Flex SDK 2、Flex Builder 2、Flex Charting 2以及Flex Data Service 2。图为Adobe官方网站的下载首页。 Adobe下载首页

  12. 1.3.1 安装Flex Builder 2 • 下面介绍如何安装Flex Builder 2： • （1）双击安装文件后，弹出“Adobe Flex Builder 2 Installer”对话框，如图所示。 • （2）选择安装模式。在图中可以看到，可以选择2种模式进行安装： • Flex Builder and Flex SDK：该模式了Flex Builder 2的完整模式，将在计算机中重新安装基于Eclipse的Flex Builder • （3）在安装的最后阶段，弹出“ColdFusion Installation Info”对话框，询问是否安装ColdFusion Extensions for Flex Builder 2，如果需要则单击【Yes】按钮，不需要可以单击【No】按钮。 • （4）启动Flex Builder 2。在结束安装后，可以启动Flex Builder 2。如果为首次使用，弹出“Flex Builder 2 Activation”激活产品对话框。输入Flex Builder 2和Charts的激活码， 安装界面 是否安装ColdFusion Extensions for Flex Builder2

  13. 1.3.2 安装Flex Data Service 2 • Flex Data Service 2（以下简称FDS）可以在多个操作系统上安装，包括：Windows、UNIX、Solaries。Flex Data Service 2是基于J2EE的Web应用，除安装Flex Data Service 2，还需安装其运行所需的Web容器。所以安装Flex Data Service 2分为2个部分： • 安装FDS。 • 安装Web容器。FDS可以与多种Web容器协同工作，包含：Tomcat、WebSphere，JBoss等。 • Adobe发布的最新Flex Data Service为LiveCycle Data Service ES。下面介绍如何安装LiveCycle Data Service ES以及运行所需的Web容器。 FDS欢迎界面

  14. 1.4 第一个Flex应用 • 在安装Flex Builder 2后。就可以即可开始编写自己的Flex应用了，下面以是一个简单的Flex应用程序，在页面上显示“Hello Flex”，如图所示。 Hello Flex界面

More Related