Dynamic editors for functionally composed UI

• US 8,756,515 B2
• Filed: 12/14/2009
• Issued: 06/17/2014
• Est. Priority Date: 11/16/2009
• Status: Active Grant

• Current Assignee: Microsoft Technology Licensing LLC (Microsoft Corporation)
• Original Assignee: Microsoft Corporation
• Inventors: Jayadevan, Siddharth, Hackmann, Christopher Donald, Danton, Stephen M., Kent, Simon David, Murray, Michael Charles
• Primary Examiner(s): Ng, Amy
• Assistant Examiner(s): STITT, ERIK V
• Application Number:
  US12/637,353
• Publication Number:
  US 20110119605A1
• Time in Patent Office: 1,646 Days
• Field of Search: 715/810, 715/764, 715/763
• US Class Current: 715/763
• CPC Class Codes: G06F 8/34 Graphical or visual programming
• CPC Class Codes: G06F 8/38 for implementing user interfaces

Abstract

In an embodiment, a computer system instantiates a real-time incremental editor configured to receive editing inputs that are to be applied to data of a data model, where the data model data declaratively defines a UI model that drives the behavior of a corresponding UI based on the UI model. The computer system receives an editing input from a user indicating one or more desired edits that are to be made to the UI and determines, based on the received editing inputs, which changes are to be made to the data model data to enact the desired changes in the UI. The computer system updates the UI in real-time based on the determined edits to the data model data and presents the updated UI in real-time without losing state information in the resultant UI.

Claims

1. At a computer system that includes one or more processors and system memory, a method for providing a real-time incremental editor for enacting changes to user interface (UI) elements of an active UI, the method comprising:

an act of the computer system presenting a first UI of an executing application program based on a UI model that includes declarative model data that drives the behavior of the first UI, the first UI including a plurality of UI elements, the UI model including particular declarative model data that declaratively defines a visual appearance of the plurality of UI elements of the first UI, each of the plurality of UI elements being an instance of the particular declarative model data;

an-act of the computer system visually indicating a state of the first UI, including visually indicating within the first UI that a particular UI element of the plurality of UI elements has been selected by a user at the first UI;

concurrent to presenting the first UI of the application program, and concurrent to visually indicating within the first UI that the particular UI element has been selected by a user;

an act of the computer system presenting a second UI of a real-time incremental editor that is separate from the application program and that is configured to receive one or more editing inputs that are to be applied to the particular declarative model data of the UI model, to edit the first UI of the application program while the application program is executing;

an act of the computer system receiving a first editing user input at the second UI of the real-time incremental editor, the first editing input selecting the particular declarative model data that declaratively defines the plurality of UI elements;

based on selection of the particular declarative model data within the real-time incremental editor, visually distinguishing each of the plurality of UI elements, including the particular UI element, within the first UI as being selected at the second UI of the real-time incremental editor, while also visually indicating within the first UI that the particular UI element has been selected at the first UI;

an act of the computer system receiving a second editing user input at the second UI of the real-time incremental editor, the second editing input indicating one or more desired edits that are to be made to the plurality of UI elements that affect the visual appearance of the plurality of UI elements within the first UI;

an act of the computer system determining, based on the received editing input, one or more changes that are to be made to the particular declarative model data corresponding to the plurality of UI elements in order to enact the one or more desired edits to each of the plurality of UI elements; and

an act of the computer system updating the first UI to reflect the one or more desired edits to the plurality of UI elements, including;

preserving the state of the first UI to reflect the user selection of the particular UI element by continuing to visually indicate that the particular UI element has been selected by the user; and

concurrent to continuing to visually indicate that the particular UI element has been selected by the user, altering the visual appearance of each of the plurality of UI elements, including the particular UI element, based on the one or more changes to the particular declarative model data corresponding to the plurality of UI elements.

2. The method of claim 1, wherein the one or more changes to the particular declarative model data are transformed into UI changes using purely functional transformations.

3. The method of claim 1, wherein the one or more changes to the particular declarative model data comprise data indicating how the particular declarative model data is to be transformed into UI changes.

4. The method of claim 3, wherein the data indicating how the particular declarative model data is to be transformed into UI changes is mapped to a structured UI representation including at least one of text, a UI tree and a graphical diagram.

5. The method of claim 1, wherein the declarative model data comprises a schematized XAF application description.

6. The method of claim 5, wherein at least one real-time incremental editor is instantiated based on the XAF application description.

7. The method of claim 1, wherein the declarative model data is divided into chunks based on corresponding portions of a UI tree.

8. The method of claim 1, wherein the declarative model data is divided into one or more text chunks.

9. The method of claim 8, further comprising applying a two-way data binding between a textual editor view and the text chunks of the data model data, such that any edits to the declarative model data cause the textual editor to update automatically.

10. The method of claim 8, wherein the text chunks are structured such that data model grammar that defines how the data is to be structured is not violated.

11. The method of claim 1, further comprising instantiating a data flow engine to support transformations of collections, records and atoms and track dependencies across declarative model data items.

12. The method of claim 11, further comprising implementing a UI model interpreter to perform the following in real-time:

receive the declaratively defined UI model, interpret the UI model via functional transformation using the data flow engine and present the resulting UI to the user.

13. The method of claim 11, wherein the instantiated editors are configured to build queries which are processed by the data flow engine.

