《浏览器方的功能扩展技术.ppt》由会员分享，可在线阅读，更多相关《浏览器方的功能扩展技术.ppt（65页珍藏版）》请在三一文库上搜索。
1、浏览器方的功能扩展技术,“浏览器服务器”所形成的基本client/server工作方式有三个特点: 简单易行: 这使得它很快被实现和接受 有局限 服务器方: 功能单一 浏览器方: 能显示的数据类型有限 有潜力. 在实践中扩充, 现代软件技术 (对象和构件技术) 的结果,服务器方扩充,CGI servlet LiveWire Active Server Page (ASP) Enterprise Java Bean (EJB) WAI,浏览器方扩充,Netscape的plug-in技术, 目前也为IE支持. Microsoft的ActiveX Document技术(ActiveX技术的一部分).
2、 MIME数据类型是它们的共同工作基础之一.,浏览器和服务器方的共同扩充,让程序从服务器迁移到浏览器执行 applet, ActiveX control, JavaScript, VBScript 通信和互操作机制的加强: 分布式对象/构件技术 CORBA, DCOM,浏览器,服务器,Applet ActiveX Control,JavaScript VBScript,HTML Docs,CGI Script servlet LiveWire,Plugin ActiveX Doc,Netscape的plug-in技术,什么是plug-in ? 一个能和Navigator配合工作的软件模块, 帮
3、助它“显示”新的“数据类型”, 或者以一种新的方式显示某些“老数据类型”. 为什么需要plug-in ? “数据类型”的种类是无限的, 浏览器能显示的类型总是有限的.,WEB 服务器,netscape 浏览器,plug-in,plug-in 数据,plug-in 数据,无限多的数据类型,text/plain, text/html, image/gif, image/jpg, audio/au, audio/ra, video/avi, message/, extensions/, application/msdoc, . 数据类型: 信息的一种编码形式. 信息的基本种类是有限的(例如文字,图像
4、,声音, 视频等), 但人们出于不同的应用目的, 总会不断创造新的编码形式. 例如Word和PageMaker的文件所采用的编码是不同的, 尽管它们都是针对相同的基本信息种类. 因此它们对应不同的数据类型.,数据类型和信息的显示,一种广义的映射关系, 非常大的一个概念 “信息的显示” - 不一定是为了给人看 同一种数据类型可以有不同的显示 数据类型还可以是“嵌套”的. 浏览器就是实现这种映射的一个程序 它要知道所收到数据的类型, 以及该数据类型设计者的“显示”意图.,Plug-in 示例,Plug-in 示例,Plug-in 示例,从三个不同的角度看plug-in,用户(网页编写者) 的角度:
5、 如何准备plug-in数据, 可以期望什么效果 ? 安装者的角度: 如何将一个plug-in模块加到Navigator中 ? 开发者的角度: 如何实现一个plug-in ? 遵照Netscape定义的API和编码规则.,在网页中使用一种plug-in (数据类型),保证潜在的浏览器安装了该plug-in. 如果不清楚, 你可以提供一张“bridge page”来提供该plug-in, 使浏览器能首先安装它. 通过MIME机构, 配置你的WEB服务器,使其能识别这种plug-in数据. 用 . 标记将该数据类型引入你的网页中.,EMBED标记的一些主要典型属性,height, width: p
6、lug-in在浏览器窗口中的大小 (缺省单位为象素数) src: 一个指向plug-in数据的URL type: 本 plug-in 的MIME类型 hidden: true,false 指示本plug-in是否可见 units: pixel,en, en为当前字体点大小的1/2. pluginspage: 一个指向描述该plug-in的URL. text: 可能的文字内容 src和type之一必须出现; plugin开发者可定义其它属性.,一个例子,Plain text isnt very exciting, but ,one.txf: 001 255 000 000 000 000 000
7、 two.txf: 002 128 128 128 000 000 000 three.txf: 003 000 000 255 000 000 000 style red green blue xpos ypos factor,注:,在本例中, SRC所对应数据文件的扩展名对应plugin的数据类型. 根据这个数据类型, 浏览器决定启用哪一个plugin模块. EMBED标记的属性和plugin数据的解释关系由plugin设计者决定 在HTML 4.0中, 标记作为一种通用描述, 取代了EMBED, APPLET等标记,How applet is included in HTML 4 doc
8、ument, Java applet that draws animated bubbles. ,Plug-in的安装,最常见的错误是将它的可执行码放到了不正确的目录中 Windows: “plugins” 文件夹(folder) Mac: “Plug-ins” 文件夹 UNIX: /usr/local/lib/netscape/plugins 或$HOME/.netscape/plugins, 或由环境变量NPX_PLUGIN_PATH指出的目录 安全问题:plugin一旦安装, 就和浏览器有同样权限.,Plug-in工作的生命周期,用户访问一张含有plugin数据的网页; 浏览器加载该pl
9、ugin模块, 并生成一个新的运行实例; 浏览器为该实例提供一个显示区域 (在浏览器窗口中); 浏览器将plugin数据传给该实例, 并启动它执行. Plugin按照它自己的方式显示数据 当用户离开当前网页时, 该实例被销毁. 如果没有其它实例, 该plugin模块被卸载.,Plug-in的对象模型,基于编码技术和规则, 而不是通过语言支持. 仅考虑实例创建和函数调用等基本机制. 面向对象程序设计不一定需要面向对象程序设计语言 ? class String typedef struct public: const char *string; const char *color; string(
10、const char *s) String; string=s; color = NULL; String *NewString(const char *s) void setColor(const char* c) String *obj=(String *) color=c; malloc(sizeof(String); private: obj-string = s; obj-color=NULL; const char *string; return obj; const char *color; void setColor(String *obj,const char *c) obj
11、-color = c; ,用于开发Plug-in的API,16个 NPP_ 函数, 由plug-in实现, Navigator调用; 16个 NPN_ 函数, 由Navigator实现, plug-in调用. 例如 NPError NPP_SetWindow(NPP instance, NPWindow *window) PluginInstance *This=(PluginInstance *) instance-pdata; This-window = window; NPN_SetStatus(instance, “Creating user interface”); ,浏览器调用pl
12、ugin中实现的函数, 传给它一个plugin数据和一个window (对应浏览器窗口中的一个区域) plugin实例将数据建立在自己的空间中 plugin反过来调用浏览器中实现的函数, 显示状态信息.,NPError NPP_New(NPMIMEType pluginType, NPP instance, uint16 mode; int16 argc, char *argn, char *argv, NPSavedData *saved) int i; instance-pdata=NPN_MemAlloc(sizeof(PluginInstance); PluginInstance *T
13、his=(PluginInstance*)instance-pdata; This-window=NULL; This-instance=instance; This-mode=mode; This-iteration=0; This-label=NULL; for (i=0;iiterations=atoi(argvi); if (!stricmp(argni,”label”) This-label=NPN_MemAlloc(strlen(argvi); strcpy(This-label, argvi); return NPERR_NO_ERROR; ,Plug-in API中的数据交换部
14、分,NPP_NewStream() NPP_Write() ; plug-in由此得到数据 NPP_DestroyStream() NPN_NewStream() NPN_Write(); plug-in送数据给浏览器 NPN_DestroyStream() NPN_GetURL(); plug-in可以直接和一个远程服务器建立连接, 不一定是HTTP. NPN_PostURL(),有关plug-in的其它问题,扩散与流行 免费, 或初始版本免费 plug-in软件免费, 但创建plug-in数据的工具不免费 (例如Shockwave) 数据免费 (例如海量天气数据, 历史股票数据等), 但表
15、现那些数据的plug-in收费 plug-in在intranets中也许比在Internet中更有用 跨平台性: Win95, 3.x, NT, OS/2, Mac, Unixes 通常难以做到 性能: 好于 Java, JavaScript. LiveConnect: Netscape推出的使plug-in 与 Java, JavaScript协同工作的技术.,ActiveX Documents,Microsoft的浏览器方扩充技术 (in a very general way) ActiveX技术的一个方面 源于OLE, 但富于OLE Internet Explorer 3.0就是由Act
16、iveX Documents构筑起来的,Internet Explorer 3.0,将浏览器的通用功能和显示不同对象的具体功能分离开来 一般功能包括: navigating to a link, going forward and back, IEXPLORE.EXE, 提供一个基本框架 SHDOCVW.DLL, Web Browser object, 提供通用功能, 作为一个ActiveX Document Container. MSHTML.DLL, HTML viewer, an ActiveX Document server,Internet Explorer 3.0 (示意),Act
17、iveX/DCOM,嵌入在NT 4.0及以后的系统中. 德国的Software AG已将DCOM在UNIX上实现 (beta免费可得) 从COM到DCOM, 尽管扩充的内容不很多, 但使得“enterprise computing”计算在Wintel结构上成为可能. COM是Microsoft所有技术的根基. 有人比喻, COM对Microsoft相当于粒子物理对整个宇宙.,从COM到ActiveX的演变,OLE 1 组合文档 (字处理,电子表格,数据库,画图) COM “各种软件构件怎么能够相互提供服务 ?” OLE 2 不仅是组合文档技术, 而是一种使各种 软件相互作用的通用技术 OLE
18、(不再是一个缩略语) 1996.1 ActiveX OLE (还原到“组合文档”) DCOM,构件对象模型Component Object Model (COM),出发点: 让软件系统S由构件C1, C2, , 组成 (COM object) 这些构件C不一定是专门为S所设计的, 有些在S之前已存在 为这系统所设计的构件将来可被其它系统所用, 将来设计的构件还可用来扩充系统S的功能, 不需重新编译链接. 构件的内部改变不影响其所参与的系统的功能 COM: 给出了一个关于什么能被称为构件 (COM 对象) 的规定 提供了一种以系统软件形式存在的基础设施, 使得满足其规定的构件能够“互操作” (i
19、nteroperate).,COM对象,多界面(interface), 每个界面包含一组方法 每个界面有两个名字, 一是供程序员识别 (如LookUpWord), 二是GUID (Globally Unique Identifier, 128位), 特殊生成, 供计算机使用. 界面通常由Microsoft的IDL(界面描述语言)描述 一旦在发布的软件中实现, 界面就再不许修改. 每个构件必须实现界面 IUnknown, 其它界面必须从它继承.,COM对象,界面,界面,界面,一个简单界面的描述,object, uuid(E7CD0D00-1827-11CF-9946-444553540000)
20、interface ISpellChecker: IUnkown import “unknown.idl”; HRESULT LookUpWord (in OLECHAR word31, out boolean *found); HRESULT AddToDictionary (in OLECHAR word31); HRESULT RemoveFromDictionary (in OLECHAR word31); IUnkown 界面有三个基本方法QueryInterface, AddRef, Release.,ActiveX Document,一种特殊的COM object 要满足COM
21、object的一些基本要求, 例如实现IUnknown等 有一些特殊的界面, 例如 只能在ActiveX Document Container中活动 (ActiveX Document Container本身又是另一种COM object !),VRML (2.0),The Virtual Reality Modeling Language (第二版) http:/ (2.0),一种语言, 用于描述三维物体和由它们构成的三维场景; 该场景可以具有现实世界的多种特征、可以是动态的, 也可以和观察者交互作用. 它最引人入胜的应用是使人们能够在Web上构建动态的、具有丰富的传感效应的虚拟环境 VRM
22、L (2.0)不仅是VRML (1.0)的一个扩充.,围绕VRML(2.0)的活动,语言的进一步发展，标准化：VRML97 VRML浏览器(播放器)的开发 CosmoPlayer, WorldView, Liquid Reality, 等 VRML应用开发工具 www.sdsc.edu/vrml/software/modelers.html VRML应用开发 剧场订票，商场购物，旅游景点介绍，等,VRML的主要能力,描述三维物体及由它们构成的场景 动画：使物体在三维空间中运动 在场景中播放声音和电影 使观察者能与场景交互作用：传感与事件 通过脚本（用Java和JavaScript写的）使观察者
23、在场景中的感受更加生动。,VRML (2.0) 文件的基本格式,文件扩展名：.wrl 第一行必须是：#VRML V2.0 utf8 这也是唯一必须有的内容。后面是关于“节点”（Node）的描述和注释 注释用“#”开始，直到本行结束 VRML是区分大小写字母的 现在的CosmoPlayer对词法, 语法错误的处理非常弱 (难怪免费).,例子1: 一个半开口的圆柱体,#VRML V2.0 utf8 Shape appearance Appearance material Material #用缺省材质和颜色 geometry Cylinder radius 3 height 6 side TRUE
24、 top FALSE bottom TRUE ,节点(node)，VRML世界的基本单位,其地位相当于面向对象语言中的对象, 但语义简单许多 节点由若干域(Field)描述. 每个域包括域名(也称域的类型)和“值”. 节点的域可能是简单的参数, 如上例中的圆柱体节点有若干描述圆柱体的具体参数. 节点的域也可能是另外的节点, 如上例中的Shape节点, 它含有两个域, 名字分别为外观(appearance)和几何形状(geometry), 其值都是别的节点. 节点描述和域的次序无关 从与外界交互的性质上讲, 节点的域分两类: field, exposedField. (见后),VRML的节点 (
25、续),有一些系统已定义的节点, 例如 Box, Cylinder, Shape, Material, SpotLight等 它们所含的域(名)是确定的, 例如radius等. VRML文本编写者的任务就是要给这些域设计适当的值 系统对这些域有缺省值, 例如Boxsize 2, 2, 2, Sphere radius 1 等. 用户也可以自定义非规则几何体节点 (见后),VRML的节点 (续),在文本规范说明中, VRML用特殊的记号表示节点中域的值的数据类型, 例如 SFBool表示逻辑量, 取值TRUE或FALSE, SFFloat表示浮点数, SFColor表示3个0-1之间的浮点数, 分
26、别代表RGB 而MFFloat表示包括在方括号中的、由逗号或空格分开的多个浮点数 这里的SF表示“Single-valued Field”, MF记“Multiple-valued Field” 单值域并不一定就是一个数(例如SFColor含有3个数), 多个数的SF被看成一个整体.,两个节点定义规范的例子,DirectionalLight on TRUE # exposed field SFBool intensity 1 # exposed field SFFloat ambientIntensity 0 # exposed field SFFloat color 1 1 1 # expo
27、sed field SFColor direction 0 0 -1 # exposed field SFVec3f 其中给出的值为缺省值, exposed field的基本含义是“可修改”. Inline url # exposed field MFString bboxCenter 0 0 0 # SFVec3f bboxSize -1 -1 -1 # SFVec3f , 缺省指示无界 ,VRML的节点类型,形状节点(shape nodes) - 描述物体在空间中的几何形状 性质节点(property nodes) - 定义形状节点的渲染方式(颜色, 表面纹理等). 成组节点(group
28、node) - 将多个其它节点组合成一个节点, 以便于统一处理. 还有环境效果节点, 例如各种性质的光源.,描述三维物体及其场景,基本几何体 geometry: Box, Sphere, Cone, Cylinder 表面特性 appearance: material, texture, . Shape节点: 通过赋予其一定的表面特性,使几何体可见 空间位置 右手坐标系统: translation, rotation, scale 组合几何体 Group, Transform, . 环境效果 DirectionalLight, PointLight, Spotlight,例子2: 简单世界,#
29、VRML V2.0 utf8 Group children DirectionalLight direction 0 0 -1 # the first child Transform # the second child translation 3 0 1 children Shape geometry Sphere radius 2.3 appearance Appearance material Material diffuseColor 1 0 0 Transform # the third child translation -2.4 .2 1 rotation 0 1 1 .9 #
30、不仅位移, 还要旋转 children Shape geometry Box appearance Appearance material Material diffuseColor 0 0 1 ,VRML的坐标系统,右手坐标系统, 缺省距离单位是米 基本几何体的缺省位置是中心位于坐标系统的原点 Box size 2 2 2 Cone bottomRadius 1 height 2 Cylinder radius 1 height 2 Sphere radius 1 缺省Viewpoint为 (0 0 10).,X,Y,Z,VRML的坐标变换,translation x y z 将物体平行位移
31、 rotation x y z r 按右手法则, 将物体围绕由原点和 (x y z)确定的射线旋转r弧度 scale x y z, 相对原点, 按照给出的比例因子在空间三个方向上放大(缩小) 注意: 变换是针对物体上每一个点的. 在成组节点中, 变换对组中的节点都有效. 嵌套的变换效果叠加, 由内向外 变换顺序: scale, rotation, translation 还有些可选参数, 例如旋转的原点, 放大的中心等,表面特性: Appearance节点,material域: 值为Material节点, 可有如下域 diffuseColor, 颜色的反射与入光角度有关 shineness,
32、光洁度, 取值 0.0 - 1.0 transparency, 透明度, 取值 0.0 - 1.0 texture域: 值取ImageTexture, MovieTexture, PixelTexture节点之一 textureTransform域: TextureTransform节点. 用于在施用前对纹理做空间变换,例子3: 图像纹理的应用,#VRML V2.0 utf8 Shape geometry Box appearance Appearance texture ImageTexture url “ie.gif” ,例子4: 构造一个四面体,#VRML V2.0 utf8 Shape
33、 geometry IndexedFaceSet coord Coordinate # 给出4个顶点的坐标 point 0 0 1, 1.7 0 -0.5, -1.7 0 -0.5, 0 1 0 # 用顶点序列来说明“面”, -1为分隔符.注意底面的节点顺序, “右手法则” coordIndex 0 2 1 -1, 0 1 3 -1, 1 2 3 -1, 2 0 3 -1 color Color # 造一个颜色表 color 1 0 0, 0 1 0, 0 0 1, 1 1 0 #红,绿,蓝,黄 colorIndex 1, 0, 2, 3 # 底面(0 2 1)用绿色, 等 colorPerV
34、ertex FALSE # 不要按顶点着色 ,VRML的动画能力,Ability to change the world over time 不仅几何位置的变化，还包括颜色、光线、声音等。 具体表现在对有关节点属性值的动态改变 如何启动一个动画过程 ？ - VRML提供各种各样的“传感器”节点, 响应用户事件. 如何在时间上控制一个动画过程 ？- TimeSensor节点 如何在行为上控制一个动画过程 ？- 各种各样的“插值器”节点 通过ROUTE语句进行事件的传播：VRML动画的基本机制,一个最简单的动画例子 (eg5),#VRML V2.0 utf8 Group children DEF
35、PUSH TouchSensor # 和下面的节点相联系 Shape geometry Cone appearance Appearance material Material diffuseColor 1 0 1 Sound # 定义一个音响节点 source DEF BUZZ AudioClip url “mssound.wav“ maxFront 50 # no sound heard beyond minFront 5 # no change in volume within ROUTE PUSH.touchTime TO BUZZ.startTime,VRML的声音和文字,Sound
36、节点, 可以定义声源在场景中的位置, 以及该声音能被听到的范围 AudioClip节点, 出现在Sound节点的source域中, 指出声音文件. 该节点还含有loop, startTime, stopTime等exposed fields以控制声音播放 Text节点, 作为一种geometry节点, 给出文字信息 FontStyle节点, 出现在Text节点的fontStyle域中, 描述文字的字体等,文字例子 (eg6),#VRML V2.0 utf8 Shape geometry Text string “Internet and Java Technologies“ fontStyle
37、 FontStyle size 1.5 family “SERIF“ style “BOLD“ ,VRML的事件: 交互与动态的基础,事件是某些节点的性质(在VRML的53种节点中, 多数与事件有关) 如何知道什么节点与什么事件有关 节点规范中的显示说明 节点的exposed Field域隐含相关事件 ROUTE语句: 让不同节点之间事件相互联系的手段 (起一个类似于赋值语句的作用),接触传感器规范说明的例子,TouchSensor enabled TRUE # exposed field SFBool Field enabled 指出该传感器当前是否处于工作状态 Events isOver
38、eventOut, SFBool, 指出鼠标正放在兄弟几何节点之上 isActive eventOut, SFBool, 指出鼠标已经按下 touchTime eventOut, SFTime, 指出鼠标按下后释放的时间 hitPoint_changed eventOut, SFVec3f, 指出位置的变化 hitNormal_changed eventOut, SFVec3f, 指出法线的变化 hitTexCoord_changed eventOut, SFVec2f, 指出纹理坐标的变化,Transform bboxCenter 0 0 0 # SFVec3f bboxSize -1 -1
39、 -1 # SFVec3f translation 0 0 0 # exposed field SFVec3f rotation 0 0 1 0 # exposed field SFRotation scale 1 1 1 # exposed field SFVec3f scaleOrientation 0 0 1 0 # exposed field SFRotation center 0 0 0 # exposed field SFVec3f children # exposed field MFNode 任何一个exposed field都隐含对应两个事件, 于是Transform相当于有
40、事件 set_translation (输入事件, eventIn) translation_changed (输出事件, eventOut) set_rotation, rotation_changed, 等等,TimeSensor,TimeSensor cycleInterval 1 # exposed 秒为单位的周期长度 enabled TRUE loop FALSE # exposed 是否应无限重复 startTime 0 stopTime 0 还有专门eventOut事件fraction_changed, 表示当前周期(cycleInterval)已经完成.,PositionInt
41、erpolator: 位置插值器,PositionInterpolator key # exposed field MFFloat keyValue # exposed field MFVec3f key: 从0到1的一个规格化时间表, 每一项是个fraction. keyValue: 3维空间中的一个位置表 还有专门eventIn事件set_fraction和eventOut事件value_changed. 前者对应已完成的一段时间,后者对应空间位置,#VRML V2.0 utf8 Transform # 利用位置插值器做动画 eg7 translation -5 0 0 children
42、DEF BUTT TouchSensor Shape geometry Box size 1 1 1 appearance Appearance material Material diffuseColor 1 0 0 DEF Moving_Obj Transform children Shape geometry Box # a box appearance Appearance material Material diffuseColor 0 1 0 DEF TIMER TimeSensor cycleInterval 1.5 DEF Obj_MOVER PositionInterpola
43、tor #在1.5秒里完成3次移动 key 0, 0.33, 0.67, 1 keyValue 0 0 0, 1 3 -2, 5 3 -1, 0 0 0 ROUTE BUTT.touchTime TO TIMER.startTime ROUTE TIMER.fraction_changed TO Obj_MOVER.set_fraction ROUTE Obj_MOVER.value_changed TO Moving_Obj.translation,#VRML V2.0 utf8 DEF DELAY Script # 利用Script延迟事件的发生 eg8 eventIn SFTime to
44、uchTime eventOut SFTime startTime url “javascript: function touchTime (timevalue) startTime = timevalue + 5; “ Group children DEF PUSH TouchSensor Shape geometry Box appearance Appearance material Material diffuseColor 1 0 1 Sound source DEF BUZZ AudioClip url “mssound.wav“ maxFront 50 # no sound heard beyond minFront 5 # no change in volume within ROUTE PUSH.touchTime TO DELAY.touchTime ROUTE DELAY.startTime TO BUZZ.startTime,HW10,完成一个至少包含6个几何体的VRML世界 apply other techniques as you like 不要用工具产生, 要手工写成 在两周内用email提交调试好的世界, 我将随时收集它们并在课程网站上公布出来.,