Technique that enhances the manipulation of an HTML tree presentation by using an array representation of the hierarchical path of a tree node

The present invention discloses a method for manipulating the presentation of an AJAX tree using an array representing the hierarchical path of a tree node. Such a method can begin with the receipt of a user-request to expand a selected tree node of an AJAX tree in a Web page. Next, it can be determined if the tree node is present in the existing path array. When the tree node is present in the existing path array, the existing path array can be modified for the selected tree node. A new path array can be requested from the AJAX engine when the tree node does not exist in the existing path array. A path array handler can be invoked to expand the AJAX tree using the existing path array.

BACKGROUND

Field of the Invention

The present invention relates to the field of Web page data presentation and, more particularly, to using an array representation of the hierarchical path of a tree node to enhance the manipulation of an HTML tree (e.g., an AJAX tree) in a Web page.

Description of the Related Art

The use of Asynchronous JavaScript and XML (AJAX) within Web pages and applications is increasing in popularity. AJAX allows for Web page content to be loaded and updated seamlessly without reloading the entire Web page. For example, a Web page can use AJAX to verify credit card information entered into a Web form before the user hits the submit button.

A popular use of AJAX is for presenting data in a tree structure. An AJAX tree allows for the incremental loading of the tree data into the Web page. For example, only the tree branch selected by a user for expansion is loaded into the Web page, not all branches of the tree. This approach provides a quick response for user interactions, increasing user satisfaction and usability.

Conventional implementations of AJAX trees use arrays of objects or text strings to represent the path of a user-selected tree node for expansion. However, these approaches require the request of a new object array or text string for every user-selected tree node, even if the selected tree node is contained within the path of the previously-selected tree node.

Further, these data structures require handlers for processing that addresses its special format, which often cannot be used with other implementations of AJAX trees. For example, Text String Parser A can only work with text strings from AJAX Engine A, which uses the same set of rules as Parser A, which can be incompatible with an AJAX Engine B.

What is needed is a general technique that enhances the manipulation of AJAX trees. That is, the technique would utilize an array data structure to define the path hierarchy of a user-selected tree node. Ideally, such a technique would extend the capabilities of existing AJAX tree implementations.

SUMMARY OF THE INVENTION

The present invention discloses a technique for manipulating the presentation of an HTML tree (e.g., AJAX tree) using an array representing the hierarchical path of a tree node. This technique can represent the hierarchical ancestry of a tree node in a path array data structure. The path array can be searched and modified to alter the presentation of the AJAX tree without having to send additional requests to the AJAX engine. The path can also be stored to save the current expanded state of the AJAX tree to accommodate the use of Web page navigation controls.

The present invention can be implemented in accordance with numerous aspects consistent with material presented herein. For example, one aspect of the present invention can include a method for manipulating the presentation of an AJAX tree using an array representing the hierarchical path of a tree node. Such a method can begin with the receipt of a user-request to expand a selected tree node of an AJAX tree in a Web page. Next, it can be determined if the tree node is present in the existing path array. When the tree node is present in the existing path array, the existing path array can be modified for the selected tree node. A new path array can be requested from the AJAX engine when the tree node does not exist in the existing path array. A path array handler can be invoked to expand the AJAX tree using the existing path array.

Another aspect of the present invention can include a system that enhances the manipulation of an AJAX tree presentation using an array to represent the hierarchical path of a tree node. Such a system can include an AJAX tree, an AJAX engine, and a path array handler. The AJAX engine can be configured to provide a path array for a user-selected tree node of the AJAX tree. The path array can contain data elements that represent the hierarchy of tree nodes for the user-selected node in the AJAX tree. The path array handler can be configured to process the path array to alter the presentation of the AJAX tree.

Still another aspect of the present invention can include a Web page that utilizes an array representation of a user-selected tree node to manipulate the presentation of an AJAX tree. Such a Web page can include a path array and a path array handler. The path array can be configured to contain data elements that represent a hierarchical order of tree nodes for a presented AJAX tree. In the path array, the first data element can correspond to the root node of the AJAX tree and the last data element can correspond to the user-selected tree node. The path array handler can be configured to process the data elements of the path array to alter the presentation of the AJAX tree in the Web page.

