Method and apparatus for updating a web-based user interface

A method and apparatus for updating a web-based user interface. The method comprises generating a user interface for a host application, accessing the user interface in a web browser, and modifying the user interface within the web browser during run-time of the application.The apparatus comprises a user interface, a user interface updater, a web browser, and a host application. The web browser provides a way to display, access, and modify the user interface for communicating with the host application. The user interface updater generates the user interface and modifies the user interface in response to command information received from the web browser.

CROSS-REFERENCE TO RELATED APPLICATIONS

This application contains subject matter related to commonly assigned U.S. patent application Ser. No. 12/288,460 filed Oct. 21, 2008, which is hereby incorporated by reference in its entirety.

BACKGROUND OF THE INVENTION

1. Field of the Invention

Embodiments of the present invention generally relate to a network based computer interaction and, more particularly, to a method and apparatus for updating a user interface of a client device.

2. Description of the Related Art

Computer systems exist that enable a user to remotely access computer information, e.g., a database. In some instances a user will use a client device, e.g., cell phone, personal digital assistant (PDA), lap top computer, application specific device, and the like, to connect via a network to a server hosting the information. Such devices have a predefined interface for accessing the computer information from the server. The interface may be created by a program or agent executing on the device; however, such programs or agents require substantial processing resources and memory availability which make them unsuitable for many devices. The interface, produced by such programs or agents, is static—the user enters data and/or queries in predefined fields.

More recently, to accommodate a wide range of devices, browsers have been used to launch web pages that form the interface to the computer information (i.e., web-based user interface). Although web-based user interfaces generally utilize less computer resources than application (program) based interfaces, the interface remains static, i.e., once created, the interface remains the same for each user. The static nature of the interface may impact worker productivity in that the interface cannot be easily optimized to their work habits.

While applications exist that allow run-time modification of such interfaces, they typically require a large install, significant processing power, and a significant amount of data to be transmitted to and from the application server. These requirements make the applications unsuitable for uses on many types of devices, such as mobile devices. These devices are often limited to static interfaces for these reasons.

It would be advantageous if it were possible to modify the user interface of a web-based application at run time. Therefore, there is a need in the art for a dynamic web-based user interface updater.

SUMMARY OF THE INVENTION

An embodiment of the present invention comprises a method and apparatus for updating a web-based user interface. The method comprises generating a user interface for a host application, accessing the user interface in a web browser, and modifying the user interface within the web browser during run-time of the application.

The apparatus comprises a user interface, a user interface updater, a web browser, and a host application. The web browser provides a way to display, access, and modify the user interface for communicating with the host application. The user interface updater generates the user interface and modifies the user interface in response to command information received from the web browser.

DETAILED DESCRIPTION

FIG. 1is a block diagram depicting a system100for updating a user interface138according to an embodiment of the present invention. In one embodiment, the system comprises a host computer102, a client device106, and a network104coupling the client device106to the host computer102. The host computer102receives command information from the client device106, and updates client interface data124in accordance with the command information. Although in this exemplary embodiment the client device106and the host computer102are separate entities coupled by a network104, a person of ordinary skill in the art would recognize that both could be implemented as a single computing device. In one embodiment, the host computer102may be coupled to a database application server105. The host computer102may provide a gateway interface121to the database application server105for the client device(s)104. This gateway interface121allows the client device106to interact with the database application server105via a scripted application such as can be executed in a web browser environment. In one embodiment, the gateway interface121facilitates communication between the client device106and the database application server105by providing additional data, function calls, wrapper functions, and the like not present in the initial communication from the client device. In one embodiment, the gateway interface121parses communications from the database application server105into a format readable by the client device106. In one embodiment, the database application server105may implement an Enterprise Resource Planning software package. The present invention advantageously allows a client device106to interface with such a software package without the need to load specialized design software often associated with the implementation of such packages.

In one embodiment the host computer102is a computing device such as those generally known in the art. The host computer102includes a central processing unit (CPU)108, support circuits110, and memory112. The CPU108may comprise one or more commercially available microprocessors or microcontrollers that facilitate data processing and storage. The various support circuits110are utilized to facilitate the operation of the CPU108and include such circuits as clock circuits, power supplies, cache, input/output circuits, and the like. The memory112may comprise random access memory, read only memory, removable storage, optical disk storage, disk drive storage, and combinations thereof. The memory112stores a server operating system120, a host application128, client interface data124, a user interface updater126, an interface information packet130, and a gateway interface121. In operation, the CPU108executes the operating system120to control the general utilization and functionality of the host computer102.

