1 / 33

EXT 技术交流

EXT 技术交流. 作者：常悦. 目 录. EXT Demo 实例. 2. 3. 1. 富客户端技术及 RIA 应用. EXT 简介. 富客户端技术及 RIA 应用. 富客户端简介 : 富因特网应用程序 ( Rich Internet Applications ， RIA ) 并不专指某项技术，也不像 Java ， C# 是一门语言，它是一种软件开发的趋势，是建立在对用户友好程度（即：用户体验）的认知的基础上的对软件所能达到程度的一种期望。 可以理解为一种解决方案. 富客户端技术及 RIA 应用.

varuna
Download Presentation

EXT 技术交流

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. EXT 技术交流 作者：常悦

  2. 目 录 EXT Demo实例 2 3 1 富客户端技术及RIA应用 EXT简介

  3. 富客户端技术及RIA应用 富客户端简介: 富因特网应用程序(RichInternetApplications，RIA)并不专指某项技术，也不像Java，C#是一门语言，它是一种软件开发的趋势，是建立在对用户友好程度（即：用户体验）的认知的基础上的对软件所能达到程度的一种期望。 可以理解为一种解决方案

  4. 富客户端技术及RIA应用 RIA:利用具有很强交互性的富客户端技术来为用户提供一个更高和更全方位的网络体验。指导我们开发更丰富互动，更加友好的用户界面，提高客户满意度和粘滞度。集成桌面应用的交互性和传统Web应用的部署灵活性，以创建丰富而完整的用户体验。

  5. 富客户端技术及RIA应用 如何理解RIA WEB，可交互性，富 其中，“富”的概念包含两方面，分别是数据模型的丰富和用户界面的丰富。

  6. 富客户端技术及RIA应用 数据模型:用户界面可以显示和操作更为复杂的嵌入在客户端的数据模型,程序运行于客户端并且程序更多的是和用户进行交互同时,更少的和服务器进行交互。 用户界面:提供了灵活多样的界面控制元素，这些控制元素可以很好的与数据模型相结合。

  7. 富客户端技术及RIA应用 体验 可交互性 RIA WEB 丰富 数据模型 用户界面

  8. 富客户端技术及RIA应用 什么是一个典型的RIA？ 在消息确认和格式编排方面提供互动用户界面。 在无刷新页面之下提供快捷的界面响应时间。 提供通用的用户界面特性如拖放式以及在线离线操作能力。 立即部署、跨平台、采用逐步下载来检索内容数据，可以充分利用被广泛采纳的互联网标准。 RIA具有通信的特点则包括实时互动的声音和图像。

  9. 富客户端技术及RIA应用 几种富客户端技术： 1、MacromediaFlex－Adobe公司的RIA解决方案，在Flash运行时环境中运行。 2、JavaFx－Sun的RIA解决方案，在Java虚拟机(1.5)上运行。 3、WPF/SilverLight－Microsoft的RIA解决方案，在浏览器端的.Net运行于插件中运行。 4、Ajax－使用标准W3C技术，不需要额外的运行环境支持，如Backbase及Ext。

  10. 富客户端技术及RIA应用 现在实现RIA的技术方面，大致两个主流分支，一种是以Flex和SliverLight为代表的运行于浏览器插件中的RIA应用；另一种是以ExtJS、Bindows等为代表的利用HTML、CSS和JavaScript等不需要额外的运行环境支持，实现的富客户端组件技术的RIA。

  11. 富客户端技术及RIA应用 Adobe 关于RIA体验的诠释： 丰富互联网应用程序(RIA)提供丰富的、引人入胜的体验, 该体验可提高用户满意度并提高用户生产效率。使用互联网的广泛触及力, 可以在各种浏览器、桌面和设备上部署RIA……

  12. 目 录 1 3 2 富客户端技术及RIA应用 EXT简介 EXT Demo实例

  13. Ext简介 AJAX全称为“AsynchronousJavaScriptand XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。Ajax不是一项技术。它其实是几项技术，每项技术自身都很繁荣，通过Html、xhtml、DOM、CSS、XML、XSLT、XMLHttpRequest、javascript等结合起来。 常用Ajax框架:Jquery, Dojo,dwr,YUI,Prototype.js, Ext……

  14. 什么是Ext: Ext是一种用JavaScript编写的功能强大的Ajax框架，可以用来开发RIA也即富客户端的Ajax应用，主要用于创建前端用户界面，是一个与后台技术无关的前端Ajax框架。因此，可以把Ext用在.Net、Java、Php等各种开发语言开发的应用当中。 Ext简介 官方网址： http://www.extjs.com/

  15. Ext简介 ExtJS来源于YUI，YUI是YahooUserInterfaceLibrary的简称，它是使用JavaScript编写的工具和控件库。最初只是在Yahoo内部使用，用来构件具有丰富用户体验的Web应用。 2007年4月，ExtJS发布了1.0正式版。直至现在，ExtJS已涵盖美国、中国、日本、法国、德国等全球范围用户，现在的版本已升级到Ext-2.2.1，并将在2009年上半年推出Ext-3.0版。 Ext的发展：

  16. Ext简介 经过不断发展与改进，ExtJS已经成为完整与成熟的一套构建RIAWeb应用的JavaScript基础库。利用ExtJS构建的RIAWeb应用具有与桌面程序一样的标准用户界面与操作方式，能够跨越不同的浏览器平台。

  17. Ext简介 Ext的几个特点： • 使用标准的W3C技术； • 庞大的组件模型及控件库； • 丰富绚丽的界面元素； • 强大实用的工具封装 ； • 开源 • 2 • 3 • 4 5

  18. Ext简介 ExtJS开发包可以从官方网站www.ExtJS.com下载，目前版本为2.2.1，共计25.2 MB 。ExtJS程序真正运行时必须要载入的，是这个包中的ext-base.js ，ext-all.js和ext-all.css ，共665KB。 认识ExtJS的开发包：

  19. Ext简介 组件/控件的基本概念 组件就是指可以复用的应用程序组成部件。我们在开发的时候，只需要直接使用这些组件及控件，就可以创建出丰富多彩的应用程序界面。窗口、树、表格、选项板、工具栏、菜单等都是可以直接复用的组件及控件。 Ext组件及控件的种类 1、Ext核心库中的组件； 2、Ext应用示例中的提供的扩展组件；(Ext.ux，扩展用命名空间，不存在于api中) 3、用户自定义的组件。 Ext组件及控件简介：

  20. Ext简介 基础性的组件Ext.Component全体Ext组件的基类 容器组件Ext.Container 用于承载其它任何组件 表格组件Ext.Grid 树组件Ext.tree 菜单及工具栏Ext.Toolbar 表单及字段Ext.form 拖放处理Ext.dd 其它组件Ext……..

  21. Ext简介 Ext和传统的Web开发大不相同。特别是在界面开发上，不用再纠缠在Html和CSS中，而与Java Swing或者Delphi的开发方式非常相同。 Ext学习成本：

  22. Ext简介 Ext提供了庞大丰富的组件体系，学习Ext主要就是学习各种组件的功能、特性及使用方法； Ext组件的基类是Component，组件配置选项、属性、方法及事件都是组件非常重要的特性，需要通过API来熟悉他们的功能及用法； 如何学习Ext：

  23. Ext简介 理解Ext组件生命周期、渲染及显示等对于用好Ext是非常关键的； 学习Ext组件及控件需要重点掌握Component及Container这两个基本的组件。

  24. Ext简介 理解Ext组件生命周期、渲染及显示等对于用好Ext是非常关键的； 学习Ext组件及控件需要重点掌握Component及Container这两个基本的组件。

  25. 目 录 2 1 3 富客户端技术及RIA应用 EXT 简介 EXT Demo实例

  26. EXT Demo实例 <HTML> <HEAD> <TITLE></TITLE> <link rel="stylesheet" type="text/css" href="js/ext/css/ext-all.css" /> <script type="text/javascript" src="js/ext/ext-base.js"></script> <script type="text/javascript" src="js/ext/ext-all.js"></script> </HEAD> <BODY> <script> var tree=new Ext.tree.TreePanel({ //一个菜单树 title:"树", width:200, height:200, loader:new Ext.tree.TreeLoader(), root:new Ext.tree.AsyncTreeNode({text:"父",children:[{text:"子1",leaf:true},{text:"子2",leaf:true}]}) }); Ext.onReady(function() { var win= new Ext.Window({ title:"窗口", width:500, height:400, items:tree, buttons:[{text:"确定"},{text:"取消"}] }); win.show();}); </script> </BODY> </HTML> 树与窗口：

  27. EXTDemo实例 官方Demo： • 日期控件 • 2 图片播放 • 3 grid 与 拖拽 • 4 图片搜索(非官方扩展)

  28. EXTDemo实例 简单模拟协同首页：go

  29. EXTDemo实例 IDE工具支持（spket）： 1、选择Help -> Software Updates -> Find and Install...-> Search for new features to install ->New remote site... Name: “Spket”, Url: “http://www.spket.com/update/”下载 2、Window -> Preferences -> Spket -> JavaScript Profiles -> New ；输入“ExtJS”点击OK； 选择“ExtJS” 并点击“Add Library”然后在下拉条中选取“ExtJS”； 选择 “ExtJS”并点击“Add File”，然后在你的./ext-2.x/source目录中选取“ext.jsb” 文件；

  30. EXTDemo实例 IDE工具支持（spket）： 2、Window -> Preferences -> Spket -> JavaScript Profiles -> New ；输入“ExtJS”点击OK； 选择“ExtJS” 并点击“Add Library”然后在下拉条中选取“ExtJS”； 选择 “ExtJS”并点击“Add File”，然后在你的./ext-2.x/source目录中选取“ext.jsb” 文件；

  31. EXTDemo实例 3、设置新的ExtJS Profile，选中并点击“JavaScript Profiles” 对话框 “Defalut”按钮； 4、JS打开方式为 Window -> Preferences ->General-> Editors-> File...选择JS  为 Spket JavaScript Editor(default)

  32. 下面以高新区数据平台项目中实际功能需求介绍Ext具体实际的应用和配置。下面以高新区数据平台项目中实际功能需求介绍Ext具体实际的应用和配置。

  33. 谢谢观赏 网址: www.berheley.com 电话: 022-27058558-8000 传真: 022-83716069 邮箱: sales@berheley.com 天津市高新区华天道6号海泰信息广场H座205

More Related