专利名称：用于在Web浏览器上处理Widget的系统和方法
技术领域：
本发明涉及信息技术，更具体地，本发明涉及一种用于在Web浏览器上处理 Widget的系统和方法。
背景技术：
Widget(窗口小部件)是一种小型的应用程序，它可以是一个时钟、一个日记簿、 一段视频、天气预报、一个Flash游戏等等。Widget可以嵌入到Web网页当中。图1示出了一个网页http //finance, yahoo, com。在该网页中，如方框110所 示，有一个输入框和一个按钮(GET QUOTES)，当用户在该输入框中输入公司的名称(例如 IBM)，然后点击GET QUOTES按钮以后，该页面会发生变化，会出现该公司的股票信息，如图 2的方框120所示。为了提供上述功能，开发人员需要实现包括数据库查询，程序逻辑，以及用户界面 等等在内的许多模块。开发人员也可以利用上沭示例件网页httD //finance, yahoo, com 中所提供的内容，通过简单的封装，开发一个具有同样功能的Web Widget。当该Web Widget 运行时，只呈现上述如方框110所示的输入框和一个按钮(GET QUOTES)，并且当用户在该 输入框中输入公司的名称，然后点击GET QUOTES按钮以后，在仍然呈现如方框110所示的 输入框和按钮的同时，只呈现上述如方框120所示的该公司的股票信息，而不呈现其他信 肩、ο在现有技术中，为了在客户端呈现通过上述简单封装已有Web应用而开发的Web Widget，主要的处理工作需要在服务器端进行。在这种方案中，服务器为每个访问该Web Widget的客户端发起一个浏览器仿真器，用于与http://finance, yahoo, com交互，同时将 该浏览器仿真器处理后的web页面作进一步处理(比如裁剪)，以将需要的部分返回客户端。这种方案的缺点是如果很多客户端访问该Web Widget，那么该服务器的压力会很 大，需要很多资源来满足客户端的访问。因此，存在这样一种需求，以与现有技术不同的方式，在客户端例如浏览器上呈现 通过上述简单封装已有Web应用而开发的WebWidget。
发明内容
本发明的目的就是提供一种方案，使得能在客户端正确地呈现Widget，而无需相 应的服务器做更多地工作。根据本发明的第一方面，提出了一种用于在Web浏览器上处理Widget的系统，该 系统包括代码分析器，用于分析一个Widget的代码，以生成事件_指令对应表；事件分配器，其响应于监听到一个该Widget的事件，查询所述事件-指令对应表， 来确定是否需要执行相应的指令；
代码解析器，其响应于所述事件分配器确定需要执行相应的指令，执行或调用其 他装置来执行所述相应的指令。根据本发明的第二方面，提出了一种在web浏览器上处理Widget的方法，包括分析一个Widget的代码，以生成事件_指令对应表；响应于监听到一个该Widget的事件，查询所述事件_指令对应表，来确定是否需 要执行相应的指令；响应于确定需要执行相应的指令，执行所述相应的指令。根据本发明，能在客户端正确地呈现Widget，而无需相应的服务器做更多地工作。
通过以下结合附图的说明，并且随着对本发明的更全面了解，本发明的其他目的 和效果将变得更加清楚和易于理解，其中图1示出了一个示例性网页；图2示出了当对图1中的网页进行操作后所呈现的另一个页面；图3示出了本发明可以在其中实现的系统；图4A-4B示意性地示出了根据本发明的一个实施方式的Widget浏览器插件的方 框图；图5A-5B示意性地示出了根据本发明的一个实施方式的处理Widget的方法的流 程图；图6A-6C示意性地示出了根据本发明的一个实施方式的在呈现过程中发生的相 应情形。在所有的上述附图中，相同的标号表示具有相同、相似或相应的特征或功能。
具体实施例方式图3示例性地表示本发明可以在其中实现的一个系统300。如图3所示，该系统 300包括一个服务器310、一个服务器320、一个服务器330、一个客户端340和一个网络 350。服务器310、服务器320、服务器330、客户端340可以是膝上型计算机、小型机、中型 机、或大型机等等。并且，服务器310经由链路312连接到网络350 ；服务器320经由链路 322连接到网络350 ；服务器330经由链路332连接到网络350 ；客户端340经由链路342 连接到网络350。链路312、322、332、342可以是有线链路，诸如同轴电缆、光纤等，也可以 是无线链路，诸如卫星链路等。同样地，网络350可以是无线网、有线网、或它们的组合。另 外，网络350可以是局域网、城域网、广域网、或它们的组合。例如，网络350是因特网。当然，本领域的技术人员应该理解，在网络350上还可以连接有其他的客户端和/ 或服务器。并且，为了能够彼此识别，客户端和服务器可以具有可以唯一地识别它们的标 识，例如IP地址、统一资源定位符(URL)等。在本发明的该实施方式中，在服务器310上运行有一个Web应用，在该Web应用 中，嵌入有一个Web Widget,该Web Widget的具体代码(例如可扩展标记语言XML脚本)， 放置在服务器320上，并且，该Web Widget封装自服务器330上的一个Web应用。而在客 户端340上，安装有根据本发明的用于在Web浏览器上处理窗口小部件Widget的系统。当然，本领域的技术人员应当理解，该WebWidget的具体代码也可以直接位于服务器310上。 例如，假设这样的场景，在服务器310上运行有一个Web应用誦.myhomepage. html,里面包含一个Web Widget (比如，可以查询股票信息的Widget)，因此在www. myhomepage. html页面添力口有一个Widget标签。在现有技术中，在客户端340上呈现通过上述简单封装已有Web应用而开发的Web Widget等处理的主要工作由服务器320或服务器310负责。 按照本发明的实施方式，将由一个用于在Web浏览器上处理窗口小部件Widget的 系统负责在客户端340呈现通过上述简单封装已有Web应用而开发的Web Widget等处理， 该系统例如是一个Widget浏览器插件。图4A示意性地示出了根据本发明的一个实施方式的Widget浏览器插件的方框 图。Web浏览器(以下亦称“浏览器”)可以例如是Foxfire浏览器、Internet Explorer浏
见研寸寸。如图4A所示，该Widget浏览器插件400包括代码分析器410、事件分配器420、代 码解析器430、导航器440和Widget呈现器450。以下将详细描述Widget浏览器插件400所包括的各个装置的功能和各个装置之 间的关系。当(例如图3的客户端340的)浏览器加载服务器310上的例如驟w. myhomepage. html的时候，会从该网页的HTML代码中检测到Widget标签。例如，在该网页的HTML代码 中，会包括<widget script-URL =，...，></widget>0然后，浏览器调用Widget浏览器插件400。Widget浏览器插件400负责处理所有的Widget标签，就像flash浏览器插件可以 处理一个页面里面的多个flash —样。然后，Widget浏览器插件400根据该Widget标签中包括的URL，从相应的服务器 (这里是从服务器320)取回该Widget对应的Widget代码。当然，也可以由浏览器从相应的服务器取回该Widget代码，并在激活Widget浏览 器插件400的时候把取回的代码提供给Widget浏览器插件400。然后，代码分析器410分析取回的Widget代码，生成一个事件-指令对应表460。 该事件-指令对应表460记录了当发生一个该Widget的特定事件时，Widget浏览器插件 400需要执行什么样的相应指令。例如，对于一个名为的“Sample Widget”的Widget代码进行分析的结果生成如下 表1所示的示例性的事件-指令对应表460，其中，表的左栏内容表示事件，右栏内容表示对 应的指令。^"SampleffidRet"封装自http://V驟.example, com页面，类似于背景技术部 分中所述的封装自http://finance, yahoo, com的Widget。当用户在“SampleWidget”的输 入框中输入相应的内容，然后点击搜索按钮后，会呈现与所述输入的内容相关的信息，但不 呈现在该httP://VWW. example, com页面中的其他信息。开发人员可以使用各种各样的工 具来开发这样的Widget。需要说明的是，本领域的技术人员可以用各种方式实现代码分析器410，为了简要，这里不对代码分析器410的细节进行过多的描述。表 1 分析完以后，代码分析器410触发一个开始(“start”)事件。事件分配器420监听该Widget的各个事件。响应于监听到一个该Widget的事件， 事件分配器420查询事件-指令对应表，来确定是否有相应的指令需要执行。例如，如果监听到的事件是start事件，事件分配器420通过查询上述表1确定有 相应指令需要执行，则调用代码解析器430，由代码解析器430分析该指令，并执行该指令 或调用相应的装置来执行该指令。例如，根据表1，与start事件对应的指令是加载指令”LoadhttD //www, example. com”,即加载从中封装“Sample Widget”的入口页面httD //www, example, com,则代码解析 器430执行该加载指令，加载该入口页面。按照本发明一个实施例，代码解析器430例如通过调用导航器440来加载该入口 页面。当该入口页面加载完成时，会触发一个加载事件。响应于监听到这一事件，事件分配器420查询事件_指令对应表，来确定是否还有 相应的指令需要执行。通过查询上述事件-指令对应表，事件分配器420确定存在与该加载事件匹配 (事件类型和URL都匹配)的要执行的指令，因此，调用代码解析器430，由代码解析器430 分析该指令，并执行该指令或调用相应的装置来执行该指令。根据表 1,与 load location = http //www, example, com事件(力口裁事件)对应的 要执行的指令是 render xpath://form[id = ‘search，]禾口 fill form ‘search，by {keyword ‘test’}，其含义是针对返回的页面进行呈现，只呈现xpath中指定的网页节点部分-这里 是search表单；自动填写表单(用指定的值填写指定的字段)。于是，代码解析器430调 用呈现器450来呈现返回页面中的search表单部分，并且用指定的值“test”填写指定的 字段(search)。在执行该处理后，在浏览器上显示例如如图1所示的方框110，其中输入框中已经填写有“test”。在本发明的一个实施方式中，在呈现Widget时，采用Iframe-Div结构，即在Web浏览器碰到页面中的Widget标签，调用Widget浏览器插件后，Widget浏览器插件会生成一 个Div标签，并且在该Div标签里面嵌入一个Iframe标签，来替换该Widget标签，其中由 Iframe标签来承载该Widget的具体内容。也就是说，内层是Iframe标签，承载该Widget 具体内容，而外层是Div标签，决定一个可以显示的区域。也就是说，如图4B所示，在该实施方式中，Widget浏览器插件还包括设置器470， 用于生成一个Div标签，然后在该Div标签里面嵌入一个Iframe标签，来替换该Widget标 签，其中由Iframe标签来承载该Widget的具体内容。Iframe标签，又叫浮动帧标签，可以用它将例如一个HTML文档嵌入在一个HTML页 面的一个区域中显示。Iframe标签的使用格式是<Iframe src = “ http://xxx.xxx.xxx “ width = “ χ “ height =〃 x〃 scrolling = ” [OPTION] ” frameborder = ” x〃 ></Iframe>src 表示要呈现的文档的路径，文档既可以是HTML文档，也可以是文本、ASP等各 式；width、height 区域的宽与高；scrolling 当src的指定的HTML文档在指定的区域呈现不完时，滚动选项，如果 设置为N0，则不出现滚动条；如为Auto 则自动出现滚动条；如为Yes，则出现滚动条；FrameBorder 区域边框的宽度。当然，本领域的技术人员可以理解，上面的有些参数并非都是同时必需的。DIV标签是用来为HTML文档内块层次的内容提供结构和背景的标签。可以根据Widget在www. myhomepage. html中的相应设置来具体地设置Div标签。在Div标签里面嵌入一个Iframe标签的例子如下所示<div id = “ inner, div. yahoo, widget " style = " overflow :hidden ； display block ；position :relative；width 100% ；height :860px ；" ><iframe id = “ yahoo, widget “ width = “ 1024px “ scrolling =〃 no" height =" 2500px " frameborder = " no " src = http: //finance. yahoo, com/... >......</iframe></div>这个Div标签的名称为inner, div. yahoo, widget，其定义了这样一个区域，该区 域的宽度为整个浏览器的宽度，而高度为860个像素(相对值)。在这个Div标签内，嵌入有一个Iframe标签。该Iframe标签的名称为yahoo, widget，其区域的宽度为1024、高度为2500个像素。对于本领域的技术人员来说，能够理解上述代码的含义，因此为了简洁，这里不对 其进行过多的描述。
所谓加载完成，是指已经把该入口页面加载，放置在Iframe里面，即已经把 I frame标签的src修改为http //www, example, com。其中，当开始加载新页面的时候， Widget浏览器插件，更具体地说，是设置器470，将Div标签设成隐藏，目的是为了避免将 不需要显示的内容暴露给用户，例如，外层是这样一个Div标签style = “ overflow hidden ；width :437px ；height :47px ；“。呈现的第一个步骤是从Widget入口页面中定位到需要被显示的内容D0M(文档 对象模型)节点(一个或多个节点，在多个节点的情况下，包括一个父节点以及它的子节 点，在本发明的该实施方式中，假定只涉及一个节点)，以及得到所述D0M节点的相应信息 坐标(起始点)、大小(沿起始点的宽度和高度)，也就是说，具体要显示在什么地方的相应 内容。由于内层是 Iframe 标签,7承载 Widget 入 口 页面 http //www, example, com,而该 入口页面可能很大，超出Div标签设定的呈现区域，例如，如图6A所示，框610表示包括该 Widget所在的Web页面www. myhomepage. html的呈现区域，框620表示由Div标签设定的 旱现区域，框630表示该入口页面httD //www, examp 1 e. com所需要的旱.现区域(例如图 1中的整个页面)，而框640表示真正需要被呈现的内容(例如图1中的110)，其完全在由 Div标签设定的呈现区域620的外部，因此不能被呈现。因此，呈现的第二步是利用层叠样式表CSS，调整IFrame标签的绝对位置，让需要 被呈现的内容640出现在由Div标签设定的呈现区域620的内部。例如，如图6B所示，通过调整IFrame标签的绝对位置(style = "left :_4px ； top :-262px ；position absolute ； ”)，框 640 出现在框 620 的内部。接下来，呈现的第三步是调整所述Div标签的CSS，让其设定的呈现区域620符合 需要被呈现的内容640的大小。如图6C所示，通过调整所述Div标签的CSS，框620的大小适合于框640的大小， 刚好能包括框640。最后，呈现的第四步是将外层的Div标签的style属性设成可见，从而用户就可以 看到在Div标签设定的呈现区域中的内容。表1中的第三行记载的事件是指定的网页加载完毕(该网页符合一定的模式，即 URL匹配)，相应的要执行的指令是对返回的网页进行呈现(由呈现器450呈现)，其中只呈 现xpath中指定的网页节点部分。执行了表1中第三行所记载的指令后，在浏览器上显示例如如图2所示的方框110 和方框120。如果事件分配器420监听到了一个该Widget的事件，但是该事件未曾被注册要进 行管理，即在事件_指令对应表中没有与该事件相对应的要执行的指令，那么Widget插件 400不进行相应动作，而是由浏览器针对该事件而执行相应的动作。当然，本领域的技术人员可以理解，本发明同样适用于需要呈现整个网页，而不仅 仅呈现一个网页的指定节点部分的情形。本领域的技术人员还可以理解，上述事件-指令对应表是示例性的。在实际中，还 可以注册更多的事件进行管理，即在事件_指令对应表中具有更多的事件_指令条目。本领域的技术人员还可以理解，可以使用其他的技术来进行呈现。本发明的重点不是在于使用什么样的技术来呈现Widget，而是在于能够实现在客户端正确地呈Widget， 而无需相应的服务器做更多地工作。图5A示意性地示出了根据本发明的一个实施方式的在web浏览器上处理Widget 的方法的流程图。
如图5A所示，在所述方法500中，首先分析(步骤S510) —个Widget的代码，以 生成事件_指令对应表。然后，判断是否监听到该Widget的一个事件(步骤S520)。响应于监听到一个该 Widget的事件(步骤S520的“是”分支)，查询(步骤S530)所述事件-指令对应表，来确 定是否需要执行相应的指令。响应于确定需要执行相应的指令(步骤S530的“是”分支)，执行(步骤S540)所 述相应的指令。执行完所述相应的指令之后，流程继续返回步骤S520。响应于通过查询所述事件-指令对应表，确定不需要执行相应的指令(步骤S530 的“否”分支)，流程继续返回到步骤S520。其中所述要执行的指令包括加载一个页面。其中所述要执行的指令包括呈现一个页面或一个页面的指定节点部分，例如，只 呈现图1中的110部分。在本发明的一个实施方式中，在呈现Widget时，采用Iframe-DiV结构，即在Web 浏览器碰到页面中的Widget标签，调用Widget浏览器插件后，Widget浏览器插件会生成一 个Div标签，并且在该Div标签里面嵌入一个Iframe标签，由Iframe标签来承载该Widget 的具体内容，来替换该Widget标签。也就是说，内层是Iframe标签，承载该Widget具体内 容，而外层是Div标签，决定一个可以呈现的区域。也就是说，在该实施方式中，在步骤S510之前，还包括步骤S505 生成一个Div标 签，并且在该Div标签里面嵌入一个Iframe标签，来替换该Widget标签，其中由Iframe标 签来承载该Widget的具体内容。并且，呈现包括第一步骤，从Widget入口页面中定位到需要被显示的内容D0M节 点以及得到所述DOM节点的相应信息坐标、大小；第二步骤，利用CSS，调整IFrame标签的 绝对位置，让需要被呈现的内容出现在由Div标签设定的呈现区域的内部；第三步骤，调整 所述Div标签的CSS，让其设定的呈现区域符合需要被呈现的内容的大小；以及第四步骤， 将在加载新页面时设置成隐藏的Div标签的style属性设成可见，从而用户就可以看到在 Div标签设定的呈现区域中的内容。应当注意，为了使本发明更容易理解，上面的描述省略了对于本领域的技术人员 来说是公知的、并且对于本发明的实现可能是必需的更具体的一些技术细节。提供本发明的说明书的目的是为了说明和描述，而不是用来穷举或将本发明限制 为所公开的形式。对本领域的普通技术人员而言，许多修改和变更都是显而易见的。因此，选择并描述实施方式是为了更好地解释本发明的原理及其实际应用，并使 本领域普通技术人员明白，在不脱离本发明实质的前提下，所有修改和变更均落入由权利 要求所限定的本发明的保护范围之内。
权利要求
一种用于在Web浏览器上处理Widget的系统，包括代码分析器，用于分析一个Widget的代码，以生成事件-指令对应表；事件分配器，其响应于监听到一个该Widget的事件，查询所述事件-指令对应表，来确定是否需要执行相应的指令；代码解析器，其响应于所述事件分配器确定需要执行相应的指令，执行或调用其他装置来执行所述相应的指令。
2.根据权利要求1所述的系统，还包括导航器，响应于所述相应的指令是加载一个页面，所述导航器被所述代码解析器调用， 以加载所述页面。
3.根据权利要求1所述的系统，还包括Widget呈现器，响应于所述相应的指令是呈现一个页面或一个页面的指定节点部分， 所述Widget呈现器被所述代码解析器调用，以呈现所述页面或所述页面的指定节点部分。
4.根据权利要求3所述的系统，还包括设置器，用于生成一个Div标签，然后在该Div标签里面嵌入一个Iframe标签，来替换 Widget标签，其中由Iframe标签来承载该Widget的具体内容。
5.一种在Web浏览器上处理Widget的方法，包括分析一个Widget的代码，以生成事件-指令对应表；响应于监听到一个该Widget的事件，查询所述事件-指令对应表，以确定是否需要执 行相应的指令；响应于确定需要执行相应的指令，执行所述相应的指令。
6.根据权利要求5所述的方法，其中所述相应的指令包括加载一个页面。
7.根据权利要求5所述的方法，其中所述相应的指令包括呈现一个页面或一个页面的 指定节点部分。
8.根据权利要求7所述的方法，还包括生成一个Div标签，然后在该Div标签里面嵌入一个Iframe标签，来替换Widget标签， 其中由Iframe标签来承载该Widget的具体内容。
全文摘要
本发明公开了一种用于在Web浏览器上处理Widget的系统和方法。该系统包括代码分析器，用于分析一个Widget的代码，以生成事件-指令对应表；事件分配器，其响应于监听到一个该Widget的事件，查询所述事件-指令对应表，来确定是否需要执行相应的指令；代码解析器，其响应于所述事件分配器确定需要执行相应的指令，执行或调用其他装置来执行所述相应的指令。根据本发明，能在客户端正确地呈现Widget，而无需相应的服务器做更多地工作。
文档编号G06F9/44GK101876897SQ20091013695
公开日2010年11月3日 申请日期2009年4月30日 优先权日2009年4月30日
发明者付荣耀, 俞益琴, 章雪松, 赵石顽, 高伟 申请人:国际商业机器公司