Synchronizing a user interface area

A user interface (UI) area having multiple data sources is synchronized based upon changes made to UI elements associated with the UI area. To synchronize the changed UI elements, a processor of the computer determines UI controls and data objects associated with the UI area. Based upon a modification to a data object, a corresponding UI control that is affected by the modification is determined. A synchronization process is triggered to determine updated UI controls and updatable UI controls from the UI controls that are affected by the modification. The UI area is synchronized by updating the updatable UI controls based upon the modification.

TECHNICAL FIELD

The field generally relates to computer systems and software, and more particularly to software methods and systems to synchronize a user interface area.

BACKGROUND

User interface (UI) technologies focuses on interface technologies that support human-computer interaction. UI technology research focuses on the enabling technologies that help computers hear, see, speak and to understand, and combine these in multimodal ways. Rendering an entity on a UI includes generating a visual representation from a model by using computer programs. Updating the UI indicates that an already displayed visual representation is partially or completely refreshed.

Since the model associated with the UI includes enormous amount of information, updating the UI partially or completely causes a significant information exchange between a server hosting the model and the processor processing the update. Due to the amount of information exchange, there may be an overhead caused on the processor including excessive or indirect computing time, memory, bandwidth and the like. Hence, reducing the amount of data transfer and the overhead while maintaining accuracy in updating the UI is useful.

SUMMARY

Various embodiments of systems and methods to synchronize a computer generated user interface (UI) area are disclosed. The UI area having multiple data sources is synchronized based upon changes made to UI elements associated with the UI area. UI elements associated with the UI area include UI controls and data objects. To synchronize the changed UI elements, a processor of the computer determines UI controls and data objects associated with the UI area to generate a conditional list. Generating the conditional list includes determining events based upon a correlation between the data objects, the UI controls and the UI area. The conditional list represents a qualification of the UI controls and the data objects by verifying whether the UI controls and the data objects reflect any modification performed on the data objects.

Based upon a modification to a data object, an optimized data binding structure is generated to determine a corresponding UI control that is affected by the modification. The optimized data binding structure is generated by distinguishing between data bindings associated with data instances and data bindings associated with iterative data objects. Upon triggering a synchronization process, updated UI controls and updatable UI controls are determined from the UI controls which are affected by the modification. The computer generated UI area is synchronized by updating the updatable UI controls based upon the modification.

These and other benefits and features of embodiments will be apparent upon consideration of the following detailed description of the embodiments thereof, presented in connection with the following drawings.

DETAILED DESCRIPTION

Embodiments of techniques for systems and methods to synchronize a user interface area are disclosed herein. In the following description, numerous specific details are set forth to provide a thorough understanding of the embodiments. One skilled in the relevant art will recognize, however, that the embodiments can be practiced without one or more of the specific details, or with other methods, components, materials, etc. In other instances, well-known structures, materials, or operations are not shown or described in detail.

FIG. 1is a block diagram illustrating an overview of a method to synchronize a user interface area according to an embodiment. The UI area having multiple data sources is regenerated based upon changes made to UI elements associated with the UI area. The UI elements associated with the UI area include UI controls and data objects. UI controls are UI elements that represent arrangements of editable information and hold the data processed by an associated application and the available interactions on this data. Data objects are editable entities representing transitory compilations of attributes of a corresponding UI element. A path that is used to access this data object is called a binding. UI technologies use UI controls as an interface for application development, and a renderer generates a corresponding markup fragment from the UI controls and its properties. Since the UI area has multiple data sources, a mode of data access is specified for accessing the data rather than the actual value. While rendering the UI area, the renderer decodes the specified access (e.g. a path) and determines the actual value. Thus the final UI is a result of the information from both the UI control and the corresponding bound data. When the bound data or the UI control is modified, the UI area is correspondingly updated and regenerated.

