Flex开发 入门宝典 + 实例

DividedBox, HDividedBox, and VDividedBox DividedBox容器类似与 容器类似与Box容器，用来横向或者纵向的放置子组件，不同的是 容器， 容器类似与 容器 用来横向或者纵向的放置子组件， DividedBox用显示的间隔物将自组件分割开，你可以拖动间隔物来扩大或缩小每个子 用显示的间隔物将自组件分割开， 用显示的间隔物将自组件分割开 组件所占的空间， 相与DivideBox的区别与 的区别与HBox和 组件所占的空间，HDividedBox和VDividedBox相与 和 相与 的区别与 和 VBox相对与 相对与Box的区别一样。 的区别一样。 相对与 的区别一样 Form, FormHeading, and FormItem Form是Web应用最为常见的容器了，常见的有用户注册，帐单信息等。 应用最为常见的容器了， 是 应用最为常见的容器了 常见的有用户注册，帐单信息等。 FormHeading用来区分每一组 用来区分每一组Form信息，如用户注册的过程中，可以指定 个 信息， 用来区分每一组 信息 如用户注册的过程中，可以指定2个 FormHeading分别是必添项目和选添项目。FormItem是Form中具体的某一个项目， 分别是必添项目和选添项目。 中具体的某一个项目， 分别是必添项目和选添项目 是 中具体的某一个项目 包含一个Label和若干个控件。 和若干个控件。 包含一个 和若干个控件 Grid Grid容器用来以表格的形式放置组件，好比 容器用来以表格的形式放置组件， 中没有Border的Table。Grid容器的 容器用来以表格的形式放置组件 好比Html中没有 中没有 的 。 容器的 每一个单元格(cell)都可以放置 个或 个子组件，如果想要在一个单元格中放置多个控 都可以放置0个或 个子组件， 每一个单元格 都可以放置 个或1个子组件 那么就在这个单元格中再多加一个容器。 中使用GridRow来创建行，用 来创建行， 件，那么就在这个单元格中再多加一个容器。Grid中使用 中使用 来创建行 GridItem来创建单元格。类似与 来创建单元格。 来创建单元格 类似与Html的table，你也可以使用 的 ，你也可以使用rowSpan,colSpan来合 来合 并单元格。 并单元格。 Panel Panel容器是一个比较常用的容器，包含标题 容器是一个比较常用的容器， 区域， 容器是一个比较常用的容器 包含标题(title)区域，放置子组件的容器 区域 放置子组件的容器(content) 区域，以及边框(border)。content区域有 种形式，分别是横向布局(horizontal)，纵 区域，以及边框 。 区域有3种形式， 分别是横向布局 ， 区域有 种形式 向布局(vertical)，绝对坐标布局 会很普遍的与Form结合起来使用， 结合起来使用， 向布局 ，绝对坐标布局(absolute)。Panel会很普遍的与 。 会很普遍的与 结合起来使用 当然还有前面提到的ControlBar组件也是 组件也是Panel容器中很常用的一个子容器。 容器中很常用的一个子容器。 当然还有前面提到的 组件也是 容器中很常用的一个子容器
•
建立Flex项目时需注意 项目时需注意 建立
要一致
Introducing MXML and ActionScript • MXML ML是一种基于 是一种基于XML的标记语言，在Flex技术中，MXML用于设计用户界面，实现 的标记语言， 技术中， 用于设计用户界面， 是一种基于 的标记语言 技术中 用于设计用户界面 表现层。 的功能是基本一致的， 丰富的 Flex表现层。从作用上说，MXML和HTML的功能是基本一致的，都是设计用 表现层 从作用上说， 和 的功能是基本一致的 户界面，但是MXML提供了较 提供了较HTML更为丰富的界面组件，并且在开发上 更为结构化， 更为丰富的界面组件， 更为结构化， 户界面，但是 提供了较 更为丰富的界面组件 条理更加清晰。 的编写同样类似于HTML，它通过标签来定义和描述组件。这 条理更加清晰。MXML的编写同样类似于 的编写同样类似于 ，它通过标签来定义和描述组件。 点可以从本文前面部分体会到。 的编程模型中， 点可以从本文前面部分体会到。在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的编程模型是一样的，通过 的编程模型是一样的， 接口的全限定名d的方式导入相应的接口或 的编程模型是一样的 通过Import 类/接口的全限定名 的方式导入相应的接口或 接口的全限定名 是对象。最后便是用户自定义组件了，这个很简单就可以理解，这里就不用多说了， 是对象。最后便是用户自定义组件了，这个很简单就可以理解，这里就不用多说了， 便是用户根据实际需要而定义的组件。 如<mx: Button></mx:Button>便是用户根据实际需要而定义的组件。 便是用户根据实际需要而定义的组件
Flex培训
• Eclipse IDE • Buliding Flex SDK Applications with Ant • Introduction to Flex Applications • -Introducing MXML and ActionScript • -Handing Flex in Data
• •
• • • •
产生的是同一个对象，两者的主要不同是， 创建的对象(上面第二个例子 产生的是同一个对象，两者的主要不同是，ActionScript创建的对象 上面第二个例子 创建的对象 上面第二个例子) 除了 Button就没有别的了，而MXML中创建的对象将 就没有别的了， 中创建的对象将Button添加到包含 添加到包含MXML代码的任何 就没有别的了 中创建的对象将 添加到包含 代码的任何 组件 上。Flex框架根据 框架根据MXML中的对象描述来调用构造函数，然后将其添加到父对象上或 中的对象描述来调用构造函数， 框架根据 中的对象描述来调用构造函数 设置其 为父对象的某个属性。 为父对象的某个属性。
-Creating Custom Components with ActionScriptS Using Flex Libraries Flex and Spring Integration Architecture
开发环境Flex Builder 开发环境
• • • をインストールする。 １、まず、JDKをインストールする。 まず、 をインストールする ２、Eclipse 3.4.2フォルダを ￥へコピーする フォルダをD:￥ フォルダを フォルダのFlexBuilder_EclipsePlugins.exeというファイルをダブルク ３、Flex Builderフォルダの フォルダの というファイルをダブルク リックして、以下の画面を リックして、以下の画面を呼び出す。
•
７、次へのボタンをクリックする。 へのボタンをクリックする。
•
８、この画面の選択ボタンをクリックして、以下の画面を呼び出す。 この画面の選択ボタンをクリックして、以下の画面を 画面 ボタンをクリックして
•
フォルダを選 ９、ローカルでEclipseフォルダを選び、okボタンをクリックする ローカルで フォルダを ボタンをクリックする
１０、 へのボタンをクリックして、しばらく待ちして、インストールを完了する。 １０、次へのボタンをクリックして、しばらく待ちして、インストールを完了する。 完了する
Flex介绍 介绍
• 一个Flex应用程序有 应用程序有ActionScript和MXML两种语言代码组成。从3.0开始 两种语言代码组成。 一个 应用程序有 和 两种语言代码组成 开 ActionScript已经从基于原型脚本语言进化到完全面向对象的，强类型的符合 已经从基于原型脚本语言进化到完全面向对象的， 已经从基于原型脚本语言进化到完全面向对象的 ECMAScript标准的脚本语言。 标准的脚本语言。 标准的脚本语言 MXML则是一种标记语言，非常类似于大家所熟悉的超文本标记语言(HTML)，扩展标 则是一种标记语言，非常类似于大家所熟悉的超文本标记语言 则是一种标记语言 ， 记语言(XML)。 记语言 。 如何把MXML和ActionScript相互关联起来呢？对于编译器来说，解析这两种语法后 如何把 和 相互关联起来呢？对于编译器来说， 相互关联起来呢 最终被翻译成同一个对象，比如： 最终被翻译成同一个对象，比如： <mx:Button id="btn" label="My Button" height="100"/> 和 var btn:Button = new Button(); bel = "My Button" ; btn.height = 100;
Flex控件 控件
• flex控件分为 种，一种是布局控件，另外一种是元素控件。 控件分为2种 一种是布局控件，另外一种是元素控件。 控件分为 Canvas Canvas容器绘置一个长方形的区域用来放置子组件（其他容器或者控件），与其他容 容器绘置一个长方形的区域用来放置子组件（ ），与其他容 容器绘置一个长方形的区域用来放置子组件 其他容器或者控件）， 器不同， 子组件的位置必须指定绝对坐标或使用约束条件布局。 器不同，Canvas子组件的位置必须指定绝对坐标或使用约束条件布局。 子组件的位置必须指定绝对坐标或使用约束条件布局 Box, HBox, and VBox Box容器用来横向或者纵向的放置子组件，使用 容器用来横向或者纵向的放置子组件， 容器用来横向或者纵向的放置子组件 使用direction属性来决定是横向布局还是 属性来决定是横向布局还是 纵向布局。 就是指定了direction属性的 属性的Box。 纵向布局。HBox,VBox就是指定了 就是指定了 属性的 。 ControlBar ControlBar容器一般与 容器一般与Panel容器或者 容器或者TitleWindow容器配合使用，比如在 容器配合使用， 容器一般与 容器或者 容器配合使用 比如在Panel容器 容器 的底部放置一个ControlBar作为 作为Footer。 的底部放置一个 作为 。 ApplicationControlBar ApplicationControlBar容器一般起到导航的作用，作用于整个应用程序的运行期间， 容器一般起到导航的作用， 容器一般起到导航的作用 作用于整个应用程序的运行期间， 比如我们使用的Word,Excel顶部用来放置工具栏和菜单栏的区域。 比如我们使用的 顶部用来放置工具栏和菜单栏的区域。 顶部用来放置工具栏和菜单栏的区域 ApplicationControlBar容器有 种模式，分别是 容器有2种模式 分别是Docked模式和 模式和Normal模式。 模式。 容器有 种模式， 模式和 模式 Docked模式将 模式将ApplicationControlBar容器一直显示的停靠在应用程序的顶部，并且 容器一直显示的停靠在应用程序的顶部， 模式将 容器一直显示的停靠在应用程序的顶部 自动将宽度调整为应用程序的宽度。 模式可以将ApplicationControlBar容器 自动将宽度调整为应用程序的宽度。Normal模式可以将 模式可以将 容器 以任意的大小放置在应用程序的任何位置。 以任意的大小放置在应用程序的任何位置。