It should be noted that various aspects of the invention can be implemented as a program for controlling computing equipment to implement the functions described herein, or a program for enabling computing equipment to perform processes corresponding to the steps disclosed herein. This program may be provided by storing the program in a magnetic disk, an optical disk, a semiconductor memory, any other recording medium, or can also be provided as a digitally encoded signal conveyed via a carrier wave. The described program can be a single program or can be implemented as multiple subprograms, each of which interact within a single computing device or interact in a distributed fashion across a network space.

DETAILED DESCRIPTION OF THE INVENTION

FIG. 1is a schematic diagram of a system100that utilizes an array150to enhance the manipulation of an HTML (AJAX) tree120in accordance with embodiments of the inventive arrangements disclosed herein. The HTML tree can be a software artifact used in conjunction with a data processing model, which allows tree content to be loaded and updated seamlessly without reloading an entire page. A currently popular HTML tree implementation in this context is an AJAX tree written in JAVA SCRIPT that implements an AJAX data processing model. Throughout the summary, drawings, and detailed description the term “AJAX tree” is used in a generic or implementation agnostic sense to represent any HTML tree that utilizes a hierarchical tree structure of Web content for Web pages. The disclosed invention is not to be construed as limited to AJAX specifics, but can apply to HTML trees implemented in any programming language, whether JAVA based or not.

In system100, a user105can select a node of the AJAX tree120for expansion. The Web page115containing the AJAX tree120can request127the path array150for the selected tree node from a Web server130via network160. A user105can access a Web page115using client110. Client110can represent a variety of computing devices capable of presenting a Web page115and communicating with a Web server130over a network160. The Web page115can include an AJAX tree120and a path array handler125.

The AJAX tree120can be a presentation of tree data145in a tree structure within a Web page115utilizing the AJAX Web development technique. The user105can perform a variety of predefined actions upon the nodes of the AJAX tree120. When the user105elects to expand a node of the AJAX tree120, the Web page115can generate a path array request127for the selected node.

The request127can be conveyed to an associated Web server130over a network160. The Web server130can be a computing device configured to handle a variety of requests from Web pages115. The Web server130can include an AJAX engine135and a data store140containing tree data145.

The AJAX engine135can be a software component of the Web server130that handles AJAX communications, such as the path array request127. The AJAX engine130can include a path array generator137. The path array generator137can be a software component of the AJAX engine135that creates a path array150from corresponding tree data145for a specific path array request150. The AJAX tree data145can represent the standard data files used to define an AJAX tree120.

In an alternate embodiment, the path array generator137can be a component of the Web server130that processes the output of the AJAX engine135to convert the output into a path array150.

The generated path array150can be a data structure configured to define the hierarchical path of the user-selected tree node. The path array150can be configured such that the first element of the array150corresponds to the root node of the AJAX tree120and the last element of the array150corresponds to the user-selected tree node. Any elements contained between the first and last elements of the path array150can correspond to nodes of the AJAX tree120that are hierarchically related to the user-selected node. That is, additional nodes of the AJAX tree120that must be expanded in order to expose the user-selected node.

It should be noted that the hierarchy expressed within the path array150can be searched and manipulated. For example, with this approach, collapsing the last expanded node can be achieved without requesting a new path array150. In this case, the last element of the path array150can be removed and the AJAX tree120redrawn using the modified path array150. Thus, the response and interaction of the AJAX tree120is enhanced.

When the Web page115receives the path array150, the path array handler125can be invoked. The path array handler125can represent a software component invoked by the Web page115to manipulate the presented AJAX tree120according to the contents of the path array150. The path array handler125can process the path array150to determine which nodes of the AJAX tree120are to be presented in an expanded state.

Because the data of the AJAX tree120is modified asynchronously to the other contents of the Web page115, issues can arise when a user105uses the navigation controls of the Web page115. For example, when the user105uses the BACK button of the browser, the previously-viewed Web page115will be loaded, but the display of the AJAX tree120can be reset to its original state, since its state changes independently of the Web page115.

