2022年XBL开发规范 .pdf

《2022年XBL开发规范 .pdf》由会员分享，可在线阅读，更多相关《2022年XBL开发规范 .pdf（11页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、XBL 开发规范2011 Justep Corp. 第 1 页 共 11 页起步科技X5平台手册XBL开发手册2011 年 07 月北京起步科技有限公司Beijing Justep Software Co,Ltd. 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 11 页 - - - - - - - - - XBL 开发规范2011 Justep Corp. 第 2 页 共 11 页起步科技目录第一篇XBL . 3 第 1 章 XBL 介绍 . 3 1.1 XBL是什么

2、. 3 1.2 运行机制 . 3 1.3 XBL的结构示意图. 3 第 2 章组件定义 . 4 2.1 xbl Elemnet. 4 2.2 include Elemnet. 4 2.3 binding Element. 4 2.4 implementation Element . 5 2.5 template Element. 6 2.6 content Element. 6 2.7 inherited Element . 7 2.8 xbl:attr Attribute . 7 2.9 xbl:pseudo Attribute. 7 2.10 div Element. 7 2.11 han

3、dlers Elemnet. 8 2.12 handler Element. 8 2.13 resources Elemnet . 8 2.14 style Element . 8 2.15 prefetch Element. 9 2.16 script Element . 9 2.17 id Attribute of XBL Elements. 9 第 3 章XBL组件的使用 . 10 3.1 组件的绑定 . 10 3.1.1使用 component 属性进行绑定 . 10 第 4 章案例 .11 4.1 简单案例 .11 名师资料总结 - - -精品资料欢迎下载 - - - - - - -

4、 - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 11 页 - - - - - - - - - XBL 开发规范2011 Justep Corp. 第 3 页 共 11 页起步科技第一篇 XBL 第1章 XBL 介绍1.1 XBL是什么XBL是 XML Binding Language 的简写，是跨平台的表现组件，主要是表示和扩展文档的表现能力。 XBL的一个首要目标是允许你直接的提高用户体验，而不需要过度的使用html 中的标签元素例如 div 。XBL不能被用来给予文档新的语义（除非由XML调用的脚本明确地改变了原来的DOM ） 。文档

5、的内容不会被与之相关的任何绑定改变，改变的只是它的表示和交互行为。1.2 运行机制XBL是一种组件技术，它为组件的行为和表现提供一种绑定机制；X5 平台中实现的XBL引擎，使组件的服务端模板与客户端的行为（Javacript）更好的结合。1.3 XBL的结构示意图XBL的结构是由不同的成分组合在一起的，一般包括Bindings, templates ，Event ，Handlers API Implementations ，Resources ，Scripts。结构如下：图 1.1 xbl结构示意图名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - -

6、 - - - - 名师精心整理 - - - - - - - 第 3 页，共 11 页 - - - - - - - - - XBL 开发规范2011 Justep Corp. 第 4 页 共 11 页起步科技第2章组件定义2.1 xbl Elemnet Expected contexts：在 XBL document中，无（它是根元素） 。在 non-XBL document 中，任何非XBL元素都可以作为XBL Element 的 parent 。Expected children（无序）：binding ： 0 或多个script：0 或多个include ： 0 或多个任何非 XBL元素注

7、： XBL Element是整个 XBL subtree的 root element。Attributes：id ： id属性script-type：指定当前这个XBL subtree中使用的脚本语言。它必须是有效的MIME type值。它的默认值是ECMAScript。style-type：指定当前这个XBL subtree中 style language。它必须是有效的MIME type值。它的默认值是text/css。说明：当一个 XBL Element 元素的祖先节点中， 有一个是XBL Element 时， 这两个 XBL Element定义都无效；当其它的 XBL 元素没有一个XB

8、L Element 元素作为它的祖先节点的时候，也是无效的。当指定的script-type值不支持时，对组件进行合理的解析，只不过忽略其中的script、 handler和 implementation部分；当指定的style-type值不支持时，对组件进行合理的解析，只不过忽略其中之一的style部分。2.2 include Elemnet Expected contexts：xblExpected children（无序）： 无Attributes：src ： 指向另一个文件说明： include节点用来定义整个XBL共享的 style和 script。include节点当前只支持引用外部

9、文件。被引用的文件的格式如下：图 2.1 引用文件格式2.3 binding Element Expected contexts： xbl 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 11 页 - - - - - - - - - XBL 开发规范2011 Justep Corp. 第 5 页 共 11 页起步科技Expected children（无序）：implementation： 0 或多个template ：0 或多个handlers ：0 或多个resour