In an embodiment, synchronization of the UI area includes regeneration of the UI area. To regenerate the modified UI elements, thereby reducing the CPU usage and the amount of data exchanged, an optimized synchronization process may be employed. To regenerate the UI area with modified UI elements, the UI controls and data objects associated with the UI area are determined to generate a conditional list. Generating the conditional list includes determining events based upon a correlation between the data objects, the UI controls and the UI area. The conditional list represents a qualification of the UI controls and the data objects by verifying whether the UI controls and the data objects reflect any modification performed on the data objects. Based upon a modification to a data object, an optimized data binding structure is generated to determine a corresponding UI control that is affected by the modification. Based upon the determined UI controls, updated and updatable UI controls are determined. An updated UI controls list is computed to include the affected updatable UI controls. Based upon a trigger to synchronize the UI area, the affected updatable UI controls are regenerated on the UI area by updating the affected UI controls based upon the modification.

Computer system100comprises a user interface (UI) area105including UI elements110and115,120and125,130and135, and140and145. The UI elements may have UI components depending upon the type of UI elements. For instance, if UI element110is a radio button, it includes field115representing a name of the UI element. The radio button represents the editable entity of the UI element. Similarly, UI element120is a drop down menu (editable entity) which includes field125. UI area105is in communication with UI engine150that represents a backend structure of UI area105. UI engine150includes UI control155representing the UI controls associated with the UI elements (e.g.110,125and135) and data objects160representing the data objects associated with editable entities (e.g.120,130and145).

Database165stores a relationship map of each of the UI elements, corresponding fields and entities, UI controls and data objects. The relationship map may be used to determine interdependencies between UI controls and data objects. Conditional list170is generated by determining UI controls and data objects associated with a current instance of the UI area105. Conditional list170includes events which represent a qualification of the UI controls and the data objects. The qualification of each UI control and data object verifies whether the corresponding UI control or data object reflects any modifications performed on the data objects. The qualification verifies the status of the UI element, by determining if the modification in the UI element reflects any modification performed on the data object. For example, conditional list170may include events which are triggered by each change in a UI element (UI control and/or data object). Conditional list170is maintained in a manner to avoid duplication of event entries, thereby not overloading the processor of the computer system. For instance, if field115is modified twice, the latest modification is stored and is represented by a corresponding event.

The relationship between data objects160and the UI area105may include a complex mapping, and determining a UI control corresponding to a modified data object may be compounded. Complex mapping may also include immutable UI controls and restrict modification to an associated data. To accommodate complex mapping, optimized data binding structure175is generated based upon a modification to a data object. Optimized data binding structure175is interpreted by detecting the affected UI controls from the modified data objects. The interpretation is accomplished by organizing the bindings between UI controls155and data objects160in a bi-directional central data structure, where the mapping can be realized via the data objects and via the UI controls.

The interpretation may also be accomplished by building a separate optimized data binding structure containing binding paths of the corresponding UI controls and data objects and the identification of UI controls which are affected due to the modification performed on one or more data objects. Thus, optimized data binding structure175includes a list of UI controls155which are affected by the modification of one or more data objects160. Optimized data binding structure175is stored until the bindings are changed, and upon any changes to the bindings, optimized data binding structure175is updated. In an embodiment, a relationship between the markup fragment of UI area105and UI controls155are also associated with optimized data binding structure175.

In an embodiment, the bindings may not specifically refer to a data object. For instance, for a table with multiple rows, each row may represent an instance of the data object, and the corresponding binding path may represent the specific instance. For example, the binding path may be represented as: “TABLE.<row number>.FIELD”, and while rendering such a path, the <row number> is replaced by an actual number of the row. For such cases, optimized data binding structure175includes a binding path of a corresponding instance of the UI control.

In another embodiment, optimized data binding structure175distinguishes between binding to a specific data instance of the data objects and binding to iterative data objects. For the specific data instance of the data object, the data object can be used to trace the affected UI control. For iterative data objects, the instances of the data object are traced to determine the affected UI control. This method of distinguishing between data bindings associated with data instance and data bindings associated with iterative data objects includes a lesser number of mappings when compared to the method of including a binding path for each instance.

