SVG 和 XForms 呈现定制内容

SVG 和 XForms 呈现定制内容 使用使用 SVG 1 2 新的基于新的基于 XML 的扩展机制的扩展机制 Antoine Quint antoine quint fuchsia SVG 顾问与研究科学家 Fuchsia Design 简介 简介 第一个可伸缩向量图形 Scalable Vector Graphics SVG 1 0 规范奠基了 XML 表示二维交互式图像和动画的标准 从那以后 W3C SVG 工作组一直致力于改进它的特 性 使 SVG 更容易在 Web 和桌面应用程序开发中使用 SVG 1 2 一个很有前途的特性 是呈现定制内容 Rendering Custom Content RCC 它提供了清晰的以 XML 为中 心的扩展机制 在一个 SVG 文档中混合与匹配不同的 XML 名称空间 本文在介绍 RCC 机制的同时将引导您创建一个简单的按钮部件 在过去的两年中 SVG 团体已经研究出了新的方法 利用 SVG 的 XML 基础在单个 SVG 文档中混合与匹配多个名称空间 在关注的主要焦点中 用户界面工作成为在 SVG 文档中内嵌使用定制 XML 标记的基本用例 呈现定制内容 呈现定制内容 RCC 在最新的 SVG 1 2 草案中推介的一项新技术 提供了一种新的框架 允许自定义 XML 语法作为 格式良好的扩展无缝集成到 SVG 文档中 在本系列文章中的 基础知识一文中曾经提到 由于提供了混合与匹配这两类标记的基础 RCC 在 SVG 和 XForm 的集成中起着重要 的作用 本文中将介绍 RCC 的基础 探讨如何实现一个用户界面部件 按钮 并提供 一个更丰富的 UI 应用程序的演示 RCC 基础基础 在开始用 RCC 编写这个简单的按钮部件之前 我将回顾一下基本知识和新推出的 RCC 元素家族 将将 XML 绑定到图形绑定到图形 使用 RCC 您可以规定给出的外部名称空间元素在 SVG 文档中的行为 下面这些是最 基本的 SVG 代码 在开始用 RCC 编程时您一定会用到 清单清单 1 设置设置 RCC 环境环境 清单 1 中引入了两个新的 SVG 1 2 元素 是一个顶层元素 您 将要包括的所有给定名称空间中的元素定义都将放在这个元素中 名称空间在明确的 namespace 属性中定义 该属性直接以 URI 作为属性值 仅仅是为了避免造成更大的 混乱 这个属性与 XML 的 xmlns 属性并不完全相似 这里的名称空间永远是 SVG namespace 属性在这里只是表明所描述的定制元素属于哪个名称空间 从概念上 讲 帮您定义了一个库 现在 您需要定义在这个名称空间库中 有哪些东西 要注册一个元素 您需要使用 元素 并用 name 属性指 定元素的名称 基本上 RCC 是一种绑定机制 把非 SVG 的 XML 元素匹配到 SVG 树中 但是 RCC 并不是为各种绑定而设计的 相反 这种机制主要用于应该有某种交互式呈现的定 制 XML 标记的绑定 从而映射到 SVG 片段 正如我在第一篇 基础知识 文章中提到的 那样 SVG 片段在 RCC 世界中实际上是一个影像树 我无法用言语表达影像树所带来 的种种不可思议的神奇作用 但是我将在以后再讨论它 因为它对于理解这种特性非常重 要 要在预设的影像树中链接自定义的元素 您需要使用新的 元素 该 元素的内容被自动复制到绑定时定义的每个元素实例的影像树中 绑定可以在文档生命期中的两个不同阶段完成 第一次是在加载文档的时候 SVG 实现 在一开始检查文档中已有的 元素 并确定哪些外部元素是已知的 然后在解析树的其他部分时每当遇到这些已知的元素就触发 RCC 绑定机制 绑定也可以 发生在这些已知元素中的某一个被添加到树中的时候 比如通过 insertChild DOM 调用增加元素 这使得整个绑定机制是 活动的 这是该过程与 XSLT 使用模板将 XML 元素绑定到另一个 XML 输出之间的一个重要区别 后者本质上是一次性的批处理 操作 影像树影像树 现在绑定机制已经清楚了 非常重要的一点是要完全理解影像树在 RCC 上下文中的重要 性和使用方法 我在以前的文章中曾经提到 影像树对于呈现定制元素的巨大好处是它保 留了一个健康的 井井有条的文档树 使用 RCC 编写组件 比如用户界面部件 很可能 涉及到一些巧妙的脚本使用抽象标记的 SVG 表示 通过影像树 这些代码逻辑可以依靠 那些不容易被外部代码访问的 SVG 子树 尽管在需要时仍然能够访问 除了前述为 RCC 支持而添加的元素之外 SVG 1 2 增加了由所有定制元素实现的 DOM 接口 SVGShadowable 使用这个接口 您可以通过调用诸如 myCustomElement shadowTree 这样的调用获得对定制元素影像树的访问 RCC 和和 DOM 事件事件 因为总是能够通过 DOM 访问定制元素的影像树 在对组件编程时您可以使用 活动绑定 只要监听定制元素能够触发的合适 DOM 事件 您就会不断地得到报告定制元素正在做什 么 RCC 绑定机制提供了两个新的专用于绑定的事件 SVGBindBegin 对应绑定的起始阶段 即定制元素已经被解析但还没有建立和 呈现为影像树的时候 SVGBindEnd 通知绑定阶段已经完成 即您的元素已经被绑定和呈现 如果您希望定制元素仍然是活动的 您只能依靠 DOM 的突变事件 如 DOMAttrModified 用于检测属性的变化 DOMSubTreeModified则用于能够 对其子树变化作出响应的定制容器 模块性模块性 我简要地提一下使用 定义库的概念 这个概念也是非常合理的 因为事实上您不必为可能用到的每个文档都重新定义您的扩展 您可以使用 xlink href 属性指明您的库定义的位置 因此 您可以像下面这样定义和使用基于 RCC 的 XForms 实现扩展 清单清单 2 跨越多个文件的跨越多个文件的 RCC 扩展体系结构扩展体系结构 XFormsImplementation svg SomeFileUsingSVGandXFormsWithYourSpiffyRCCImplementation svg 通过这个简单而优雅的库结构 几乎任何人都能够创建一个 RCC 库放在网络上供其他人 使用 这样就简化了使用 RCC 开发 SVG 应用程序 并促进社区推动的工作在不远的将 来能够提供免费的库 另外值得一提的是 元素的内容不仅可以是老的 SVG 图形元素 还可以包括 RCC 定义的定制元素 因此又引入了 RCC 这种递归形式 非常适合创建重用并以其他组件为基础的组件 把这些结合在一起就形成了一个可以使用 的非常不错的框架 现在您可以准备做一些具体的工作了 回页首回页首 使用使用 RCC 编程 编程 在简介中我曾经提到 RCC 最常见的用例是创建 UI 部件 要创建一个好的 UI 部件 即使非常简单的部件 也需要大量细致的工作 在此 我将说明如何创建一个非常简单的 按钮 包括图形和编程两个方面 标记标记 在 RCC 结构中 标记实际上起着所要实现目标的蓝图的作用 如果您头脑中有一个希望 用 SVG 和 RCC 机制设计的组件 您要做的第一件事可能就是在纸上勾勒出这种想法 并想象出标记应该是什么样子 这里要涉及的是一个简单的按钮 上面带有文本标签 简 而言之 我要建立一个拥有几何与位置属性和文字标签的简单元素 把它作为一个子节点 ui button 它看起来是这个样子 图图 1 显示的显示的 元素元素 我已经有了 元素 如果我是一个好的编程人员 应该提供匹配的模式来描述 它 但是我只关心 SVG 方面 而不想告诉您在设计自己的组件时如何做出正确的决策 我的 元素不是一个 SVG 元素 因此必须存在于不同的名称空间中 您可能 已经注意到 我在上面的代码片段中使用的 ui 前缀 这个前缀在 SVG 文档的根元素 中定义 清单清单 3 在文档中声明名称空间在文档中声明名称空间 现在 我的 ui 名称空间已经定义了 后面如果需要实际放置按钮的不同实例时 就可以 在文件中安全地使用 元素了 不必费心访问名称空间的 URI 它什么地 方也去不了 这里我对您的紧迫而精细的工作再建议一种更好的方法 希望您能使用 RDDL 文件或者类似的东西提供关于您的组件的某些信息 我还定义了另外两个名称空间 和前缀 当然就是 SVG 名称空间 设置成默认名称空间 和 XML Events 名称空间 前 缀是 ev 顺便说一下 XML Events 建议现在是 SVG 1 2 的一部分 因此您同时拥 有了设计和命名环境 这样就可以进入下一阶段 还是涉入到标记 这一次是组件定义的 内容 清单清单 4 外部元素实现的第一步外部元素实现的第一步 new SimpleRCCButton evt target 我从包装 元素开始 通知库定义的开始 按照在根元素 中定义的一样 描述了以 ui 为前缀的命名空间 接下来是 元素 初 始化 元素的定义 现在 我可以通知 SVG 实现有一个新的定制元素 我用 元素定义了它的外观 如前所述 在这里可以放置需要复制到每个 定制元素实例影像树中的任何 SVG 如您在 图 1 中所看到的那样 这个简陋的按钮是 一个圆角矩形 中间显示了文字 SVG 强大的图形基础和文字特性使编写按钮的原型非 常简单 您可以使用 元素与 rx 和 ry 属性获得圆角的效果 它的 style 属性指定了 CSS 性质 黑色边界的内部填充浅灰色 它有固定的 height 高度 25 和 width 宽度 0 0 是的 矩形的宽度与 本身的宽度紧密联系 后面您将看到 程序中将在适当的时候改变矩形的宽度 x 和 y 属性的值都是 0 5 以便 边界线不会被父元素 剪掉 接下来是 元素 它自身的text anchor 放在字符串的中间 不接受鼠标事件 矩形完全能够捕获这些事件 但这样可以避免用户 在点击按钮时 在文字上产生丑陋的视觉效果 并定位在父元素 所建立的当前 视点的中间 您可能注意到一种奇怪的现象 和 上都有一个 id 属性 这些 id 如何 在生成的每个影像树中保持唯一性呢 RCC 通过局部作用域的 id 解决了这个问题 当 讨论代码时 使用这些 id 的原因就清楚了 您可能还注意到另外一件奇怪的事 元素 这是 SVG 1 2 为 RCC 支持引入的另一个新元素 它的巧妙 之处在于允许直接引用元素实例的 DOM 树 这里 元素用于粘贴影像 树中的标签 并随时保持标签的同步 现在已经定义了图形模板 元素通过 XML Events 的 event 属性在 ECMAScript 中定义了 SVGBindEnd 事件的处理程序 当元素实例的绑定完成时 包含 在脚本中的那一行代码将被调用 它仅仅创建一个新的 SimpleRCCButton 类实例 并把它的构造函数指针作为唯一的参数传递给元素实例 事件的目标 创建的 ECMAScript 对象负责无法用标记声明完成的一切工作 因此基本上是作为一个控制器 后面的 元素包含了从实例中摘选出的 SimpleRCCButton 类的所有代码 我将在后面讨论这个过程 现在 标记部分已经完成 应该开始考虑编写一些代码了 代码代码 SimpleRCCButton 类的工作很简单 保证按钮能够及时响应变化和用户界面事件 第一项工作是编写这个类的构造函数 并保证能够很容易地引用后面将用到的几个元素 清单清单 5 SimpleRCCButton 类构造函数类构造函数 function SimpleRCCButton element keep pointers to useful bits this element element var shadow this element shadowTree this root shadow getElementById root this rect shadow getElementById rect initialize the shadow tree this init 的实例被作为参数传递给构造函数 我使用 this element 保持对 它的引用 然后我通过 shadowTree 在 shadow 变量中注册了指向实例元素影像树的 指针 shadowTree 是 SVGShadowable 接口的一个成员 被所有 RCC 定义的定 制元素的实例所继承 此外 影像树包含两个需要跟踪的 SVG 元素 利用在 中精心设下的伏笔 id this root 保存了父元素 而圆 角矩形则由 this rect 保存 现在已经建立这些必要的引用 可以调用 init 方法 初始化元素的影像树了 清单清单 6 SimpleRCCButton 初始化方法初始化方法 SimpleRCCButton prototype init function register mutation events on the element instance this element addEventListener DOMAttrModified this false register UI events on the shadow tree s rectangle this rect addEventListener mousedown this false this rect addEventListener mouseup this false this rect addEventListener click this false update the position and width of the button this fixButtonPosition this fixButtonWidth 第一项任务是在实例元素上为 DOMAttrModified 它对应属性值的变化 的变化事 件注册一个事件监听器 以便跟踪通过 DOM 对按钮所作的修改 接下来要求对影像树的 矩形监听各种不同的鼠标事件 mousedown mouseup 和 click 后面将看到 如何响应这些事件 这一次全部使用 DOM Events EventTarget 接口中基本的 addEventListener 方法 然后需要第一次固定按钮的位置和大小 其中涉及到 使用 fixButtonPosition 和 fixButtonWidth 方法来调整影像树 清单清单 7 SimpleRCCButton 类的刷新方法类的刷新方法 SimpleRCCButton prototype fixButtonPosition function this root setAttribute x this element getAttribute x this root setAttribute y this element getAttribute y SimpleRCCButton prototype fixButtonWidth function var width parseInt this element getAttribute width this root setAttribute width width 1 this rect setAttribute width width 这两个方法都包括非常简单的 DOM 代码 基本上是把属性值从实例元素中读出 并复制 到影像树中的适当位置 对于按钮的位置 设置影像树中 元素的 x 和 y 属性 设 置按钮的宽度只是稍微复杂一点 复制矩形的宽度并在 元素中增加了一个单位 为矩形的边框留下位置 在我注册事件的监听器时 您可能注意到 this 指的是作为一个参数 第二个 传递的 DOM Events 的 EventListener 接口实例 我这样做是因为 EventListener 接 口只规定了一个 handleEvent 方法 这意味着任何实现该方法的对象都是事件监听 器 在这里 每当注册的一个事件被触发时 都会对控制器对象调用 handleEvent 现在来看看这个方法是什么样子 如何处理事件使按钮具有交互性 清单清单 8 SimpleRCCButton 类的事件处理程序类的事件处理程序 SimpleRCCButton prototype handleEvent function evt var type evt type if type DOMAttrModified this fixButtonPosition this fixButtonWidth else if type mousedown this rect style setProperty fill pink window captureMouse evt this rect else if type mouseup this rect style setProperty fill lightgray else if type click var event document createEvent ButtonPush this element dispatchEvent event 该函数显然只接收事件作为唯一的参数 但最重要的是 需要指出接收事件的类型 如果 是实例元素属性的一个突变事件 我需要同时调用两个方法相应的修改按钮的外观 每次 同时调用两个方法有点笨拙 我本来可以花点时间在调用所有的刷新方法之前检查哪个属 性被修改了 但是出于简化的原因 我还是选择现在这种方法 并相信您在编写自己的代 码时会有更好的理解 接下来是处理鼠标事件 因为我实现的是一个下压按钮 最好是能够在鼠标点到按钮图像上的时候 让用户有压下 按钮的感受 因此 当影像树的矩形接收到mousedown 事件时 我把 CSS 的 fill 属性改成稍微亮一点的颜色 比如粉红色 然后我捕获了鼠标 使所有的事件从现在开 始都由矩形捕获 这是一种传统的 UI 技巧 以便在用户激活按钮的过程中禁止出现其他 的鼠标交互 因此当鼠标按钮被压下然后释放时 mouseup 事件 我必须保证把矩形 的 fill 属性恢复原来的值 现在我已经说明了如何解决鼠标与按钮交互的视觉效果 但是下压按钮的整个目标是在它 被激活时触发一个动作 我决定让定制元素在激活时触发一个定制的动作 这样它就不仅 仅从响应鼠标事件和 DOM 变化的意义上讲是一个 SVG 元素 还可以用它自己的语义触 发事件 创建和分派定制的事件只需要两个 DOM 调用就能实现 第一个是通过对我的 DOM document 调用 createEvent 方法创建事件 并赋给它一个自定义的类型 ButtonPush 剩下的就是通过在定制元素中调用 dispatchEvent 方法实际 触发该事件 该方法定义在极其有用的 EventTarget DOM Events 接口中 回页首回页首 结果结果 现在 我们的下压按钮实现已经完成了 我可以创建一个非常简单的应用程序 其内部构 造 而不是 RCC 定义和其他需要的 SVG 标记 如下所示 清单清单 9 扩展元素的使用扩展元素的使用 var button evt target var width parseInt button getAttribute width button setAttribute width width 10 Another var button evt target var width parseInt button getAttribute width button setAttribute width width 10 这里使用了定制元素 的两个实例 每个都有自己单独的影像树 控制器 对象 交互式处理 状态 等等 它们共有的唯一一点就是基于同一个原型 基于 RCC 的定义 这个例子非常简单 它有一个大按钮 每次点击时宽度逐渐缩小 还有一 个小按钮每次点击时宽度逐渐增加 如您所见 通过使用与 RCC 定义中幕后监听 SVG 事件相同的 XML Events 机制 我可以监听按钮的定制事件 打开 参考资料中 demos zip 压缩包中的文件 您将看到 图图 2 两个独立的按钮两个独立的按钮 在同一个压缩包中 您还会看到一个更高级的基于 RCC 的示例应用程序 这个应用程序 是为了说明更高级的 RCC 定制元素的应用 我还有一个更强大的可以换皮肤的下压按钮 和一个可设置风格的组合框 它们利用了前面定义的下压按钮 并强调了 RCC 的可重入 性 尽管出于简洁起见 本文没有没有详细地讨论定制元素如何实现更换皮肤或者 CSS 样式 现在您完全可以看看这些文件并领会实现的技巧 图 3 所示的是该应用程序