10、ces ：0 或多个任何非 XBL元素Attributes：id ：id 属性extends ：它的值是一个组件的URI。表示当前组件继承于这个组件。如果URI 格式不对或找不到相应的组件时，将忽略这个属性。element （不支持）：当出现这个属性时，这个属性的值必须是css 的一个 selector。它表示当前组件定义所在的文件，以及任何导入文件的文件，如果某个节点匹配这个selector，必须将这个组件绑定到那个节点上（但当前组件中自己的shadow tree不执行这个规则） 。如果element 的值是一个非法的selector，将忽略这个属性。order ：标识处理处理的顺序，它的值

11、域是inner, outer ，默认值是outer 。outer表示先处理自己，再处理子节点，inner表示先处理子节点，再处理自己。delete-bound-element：定义是否需要删除bound element ，它的值域是true, false ，默认值是false 。说明：binding element描述一个具体的组件定义，它定义了组件的表现和行为。Xbl 的结构：2.4 implementation ElementExpected contexts： binding Expected children（无序）： CDATA 或 Javascript文本Attributes：id

12、 ： id属性src ：这个属性的值是一个URI，它指向某种类型的脚本资源，脚本的类型必须符合xbl element 上 script-type。 如果有 src 属性时，这个元素的子节点将被忽略。class ：组件 JS 类的名称。如果有class 属性，当前组件对应的Javascript类为 class所指定的 Javascript类，否则将根据implementation的内容生成相应的Javascript类。说明： implementation element中不管是通过src 的方式还是通过子节点的方式给出的脚本，都 必 须 符 合xbl element上 script-type属

13、性 值 所 指 定 的 脚 本 类 型 ， 否 则 ， 将 忽 略implementation element。在 implementation element 中，有两个特殊的方法“initXBL ”和“ initXBL2 ” ，这两个方法是在客户端（例如浏览器）加载页面时执行的方法，它们之间的执行顺序是：先执行所有组名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 11 页 - - - - - - - - - XBL 开发规范2011 Justep Corp. 第 6

14、页 共 11 页起步科技件的“ initXBL ” ，再执行所有组件的“initXBL2” ，在“initXBL2”方法中，可以访问到所有的XBL组件，而“ initXBL”中只能访问DOM 节点中前面的XBL组件。案例：图 2.2 案例2.5 template Element Expected contexts：bindingExpected children（无序）： 任何元素Attributes：id ：id 属性allow-selectors-through：当前版本不支持apply-author-sheets：当前版本不支持template-type：模板类型，取值范围xbl, xs

15、lt, xpl, java src ：只有当template-type的值是 java 时才有效， src 指向的是java 类名（带包名） 。说明： template element 定义组件的表现模板。template element 可以有多种形式：xbl 、xslt 、xpl 、java 。无论组件的template使用哪种形式描述，它的输入节点是bound element （使用当前组件的节点） ，在组件的表现模板中，可以直接访问bound element 上的属性和子节点；最终 template处理的结果是一个标准的XML格式数据， 输入的根节点下的所有子节点将直接替换bound

16、element的所有子节点，根节点的特殊属性（名空间为“http:/www.w3.org/ns/xbl” ）将被添加到bound element节点上。2.6 content Element Expected contexts：任何元素，但必须有一个正确的template元素作为祖先节点，且content不能嵌套Expected children（无序）： 任何元素（不能嵌套content ）Attributes：id ： id属性includes：这个属性的值是一个selector。它表示将bound element子节点中什么样的节点插入到当前节点处。apply-binding-sheet

17、s： 这个属性表示CSS样式（XBL Binding ） 是否作用到bound element的显式子节点上。locked ：表示符合要求的bound element的子节点是否插入到当前的节点下。说明： content element 用在 shadow tree中，作用是将 bound element 的子节点插入到shadow tree中形成 final flattened tree 。使用 content中的 includes属性，可以对bound element的子节点进行过滤。如果没有匹配的子节点时，将使用content中的了节点替代。名师资料总结 - - -精品资料欢迎下载 -

18、- - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 11 页 - - - - - - - - - XBL 开发规范2011 Justep Corp. 第 7 页 共 11 页起步科技案例： 略2.7 inherited Element Expected contexts：任何节点，但必须有一个合理的template节点作为祖先节点。Expected children（无序）： 任何节点Attributes：id ： id 属性说明： inherited element的作用是标识将父类（包括显式的和隐式的）的模板插入到当

19、前的模板中。如果符合以下条件时，用inherited element的子节点来替代：the binding是 base binding ；the binding的祖先 binding中没有 shadow tree ；在 binding的 shadow tree中，它不是第一个inherited element。案例： 略2.8 xbl:attr Attribute Expected element ：任何节点，但这个节点必须有一个正确的template节点作为祖先说明： xbl:attr属性用来将bound element 上的属性复制到shadow tree中。案例： 略2.9 xbl:ps