The CPU108also executes the host application128. The host application128listens for incoming command information from the client device106. When the command information is received, the host application128executes the user interface updater126. The user interface updater126parses the command information and updates a client interface state131in the client interface data124accordingly. The client interface data124may be stored in volatile memory, non-volatile memory, or a mixture of both. In one embodiment, information describing the base, unmodified client interface may be stored in volatile memory, with individual client interface states131loaded on-demand from non-volatile memory.

In one embodiment, the client interface state131may be represented as a script. The script may correspond to and represent the changes that must be made to a base interface also stored within the client interface data. The base interface is sent to the client device106and represents a “clean” user interface as sent prior to any changes. As changes are made, the script associated with that particular client device106is modified reflecting the updates. By saving only the differences from a base interface, the memory footprint of the client interface data124is minimized. In one embodiment, the gateway interface121may be executed by the CPU108to provide access to a database application server105.

The client device106is a computing device such as those generally known in the art. The client device106may comprise any device capable of executing a web browser, for example, a hand-held bar code reader, a cellular phone, a personal digital assistant, or a personal computer. The client device106includes a CPU114, support circuits116, and memory118. The CPU114may comprise one or more commercially available microprocessors or microcontrollers that facilitate data processing and storage. The various supporting circuits116are utilized to facilitate the operation of the CPU114and include such circuits as clock circuits, power supplies, cache, input/output circuits, and the like. The memory118may comprise random access memory, read only memory, removable storage, optical disk storage, disk drive storage, and combinations thereof. The memory118stores an operating system132, a web browser134, and an update packet136. In operation, the CPU114executes the operating system132to control the general utilization and functionality of the client device106.

The CPU114also executes the web browser124. The web browser124displays the user interface138, and executes a display engine140to interpret and execute commands provided in a scripted language. In one embodiment, these commands may be provided in the JAVASCRIPT language. The web browser124provides an interface for and is coupled with the database application server105by via the host computer102. The user interface138receives input and can be modified at run-time. In this manner, the invention advantageously allows the user to seamlessly transition from a data entry mode to an editor mode during run-time. For example, the user interface138may provide list boxes, radio buttons, check boxes, and other fields for data input. These fields may be moved, added, deleted, renamed, or otherwise modified without the need to execute a separate editor program. When a modification occurs, an update packet136containing command information is generated and sent to the host computer102by way of scripted commands running on the display engine140contained within the web browser124.

FIG. 2is a functional diagram of a model200for updating a user interface according to an embodiment of the present invention. Prior to the execution of this method, a user interface138may be generated on the client device via the method disclosed in commonly assigned U.S. patent application Ser. No. 12/288,460, filed Oct. 21, 2008, which is herein incorporated by reference. At step202, the client is placed into an “Edit Mode” and a modification, such as a drag and drop movement, addition, deletion, or the like, is made to the user interface138displayed in the web browser. The “Edit Mode” may be enabled by a user or may be enabled in response to an external communication received by the web browser134. In some embodiments, the user may enable edit mode by clicking a button or selecting the option from a drop-down box. This mode allows the user interface138to accept modifications. In one embodiment, when the user interface138is placed into edit mode, the display engine140looks up and saves into an array all document nodes and elements which match a predefined set of rules. For example, the display engine140may save all elements which have a particular Cascading Style Sheet class type, such as all elements with a <SPAN> tag whose class name contains “movable.” The display engine140then modifies each element matching the predefined rule set to make that element modifiable.

