Methods and apparatus for grammar-based recognition of user-interface objects in HTML applications

REFERENCE TO RELATED APPLICATION

[0001] This application claims the benefit of priority of U.S. Ser. No. 60/258,081, filed on Dec. 22,2000, entitled “METHODS AND APPARATUS FOR GRAMMAR-BASED RECOGNITION OF USER-INTERFACE OBJECTS IN HTML APPLICATIONS,” the teachings of which are incorporated herein by reference.

BACKGROUND OF THE INVENTION

[0002] The invention pertains to computer graphical user interface software and, particularly, to the automated recognition of objects presented by such interfaces. The invention has application (by way of non-limiting example) in training aids, accessibility aids, and quality assurance for stand-alone software applications, as well as for Internet- and other computer network-based software applications.

[0003] Though the computer was invented over forty years ago, use of the ubiquitous device remains a challenge for most people. Bound paper manuals gave way to online help as the computer went mainstream in the early 1980's. Software publishers have since struggled to make context-sensitive help screens that are comprehensive yet simple, thereby meeting the demands of novices and seasoned users alike.

[0004] On another front, software publishers must continually check their releases to assure that program displays are complete and consistent, particularly, where user input or response is required. Only through such quality assurance can the publishers be confident that their software will be understood by users.

[0005] Responding to the needs of sight-impaired users presents a host of additional problems. Basic program screens and help displays may need to be magnified, visually revamped or played in audio. The size of the quality assurance task may, consequently, double.

[0006] These problems are further compounded by the decreased use of stand-alone applications and the corresponding increased reliance on remote applications that “execute” via users' web browsers. Solutions to many of the aforementioned problems applicable to local applications often prove inapplicable to remotely executed ones.

[0007] An object of this invention is to provide improved methods and apparatus for use of graphical user interfaces.

[0008] A more particular object is to provide such methods and apparatus as can be used with software training aids, accessibility aids, and quality assurance for Internet- and other computer network-based software applications, as well as for stand-alone local software applications.

[0009] A still further object is to provide such methods and apparatus as can be used with software applications that utilize HTML-based and other markup language-based graphical user interfaces.

[0010] A related object is to provide such methods as can be readily implemented at low-cost, and without consumption of undue processor or memory resources and with adequate performance.

SUMMARY OF THE INVENTION

[0011] The foregoing are among the objects attained by the invention, which provides methods and apparatus for grammar-based recognition of graphical user interface (UI) objects in an application executing on a web browser. This is achieved, according to one aspect of the invention, by parsing the application's underlying HTML (or other markup language) stream or document object model (DOM) in view of an application-specific grammar. Methods according to the invention can identify UI objects such as user input or selection fields, hyperlinlcs, and so forth, as well as properties of those objects, such as identifiers, content, shapes, locations, etc. Except where otherwise necessitated by context, the term UI object refers to objects, their identifiers and/or descriptors.

[0012] In a related aspect, the invention provides methods as described above that include scanning the HTML stream or DOM to identify tokens. These are parsed, based on the predefined grammar, to distinguish among UI objects as distinct from textual titles, metatags, unprintable HTML, in-line pictures and other “nonobjects.” By way of nonlimiting example, a system operating in accord with this aspect of the invention can be used to recognize customer name, home address, and other input fields (as well their content) displayed by a web browser (such as Microsoft Internet Explorer) while “pointing at” an Internet auction site web page. To this end, the system accesses the DOM created by the browser from the HTML stream representing that page. It identifies the aforementioned input fields by interpreting tokens discerned from the DOM in view of a grammar previously defined for that given application. Information regarding the position and content of those fields can be output, e.g., to a context-based “help” utility, or otherwise. Thus, by way of nonlimiting example, that information can be used in a system of the type modeled after the OnDemand Personal Navigator training system, commercially available from the assignee hereof.

[0013] Further aspects of the invention provide methods as described above that include scanning the DOM hierarchy maintained in a browser in response to an HTML stream, and creating a sequence of tokens for each DOM element. This can include grouping sequences of HTML DOM attributes into units (tokens) to create a mapping between the DOM elements and the tokens.

