1 / 24

Flex 基础介绍及 Flex 报表使用

Flex 基础介绍及 Flex 报表使用. 提纲. Flex 开发调试环境准备 Flex 编程基础 报表控件 与 Java 的整合 嵌入 JSP 页面. 1 、开发环境. 最新版本的官方提供的开发工具是 Adobe Flash Builder 4 ，同时提供了一个 Adobe Flash Builder 4 Plug-in Eclipse 版本，这两个安装后都拥有相同的功能，可以任选版本安装；安装之后，会自动按照 flex sdk4.x 版本。. 2 、调试环境. 播放器： debug 版本的 flash player

irma-nieves
Download Presentation

Flex 基础介绍及 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. Flex基础介绍及Flex报表使用

  2. 提纲 • Flex 开发调试环境准备 • Flex编程基础 • 报表控件 • 与Java的整合 • 嵌入JSP页面

  3. 1、开发环境 • 最新版本的官方提供的开发工具是Adobe Flash Builder 4，同时提供了一个Adobe Flash Builder 4 Plug-in Eclipse 版本，这两个安装后都拥有相同的功能，可以任选版本安装；安装之后，会自动按照flex sdk4.x版本。

  4. 2、调试环境 • 播放器： debug版本的flash player • 浏览器：建议安装Fixfox，并安装以下插件： • debug 版本的 FireFox Flash Player 插件 • HttpFox插件：可以查看 HTTP 通信的过程和数据，还能看到哪些内容是从 Cache 里面读取的 • FlashBug：能显示您在程序中用 trace() 语句输出的调试信息 • Cache Status：可以让我们方便的管理缓存

  5. 3、其他-可以在FLEX项目的 • 可以在FLEX项目的属性中的“flex编译器”下的“附加的编译器参数”中，增加以下参数：-keep-generated-actionscript=true；增加该参数后，Flash Builder会在工程的源代码路径下自动创建一个generate文件夹来存储由MXML文件翻译成的ActionScript临时文件，通过这种方式，额可以加快学习速度。

  6. Flex编程基础 • MXML编程 • ActionScript编程 • Flex组件 • Flex控件

  7. 1、Flex服务的组成 Flex 表 现 层 服 务 Flex应用框架 MXML ActionScript Flex类库 Flex运行服务

  8. 2、MXML和ActionScript • MXML是一种XML语言，最基本的作用是用来布局Flex应用程序的用户界面。MXML也可以用来定义不可视的Flex应用。例如，它可以定义数据源，并将数据源绑定到用户界面。 • ActionScript类似于JavaScript的强类型面向对象编程语言。它包括了已有的对象和功能，也允许建立自定义对象和功能。它基于ECMA-262 Edition 4标准。使用ActionScript，用户可以定义事件监听、得到和定义组件属性、控制返回程序、建立新的类、包和组件。 • http://livedocs.adobe.com/flex/3_cn/langref/statements.html：这个网址介绍了Flex的基本语法及各种关键字的意思，注意关注与Java语法的不同之处，比如定义常量使用关键字const，而final关键字只能作用在方法或类上。

  9. 3、MXML和ActionScript的关系 • 在Flex编程中，编程者使用两种语言来进行Flex应用编程：MXML和ActionScript。一般来说，MXML实现了在MVC（Model、View和Control）编程模式中的View（视图）部分，而ActionScript则完成Model（模式）的部分。 • Flex实际上是ActionScript类的库。这个库包括了组件（容器和控件）、管理类、数据服务类等。MXML标签相当于ActionScript中的类的属性。Flex分解并编译MXML标签为SWF文件。例如，Flex提供ActionScript按钮类，在MXML中则用<mx:Button>来定义按钮。

  10. 4、需要关注的基础知识--（1） • MXML标签规则 • 不是所有的标签都要求有id属性。 • 所有的根标签都不能有id属性。 • 布尔属性只有true和false两个值。 • <mx:Binding>要求有source和destination属性。 • <mx:Binding>标签不能有id属性。 • <mx:WebService>标签要求wsdl和serviceName中的其中一项，但不允许两者一起出现。 • <mx:RemoteObject>标签要求source和name中的其中一项，但不允许两者一起出现。 • <mx:HTTPService>标签要求url和serviceName中的其中一项，但不允许两者一起出现。 • <mx:operation>标签要求name值，但不允许重复name的值。 • <mx:operation>标签不能有id属性。 • <mx:method>标签要求name值，但不允许重复name的值。 • <mx:method>标签不能有id属性。

  11. 4、需要关注的基础知识--（2） • MXML与其它相关的标准 • XML标准:MXML文件实际上是一个XML文件。XML是EXtensible Markup Language的缩写。 • 事件模型标准:Flex中的事件模型是Document Object Model (DOM) Level 3 Events的子集。 • Web Services标准;Flex提供了标签来调用Web Services。 • Java标准:Flex提供MXML标签与服务器端的Java Object产生联系，包括Plain Old Java Objects（POJOs）、JavaBeans和Enterprise JavaBeans（EJBs）。 • HTTP标准:Flex提供MXML标签来建立把这的HTTP GET和POST要求，并且可以得到HTTP的返回值。 • 图形标准:Flex提供MXML标签来使用JPEG、GIF和PNG图像格式，同时也提供标签来使用SWF文件和Scalable Vector Graphics（SVG）文件。 • 样式表单（Cascading Style Sheets）标准:MXML的样式上使用W3C Cascading Style Sheets（CSS）标准的。CSS提供了对Flex组件的外观和效果定义的途径。

  12. 4、需要关注的基础知识--（3） • 变量默认值

  13. 5、 Flex组件（Components） • 所有用来建立Flex应用程序的子类都是Flex组件。Flex提供了以组件为基础的编程模式。编程者可以使用组件来建立应用和用户界面。Flex包括了大量的已经定义好的，非常灵活的组件。根据实际需求，用户还可以建立自定义的组件。可以通过以下方面来设计一个组件。 • 样式（Styles）：样式就一个组件的特色，如字体、字体颜色、字体大小、文本对正等。这些都可通过样式表单（CSS）来定义。 • 行为（Behaviors）：指控件对用户动作或应用的可视改变。例如，使用鼠标移动和改变控件大小。 • 事件（Events）：指控件的响应。事件包括组件建立、鼠标行为和按钮动作。 • 外观（Skins）：控件的外观的类。 • 大小（Size）：控件的高度和宽度。所有的组件都有默认的大小。编程者可以使用其默认大小，也可以定义其大小。

  14. 6、组件的类继承关系 • 所有的组件都是由ActionScript的Sprite类和UIComponent衍生的。它继承了父类的属性和方法，如对事件、风格和行为的定义。UIComponent是所有组件的基本的类。 UIComponent有以下常用属性：

  15. 7、组件的大小和定位 • Flex提供了以下4种定义控件大小的方式： • 默认大小（Default sizing）：Flex自动定义控件和容器的大小。 • 绝对值尺寸（Explicit sizing）：用户定义高度和宽度的像素值。 • 百分比（Percentage-based sizing）：用户定义相对于其父类容器的百分比值。 • 约束布局（Constraint-based layout）：Flex通过定义组件在其父类容器的四边和中心位置来控制大小和位置。 • Flex提供了以下两种定位方法： • 自动布局（Automatic Layout），Flex自动定位子类控件在容器中的位置。 • 约束布局（Constraint-based layout），通过定义组件在其父类容器的四边和中心位置来定位。 • 使用约束布局是，不需要定义子类组件的x，y的绝对值，但需要定义子类组件到父类容器四边的距离。

  16. 8、Flex控件(Controls) • Flex控件是构成用户界面基本元素。Flex有两种类型控件：基础控件和数据源控件。按照其使用用途，可以分为以下5类： • 文本控件（Text Controls） • 数据源控件（Data Provider Controls） • 菜单控件（Menu Control） • 按钮控件（Button Control） • Flex控件（Flex Controls）

  17. 9、 Flex操作properties文件 • 例如在资源文件包下面新建一个message.properties文件，包含有以下内容： • casemanager.btn.save = save • 有以下两种常用方法： • 通过@Resource标签使用： <mx:Button label="@Resource(key='casemanager.btn.save',bundle='message')" /> • 通过ResourceManager工具类使用：ResourceManager.getInstance().getString("message","casemanager.btn.save") 其中，红色标记部分，与文件名去掉”.properties”之后的字符串相同 通天对properties文件的操作，可以方便的实现国际化。[可通过以下语句动态的修改当前语种类型：ResourceManager.getInstance().localeChain = ['zh_CN']; ]

  18. 10、视窗状态(View States) • 视窗状态可以让同一个组件或应用程序具有更多的内容和外观，特别是对用户行为的回应。最简单例子就是定义一个基本默认的状态作为登录（login）页面，当登录成功后，显示另一个状态，即登录后的页面。Flex程序中可以定义一个或多个不同的状态。通常还可以使用过渡行为来改变视窗状态。

  19. 11、嵌入外部资源 • 在Flex应用程序中，可以使用外部的资源，例如图像，音像，还有文字等。通常可以在编译时将这些资源加入到程序中，通常这个过程称为“嵌入外部资源（embedding the asset）”。 • 嵌入外部资源的好处在于由于已经被编译过程加入到了程序中，因此可以更加快速的进行访问。而其缺点在于编译后的SWF文件会比较大。

  20. Flex数据 • 1、获取环境信息 • JavaScript • 共享对象 • HttpService、WebService、RemoteObject[和java的数据转换关系158页] • 表达数据 • 数据绑定

  21. 报表

  22. 性能优化

  23. 与网页进行交互

  24. 性能 • 组件加载顺序、布局 • 内存

More Related