The present invention can be used to address this known issue. The path array150can be stored when the loaded Web page115changes. The stored path array150can be accessed and used to recreate the AJAX tree120, if needed. The path array150can be stored in a cookie (not shown) on the client110or within a HyperText Transfer Protocol (HTTP) session variable (not shown) on the Web server130.

As used herein, presented data store, including store140, can be a physical or virtual storage space configured to store digital information. Data store140can be physically implemented within any type of hardware including, but not limited to, a magnetic disk, an optical disk, a semiconductor memory, a digitally encoded plastic memory, a holographic memory, or any other recording medium. The data store140can be a stand-alone storage unit as well as a storage unit formed from a plurality of physical devices. Additionally, information can be stored within data store140in a variety of manners. For example, information can be stored within a database structure or can be stored within one or more files of a file storage system, where each file may or may not be indexed for information searching purposes. Further, data store140can utilize one or more encryption mechanisms to protect stored information from unauthorized access.

Network160can include any hardware/software/and firmware necessary to convey data encoded within carrier waves. Data can be contained within analog or digital signals and conveyed though data or voice channels. Network160can include local components and data pathways necessary for communications to be exchanged among computing device components and between integrated device components and peripheral devices. Network160can also include network equipment, such as routers, data lines, hubs, and intermediary servers which together form a data network, such as the Internet. Network160can also include circuit-based communication components and mobile communication components, such as telephony switches, modems, cellular communication towers, and the like. Network160can include line based and/or wireless communication pathways.

FIG. 2is an illustration200of depicting the relationship between an AJAX tree presentation205and a path array215in accordance with an embodiment of the inventive arrangements disclosed herein. The samples205and215of the illustration200can be utilized by system100or any other system that uses an array representation of the hierarchical path of a tree node in an AJAX tree. It should be noted that the samples205and215shown in illustration200are for illustrative purposes only and are not meant as absolute limitations or interpretations of the present invention.

In this example, the sample AJAX tree presentation205can display data about Company A in an interactive tree structure. For the sake of illustration, a user elects to expand the “Phone” node210of the tree. The sample path array215can represent the array data structure returned by the AJAX engine containing the hierarchical path for the user-selected tree node.

The path array215can include an index number220and an associated value225. The index number220, as with a typical array data structure, can represent an ordering value of the array elements. It should be noted that the array indexing schema is dependent on the programming language used. This example uses a zero-based indexing schema.

The value225can identify a tree node. The value225can be related to an attribute that uniquely identifies the tree node, such as a node ID. In this example, the array element with an index220of zero and value225of “Root_Node” corresponds to the node in the tree presentation205with the label “Company A”, which is the root node of the AJAX tree.

The array element with an index220of one and value225of “IT_Node” corresponds to the node in the tree presentation205with the label “IT”. This node is a child node of the root node and the parent node of the selected node210. The array element with an index220of two and value225of “Phone_Node” corresponds to the user-selected node210in the tree presentation205with the label “Phones”.

Therefore, the ancestry of the selected node210is can be described by the path array215. Further, the path array215can convey which tree nodes need to be expanded in order to reach the selected node210.

FIG. 3is a sample path array handler300for using an array representing the hierarchical path of a tree node to manipulate an AJAX tree in accordance with an embodiment of the inventive arrangements disclosed herein. The sample path array handler300can be performed within the context of system100. It should be noted that the code305-355of the sample path array handler300is for illustrative purposes only and is not meant as an absolute implementation of the present invention. As such, the sample path array handler300in this example uses commands provided in the DOJO framework.

The sample path array handler300can contain software code305-355that can be executed in order to process a received path array, resulting in the alteration of an AJAX tree presentation. Line305can contain a declaration of the path array handler300. In this example, the name of the path array handler300is “expandByPath”. The path array handler300can require input parameters307corresponding to the path array and an index number.

In line310, a local variable can be declared and initialized to contain a copy of the current AJAX tree. Line315can determine if the index number parameter is for the root node of the AJAX tree. In line320, it can be determined if the path array contains a data element at an index number one increment higher than the index number parameter.