[0014] Further aspects of the invention provide methods as described above in which the tokens are parsed to find the HTML document structure as described by its predefined grammar. This can include grouping the tokens into syntactic structures that identify items displayed in the HTML application. Continuing the example above, the identified structures can be the customer name, home address and other input fields of the auction page.

[0015] Related aspects of the invention provide methods as discussed above, in which the parsing step includes searching for patterns of similarly formatted HTML elements, such as classnames, font size, style, tag color, and size. The parsing step then generates a list of UI objects that represents the displayed items.

[0016] In another aspect, the invention provides methods as discussed above that include determining the URLs (or portions thereof) underlying the HTML pages displayed by the browser. Those URLs (or portions) are used to facilitate identifying and distinguishing among UI objects contained on those pages.

[0017] Further aspects of the invention provide methods for generating programming instructions or other code embodying the foregoing. Such methods can include creating a source input file containing the aforementioned grammar, e.g., which can serve as an input to an automated parser generator tool.

[0018] Yet still further aspects of the invention provide methods as described above for use with markup languages other than HTML, such as XHTML and XUL, by way of non-limiting example.

[0019] Further aspects of the invention provide digital data processing systems operating in accord with the above-described method.

[0020] Still further aspects of the invention provide systems paralleling the operation described above. These and other aspects of the invention are evident in the drawings, description, and claims that follow.

BRIEF DESCRIPTION OF THE DRAWINGS

[0021] A more complete understanding of the invention may be attained by reference to the drawings, in which:

[0022]FIG. 1 depicts the architecture of a digital data processing system that utilizes a grammar-based user interface object recognition system according to the invention;

[0023]FIG. 2 is a flow chart that depicts generating a computer program according to the invention;

[0024]FIG. 3 is a flow chart that depicts the operation of the generated program of FIG. 2;

[0025]FIG. 4 depicts the generation and operation of a program according to the invention using YACC to generate C++ code for the generated program;

[0026]FIG. 5 is a graphical representation of the generated program as a stand-alone module that accepts HTML DOM and outputs user interface objects;

[0027]FIG. 6 is a graphical representation of further workings of the generated computer program, including the scanner module, parser module and object creation;

[0028]FIG. 7 depicts a screenshot of a hypothetical HTML application.

DETAILED DESCRIPTION

[0029] The present invention provides methods and systems for recognizing user interface objects in HTML applications, as well as for creating computer programs that comprise those methods and systems. Computer programs built using the disclosed method accept HTML Document Object Model (DOM) structures as input and provide a list of user interface (UI) objects as output. Alternative methods utilize HTML streams in lieu of, or in addition to, the HTML DOM. Regardless, the approach to UI object recognition is grammar-based.

[0030] At the outset, it will be appreciated that DOM is a platform-neutral and language-neutral interface that allows computer programs and scripts to dynamically access and update the content, structure and style of web documents. DOM is a World Wide Web Consortium (W3C) recommended specification. Internet Explorer, Netscape Navigator and all other DOM-compliant browsers implement the interfaces and functions defined by the DOM specification so that programs and scripts can access and update the HTML content loaded into the browser. When the browser loads an HTML document, it creates an internal runtime representation of it. Methods and systems according to the invention capitalize on the DOM interfaces exposed by the browsers, to access this runtime representation of the HTML document.

[0031] The content and structure of the DOM is similar to the original HTML. Thus, the DOM is a hierarchical structure of the HTML tags (called HTML elements in DOM terminology) listing all the HTML attributes. In this light, though the illustrated embodiment processes the current state of the HTML document by accessing the document's runtime representation, alternative embodiments may process the HTML stream directly. The context of a displayed page, e.g., as indicated by URL, is also utilized to facilitate applying grammar interpretation. Applications that do not provide this distinguishing characteristic require empirical examination to identify other distinguishing features that determine context.