Based upon a trigger to a synchronization process, synchronization list180is computed to include a list determination of updated UI controls and updatable UI controls from optimized data binding structure175. An updated UI control may represent a UI control that synchronizes itself by instantaneously regenerating upon any modification of corresponding data object. For instance, consider check box type of UI element130. When a modification of checking the check box130is received on UI area105, UI105area is instantaneously regenerated to display the checked check box130. Consider a radio button110. When a modification of selecting the radio button110is received on UI area105, UI area105is instantaneously regenerated to display the selected radio button110. The instantaneous regeneration may include a variation in a visual representation of the radio button110. For instance, the initial radio button110may include a transparent circle, and the selected radio button may include a shaded portion to show the selection made on radio button110. The modification need not be communicated to a server or any other backend machine (UI engine150) to determine one or more affected UI controls which are affected by the modification, and further regenerated based upon the modification. This helps in reducing bandwidth utilization and turnaround time of the server machine.

An updatable UI control may represent a UI control that is affected by the modification, and is synchronized upon a trigger to do so. For instance, consider a text box type of UI element having a field140and a value145. When a modification of text present in value145or a field140is executed on the corresponding UI element, this modification is communicated to UI engine150which further communicates the modification to a delta handler to determine UI controls which are affected by the modification. An update interface engine determines the updatable UI controls and the updated UI controls from the UI controls which are affected by the modification, and generates synchronization list180.

An updated UI controls list185is computed to include the affected updatable UI controls which are to be updated to regenerate on UI area105. In an embodiment, UI control specific business logic is included to notify one or more dependent UI controls based upon updating the affected UI controls. These dependencies may be represented as data bindings or evaluated by the business logic to determine the associated dependent UI controls and to compute updated UI controls list185. Synchronization engine190synchronizes UI area105by updating the affected updatable UI controls from updated UI controls list185based upon the modification. Synchronizing UI area105includes regenerating UI area105by updating contents of the affected UI controls.

In an embodiment, synchronizing the UI area includes updating the updatable UI controls. To update the updatable UI controls, UI controls and data objects associated with the corresponding UI area105are determined. The modification performed on one or more UI controls155associated with the UI area105are received. The modification may be performed on a UI control representation of the UI control, which constitutes an external representation of the corresponding UI control. For instance, a UI control representation of a CHECK BOX130present on the UI area105constitutes an external representation of a UI control155, which allows a user to make selection of a YES or a NO by checking or unchecking the CHECK BOX130. Upon receiving a modification of a ‘CHECK’ to the UI control representation that was ‘UNCHECKED’, the UI control representation responds to the modification by displaying the checkbox as ‘CHECKED’, and sends a notification about the modification to a UI engine150. The modified UI control is registered as ‘updated UI control’ or as ‘synchronized’ in the UI engine150, since the checkbox is already displayed as ‘CHECKED’. One or more data objects160that are affected by the modification are determined and updated to reflect the modification. For e.g. data object bound to the value of the checkbox is determined and a value TRUE is set to indicate that the checkbox is now checked. The modified data object triggers a notification about the modification to determine one or more affected UI controls. Updated UI controls and updatable UI controls are determined from the group of affected UI controls. The updated UI controls that are registered need not be synchronized. However the updatable UI controls that are not registered are determined as ‘to be synchronized’. Upon synchronizing the updatable UI controls based on the modification, the registrations as ‘synchronized’ and ‘to be synchronized’ are removed. In an embodiment, the registration is removed prior to a second modification to make the updated UI controls and the updatable UI controls available for modification.

In an embodiment, a complexity of the affected UI controls is computed to determine a degree of regenerating of the UI controls on the UI area105. The complexity of the affected UI controls includes an amount of modification, a number of cross references or interdependencies of UI controls, a number of UI controls affected, or the like. A degree of regenerating represents a measure of data that needs to be regenerated on UI area105. For instance, in a UI segment containing twenty UI controls, if seventeen UI controls are affected, the whole UI segment may be regenerated instead of determining conditional list170, optimized data binding structure175and updated UI controls list185.