When a data element exists at this index number, then line325can be executed where a deferred variable can be declared and initialized to contain the portion of the AJAX tree expanded at the node identified by the name or value contained within path array at the index value equal to the received parameter307. In line330, a recursive call to the path array handler300can be made to expand the AJAX tree for the next node in the path array. Therefore, the path array handler300can continue to walk through the hierarchy defined by the path array to expand each node in the ancestry of the selected node, including the selected node.

It should be noted that any children nodes of the selected node will not be expanded because the selected node is the last element of the path array. This means that a data element cannot exist in the path array beyond the index number of the selected node. Therefore, line320will evaluate as FALSE and line325cannot execute, which would expand the children nodes of the selected node.

When line320evaluates as FALSE, line335can be executed, which initiates the ELSE clause of the IF-THEN-ELSE control structure. Line340can determine if a node of the AJAX tree is selected. In line345, a variable can be declared and initialized to contain the selected tree node. If the node exists as evaluated in line350, then line355executes where the last element of the path array is reselected in the AJAX tree.

The functionality of the path array handler300can be illustrated by an example using the illustration200ofFIG. 2. For illustrative purposes, let us begin with a function call to the path array handler300of “expandByPath (path, 0)”, using the sample path array215and a starting index220of zero.

Line310executes, creating a copy of the AJAX tree in the variable “_this”. Line315evaluates as TRUE, since negative zero times zero is equal to zero. Line320also evaluates as TRUE, since a data element exists in the path array215with an index220of one.

Line325executes, creating a deferred variable expands the “Root_Node”, index 0, of the AJAX tree. Line330executes, calling the path array handler300and passing it the path array215and an index value of one.

Line310executes again, creating a copy of the AJAX tree with the “Root_Node” expanded in the variable “_this”. Line315evaluates as FALSE, since negative one times one is not equal to zero. Line320evaluates as TRUE, since a data element exists in the path array215with an index220of two.

Line325executes, creating a deferred variable that expands the “IT_Node”, index one, of the AJAX tree. Now, the AJAX tree has the nodes labeled “Company A” and “IT” expanded. Line330executes, calling the path array handler300again and passing it the path array215and an index value of two.

Line310executes again, creating a copy of the AJAX tree with both the “Root_Node” and the “IT_Node” expanded in the variable “_this”. Line315evaluates as FALSE, since negative two times two is not equal to zero. Line320evaluates as FALSE, since a data element does not exist in the path array215with an index220of three.

The ELSE clause executes, starting with line335. Line340evaluates as TRUE, since it was assumed that the user selected this node to expand. Line345executes, creating the variable “ts” and initializing it with the tree node corresponding to the selector, which is the “Phone_Node”.

Line350evaluates as true, since the “Phone_Node” exists. Line355executes reselecting the tree node that corresponds to the last element of the path array215, which is the “Phone_Node”. Therefore, the node of the AJAX tree labeled “Phones” is selected.

Each recursive call ends, resulting in an AJAX tree in the variable “_this” that looks like the AJAX tree presentation205ofFIG. 2. The created tree can then be passed to additional functions for additional processing and presentation within in the Web page.

FIG. 4is a flow chart of a method400for using an array representing the hierarchical path of a tree node to manipulate an AJAX tree in accordance with an embodiment of the inventive arrangements disclosed herein.

Method400can begin with step405where a user-request to expand a selected tree node of an AJAX tree can be received. In step410, it can be determined if the selected tree node is present in the existing path array.

If the selected tree node is present in the existing path array, then step415can execute where the existing path array can be modified to reflect the selected tree node. From step415, flow can proceed to step430.

If the tree node is not present in the existing path array, then step420can execute where a request can be made to the Web server for a path array for the selected tree node. In step425, the requested path array can be received from the Web server. The path array handler can be invoked to expand the AJAX tree in step430.

In step435, it can be determined is a page unload event has occurred. When a page unload event has occurred, step440can execute where the path array for the current AJAX tree can be stored. When a page unload event has not occurred, then flow can proceed to either step405or435where the system waits to receive a new user-request or determine the occurrence of a page unload event.