[0032] Those skilled in the art will understand that accessing the runtime state of the document through DOM, and not its HTML source, has certain advantages. First, certain properties of documents are only available when they are displayed by a specific browser. Examples of such properties include, the exact and current screen position of rendered elements, the current state of a check box, the current content of an edit field, etc. Second, documents are also dynamic structurally, that is, they can be changed by script interfaces such as JavaScript and VBScript that are embedded in the HTML text. This allows new HTML tags to be inserted, existing tags to be modified or removed as the scripts respond to user interactions.

[0033] In view of the foregoing, FIG. 1 depicts an environment <b>10</b> in which the invention can be utilized. A digital data processor <b>16</b> “serves” HTML applications over a network <b>14</b>. This can be an intranet, extranet, Internet or other network that supports HTML applications. Web browsers executing on client digital data processors <b>12</b> and <b>18</b> process HTML streams received from the server <b>16</b> to display text, pictures, video, hyperlinks and other output, while accepting text, user selections and other input, all in the conventional manner. In the illustrated embodiment, scanner module <b>22</b>, parser <b>24</b> and other functionality executing on or in connection with the client devices <b>12</b>, <b>18</b> (or, optionally, in connection with the server <b>16</b>) access the HTML DOM structure to identify UI objects displayed by the browsers executing on those respective devices.

[0034] To this end, illustrated scanner module <b>22</b> traverses the DOM and creates one or more tokens for each element encountered. The process involves grouping sequences of attributes from the HTML DOM into units (tokens) to create a mapping between the DOM elements and the tokens. The generated tokens, which represent the DOM elements, are then passed to the parser <b>24</b>.

[0035] The tokenized input is interpreted by the parser <b>24</b> according to an application specific grammar, to identify and distinguish among the various portions of the application's display. For example, recognizing interactive objects as distinct from textual titles, metatags, unprintable HTML, in-line pictures, etc. The parser can achieve this by grouping the tokens into syntactic structures that identify items displayed in the HTML application. The parser <b>24</b> then outputs user interface objects <b>26</b> that correspond to graphical elements and other items displayed by the browser.

[0036]FIG. 2 is a flow chart <b>28</b> that depicts various steps for implementing this exemplary embodiment of the method of the invention. In step <b>30</b>, the DOM of a specific application is analyzed and an application-specific grammar is defined. It is important to note that the defined grammar is not a generic grammar for all HTML DOM applications, rather, the defined grammar is specific to a particular application only.

[0037] Web designers usually reveal something about their web pages by using style-sheets and attaching style-classes to HTML tags. Such items are useful in defining the grammar of a specific application. Style-names are usually based on the purpose of the HTML tags, because the reason for using style-sheets is to ensure a common look-and-feel of web pages.

[0038] For example, a generic SPAN tag, which is used to create a button-like user interface element on the browser, might be given a certain classname by specifying the class attribute for the SPAN tag to ensure that all buttons look the same. This gives a very useful hint about the use of the specific HTML tag. If something like &lt;SPAN CLASS=button&gt;is identified during traversal of the DOM hierarchy, then this construct would be identified as a button-like user interface element on the browser.

[0039] The grammar can be defined for a particular application based on this and similar information. If the particular application does not utilize style-sheets, the DOM hierarchy is parsed searching for patterns of similarly formatted HTML elements such as font size, style, tag color, size, etc.

[0040] There is a close correlation between the look and intended use of HTML tags. The task is to distinguish between the various user interface elements on the browser by filtering, joining, and classifying HTML tags into user interface objects. Web designers do the same task in the opposite direction. They have certain user interface objects that they turn into HTML tags. They might choose to use cascading style-sheets for this purpose or they might format HTML tags individually.

[0041] The end result is the same, user interface objects of a certain class will produce a recurring pattern of HTML tags in the document. The method of the invention can be used to build a parser that recognizes these patterns based on style-sheet classes or patterns of similarly formatted HTML elements.

[0042] In step <b>32</b>, a source file is created for the well known parser generator, Yet Another Compiler-Compiler (YACC), though practice of the invention is not so limited. Those skilled in the art are fully aware that parsers can be hand-programmed or built with other commonly available tools. YACC produces a parser which is a C/C++ program. This C/C++ program can be compiled and linked with other source code modules, including scanner and DOM traversal modules.