20、eudo Attribute Expected element ：任何节点，但这个节点必须有一个正确的template节点作为祖先说明： 略案例： 略2.10 div Element Expected contexts：Template Content Inherited Div Expected children（无序）： 任何节点Attributes：id ： id属性class ：类似于标准的css 中的 class属性。它只能作用在div 上，不能作用在xbl 的其它元素上。state ：没有预定义含义title：当鼠标指向这个节点时显示的内容。它只能作用在div 上，不能作在xbl

21、的其它元素上。说明： div 在 xbl 中没有严格的语义，它只是用来标记css 样式。案例： 略名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 11 页 - - - - - - - - - XBL 开发规范2011 Justep Corp. 第 8 页 共 11 页起步科技2.11 handlers Elemnet Expected contexts：bindingExpected children（无序）：handler ：0 或多个Attributes：id ： i

22、d 属性说明： handlers element 用来组织handler 。案例： 略2.12 handler Element Expected contexts：handlersExpected children（无序）：依赖于具体的脚本语言Attributes： （当实现具体的解析时，属性的语义参考xbl2.0 ）id ： id属性event ：phase：trusted：propagate ：default-action：button ：click-count：modifiers：key：key-location：text ：prev-value：new-value ：attr-name

23、：attr-change：说明： handler element 描述单个的event handler。案例： 略2.13 resources Elemnet Expected contexts：bindingExpected children（无序）：style ：0 或多个prefetch：0 或多个Attributes：id ： id 属性说明： resources element 包含一组样式表或一组可以预先加载的文件（图片、声音等等）案例： 略2.14 style Element Expected contexts：resourcesExpected children（无序）：名师资

24、料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 11 页 - - - - - - - - - XBL 开发规范2011 Justep Corp. 第 9 页 共 11 页起步科技如果该元素没有src 属性：依赖于具体的样式语言；如果该元素有src 属性： none Attributes：id ： id属性media：与标准的media 含义一致。src ：它的值是一个URI，指向一个style文件。如果文件没有找到或类型与xbl element中的 style-language

25、属性指定的类型不匹配或不支持该类型，将忽略这个元素。说明： style element中的样式只能影响相关的bound element及其 shadow tree （包括 bound element 及其子节点、template及其子节点） ，不能影响其它的节点。案例： 略2.15 prefetch Element Expected contexts：resourcesExpected children（无序）：无Attributes：id ： id属性src ：它的值是一个URI，指向一个资源文件。说明： prefetch element能引用一组资源文件，做性能优化的时候，可以将这些资源文

26、件可以先加载。案例： 略2.16 script Element Expected contexts：xblExpected children（无序）：如果该元素没有src 属性：依赖于具体的脚本语言；如果该元素有src 属性： none Attributes：id ： id属性src ：它的值是一个URI，指向一个脚本文件。如果文件没有找到或类型与xbl element中的 script-language属性指定的类型不匹配或不支持该类型，将忽略这个元素。说明： script element 中的代码在XBL subtree被加载的时候执行。案例： 略2.17 id Attribute of

27、XBL Elements Expected element ：任何元素说明：略案例： 略名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 11 页 - - - - - - - - - XBL 开发规范2011 Justep Corp. 第 10 页 共 11 页起步科技第3章XBL组件的使用3.1 组件的绑定3.1.1 使用 component 属性进行绑定说明： 使用 component 属性进行绑定时，需要按照以下步骤进行：1、 通过 指令导入binding docum

28、ent；2、 在需要绑定组件的element 上添加一个属性component， 它的值为组件定义时的id（对于已经通过 导入的组件）或者通过URL引用相应的组件。案例：( showMessage: function() alert(Hello World!); ) 在独立的文档中定义XBL组件 在独立的文档中定义XBL组件 This is Component调用组件的方法 document.getElementById(xbl).xblObject.showMessage(); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - -

29、名师精心整理 - - - - - - - 第 10 页，共 11 页 - - - - - - - - - XBL 开发规范2011 Justep Corp. 第 11 页 共 11 页起步科技第4章案例4.1 简单案例组件定义文件：hello.xbl.xml（假设所在的目录为/UI/system/componens）( helloXBL: function() alert(Hello World XBL! ); ) 组件使用文件，hello.w调用组件的方法 document.getElementById(hello).xblObject.helloXBL(); 提示 ：调用 helloXBL()方法与 中的 helloXBL 方法对应名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页，共 11 页 - - - - - - - - -