Embed Size (px)
DESCRIPTION
EXT 技术交流. 作者：常悦. 目 录. EXT Demo 实例. 2. 3. 1. 富客户端技术及 RIA 应用. EXT 简介. 富客户端技术及 RIA 应用. 富客户端简介 : 富因特网应用程序 ( Rich Internet Applications ， RIA ) 并不专指某项技术，也不像 Java ， C# 是一门语言，它是一种软件开发的趋势，是建立在对用户友好程度（即：用户体验）的认知的基础上的对软件所能达到程度的一种期望。 可以理解为一种解决方案. 富客户端技术及 RIA 应用. - PowerPoint PPT Presentation
Citation preview
EXT EXT 技术交流技术交流
作者：常悦
目 录
22 EXT 简介
11 富客户端技术及 RIA 应用
33 EXT Demo 实例
富客户端技术及 RIA 应用
富客户端简介 : 富因特网应用程序 (Rich Internet Applications，RIA) 并不专指某项技术，也不像 Java ， C# 是一门语言，它是一种软件开发的趋势，是建立在对用户友好程度（即：用户体验）的认知的基础上的对软件所能达到程度的一种期望。
可以理解为一种解决方案
富客户端技术及 RIA 应用
RIA:利用具有很强交互性的富客户端技术来为用户提供一个更高和更全方位的网络体验。指导我们开发更丰富互动，更加友好的用户界面，提高客户满意度和粘滞度。集成桌面应用的交互性和传统Web 应用的部署灵活性，以创建丰富而完整的用户体验。
富客户端技术及 RIA 应用
如何理解 RIA
WEB ，可交互性，富
其中，“富”的概念包含两方面，分别是数据模型的丰富和用户界面的丰富。
富客户端技术及 RIA 应用
数据模型 :用户界面可以显示和操作更为复杂的嵌入在客户端的数据模型 ,程序运行于客户端并且程序更多的是和用户进行交互同时 ,更少的和服务器进行交互。
用户界面 :提供了灵活多样的界面控制元素，这些控制元素可以很好的与数据模型相结合。
富客户端技术及 RIA 应用
丰富 WEB 可交互性
数据模型 用户界面
体验
RIA
富客户端技术及 RIA 应用
什么是一个典型的 RIA ？在消息确认和格式编排方面提供互动用户界面。在无刷新页面之下提供快捷的界面响应时间。提供通用的用户界面特性如拖放式以及在线离线操作能力。立即部署、跨平台、采用逐步下载来检索内容数据，可以充分利用被广泛采纳的互联网标准。RIA具有通信的特点则包括实时互动的声音和图像。
富客户端技术及 RIA 应用
几种富客户端技术： 1 、 Macromedia Flex － Adobe 公司的 RIA 解决方案，在 Flash 运行时环境中运行。 2 、 JavaFx － Sun的 RIA 解决方案，在 Java 虚拟机 (1.5) 上运行。 3 、 WPF/SilverLight － Microsoft的 RIA 解决方案，在浏览器端的 .Net 运行于插件中运行。 4 、 Ajax －使用标准 W3C 技术，不需要额外的运行环境支持，如 Backbase及 Ext 。
富客户端技术及 RIA 应用
现在实现 RIA 的技术方面，大致两个主流分支，一种是以 Flex和 SliverLight 为代表的运行于浏览器插件中的 RIA 应用；另一种是以 ExtJS、 Bindows 等为代表的利用 HTML、 CSS和 JavaScript 等不需要额外的运行环境支持，实现的富客户端组件技术的RIA 。
富客户端技术及 RIA 应用
Adobe 关于 RIA体验的诠释：
丰富互联网应用程序 (RIA) 提供丰富的、引人入胜的体验 , 该体验可提高用户满意度并提高用户生产效率。使用互联网的广泛触及力 , 可以在各种浏览器、桌面和设备上部署 RIA……
目 录
11 富客户端技术及 RIA 应用
22 EXT 简介
33 EXT Demo 实例
Ext 简介
AJAX 全称为“ Asynchronous JavaScript and XML”(异步 JavaScript和 XML),是指一种创建交互式网页应用的网页开发技术。 Ajax 不是一项技术。它其实是几项技术，每项技术自身都很繁荣，通过Html 、 xhtml 、 DOM 、 CSS 、 XML 、 XSLT 、 XMLHttpRequest 、 javascript 等结合起来。 常用 Ajax框架 :Jquery, Dojo,dwr,YUI,Prototype.js, Ext……
Ext 简介
什么是 Ext:
Ext 是一种用 JavaScript 编写的功能强大的 Ajax框架，可以用来开发 RIA 也即富客户端的 Ajax 应用，主要用于创建前端用户界面，是一个与后台技术无关的前端 Ajax框架。因此，可以把 Ext 用在 .Net、 Java、 Php 等各种开发语言开发的应用当中。
官方网址： http://www.extjs.com/
Ext 简介
ExtJS 来源于 YUI ， YUI是 Yahoo User Interface Library 的简称，它是使用 JavaScript 编写的工具和控件库。最初只是在 Yahoo 内部使用，用来构件具有丰富用户体验的 Web 应用。 2007年 4 月， ExtJS 发布了 1.0正式版。直至现在， ExtJS已涵盖美国、中国、日本、法国、德国等全球范围用户，现在的版本已升级到 Ext-2.2.1
，并将在 2009年上半年推出 Ext-3.0版。
Ext 的发展：
Ext 简介
经过不断发展与改进， ExtJS已经成为完整与成熟的一套构建 RIA Web 应用的 JavaScript 基础库。利用 ExtJS构建的 RIA Web 应用具有与桌面程序一样的标准用户界面与操作方式，能够跨越不同的浏览器平台。
Ext 简介
使用标准的W3C技术；
庞大的组件模型及控件库；
丰富绚丽的界面元素；
强大实用的工具封装 ；
开源
2 3
4 5
Ext的几个特点：
Ext 简介
ExtJS 开发包可以从官方网站www.ExtJS.com下载，目前版本为 2.2.1
，共计 25.2 MB 。 ExtJS 程序真正运行时必须要载入的，是这个包中的 ext-
base.js ， ext-all.js和 ext-all.css ，共665KB 。
认识 ExtJS 的开发包：
Ext 简介
组件 / 控件的基本概念 组件就是指可以复用的应用程序组成部件。我们在开发的时候，只需要直接使用这些组件及控件，就可以创建出丰富多彩的应用程序界面。窗口、树、表格、选项板、工具栏、菜单等都是可以直接复用的组件及控件。
Ext 组件及控件的种类 1 、 Ext 核心库中的组件； 2 、 Ext 应用示例中的提供的扩展组件； (Ext.ux ，扩展用命名空间，不存在于 api 中 )
3 、用户自定义的组件。
Ext 组件及控件简介：
Ext 简介
基础性的组件 Ext.Component 全体 Ext组件的基类
容器组件 Ext.Container 用于承载其它任何组件表格组件 Ext.Grid
树组件 Ext.tree
菜单及工具栏 Ext.Toolbar
表单及字段 Ext.form
拖放处理 Ext.dd 其它组件 Ext……..
Ext 简介
Ext 和传统的 Web 开发大不相同。特别是在界面开发上，不用再纠缠在 Html和 CSS 中，而与 Java Swing或者 Delphi 的开发方式非常相同。
Ext学习成本：
Ext 简介
Ext 提供了庞大丰富的组件体系，学习 Ext 主要就是学习各种组件的功能、特性及使用方法；
Ext 组件的基类是 Component ，组件配置选项、属性、方法及事件都是组件非常重要的特性，需要通过 API 来熟悉他们的功能及用法；
如何学习 Ext：
Ext 简介
理解 Ext 组件生命周期、渲染及显示等对于用好 Ext 是非常关键的；
学习 Ext 组件及控件需要重点掌握 Component
及 Container这两个基本的组件。
Ext 简介
理解 Ext 组件生命周期、渲染及显示等对于用好 Ext 是非常关键的；
学习 Ext 组件及控件需要重点掌握 Component
及 Container这两个基本的组件。
目 录
11 富客户端技术及 RIA 应用
33 EXT Demo 实例
22 EXT 简介
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>
树与窗口：
EXT Demo 实例
官方 Demo：
1 日期控件
2 图片播放
3 grid 与 拖拽
4 图片搜索 ( 非官方扩展 )
EXT Demo 实例
简单模拟协同首页 ： go
EXT Demo 实例
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” 文件；
EXT Demo 实例
IDE工具支持（ spket ）：2 、 Window -> Preferences -> Spket -> JavaScript Profiles -> New ；输入“ ExtJS” 点击 OK ； 选择“ ExtJS” 并点击“ Add Library” 然后在下拉条中选取“ ExtJS” ； 选择 “ ExtJS” 并点击“ Add File” ，然后在你的 ./ext-2.x/source 目录中选取“ ext.jsb” 文件；
EXT Demo 实例
3 、设置新的 ExtJS Profile ，选中并点击“ JavaScript
Profiles” 对话框 “ Defalut”按钮；
4 、 JS 打开方式为 Window -> Preferences ->General->
Editors-> File...选择 JS 为 Spket JavaScript Editor(default)
下面以高新区数据平台项目中实际功能需求介绍 Ext具体实际的应用和配置。
天津市高新区华天道 6 号海泰信息广场 H 座205
网址 : www.berheley.com电话 : 022-27058558-8000 传真 : 022-83716069 邮箱 : [email protected]
谢谢观赏
