法律状态公告日
法律状态信息
法律状态
2013-04-03
授权
授权
2010-09-15
实质审查的生效 IPC(主分类):G06F17/30 申请日:20090114
实质审查的生效
2010-07-14
公开
公开
技术领域
本发明涉及数据处理领域，具体涉及web应用复合技术，更具体涉及一种用于解决web应用复合中的UI样式冲突的方法和装置。
背景技术
如今，诸如Mash-up等web应用复合技术越来越广泛地应用在web应用开发中。来自各个web站点的大量窗件(widget)被复合起来，以向终端用户提供更方便、更丰富的使用体验。来自Google的Gadget、来自Yahoo！和PageFlakers的窗件、来自IBM Lotus Mash-up Center的iWidget等是目前被广泛使用的最典型和常见的产品。
web应用复合可以使用静态代码插入的方式来实现，例如可以在代码级别进行复制和粘贴，或者可在代码中使用某种Include指令，例如JSP的<@include file＝””>指令。然而，实现web应用复制的最常见的方式是动态导入方式，即通过使用<script src＝”></script>之类的命令将外部窗件组合到本地页面中。
然而，对于那些构成复合页面的来自各种来源的窗件来说，如何保持它们原来的UI样式，例如web应用的CSS，而不相互影响，是一个必须面对和解决的问题。
CSS，即级联样式单，是用来定义诸如HTML等标记语言文档的呈现(例如，颜色、字体、版面等)的机制。当在web应用中采用CSS时，有如下三种方法在web应用代码中定义CSS：
(1)外部定义，例如，<link rel＝′stylesheet′href＝′http://localtest.lotus.com/bss/css/front.css′type＝′text/css′/>。
(2)内部定义，例如，<head><style type＝“text/css”>.styleItem1{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效果，使得两者都不是所希望的那样。
图1示出了一个真实的CSS冲突的示例场景。该图上半部分显示分别来自两个公司的网站的两个页面。希望将这两个页面中的两个窗件组合到一起，而形成如该图右下方所示的复合页面，然而由于这两个窗件的CSS定义发生冲突，结果却形成了如该图左下方所示的具有不希望的UI样式的复合页面。
目前，存在着如下两类解决CSS冲突问题的方法：
(1)构建时的名称空间附加，即在构建构成复合页面的各窗件以及本地页面时，将各自的CSS定义附加上各自特定的标识，这样，每个CSS定义将在复合页面中具有唯一的名称，从而避免了CSS冲突。这是一种最为广泛采用的方法，为Google、PageFlakers等采用。这种方法是简单直接的，但具有如下缺点：
-是对代码侵入式的，对编程提出了额外的要求；
-每一个厂商/提供商具有自己的名称空间附加标准，从而增加了使窗件相互通信的难度。
(2)CSS重计算为内联模式，该方法在组合窗件时将计算获得的CSS定义紧密地绑定到HTML元素。这种方法尽管也能够解决CSS冲突的问题，但具有如下明显的缺点：
违反了CSS的级联性质；
将所有CSS定义设定为内联模式将增加网页大小；
如果全局CSS定义发生改变，而必须进行重新计算。
此外，所有现有的方法都是构建时技术，而不是运行时技术，因而增加了开发成本。
发明内容
针对现有技术中的上述问题，本发明提出了一种更为方便和有效的在运行时在web浏览器上解决CSS冲突的方法。
在本发明的一个方面，提供了一种用于解决web应用复合中的UI样式冲突的方法，包括：在web浏览器的运行时环境中，检测web复合页中引用重复的UI样式定义的页元素；确定该页元素在其所来自的导入窗件或本地页中所引用的UI样式定义；以及在所述web复合页中将该页元素与所确定的相应的UI样式定义相关联，从而纠正UI样式冲突。
在本发明的另一个方面，提供了一种用于解决web应用复合中的UI样式冲突的装置，包括：检测模块，用于在web浏览器的运行时环境中，检测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为“l1”的标签元素，该标签元素引用了名称为“systemItem1”的CSS定义。该窗件通过外部定义方式引入了一CSS文件中的CSS定义(图中未示出)，该CSS文件的URL为′http://OfferingA/css/font.css′。由于该CSS文件中包含了名称为“systemItem1”的CSS定义：styleItem1{font-size:11px；font-family:NewTimes；}，因此，该窗件中id为“l1”的标签元素应当采用该CSS定义中的样式，即font-size为11px，font-family为New Times。
另外，本地页面的包含了id为“l2”的标签元素，该标签元素引用了名称为“systemItem1”的CSS定义。本地页面通过外部定义方式引入了一本地CSS文件中的CSS定义，该本地CSS文件的URL为http://OfferingA/widget/contact.js。由于该本地CSS文件中包括了名称为“systemItem1”的CSS定义：styleItem1{font-size:20px；font-family:System；}，因此，该本地页面中标识为“l2”的标签元素应当采用该本地CSS文件中定义的styleItem1的样式，即font-size为20px，font-family：为System。
然而，由于在该本地页面的源文件中还通过<script>标记动态导入了上述窗件的内容及其CSS文件，这样，所形成的web复合页面中将引入两个CSS文件，且所述两个CSS文件中将存在名称同为styleItem1、但内容不同的两个CSS定义，这样，遵循级联算法，复合文件中id为“l1”和“l2”的标签元素将无法引用正确的CSS定义，从而产生CSS冲突。
下面参照附图来说明本发明的实施例。在下面的说明中，阐述了许多具体细节以便更全面地了解本发明。但是，对于本技术领域内的技术人员明显的是，本发明的实现可不具有这些具体细节。此外，应当理解的是，本发明并不限于所介绍的特定实施例。相反，可以考虑用下面的特征和元素的任意组合来实施本发明。而无论它们是否涉及不同的实施例。因此，下面的方面、特征、实施例和优点仅作说明之用而不应被看作是所附权利要求的要素或限定，除非权利要求中明确提出。
现参照图3，其示出了根据本发明的实施例的一种用于解决web应用复合中的UI样式冲突的方法。所述web应用复合例如为Mash-up。所述UI样式冲突通常是由于重复的UI样式定义造成的。而所述由于重复的UI样式定义造成的UI样式冲突是指由于web复合页中包含了来自本地页面以及一个或多个导入窗件的web内容，在这些本地页面和导入窗件中有可能定义了名称相同但内容可能不同的UI样式定义，这样，在web复合页的DOM结构中可能包含名称相同但内容可能不同的UI样式定义，从而使得web复合页中的页元素引用错误的UI样式定义。
在本发明的实施例中，所述UI样式定义为CSS样式定义。当然，这并非是对本发明的限制，本发明的方法也可应用于采用其他UI样式定义的场合。
如图所示，该方法包括以下步骤：
在步骤301，在web浏览器的运行时环境中，检测web复合页中引用重复的UI样式定义的页元素。作为示例，可以通过分析web复合页的DOM结构来检查每个HTML元素是否引用了重复的CSS定义，从而发现引用重复的CSS定义的所有HTML元素。
在步骤302，确定该页元素在其所来自的导入窗件或本地页中所引用的UI样式定义。当从本地页面以及一个或多个导入窗件形成web复合页后，在web复合页的DOM结构中将不再保留原本地页面或导入窗件中的页元素与其所引用的UI样式定义之间的关联，从web复合页的DOM结构中甚至无法确定页元素是来自于本地页面还是来自于某一个导入窗件，因此，无法从web复合页的DOM结构中确定页元素在其所来自的导入窗件或本地页中所引用的UI样式定义。为此，在本发明的实施例，使用了如下文中所述的方法来确定该页元素在其所来自的导入窗件或本地页中所引用的UI样式定义。
在步骤303，在web复合页中将该页元素与所确定的相应的UI样式定义相关联，从而纠正UI样式冲突。也就是说，当在步骤401确定了该页元素在其所来自的导入窗件或本地页中所引用的UI样式定义之后，在web复合页中使该页元素引用所确定的相应的UI样式定义。
可以通过多种方式在web复合页中使该页元素与相应的UI样式定义相关联。仅作为示例，在本发明的一个实施例中，通过将相应的UI样式定义的名称修改为唯一名称，并使该页元素引用该唯一名称来将该页元素与该UI样式定义相关联。例如，可以通过附加名称空间的方法，将本地页面或导入窗件所属的应用的标识或其他唯一标识附加到相应的UI样式定义的名称上，使得该UI样式定义的名称在web复合页的DOM结构中是唯一的，或者通过其他方法将该UI样式定义的名称修改为在web复合页的DOM结构中是唯一名称，并在web复合页的DOM结构中修改相应的页元素对UI样式定义的引用，使其引用该唯一名称。
在本发明的另一个实施例中，通过将相应的UI样式定义重新计算为该页元素的内联UI样式定义来将该页元素与该UI样式定义相关联。也就是说，当在步骤302确定了该页元素在其所来自的导入窗件或本地页中所引用的UI样式定义之后，将该UI样式定义重新计算为web复合页的DOM结构中该页元素的内联UI样式定义。
图4A进一步示出了在本发明的一个实施例中，上述确定步骤302包括的各子步骤。
如图所示，在步骤401，判断所述web复合页中是否存在与上述在步骤301中所检测到的引用重复的UI样式定义的页元素相关的导入窗件。例如，通过分析web复合页的DOM结构，如果发现在该页元素之前存在一个Script元素，则可判断该Script元素代表一个导入窗件。当然，也可以在发现在页元素之前存在一个Script元素之后，进一步确定该Script元素的URL，并判断该URL与本地页面是否具有相同的应用标识，当该URL与本地页面具有相同的应用标识时，表明该Script元素是本地脚本，而当该URL与本地页面不具有相同的应用标识时，判断该Script代表一个导入窗件。
在步骤402，响应于在步骤401判断该复合中存在与该页元素相关的导入窗件，获得与该页元素相关的导入窗件的URL。
在步骤403，根据所述获得的URL异步地获取所述相关的导入窗件的内容。在本发明的实施例中，这是通过AJAX进行的。当然，这并非是对本发明的限制，在本发明的其他实施例中，也可以使用其他异步方式来获取所述相关的导入窗件的内容。
在步骤404，创建与所述web复合页隔离的运行环境。在本发明的实施例中，所述与web复合页隔离的运行环境是指具有与所述web复合页分别的DOM结构的隐藏web页容器元素，例如一个隐藏的窗口、iframe、frame等。由于该运行环境具有与所述web复合页分别的DOM结构，这样可以通过在该运行环境中运行在步骤403中获取的导入窗件的内容，形成包含导入窗件中的各页元素及其UI标识定义的DOM结构，并避免了与所述web复合页之间的相互影响。
在步骤405，在该运行环境中运行所述相关的导入窗件的内容。在本发明的实施例中，这是通过以下方式完成的：在所述隔离的运行环境中创建“<script>”标记，使该标记容纳在步骤403获取的所述相关的导入窗件的内容，并使该标记在所述隔离的运行环境中运行。由于所述导入窗件的内容是已在步骤403中被获取到本地的，因此绕开了web浏览器的同源策略(Same Origin Policy)，使得web复合页中的代码可以访问所述隔离的运行环境的DOM结构的内容。这样，就使得本发明的方法可以由包含在每个web复合页中的代码例如Javascript代码来实现。
在步骤406，根据在步骤404的运行结果，判断在步骤301中检测到的引用了重复的UI样式定义的页元素是否包括在所述相关的导入窗件中。在本发明的实施例中，这是通过分析在步骤404中所形成的单独的DOM结构以判断该页元素是否包含在该DOM结构中来完成的。
在步骤407，响应于在步骤406判断该页元素包括在所述相关的导入窗件之中，根据所述运行结果发现该页元素在所述相关的导入窗件中所引用的UI样式定义。在本发明的实施例中，这是通过分析在步骤404中所形成的单独的DOM结构来完成的。
在步骤408，响应于在步骤401判断所述web复合页中不存在与该页元素相关的导入窗件，或者响应于在步骤406判断该页元素不包括在所述相关的导入窗件之中，从本地页中发现该页元素在本地页中所引用的UI样式定义。
图4B进一步示出了在本发明的另一实施例中，上述确定步骤302包括的各子步骤。在图6中，与图4中相同的步骤使用了相同的标号。
如图所示，在步骤401，判断所述web复合页中是否存在与该页元素相关的导入窗件。
在步骤402，响应于判断该web复合页中存在与该页元素相关的导入窗件，获得与该页元素相关的导入窗件的URL。
在步骤403，根据所述URL异步地获取所述相关的导入窗件的内容。
在步骤406’，根据所述获得的所述相关的导入窗件的内容，判断该页元素是否包括在所述相关的导入窗件中。
响应于判断该页元素包括在所述相关的导入窗件之中执行以下步骤：在步骤404，创建与所述web复合页隔离的运行环境；在步骤405，在该运行环境中运行所述相关的导入窗件的内容；在步骤407，根据所述运行结果发现该页元素在所述相关的导入窗件中所引用的UI样式定义。
在步骤408，响应于在步骤401判断所述web复合页中不存在与该页元素相关的导入窗件，或者响应于在步骤406’判断该页元素不包括在所述相关的导入窗件之中，从本地页中发现该页元素在本地页中所引用的UI样式定义。
在本发明的实施例中，在web浏览器的运行时环境中，检测web复合页中引用重复的UI样式定义的每个页元素，并针对每个页元素执行以上过程。
在本发明的实施例中，该方法可以由附加到每个web复合页中的脚本例如Javascript脚本来执行，这样，该方法可以在每当加载web复合页时开始执行。web复合页的显示可以在该方法执行完成从而已纠正了可能的UI样式冲突后进行，这样，可以避免首先显示错误的UI样式、然后再显示正确的UI样式，从而获得更好的用户体验。在本发明的另一实施例中，该方法可以由一个单独的浏览器插件来执行，这样，该方法例如可以由用户通过点击web浏览器窗口中的一个书签而触发执行。
图5示出了根据本发明的实施例的方法的主要步骤的示例性实现代码。如图所示，与引用重复的CSS定义的一个或多个页元素相关的每个导入窗件的URL存储在列表变量listDynamicExternalLinkContents中，针对该变量中的每个导入窗件的URL调用triggerAjax函数，该函数使用AJAX获得该导入窗件的内容，该内容以文本格式被放置在DoFix函数中的sReturn变量中，然后使用window.open语句创建一个隔离的DOM结构环境，即一个子窗口，该子窗口没有URL，且是隐藏的，接着为该窗口创建文档newDocument，为该文档创建Script元素newScript，并把sReturn变量中的导入窗件的文本内容赋值给该元素newScript的text属性，并通过newDocument.body.appendChild(newScript)语句运行该导入窗件，这样就形成了包含导入窗件中的各页元素及其引用的CSS定义的DOM结构，可以从中获得页元素在其所来自的导入窗件中的CSS定义。
图6示例性和示意性地示出了根据本发明的实施例的方法的原理。如图所示，在web复合页的DOM结构中包含了分别来自本地页和导入窗件的CSS定义文件的名称同为styleItem1的CSS定义，这样就使得web复合页中分别来自导入窗件和本地页标签元素L1、L2引用了重复的CSS定义。通过执行根据本发明的实施例的方法，以异步方式从导入窗件的外部来源重新获得导入窗件的内容，并在新创建的隐藏HTML容器中运行所获得的异入窗件的内容，从而生成了与web复合页的DOM结构隔离的导入窗件的DOM结构。在该DOM结构中可以确定标签元素L1与正确的styleItem1之间的关联。然后，在web复合页的DOM结构中通过向相应的styleItem1的名称添加其应用标识，使其在DOM结构中为唯一名称，并修改标签元素L1对CSS定义的引用，使其引用该唯一名称，这样，就解决了web复合页中的CSS冲突的问题。
以上描述了根据本发明的实施例的用于解决web应用复合中的UI样式冲突的方法，应指出的是，以上描述仅为示例，而不是对本发明的限制。在本发明的其他实施例中，该方法可具有更多、更少或不同的步骤，各步骤之间的顺序可以与所描述的不同或可并行执行，且所描述的步骤中的一些可以合并为更大的步骤，或划分为更小的步骤。例如，也可以考虑在web复合页中检测到存在冲突的CSS定义之后，直接重新获得该web复合页中存在的每一个导入窗件的内容，并在所创建的隔离的运行环境中运行每一个导入窗件的内容，从而确定每一个导入窗件的页元素所引用的CSS定义，并在web复合页中将来自每一个导入窗件的页元素与相应的CSS定义相关联。再例如，尽管以上以DOM结构、JavaScript、AJAX等为例描述了本发明的方法中的步骤，但这些不是对本发明的限制，相反，本发明的方法也可采用其他文档结构、脚本语言和异步通信机制的场合。又例如，在本发明的一些实施例中，可以不包括上述步骤401和408中的一个或两个，等等。所有这些变化都处于本发明的精神和范围之内。
现参照图7，其示出了根据本发明的实施例的用于解决web应用复合中的UI样式冲突的装置。该装置可用来执行以上描述的根据本发明的实施例的用于解决web应用复合中的UI样式冲突的方法。为简明起见，在以下描述中省略了与以上重复的部分内容。
如图所示，该装置包括：
检测模块701，用于在web浏览器的运行时环境中，检测web复合页中引用重复的UI样式定义的页元素；
确定模块702，用于确定该页元素在其所来自的导入窗件或本地页中所引用的UI样式定义；以及
关联模块703，用于将该页元素与所述web复合页中相应的UI样式定义相关联，从而纠正UI样式冲突。
在本发明的一个实施例中，所述确定模块702包括：
用于获得与该页元素相关的导入窗件的URL的装置；
用于根据所述URL异步地获取所述相关的导入窗件的内容的装置；
用于创建与所述web复合页隔离的运行环境的装置；
用于在该运行环境中运行所述相关的导入窗件的内容的装置；
用于根据所述运行结果，判断该页元素是否包括在所述相关的导入窗件中的装置；以及
用于响应于判断该页元素包括在所述相关的导入窗件之中，根据所述运行结果发现该页元素在所述相关的导入窗件中所引用的UI样式定义的装置。
在本发明的另一个实施例中，所述确定模块702包括：
用于获得与该页元素相关的导入窗件的URL的装置；
用于根据所述URL异步地获取所述相关的导入窗件的内容的装置；
用于根据所述获得的所述相关的导入窗件的内容，判断该页元素是否包括在所述相关的导入窗件中的装置；
响应于判断该页元素包括在所述相关的导入窗件之中：用于创建与所述web复合页隔离的运行环境的装置；用于在该运行环境中运行所述相关的导入窗件的内容的装置；以及用于根据所述运行结果发现该页元素在所述相关的导入窗件中所引用的UI样式定义的装置。
在本发明的实施例中，所述确定模块702还包括：用于响应于判断所述web复合页中不存在与该页元素相关的导入窗件，或者响应于判断该页元素不包括在所述相关的导入窗件之中，从本地页中发现该页元素在本地页中所引用的UI样式定义的装置。
在本发明的实施例中，所述与web复合页隔离的运行环境是具有与所述web复合页分别的DOM结构的隐藏web页容器元素，且所述运行结果是加载了所述相关的导入窗件的内容的DOM结构。
在本发明的实施例中，所述用于根据所述URL异步地获取所述相关的导入窗件的内容的装置用于根据所述URL通过AJAX异步地获得所述相关的导入窗件的内容。
在本发明的实施例中，所述关联模块703包括以下装置中的任何一个：
用于将所述相应的UI样式定义的名称修改为唯一名称，并使该页元素引用该唯一名称的装置；以及
用于将所述相应的UI样式定义重新计算为该页元素的内联UI样式定义的装置。
在本发明的实施例中，所述UI样式定义为CSS样式定义。
在本发明的实施例中，该用于解决web应用复合中的UI样式冲突的装置是由web复合页中的脚本或web浏览器插件实现的。
以上描述了根据本发明的实施例的用于解决web应用复合中的UI样式冲突的装置，应指出的是，以上描述仅为示例，而不是对本发明的限制。在本发明的其他实施例中，该装置可具有更多、更少或不同的模块，且各模块之间的连接、包含和功能关系可以与所描述的不同，所描述的一些模块可以被合并为更大的模块，或被划分为更小的模块，等等。所有这些变化都处于本发明的精神和范围之内。
本发明可以硬件、软件、或硬件与软件的结合的方式实现。本发明可以集中的方式在一个计算机系统中实现，或以分布方式实现，在这种分布方式中，不同的部件分布在若干互连的计算机系统中。适于执行本文中描述的方法的任何计算机系统或其它装置都是合适的。一种典型的硬件和软件的组合可以是带有计算机程序的通用计算机系统，当该计算机程序被加载和执行时，控制该计算机系统而使其执行本发明的方法，并构成本发明的装置。
本发明也可体现在计算机程序产品中，该程序产品包含使能实现本文中描述的方法的所有特征，并且当其被加载到计算机系统中时，能够执行所述方法。
尽管已参照优选实施例具体示出和说明了本发明，但是本领域内的那些技术人员应理解，可在形式和细节上对其进行各种改变而不会背离本发明的精神和范围。
机译： 解决web应用组合中的ui风格冲突的方法和装置
机译： 解决Web应用程序组成中的UI风格冲突的方法和装置
机译： 解决随机访问网络中数据包冲突的方法，通信系统和解决said系统中包含的冲突的设备