[0043] The YACC input source file contains an application specific grammar together with C++ statements for outputting UI objects. Those of ordinary skill in the art are very familiar with the workings and notation of YACC, however the following peripheral coverage may be useful. The definitions section of the source file can contain the typical things found at the top of a C program: constant definitions, structure declarations, include statements, and user variable definitions. Tokens may also be defined in this section.

[0044] The rules section of the YACC source file contains the application-specific grammar. The left-hand side is separated from the right-hand side by a colon. The actions may appear interspersed in the right-hand side; this means they will be executed when all the tokens or nonterminals to the action's left are shifted. If the action occurs after a production, it will be invoked when a reduction of the right-hand side to the left-hand side of a production is made.

[0045] The following is a non-limiting example of a parser built for a hypothetical HTML application. FIG. 7 depicts a screenshot of the application. Presented below are the underlying HTML source, and an annotated YACC source file excerpt with C++ action code. HTML source The following HTML source does not contain scripting code or form support as those elements of the HTML application are irrelevant for the purposes of demonstration. <img file="US20030192026A1-20031009-P00001.TIF" id="EMI-00001" img-format="tif" img-content="ui" /><img file="US20030192026A1-20031009-P00002.TIF" id="EMI-00002" img-format="tif" img-content="ui" /><img file="US20030192026A1-20031009-P00003.TIF" id="EMI-00003" img-format="tif" img-content="ui" /><img file="US20030192026A1-20031009-P00004.TIF" id="EMI-00004" img-format="tif" img-content="ui" /><img file="US20030192026A1-20031009-P00005.TIF" id="EMI-00005" img-format="tif" img-content="ui" /><img file="US20030192026A1-20031009-P00006.TIF" id="EMI-00006" img-format="tif" img-content="ui" /><img file="US20030192026A1-20031009-P00007.TIF" id="EMI-00007" img-format="tif" img-content="ui" /><img file="US20030192026A1-20031009-P00008.TIF" id="EMI-00008" img-format="tif" img-content="ui" /><img file="US20030192026A1-20031009-P00009.TIF" id="EMI-00009" img-format="tif" img-content="ui" /><img file="US20030192026A1-20031009-P00010.TIF" id="EMI-00010" img-format="tif" img-content="ui" /><img file="US20030192026A1-20031009-P00011.TIF" id="EMI-00011" img-format="tif" img-content="ui" /><img file="US20030192026A1-20031009-P00012.TIF" id="EMI-00012" img-format="tif" img-content="ui" /><img file="US20030192026A1-20031009-P00013.TIF" id="EMI-00013" img-format="tif" img-content="ui" /><img file="US20030192026A1-20031009-P00014.TIF" id="EMI-00014" img-format="tif" img-content="ui" /><img file="US20030192026A1-20031009-P00015.TIF" id="EMI-00015" img-format="tif" img-content="ui" /><img file="US20030192026A1-20031009-P00016.TIF" id="EMI-00016" img-format="tif" img-content="ui" /><img file="US20030192026A1-20031009-P00017.TIF" id="EMI-00017" img-format="tif" img-content="ui" /><img file="US20030192026A1-20031009-P00018.TIF" id="EMI-00018" img-format="tif" img-content="ui" />

[0046] Referring again to FIG. 2, in step <b>34</b>, YACC is run with its input source file to generate C++source code. The code generated by YACC can be altered before compiling and executing. The parser produced by YACC is a LALR(1) parser. A LR(1) parser can also be used instead. In these regards, those skilled in the art will appreciate that an LR(1)/LALR(1) grammar is the preferred, because it supports processing of an input stream in one pass. This characteristic results in increased performance (high speed), e.g., of the type necessary for use with a real-time application. YACC is an acceptable tool for use herein because it readily supports LR(1)/LALR(1) grammars.

