解决ｗｅｂ应用复合中ＵＩ样式冲突的方法和装置制造方法及图纸

本发明专利技术提供了一种用于解决ｗｅｂ应用复合中的ＵＩ样式冲突的方法和装置，该方法包括：检测ｗｅｂ复合页中引用重复的ＵＩ样式定义的页元素；确定该页元素在其所来自的导入窗件或本地页中所引用的ＵＩ样式定义；以及在所述ｗｅｂ复合页中将该页元素与所确定的相应的ＵＩ样式定义相关联，从而纠正ＵＩ样式冲突。这是一种能有效地解决ｗｅｂ应用复合中的ＵＩ样式冲突的运行解决方案，不是代码侵入式的，克服了不同厂商／提供商的不同标准的限制，遵守了例如ＣＳＳ的ＵＩ样式标准的级联性质，不会增加网页大小，并便利了ＵＩ样式定义的改变。

【技术实现步骤摘要】

本专利技术涉及数据处理领域，具体涉及web应用复合技术，更具体涉及一种用于解 决web应用复合中的UI样式冲突的方法和装置。
技术介绍
如今，诸如Mash-up等web应用复合技术越来越广泛地应用在web应用开发中。 来自各个web站点的大量窗件(widget)被复合起来，以向终端用户提供更方便、更丰富的 使用体验。来自Google的Gadget、来自Yahoo !和PageFlakers的窗件、来自IBM Lotus Mash-up Center的iWidget等是目前被广泛使用的最典型和常见的产品。 web应用复合可以使用静态代码插入的方式来实现，例如可以在代码级别进行复 制和粘贴，或者可在代码中使用某种Include指令，例如JSP的〈0include file ="" >指 令。然而，实现恥b应用复制的最常见的方式是动态导入方式，即通过使用〈script src ="X/Script>之类的命令将外部窗件组合到本地页面中。 然而，对于那些构成复合页面的来自各种来源的窗件来说，如何保持它们原来的 UI样式，例如web应用的CSS，而不相互影响，是一个必须面对和解决的问题。 CSS，即级联样式单，是用来定义诸如HTML等标记语言文档的呈现(例如，颜色、字 体、版面等)的机制。当在恥b应用中采用CSS时，有如下三种方法在web应用代码中定义 CSS : (1)夕卜部定义，例如，〈link rel = ' stylesheet' href = ' http://localtest. lotus.com/bss/css/front.css' type =' text/ess' />。 (2) 内 部定义，例 如，〈head>〈style type = " text/ess ，， >. stylelteml{color:red ;font-size:10px ;}〈/style>〈/head>。 (3)内联定义，例如，〈label style = "color:red ;font-size: 10px ; ，，>Hello〈/ label〉 web浏览器中的网页分析引擎将使用CSS的级联算法来应用各CSS定义，所述级联 算法通常包括如下规定 (1)与外部定义和内部定义相比，内联定义具有更高的优选级。 (2)距离目标元素更近的CSS定义具有更高的优先级。 (3)选择器顺序(Order of Selector). 由于CSS的级联算法，重复的CSS定义经常导致CSS冲突，尤其是对于采用了 Mash-up技术的web应用来说更是这样。 例如，当将一个窗件组合到本地页面中时，可能会发生如下情况 (1)导入窗件的CSS定义错误地影响了本地页面的CSS效果； (2)本地页面的CSS定义错误地影响了导入窗件的CSS效果； (3)导入窗件和本地页面的CSS定义错误地影响了对方的CSS效果，使得两者都不是所希望的那样。5 图1示出了一个真实的CSS冲突的示例场景。该图上半部分显示分别来自两个公司的网站的两个页面。希望将这两个页面中的两个窗件组合到一起，而形成如该图右下方所示的复合页面，然而由于这两个窗件的CSS定义发生冲突，结果却形成了如该图左下方所示的具有不希望的UI样式的复合页面。 目前，存在着如下两类解决CSS冲突问题的方法 (1)构建时的名称空间附加，即在构建构成复合页面的各窗件以及本地页面时，将 各自的CSS定义附加上各自特定的标识，这样，每个CSS定义将在复合页面中具有唯一的名 称，从而避免了 CSS冲突。这是一种最为广泛采用的方法，为Google、PageFlakers等采用。 这种方法是简单直接的，但具有如下缺点 -是对代码侵入式的，对编程提出了额外的要求；-每一个厂商/提供商具有自己的名称空间附加标准，从而增加了使窗件相互通 信的难度。 (2) CSS重计算为内联模式，该方法在组合窗件时将计算获得的CSS定义紧密地绑 定到HTML元素。这种方法尽管也能够解决CSS冲突的问题，但具有如下明显的缺点 违反了 CSS的级联性质； 将所有CSS定义设定为内联模式将增加网页大小； 如果全局CSS定义发生改变，而必须进行重新计算。 此外，所有现有的方法都是构建时技术，而不是运行时技术，因而增加了开发成 本。
技术实现思路
针对现有技术中的上述问题，本专利技术提出了一种更为方便和有效的在运行时在 web浏览器上解决CSS冲突的方法。 在本专利技术的一个方面，提供了一种用于解决web应用复合中的UI样式冲突的方 法，包括在恥b浏览器的运行时环境中，检测web复合页中引用重复的UI样式定义的页 元素；确定该页元素在其所来自的导入窗件或本地页中所引用的UI样式定义；以及在所述 web复合页中将该页元素与所确定的相应的UI样式定义相关联，从而纠正UI样式冲突。 在本专利技术的另一个方面，提供了一种用于解决web应用复合中的UI样式冲突的装 置，包括检测模块，用于在恥b浏览器的运行时环境中，检测web复合页中引用重复的UI 样式定义的页元素；确定模块，用于确定该页元素在其所来自的导入窗件或本地页中所引 用的UI样式定义；以及关联模块，用于在所述web复合页中将该页元素与所确定的相应的 UI样式定义相关联，从而纠正UI样式冲突。 本专利技术的解决方案的优点包括不但能有效地解决web应用复合中的UI样式冲突 的问题，而且解决方案是运行时的，而不是构建时的，因此不是代码侵入式的，不会给编程 带来额外的负担，也克服了不同厂商/提供商的不同标准的限制；同时，遵守了例如CSS的 UI样式标准的级联性质，不会增加网页大小，并便利了 UI样式定义的改变。附图说明 所附权利要求中阐述了被认为是本专利技术的特点的创造性特征。但是，通过参照附 图1示出了一个真实的CSS冲突的示例场景； 图2示例性和示意性地说明web应用复合中UI样式冲突问题产生的原因； 图3示出了根据本专利技术的实施例的用于解决web应用复合中的UI样式冲突的方 法； 图4A进一步示出了根据专利技术的一个实施例的用于解决web应用复合中的UI样式 冲突的方法中的确定步骤中包括的各子步骤； 图4B进一步示出了根据专利技术的另一个实施例的用于解决web应用复合中的UI样 式冲突的方法中的确定步骤中包括的各子步骤； 图5示出了根据本专利技术的实施例的用于解决web应用复合中的UI样式冲突的方 法的主要步骤的示例性实现代码； 图6示例性和示意性地示出了根据本专利技术的实施例的方法的原理；以及 图7示出了根据本专利技术的实施例的用于解决web应用复合中的UI样式冲突的装置。具体实施例方式下面首先参照图2示例性和示意性地说明web应用复合中UI样式冲突问题产生 的原因。 如图2所示，一窗件1属于应用A，其源文件的URL为http:〃OfferingA/widget/ contact, js。该窗件包含id为"11 "的标签元素，该标签元素引用了名称为"systemlteml" 的CSS定义。该窗件通过外部定义方式引入了一 CSS文件中的CSS定义(图中未示出)，该 CSS文件的URL为'http:〃OfferingA/css/font. ess'。由于本文档来自技高网...

【技术保护点】
一种用于解决ｗｅｂ应用复合中的ＵＩ样式冲突的方法，包括：在ｗｅｂ浏览器的运行时环境中，检测ｗｅｂ复合页中引用重复的ＵＩ样式定义的页元素；确定该页元素在其所来自的导入窗件或本地页中所引用的ＵＩ样式定义；以及在所述ｗｅｂ复合页中将该页元素与所确定的相应的ＵＩ样式定义相关联，从而纠正ＵＩ样式冲突。

【技术特征摘要】

【专利技术属性】
技术研发人员：嵇鹏，张冠群，杨顺祥，
申请(专利权)人：国际商业机器公司，
类型：发明
国别省市：US[美国]