In an embodiment, computer system100comprises a UI programming model including a user interface phase to receive the modification to data objects160associated with UI area105and to synchronize the affected UI controls based upon the modification; an update interface phase to the updated UI controls and the updatable UI controls upon a trigger of the synchronization process; and synchronization phase to synchronize the UI area by updating the affected updatable UI controls based upon the modification. In an embodiment, the affected updated UI controls from updated UI controls list180is regenerated by queuing the affected updatable UI controls; and synchronizing them at the synchronization phase instead of regenerating each affected UI control upon modification.

In an embodiment, the synchronization process includes synchronizing the UI area associated with a client system with a corresponding application program associated with a server system. For instance, consider a UI area present on a client's system. Based upon a modification performed on the UI area, depending upon the type of associated UI controls (e.g. updated or updatable) of the application program present on a server system, UI area105is synchronized. For example, if the associated UI controls are updated, any communication with the server system may be absent, and the client system instantaneously regenerates the updated UI controls on UI area105. If the associated UI controls are updatable, a communication is established with the server system by generating an updated UI control list185, and based upon the affected updatable UI controls, UI area105is synchronized.

In an embodiment, updated UI controls may not be associated with an ability to instantaneously regenerate. In such cases, the updated UI controls are executed in a manner similar to the updatable UI controls. For instance, consider a drop down menu type of UI element. When a selection of options in the drop down menu is modified, the updated UI control associated with the drop down menu type may instantaneously regenerate the UI control on UI area105. Even though the updated UI control is instantaneously regenerated on UI area105, since the option was changed, there may be one or more updatable UI controls that reflect the modification. In such cases, the updated UI control is executed in a manner similar to the updatable UI controls.

In an embodiment, the synchronization process includes cancelling a regeneration of the updated UI control or the updatable UI control based upon a synchronization process triggered between a server-side framework and a client-side framework. Cancelling regeneration represents removing a regeneration notification that is associated with the updated UI control or the updatable UI control upon completing the process of synchronizing the computer generated UI area based upon the modification.

In an embodiment, a data transformation is implemented when an internal representation of data associated is different from a corresponding external representation of data associated with the UI area. For instance, consider an internal representation of a date as YYYYMMMDD, and a corresponding external representation of the associated data as “MONTH, DD, YYYY”. When a user input received is Apr. 20, 2012, to determine the updated UI controls and the updatable UI controls, a data transformation of the received user input is executed. The data transformation is executed to synchronize the internal representation and the external representation, and further determine the updated UI controls and the updatable UI controls.

FIG. 2is a process flow diagram illustrating a computer-implemented method to synchronize a user interface (UI) area according to an embodiment. At process block205, UI controls and data objects which are associated with the UI area are determined. In an embodiment, a conditional list of events representing a qualification of the UI controls and the data objects is generated. The conditional list of events are determined based upon a correlation between the data objects and the UI area, a correlation between the UI control and the UI area, or a correlation between the data object and the UI control. The correlation includes a relation between any two or more entities (e.g. UI area, UI controls, and data objects) such that any change in one entity is accompanied by a corresponding change in the other. The qualification of the UI controls and the data objects verifies whether a UI control gets affected when its corresponding data control is modified. Hence, the conditional list includes a list of UI controls that may be affected when their corresponding data objects are modified.

At process block210, a modification to one or more data objects is received. The modification may be received from the UI or an application associated with the UI. At process block215, the UI controls which are affected by the modification are determined. In an embodiment, the affected UI controls are determined based upon the conditional list of events. At process block220, a synchronization process is triggered to determine updated UI controls and updatable UI controls. In an embodiment, an updated UI controls list is computed based upon the affected updatable UI controls. At process block225, the UI area is synchronized by updating the affected updatable UI controls based upon the modification.

FIG. 3is a block diagram illustrating a computer system to synchronize a user interface area according to an embodiment. Computer system300includes user interface (UI) engine305, delta handler310, update interface engine315, synchronization engine320, processor325, database330and memory element335. In an embodiment, UI engine305is in communication with delta handler310and synchronization engine320. Update interface engine315is in communication with delta handler310and synchronization engine320. Synchronization engine320is in communication with processor325of computer system300. In an embodiment, processor325is configured to read and execute instructions stored in memory element335. The instructions stored in memory element335are used to regenerate the UI area according to an embodiment.