[0047] In step <b>36</b>, the YACC generated code is combined with the C++ code implementing the other remaining functionality (scanner module, DOM traversal module, etc.) and compiled with a C++ compiler. The resulting program, depicted by step <b>38</b>, accepts HTML DOM as input and produces a list of UI objects as output that correspond to items and graphical elements displayed in the browser. In an ideal embodiment the generated program is a browser applicable Dynamically Linked Library (DLL).

[0048]FIG. 3 illustrates a flow chart <b>40</b> that depicts the various steps of the generated program's operation. In step <b>42</b>, the program accesses the HTML DOM in a web browser and serializes the tree of DOM elements by traversing the DOM hierarchy. The method of gaining access to the DOM may differ among web browsers. Therefore, the traversal code may need to be implemented somewhat differently depending on the browser being used.

[0049] An example that illustrates the above point is the accessing of DOM in the Microsoft Internet Explorer browser. Internet Explorer uses a component object model (COM) based implementation of DOM. By gaining access to the browser's COM interface the invention gains access to the DOM of the currently loaded document. Access to the browser's COM interface is gained by loading a so-called browser helper object into the browser. This is a fine point and is not a limitation of the invention. Those skilled in the art are aware that it is certainly possible to gain access and traverse DOM because of its standardized architecture. The result of the DOM traversal is a sequence of DOM elements with the capability to access the various properties of each element e.g. HTML attributes.

[0050] The HTML DOM elements are then processed. In step <b>44</b>, the program creates one or more tokens for each DOM element. These tokens are used to represent the DOM elements in the parser. The tokens are created by the scanner depicted in FIG. 1 as item <b>22</b>, and in FIG. 6 as item <b>72</b>. Compared to the task of compiling programming languages this is the step of lexical analysis.

[0051] A sequence of tokens is created for each DOM element processed, because the aim of the program is to create logical UI objects out of DOM elements. In general, one token is generated for each DOM element and additional tokens are generated before every first and after every last child of a DOM element. It is possible, although usually not necessary, to create multiple tokens for certain DOM elements. The amount of information that goes into every token is application-dependent. In the case of HTML/CSS-based applications, it is a good starting point to have a unique token per HTML element and the element's classname.

[0052] In step <b>46</b>, the program parses the tokenized input according to the application-specific grammar. Bottom-up left-to-right syntactical analysis is used. Because of the run-time sensitivity of the problem, a LR(<b>1</b>) or preferably LALR(<b>1</b>) parser is built as discussed above.

[0053] Finally, as depicted in step <b>48</b>, the program outputs a list of UI objects that correspond to graphical elements displayed in the browser. It should be noted that the generated program is a stand-alone module that simply inputs HTML DOM and outputs a list of UI objects.

[0054]FIG. 4 is a graphical representation <b>50</b> of the overall process. An input file containing an application-specific grammar and source code for outputting UI objects is input into YACC <b>52</b>. A C++ source code module <b>54</b> is then generated. Alternatively, the source code for outputting UI objects can be added to the YACC output file <b>54</b> instead of including it in the input file containing the grammar. Additional code modules <b>56</b>, such as a scanner module or DOM traversal module can then be compiled <b>58</b> with the YACC output file <b>54</b> to generate the program <b>60</b>. In a preferred embodiment the executable program <b>60</b> is a DLL. As shown in FIG. 4, the executable program <b>60</b> accepts HTML DOM and generates UI objects <b>62</b> that correspond to graphical elements in the browser display.

[0055]FIG. 5 is a graphical representation <b>64</b> of the executable program <b>66</b> as a stand-alone module, which parses a specific HTML DOM and generates UI objects <b>68</b>. Examples of user interface object properties include: name, content, shape, location, and properties. The invention can be used with software training aids, accessibility aids, and quality assurance for stand-alone, Internet or other computer network-based software applications.

[0056]FIG. 6 depicts a graphical representation <b>70</b> of the inner workings of the generated program. The scanner module <b>72</b> accesses the HTML DOM and generates tokens for each DOM element that is encountered. These tokens are passed to the parser <b>74</b>, which then interprets the tokenized input in accordance with the application specific grammar, and generates UI objects <b>76</b> that correspond to graphical elements displayed in the browser. In the illustrated embodiment, the application-specific grammar is already pre-defined and “on-board” the parser. However, those skilled in the art will appreciate that the parser can be reconfigured at run-time to reflect at least some changes in the grammar (e.g., using permutations of pre-loaded code snippets).