Exemplary modifications include drag-and-drop and resizing operations. In one embodiment, a drag-and-drop operation may be implemented by the following process:1. The display engine140captures all mouse movements within the browser window (via document.onmousemove event)2. The display engine140captures the mouse click events (object.onmouseup and object.onmousedown events) of all click-and-draggable Document Object Model (DOM) elements. The DOM is a cross-platform and language independent convention for interacting with objects in HTML, XML, DHTML documents, and the like.3. When the display engine140detects an onmousedown event on an object, the display engine140sets the document.onmousemove event to do the following:Get the coordinates of the mouse cursor (by getting the event object's offsetLeft and offsetTop) and assign that coordinate to the currently dragged object.The display engine140simulates the “dragging” of the object by continuously setting the XY coordinates of the object (by setting object.style.left and object.style.top CSS properties) to match the cursor's XY coordinates within the browser window until document.onmouseup event is fired, at that point the display engine140stops assigning new coordinates to the dragged object, thereby “dropping” it where it was last left off on the screen.

In one embodiment, the display engine140adds a small but visible hook object (e.g. span tag) to the lower right corner of that object to make an object resizable (such as a div node element). The display engine140then makes that hook element drag-and-droppable (as above). As that hook element is dragged, the display engine140dynamically calculates and sets the new width and height of the resizable object. When the hook element is dropped, the display engine140stops calculating and setting new width and height, leaving the last set width and height as the object's new dimension.

At step204, the display engine140parses the array containing the modifications to the user interface138. In one embodiment, the display engine140creates the update packet136by collecting the XY position coordinates, width and height, default text, default foreground and background colors, and the like. This data is saved into a JAVASCRIPT Object Notation (JSON) object to be transmitted to the host computer102. The client106sends the update packet136to the host computer102. The update packet136comprises data describing the modification, as described below with respect toFIG. 5.

At step206, the host computer102receives the update packet, and modifies the client interface data124in accordance with the update packet136. The host computer102matches the elements in the update packet136to element identifiers associated with each element of the user interface138. The elements of the client interface data124associated with the element identifiers of the update packet136are modified in response to the data received in the update packet136. In one embodiment, the client device106may be associated with a specific interface state131located within the client interface data124, and therefore only that object of the client interface data124will be modified.

At step208, the host computer102may send information to the client device106reflecting the changes contained in the update packet136. In this manner, an embodiment of the invention may provide “What You See Is What You Get” (WYSIWYG) modification functionality to the web browser environment, as the host computer102generates an updated user interface138for the client device106as modifications are made and sent on the client side via update packets136.

FIG. 3depicts an embodiment of a method300for updating client interface data124. The method begins at step302, where an update packet136has been generated and sent over the network104. At step304, the host computer102receives the update packet136. At step306, the update packet136is routed to and parsed at the user interface updater126. The user interface updater126may be a separate software module or functionality for updating the user interface may be included in the host application128. The user interface updater126modifies the client interface data124in accordance with the command information contained within the update packet136. In one embodiment, the update packet136contains a command to move an object by a certain vector. Other possible modifications include changes to interface colors, background, text strings, data entry field locations, element sizes, and the like. The user interface updater126modifies an entry within the client interface data124to reflect a user interface138with the object in the new position. The next time an interface information packet is sent to the client device, the data contained within the interface information packet would reflect this change.

In one embodiment, the client interface data124modified may correspond to an identifier associated with the state131of a specific client device106. In this manner, an update for a single user interface138may be performed, even if the host computer102provides interfaces for multiple client devices106. At step310, in one embodiment, the user interface updater136may notify the host application128that the user interface138for the client device106has been updated. At step312, the host application128may then send an update to the client device106reflecting the change to the user interface138recorded in the client interface data124. In this manner, it is possible to update the user interface138immediately after a command has been entered, without requiring any design and development software on the client device other than a web browser134. The method ends at step314after the update has been sent.

FIG. 4depicts an embodiment of a method400of generating an update packet136. The method begins at step402where an interface that is modifiable in accordance with an embodiment of the invention is present on the web browser134. At step404, a modification is made to an element of the user interface138. At step406, the display engine140generates an update packet136describing the modification made to the user interface138. At step408, the update packet136is sent to the host computer102.

FIG. 5depicts a block diagram of an embodiment of an update packet136. This update packet reflects the command information sent to the host computer102when a modification is made to the user interface138. In one embodiment, the update packet136comprises one or more of an object identifier508, one or more of a command502, one or more of a command parameter,504, and a client identifier506. The object identifier508is data representing which command element of the user interface138the modification pertains to. For example, it may reference a list box, a radio button, a check box, a text field, and the like. The command502describes the action that is to be taken upon the structure referenced by the object identifier508. For example, the command502may indicate the structure is to be added, moved, renamed, deleted, or otherwise modified. The command may also represent an interface configuration change, such as foreground and background colors and other page display settings that are not tied to specific control structures (such as list boxes, labels, and radio buttons). The command parameter504provides data specific to the command502to be executed. For example, if the command502is a “move,” then the command parameter504may indicate the direction and distance for the structure represented by the object identifier508to be moved; if the command502is a “modify,” then the command parameter504may indicate a string to replace inside of a designated text field; if the command modifies the screen background color, then the command parameter504may contain data representing the color the background is to be changed to. The client identifier506is a unique value associated with the specific client device to be modified. This identifier allows the host computer102to modify the user interface138for a specific client device106, rather than for all client devices106.