METHOD AND APPARATUS FOR SOLVING UI STYLE CONFLICTS IN WEB APPLICATION COMPOSITION

• US 20100180194A1
• Filed: 01/11/2010
• Published: 07/15/2010
• Est. Priority Date: 01/14/2009
• Status: Active Grant

• Current Assignee: International Business Machines Corporation
• Original Assignee: International Business Machines Corporation
• Inventors: Ji, Peng, Zhang, Guan Qun, Yang, Shun Xiang
• Granted Patent: US 8,397,159 B2
• Time in Patent Office: Days
• US Class Current: 715/234
• CPC Class Codes: G06F 8/38 for implementing user interfaces
• CPC Class Codes: G06F 8/71 Version control security arrangements therefor G06F21/57; Configuration management
• CPC Class Codes: G06F 9/44536 Selecting among different versions
• CPC Class Codes: G06F 9/44552 Conflict resolution, i.e. enabling coexistence of conflicting executables

Abstract

A method and apparatus for solving UI style conflicts in web application composition. The method includes the steps of: detecting, in the runtime environment of a web browser, a page element referring to duplicate UI style definitions in a web composite page; determining the UI style definition referred to by the page element in an imported widget or a local page from which it originates; and relating the page element and the determined corresponding UI style definition in the web composite page, so as to solve the UI style conflict.

Claims

1. A method for solving UI style conflicts in web application composition, comprising:

detecting a page element referring to duplicate UI style definitions in a web composite page, in the runtime environment of a web browser;

determining the UI style definition referred to by the page element in an imported widget or a local page from which it originates; and

relating the page element and the determined corresponding UI style definition in the web composite page, so as to solve the UI style conflict.

2. The method of claim 1, wherein the determining step comprises:

obtaining the URL of an imported widget associated with the page element;

asynchronously acquiring the contents of the associated imported widget based on the URL;

creating a runtime environment isolated from the web composite page;

running the contents of the associated imported widget in the runtime environment;

determining whether the page element is included in the associated imported widget according to the running results; and

finding out the UI style definition referred to by the page element in the associated imported widget according to the running results, in response to determining that the page element is included in the associated imported widget.

3. The method of claim 1, wherein the determining step comprises:

obtaining the URL of the imported widget associated with the page element;

asynchronously acquiring the contents of the associated imported widget based on the URL;

determining whether the page element is included in the associated imported widget according to the acquired contents of the associated imported widget; and

in response to determining that the page element is included in the imported widget (i) creating a runtime environment isolated from the web composite page, (ii) running the contents of the associated imported widget in the runtime environment, and (iii) finding out the UI style definition referred to by the page element in the associated imported widget according to the running results.

4. The method of claim 2, wherein the determining step further comprises:

finding out the UI style definition referred to by the page element in the local page, from the local page, in response to either (i) determining that there is no imported widget associated with the page element in the web composite page, or (ii) determining that the page element is not included in the associated imported widget.

5. The method of claim 2, wherein the runtime environment isolated from the web composite page is a hidden web page container element having a DOM structure separate from the web composite page, and the running results are a DOM structure loaded with the contents of the associated imported widget.

6. The method of claim 2, wherein the step of asynchronously acquiring the contents of the associated imported widget is performed through AJAX.

7. The method of claim 1, wherein relating the page element with the corresponding UI style definition in the web composite page is performed in one of the following manners:

modifying the name of the corresponding UI style definition into a unique name and making the page element refer to the unique name; and

re-calculating the corresponding UI style definition into an inline UI style definition of the page element.

8. The method of claim 1, wherein the UI style definition is a CSS style definition.

9. The method of claim 1, wherein the method is implemented by a script in the web composite page or a web browser plug-in.

10. An apparatus for solving UI style conflicts in web applications composition, comprising:

a detection module for detecting a page element referring to duplicate UI style definitions in a web composite page in the runtime environment of a web browser;

a determining module for determining the UI style definition referred to by the page element in an imported widget or a local page from which it originates; and

a relating module for relating the page element with the determined corresponding UI style definition in the web composite page, so as to solve the UI style conflict.

11. The apparatus of claim 10, wherein the determining module comprises:

means for obtaining the URL of an imported widgets associated with the page element;

means for asynchronously acquiring the contents of the associated imported widget based on the URL;

means for creating a runtime environment isolated from the web composite page;

means for running the contents of the associated imported widget in the runtime environment;

means for determining whether the page element is included in the associated imported widget according to the running results; and

means for finding out the UI style definition referred to by the page element in the associated imported widget according to the running results, in response to determining that the page element is included in the associated imported widget.

12. The apparatus of claim 10, wherein the determining module comprises:

means for obtaining the URL of the imported widget associated with the page element;

means for asynchronously acquiring the contents of the associated imported widget based on the URL;

means for determining whether the page element is included in the associated imported widget according to the acquired contents of the associated imported widget; and

means responsive to the determining that the page element is included in the associated imported widget to (i) create a runtime environment isolated from the web composite page, (ii) run the contents of the associated imported widget in the runtime environment; and

(iii) find out the UI style definition referred to by the page element in the associated imported widget according to the running results.

13. The apparatus of claim 11, wherein the determining module further comprises:

means for finding out, from the local page, the UI style definition referred to by the page element in the local page, in response to determining that there is no imported widget associated with the page element in the web composite page, or in response to determining that the page element is not included in the associated imported widget.

14. The apparatus of claim 11, wherein the runtime environment isolated from the web composite page is a hidden web page container element having a DOM structure separate from the web composite page, and the running results are a DOM structure loaded with the contents of the associated imported widget.

15. The apparatus of claim 11, wherein the means for asynchronously acquiring the contents of the associated imported widget based on the URL is for asynchronously obtaining the contents of the associated imported widget based on the URS through AJAX.

16. The apparatus of claim 10, wherein the relating module comprises any one of the following means:

means for modifying the name of the corresponding UI style definition into a unique name and making the page element refer to the unique name; and

means for re-calculating the corresponding UI style definition into an inline UI style definition of the page element.

17. The apparatus of claim 10, wherein the UI style definition is a CSS style definition.

18. The apparatus of claim 10, wherein the apparatus is implemented by a script in the web composite page or a web browser plug-in.