[0057] Illustrated below are C++ code samples that depict the tokens and corresponding HTML elements of a particular application. This code belongs to the scanner <b>72</b> part of the system <b>70</b>. In the list of definitions there is a parser token on the left side associated with a HTML tag name and “classname” on the right side. This mapping is arbitrary and application-specific. <tables id="TABLE-US-00001" num="1"><table frame="none" colsep="0" rowsep="0"><tgroup align="left" colsep="0" rowsep="0" cols="2"><colspec colname="OFFSET" colwidth="14PT" align="left" /><colspec colname="1" colwidth="203PT" align="left" /><thead><row><entry /><entry /></row><row><entry /><entry namest="OFFSET" nameend="1" align="center" rowsep="1" /></row></thead><tbody valign="top"><row><entry /><entry>const CTokenData HTML_TOKENDATA[] = {</entry></row></tbody></tgroup><tgroup align="left" colsep="0" rowsep="0" cols="2"><colspec colname="OFFSET" colwidth="28PT" align="left" /><colspec colname="1" colwidth="189PT" align="left" /><tbody valign="top"><row><entry /><entry>{ A, L“A#” },</entry></row><row><entry /><entry>{ BODY_UIBODY, L“BODY#uibody” },</entry></row><row><entry /><entry>{ IMG, L“IMG#” },</entry></row><row><entry /><entry>{INPUT_button, L“INPUT_button#”},</entry></row><row><entry /><entry>{ INPUT_checkbox, L“INPUT_checkbox#”},</entry></row><row><entry /><entry>{ INPUT_radio, L“INPUT_radio#”},</entry></row><row><entry /><entry>{ INPUT_text, L“INPUT_text#” },</entry></row><row><entry /><entry>{ SELECT_UICOMBO, L“SELECT#uicombo” },</entry></row><row><entry /><entry>{ SELECT_UILISTBOX, L“SELECT#uilistbox” }</entry></row><row><entry /><entry>{ SPAN, L“SPAN#” },</entry></row><row><entry /><entry>{ SPAN_UILABEL, L“SPAN#uilabel” },</entry></row><row><entry /><entry>{ TD, L“TD#” },</entry></row><row><entry /><entry>{ TD_UIBTN, L“TD#uibtn” },</entry></row><row><entry /><entry>{ TD_UIBTNTXT, L“TD#uibtntxt” },</entry></row><row><entry /><entry>{ TD_UIMENUBAR, L“TD#uimenubar” 56 ,</entry></row><row><entry /><entry>{ TD_UIMENUITEM, L“TD#uimenuitem” },</entry></row><row><entry /><entry>{ TD_UITOOLBAR, L“TD#uitoolbar” },</entry></row><row><entry /><entry>{ TD_UIPANEL, L“TD#uipanel” }</entry></row></tbody></tgroup><tgroup align="left" colsep="0" rowsep="0" cols="2"><colspec colname="OFFSET" colwidth="14PT" align="left" /><colspec colname="1" colwidth="203PT" align="left" /><tbody valign="top"><row><entry /><entry>};</entry></row><row><entry /><entry namest="OFFSET" nameend="1" align="center" rowsep="1" /></row></tbody></tgroup></table></tables>

[0058] The above embodiments are presented for illustrative purposes only. Those skilled in the art will appreciate that various modifications can be made to these embodiments without departing from the scope of the present invention. For example, hand-programmed parsers or parser generators other than YACC can be utilized and implemented by a system of the invention. By way of further example, the methods and systems according to the invention can be used to process HTML in contexts other than Internet-based, and client-server network applications. Thus, for example, they can be used to interpret UI objects displayed by a browser executing from an HTML file stored directly within a client device, e.g. a stand-alone HTML-based application. By way of further example, the invention can be used with mark-up languages other than HTML, e.g., XHTML, XUL.