A computer generated UI area (interchangeably called a UI area throughout the specification) in communication with UI engine305displays one or more UI elements configured to be regenerated on the UI. In an embodiment, to synchronize the UI area, UI engine305determines one or more UI controls and one or more data objects which are associated with the UI area. In an embodiment, the data objects and the UI controls associated with the UI area are stored in database330. In another embodiment, an event handler generates a conditional list of one or more events representing a qualification of the corresponding UI controls and the data objects. These events represent a qualification of the corresponding UI controls and the data objects associated with the UI area. Processor325recognizes one or more modification of one or more data objects. Based upon the modifications, a data binder may generate an optimized data binding structure to determine corresponding one or more UI controls which are affected by the modification. In an embodiment, the conditional list and the optimized data binding structure are stored in database330. Based upon a modification associated with the data object, the respective data is accessed from database330to compute the updated UI controls list.

In an embodiment, delta handler310determines the UI controls which are affected by the modification. The modification of one or more data objects and the list of UI controls which are affected by the modification are sent to update interface engine315. Update interface engine315determines updated UI controls and updatable UI controls from the list of UI controls and the modification. An updated UI control may represent a UI control that synchronizes itself by instantaneously regenerates upon any modification of corresponding data object. An updatable UI control may represent a UI control that is affected by the modification, and is synchronized upon a trigger to do so.

Update interface engine315computes an updated UI controls list including the affected updatable UI controls based upon. Synchronization engine320synchronizes the UI area by regenerating the affected updatable UI controls. In an embodiment, regenerating the affected updatable UI control includes updating the affected updatable UI controls based upon the modification. Thus, computer system300is utilized to determine the UI controls which are affected by the modification, and the UI area is updated to modify the affected updatable UI controls.

In an embodiment, a server determines the UI controls and the data objects associated with the UI area. The server receives a modification of the one or more data objects to determine the UI controls affected by the modification and identifies the updated UI controls and the updatable UI controls. Based upon a trigger to synchronize, the server receives the trigger and synchronizes with a client system by updating the updatable UI controls based upon the modification.

FIG. 4is a block diagram illustrating an exemplary computer system400, according to an embodiment. The computer system400includes a processor405that executes software instructions or code stored on a computer readable storage medium455to perform the above-illustrated methods. The computer system400includes a media reader440to read the instructions from the computer readable storage medium455and store the instructions in storage410or in random access memory (RAM)415. The storage410provides a large space for keeping static data where at least some instructions could be stored for later execution. The stored instructions may be further compiled to generate other representations of the instructions and dynamically stored in the RAM415. The processor405reads instructions from the RAM415and performs actions as instructed. According to one embodiment, the computer system400further includes an output device425(e.g., a display) to provide at least some of the results of the execution as output including, but not limited to, visual information to users and an input device430to provide a user or another device with means for entering data and/or otherwise interact with the computer system400. Each of these output devices425and input devices430could be joined by one or more additional peripherals to further expand the capabilities of the computer system400. A network communicator435may be provided to connect the computer system400to a network450and in turn to other devices connected to the network450including other clients, continuation servers, data stores, and interfaces, for instance. The modules of the computer system400are interconnected via a bus445. Computer system400includes a data source interface420to access data source460. The data source460can be accessed via one or more abstraction layers implemented in hardware or software. For example, the data source460may be accessed by network450. In some embodiments the data source460may be accessed via an abstraction layer, such as, a semantic layer.

The above descriptions and illustrations of embodiments, including what is described in the Abstract, is not intended to be exhaustive or to limit the one or more embodiments to the precise forms disclosed. While specific embodiments of, and examples for, the one or more embodiments are described herein for illustrative purposes, various equivalent modifications are possible within the scope, as those skilled in the relevant art will recognize. These modifications can be made in light of the above detailed description. Rather, the scope is to be determined by the following claims, which are to be interpreted in accordance with established doctrines of claim construction.