The InnovationQ application will be updated on Sunday, May 31st from 10am-noon ET. You may experience brief service interruptions during that time.
Browse Prior Art Database

Dynamic Tree View in a Browser-Based Environment

IP.com Disclosure Number: IPCOM000013248D
Original Publication Date: 1999-Dec-01
Included in the Prior Art Database: 2003-Jun-18

Publishing Venue


Related People

Greg Krysa


Internet applications are constantly increasing in scope and complexity, e-commerce being just one example. With this broadening interest, greater and more flexible functionality is expected to match that of packaged software already on the market. A model that has become widely recognized is the tree view structure prominent in products such as the Windows Explorer. This method is very intuitive to the user in presenting a common data model of categories, subcategories, and the items which they hold. Currently, in order to implement such a viewing method in a browser-based environment, Java applets are being used since they provide built-in support for such functionality. Other solutions which are HTML-based are generated using a static tree structure which cannot be modified dynamically. In presenting my solution, the most significant goal of this algorithm is to allow dynamically-changing tree tructures to be displayed with HTML. This means that the tree view is not generated from a static file, but from a live database which can be updated by the user, and instantaneously updated by the algorithm. The solution to this problem is especially difficult since HTML code has to be generated in sequence; top to bottom, left to right. Thus, the algorithm maintains the current state of which part of the structure has already been examined, which has been displayed; and accordingly produces HTML source in proper sequence. In order to draw the lines connecting all elements of the tree structure, as well as the plus/minus images associated with expanding and collapsing tree-view branches, small image files are inserted into the HTML code to assemble the desired appearance. These images are repeated throughout the algorithm, and therefore, once a file is uploaded by the browser it can be cached to increase efficiency. The algorithm below is presented in a scripting language pseudo-code where comment strings begin with the double-slash characters and are italicized. All HTML source that is to be generated by the algorithm is denoted with bold text. A lot of details such as stack implementation and determining whether a particular folder has been expanded by the user have been left out of the pseudo-code. Such functionality can be implemented in a variety of methods depending on the environment, and thus any specification on the algorithm's part would only appear limiting. Examples of all image files used by the algorithm are included below. The images for CE_FOLDER and CE_FILE are not illustrated since they are much more application-dependent and rely on the preferences of a particular end-user. IMAGES.gif