19. The method of claim 1, wherein the editing user input at the second UI of the real-time incremental editor is propagated to an additional incremental editor.

14. A computer program product for implementing a method for presenting a preview of the potential results of a user edit to data model data, the computer program product comprising one or more hardware storage devices having stored thereon computer-executable instructions that, when executed by one or more processors of a computing system, cause the computing system to perform the method, the method comprising:

an act of the computer system presenting first UI of an executing application program based on a UI model that includes declarative model data that drives the behavior of the first UI, the first UI including a plurality of UI elements, the UI model including particular declarative model data that declaratively defines a visual appearance of the plurality of UI elements of the first UI, each of the plurality of UI elements being an instance of the particular declarative model data;

an act of the computer system visually indicating a state of the first UI, including visually indicating within the first UI that a particular UI element of the plurality of UI elements has been selected by a user at the first UI;

concurrent to presenting the first UI of the application program, and concurrent to visually indicating within the first UI that the particular UI element has been selected by a user;

an act of the computer system presenting a second UI of a real-time incremental editor that is separate from the application program and that is configured to receive one or more editing inputs that are to be applied to the particular declarative model data of the UI model, to edit the first UI of the application program while the application program is executing;

an act of the computer system receiving a first editing user input at the second UI of the real-time incremental editor, the first editing input selecting the particular declarative model data that declaratively defines the plurality of UI elements;

based on selection of the particular declarative model data within the real-time incremental editor, visually distinguishing each of the plurality of UI elements, including the particular UI element, within the first UI as being selected at the second UI of the real-time incremental editor while also visually indicating within the first UI that the particular UI element has been selected at the first UI;

an act of the computer system receiving a second editing user input at the second UI of the real-time incremental editor, the second editing input indicating one or more desired edits that are to be applied to the plurality of UI elements that affect the visual appearance of the plurality of UI elements within the first UI;

an act of the computer system determining, based on the received editing input, one or more changes that are to be made to the particular declarative model data corresponding to the plurality of UI elements in order to enact the one or more desired edits to each of the plurality of UI elements; and

an act of the computer system updating the first UI to reflect the one or more desired edits to the plurality of UI elements, including;

preserving the state of the first UI to reflect the user selection of the particular UI element by continuing to visually indicate that the particular UI element has been selected by the user; and

concurrent to continuing to visually indicate that the particular UI element has been selected by the user, altering the visual appearance of each of the plurality of UI elements, including the particular UI element, based on the one or more changes to the particular declarative model data corresponding to the plurality of UI elements.

15. The computer program product of claim 14, wherein visually indicating that the particular UI element has been selected comprises drawing a highlight around the particular UI element on the first UI.

16. The computer program product of claim 15, further comprising an act of constructing a query that is used to query for each of the plurality of UI elements.

17. The computer program product of claim 14, further comprising:

an act of receiving user input at the second UI of the real-time incremental editor that result in a new feature being added to the first UI of the application program; and

an act of dynamically adding the new feature to the first UI of the application program in real-time.

18. A computer system comprising the following:

one or more processors;

system memory; and

one or more computer-readable storage media having stored thereon computer-executable instructions that, when executed by the one or more processors, causes the computing system to perform a method for providing a real-time incremental editor for enacting changes on an active user interface (UI), the method comprising the following;

presenting a first UI of an executing application program based on a UI model that includes declarative model data that drives the behavior of the first UI, the first UI including a plurality of UI elements, the UI model including particular declarative model data that declaratively defines a visual appearance of the plurality of UI elements of the first UI, each of the plurality of UI elements being an instance of the particular declarative model data;

visually indicating a state of the first UI, including visually indicating within the first UI that a particular UI element of the plurality of UI elements has been selected by a user at the first UI;

concurrent to presenting the first UI of the application program, and concurrent to visually indicating within the first UI that the particular UI element has been selected by a user;

presenting a second UI of a real-time incremental editor that is separate from the application program and that is configured to receive one or more editing inputs that are to be applied to the particular declarative model data of the UI model, to edit the first UI of the application program while the application program is executing;

receiving a first editing user input at the second UI of the real-time incremental editor, the first editing input selecting the particular declarative model data that declaratively defines the plurality of UI elements;

based on selection of the particular declarative model data within the real-time incremental editor, visually distinguishing each of the plurality of UI elements, including the particular UI element, within the first UI as being selected at the second UI of the real-time incremental editor, while also visually indicating within the first UI that the particular UI element has been selected at the first UI;

receiving a second editing user input at the second UI of the real-time incremental editor, the second editing input indicating one or more desired edits that are to be made to the plurality of UI elements that affect the visual appearance of the plurality of UI elements within the first UI;

determining, based on the received editing input, one or more changes that are to be made to the particular declarative model data corresponding to the plurality of UI elements in order to enact the one or more desired edits to each of the plurality of UI elements; and

updating the first UI to reflect the one or more desired edits to the plurality of UI elements, including;

preserving the state of the first UI to reflect the user selection of the particular UI element by continuing to visually indicate that the particular UI element has been selected by the user; and

concurrent to continuing to visually indicate that the particular UI element has been selected by the user, altering the visual appearance of each of the plurality of UI elements, including the particular UI element, based on the one or more changes to the particular declarative model data corresponding to the plurality of UI elements.