HTML组件框架

分享于 

14分钟阅读

Web开发

  繁體

介绍

本文展示了组件框架的一些特性。 它是基于框架宿主站点( http://code.google.com/p/htmlcomponentframework/ ) Google Code的的"Hello World"示例。 示例演示如何在HTML页面中放置组件 inline,在它处激发事件并接收引发的事件。

Background

开发网络应用程序时,我经常遇到以下两个问题:

  • HTML将变得非常大,因为它必须包含单个单独文件中的用户界面控件。
  • 我没有用到有用的通用用户界面控件。

在两种情况下,我意识到需要能够定义用户界面控件( 或者控件组),这些控件分别是我所称为"html组件"的控件。

我以前曾编写 ASP.NET 服务器控件并使用 JSF,不喜欢在服务器端代码中混合HTML和 JavaScript ;它很混乱,难以阅读。 我还发现,这些技术打破了设计开发周期: 需要更改设计团队中的HTML,以便将它的设置为服务器所需的格式;任何设计更改都需要重复。 显然,用一种技术编写的组件不容易移植到其他技术,并且不运行服务器就无法测试。 实际上,我相信这些技术使web应用程序开发变得不必要,唯一的增益是对AJAX调用的自动管理( 比如 客户端/服务器端/服务器端/服务器端的Jayrock插件;插件;Jabsorb插件( 用于. NET 和Java服务器端)。

I的是,我们已经使用了 jQuery UIYUI,发现尽管它们的HTML很有用,但是它们还是像前面提到的服务器端代码一样,破坏了设计开发循环。

基于这些原因,我开发了一个框架,允许我在 。js文件中创建单个组件,这些组件保存在。HTML文件和JavaScript中。 然后,可以只使用浏览器( 无需编译或者服务器) 测试这些组件,用于不同的应用程序,从而帮助和简化web应用程序开发。

"打招呼"组件示例

本例的目的,尽管非常简单和设计,但是演示了HTML组件框架的主要特性。 参考图 below 以获得示例的图形说明:

component_diagram.png

主"打招呼"网页包含标签"要问候的名称:",在它的中输入 NAME 和"打招呼"按钮的文本框。 它还包含一个"打招呼"组件,该组件将用于显示问候语。 "打招呼"组件包含问候语和"隐藏问候语"按钮。 最初"打招呼"组件中的问候语是隐藏的。

逻辑是要执行以下步骤:

  • 当按下"打招呼"按钮时,将隐藏标签。文本框和按钮,并在带有 NAME的"打招呼"组件中激发 "greet" 事件。
  • 在收到事件时,组件将事件中 NAME的值复制到问候语中并显示问候语。
  • 当按下"隐藏问候语"按钮时,会再次隐藏问候语,并将 "greetingHidden" 事件引发到主网页。
  • 在收到事件时,将显示标签。文本框和按钮,以便重复进程。

使用代码

代码由四个文件组成:

  • HelloComponent.html -"打招呼"组件的HTML
  • HelloComponent.js -"打招呼"组件的JavaScript
  • Hello.html -"打招呼"网页的HTML
  • Hello.js -"打招呼"网页的JavaScript

双击文件" Hello.html"以在默认浏览器中启动该示例。

"Hello网页

Hello.html

<head> 节点包含对HTML组件框架CSS和JavaScript的引用,还包含"打招呼"网页的JavaScript。 它还包含了框架要使用的两个元标记:

  • 第一个元标签描述了不支持HTML5网络消息传递的浏览器要使用的事件处理代码的位置。 name 属性表示该标记包含事件处理代码 URL,content 属性包含 URL ;这里的事件处理代码使用 Google Code 服务器承载的事件处理代码。
<metaname="eventUrl"content="http://htmlcomponentframework.googlecode.com/svn/examples/Event.html"/>
  • 第二个元标记描述了在网页中使用的组件。 scheme 属性定义这里标记的内容为JSON格式。 name 属性表示要包含在页面中的组件。 content 属性包含描述组件的JSON,它由以下属性组成:
  • name - 将用于引用组件类的NAME
  • url - 组件的HTML位置
<metascheme="JSON"name="includeComponent"content='{"name":"HelloComponent","url":"HelloComponent.html"}'/>

组件的实例在网页中放置 inline,如下所示:

<divid="helloComponentId"title="HelloComponent"class="cf_component_marker"><inputtype="hidden"name="loadedCallback"value="helloComponentLoaded"/></div>

id 属性为这个组件的实例分配惟一的标识符,JavaScript将使用它来标识这个实例。 这个属性使用它的类引用 NAME 表示哪个组件被放置;在本例中,它是描述的元标记中所包含的元标记。 属性使用标记类( n ) 来指示这个框架是一个组件,这是一个组件。 还可以使用其他样式类根据需要样式化 <div> 元素。

<div> 元素中,包含一个隐藏 <input> 字段,用于指示框架在组件完成加载时调用一个函数。 这是必要的,以便可以执行其他设置,例如将事件处理程序附加到组件。 属性表示该值是在组件加载时要调用的函数。 value 属性包含 helloComponentLoaded 函数 NAME,它将被解释为 below。

Hello.js

JavaScript使用jQuery确保网页加载后,HTML组件框架已经启动,并附加" click"事件处理程序到"打招呼"按钮:

jQuery(window).load(function()
 {
 ComponentFramework.loadAndRender();
 jQuery("#greetButton").click(greet);
 });

下面的函数在组件加载后由框架调用,方法是在隐藏 <输入> field 上面,它使用在HTML中定义的标识符获取对组件的引用,并将 greetingHidden 函数关联到可以从组件引发的"greetingHidden" 事件。

function helloComponentLoaded()
{
 ComponentFramework.getComponent("helloComponentId").addEventListener
 ("greetingHidden", greetingHidden);
}

greetingHidden 函数定义为 below。 它使用jQuery来显示问候语输入区域。

function greetingHidden()
{
 jQuery("#greetingInput").show();
}

下面的函数在"打招呼"按钮按下( 它被附加在JavaScript的前几行,上面 ) 时被调用。 它使用jQuery隐藏问候语输入区域,获取对组件的引用,并在它的上触发 "greet" 事件。 它包含具有事件的对象,该事件具有一个名为 name的属性,并从输入文本框中读取值。

function greet()
{
 jQuery("#greetingInput").hide();
 ComponentFramework.getComponent("helloComponentId").fireEvent
 ("greet", {name: jQuery("#name").val()});
}

"Hello组件"

HelloComponent.html

"打招呼"web页面一样,"打招呼"组件的<head> 节点包含对HTML组件框架CSS和JavaScript以及"打招呼"组件JavaScript的引用。 它还使用meta标记指向不支持HTML5网络消息传递的浏览器所使用的事件处理代码的位置。 此外,它具有以下元标记来指示框架是一个HTML组件:

<metaname="HTMLComponent"/>

这里组件可以接收和引发的事件是使用元标记定义的。 为了确保安全性,这确保了事件定义的紧密契约,并且确保通过事件传递的任何数据符合特定的模式。 试图激发或者引发未定义或者发送不是 MATCH的数据的事件会导致框架忽略这样的事件。 这里组件有两个事件,"greet""greetingHidden":

<metascheme="PartialJSONSchema"name="acceptsEvent"content='{"greet": 
{"type":"object","properties": {"name": {"type":"string"}}}}'/>
  • 下面定义了组件可以引发的"greetingHidden" 事件。 除了 name 属性表示这是由组件引发的事件外,它的定义方式与它可以接受的事件完全相同。 在这种情况下,事件被定义为不承载任何对象。
<metascheme="PartialJSONSchema"name="raisesEvent"content='{"greetingHidden": {"type":"null"}}'/>

HTML的其余部分是为普通网页编写的。 组件定义一个 region 来写入问候语,并定义一个按钮来隐藏问候语。

HelloComponent.js

组件JavaScript定义了一个与 HTML (。没有文件扩展名,换句话说,"HelloComponent" ) 具有相同 NAME的类。 加载组件时,HTML组件框架将自动创建这里对象的一个实例。

下面是"打招呼"组件的完整代码。 构造函数将 hideGreeting 函数分配给"隐藏问候语"按钮的" click"事件处理程序。 它定义了 NAME greet的特权函数;这个 MATCHES 是组件接受的"greet" 事件的NAME,该框架将调用这里函数。 注意,在事件中所执行的对象的顶层属性被拆分为函数的参数,在这种情况下是 name string 参数。 greet 函数将"打招呼"+ name 写入HTML并显示问候语。 指定了 final,private,函数的hideGreeting,它被分配给"隐藏问候语"按钮的click 事件。 它隐藏问候语并将 greetingHidden 事件引发到组件(""网页)的容器中。

function HelloComponent()
{
 jQuery("#hideGreetingButton").click(hideGreeting);
 this.greet = function(name)
 {
 jQuery("#helloContainer").text("Hello" + name);
 jQuery("#greetingPanel").show();
 }
 function hideGreeting()
 {
 jQuery("#greetingPanel").hide();
 ComponentFramework.raiseEvent("greetingHidden");
 }
}

Points of Interest

从使用HTML组件框架中发现,将web应用程序的功能分离成易于管理且易于理解的组件有助。 这种分离使我能够专注于应用程序的特定部分,因此以模块化的方式开发。 在浏览器中直接测试组件的能力已经证明是无价的- 通过模拟AJAX调用来编写完全运行客户端的web应用程序是有可能的。 这意味着,如果AJAX接口一致,那么客户端和服务器端开发就可以独立完成。

这个框架可以用于包装和扩展来自其他库的用户控件( 比如。 为了使应用程序的开发更加一致,jQuery UI 或者 YUI ) ;但是,我最近一直在研究模板框架以帮助组件动态内容。 我们已经在闭包工具发现它对设计开发周期影响很大,因此已经开始使用 jQuery模板,这对HTML组件框架的哲学非常有帮助。

我对我为框架编码的pre-HTML5事件处理很高兴,并且应该感谢描述如何在osi跨域之间发送消息。 在支持它的浏览器中使用HTML5网络消息传递是很有趣的。

这个框架特别关注的是在不同领域使用组件并在它们之间引发事件的能力。 这意味着如果有人托管自己的组件,那么其他人可以使用它而不必复制任何代码。 所有者只需更改主机上的代码就可以立即滚出修复和更新。


COM    framework  component  
相关文章