Dynamic editors for functionally composed ui

Abstract

Embodiments include presenting a first user interface (UI) of an executing application, based on model data that defines an appearance of UI elements of the first UI. Concurrent to presenting the first UI, a second UI of a real-time editor is presented. The second UI is configured to receive editing inputs that are to be applied to the model data, to edit the first UI while the application is executing. A first editing input is received at the second UI, which selects particular model data defining particular UI element(s). Based on the first editing input at the second UI, each of the particular UI element(s) is visually distinguished within the first UI. A second editing input is received at the second UI, which provides changes to the model data corresponding to the particular UI element(s). The particular UI element(s) of the first UI are updated to reflect the desired changes.

We claim: 
     
         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:
 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 UI model including particular declarative model data that declaratively defines a visual appearance of one or more UI elements of the first UI, each of the one or more UI elements being an instance of the particular declarative model data; and   concurrent to presenting the first UI of the application program:
 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 one or more UI elements; 
 based on selection of the particular declarative model data within the real-time incremental editor, visually distinguishing each of the one or more UI elements within the first UI as being selected at the second UI of the real-time incremental editor; 
 receiving a second editing user input at the second UI of the real-time incremental editor, the second editing user input providing one or more changes to the particular declarative model data corresponding to the one or more UI elements, in order to enact one or more desired edits to each of the one or more UI elements; and 
 updating the first UI to reflect the one or more desired edits to the one or more UI elements, including altering the visual appearance of each of the one or more UI elements based on the one or more changes to the particular declarative model data corresponding to the one or more UI elements. 
   
     
     
         2 . The method as recited in  claim 1 , wherein visually distinguishing each of the one or more UI elements within the first UI as being selected at the second UI comprises drawing a highlight around each of the one or more UI elements at the first UI. 
     
     
         3 . The method as recited in  claim 1 , wherein the declarative model data comprises a schematized extensible markup language application foundation (XAF) application description. 
     
     
         4 . The method as recited in  claim 1 , wherein the declarative model data is divided into chunks based on corresponding portions of a UI tree. 
     
     
         5 . The method as recited in  claim 1 , further comprising, based on the first editing user input, constructing a query that is used to query for each instance of a UI element corresponding to the particular declarative model data. 
     
     
         6 . The method as recited in  claim 1 , further comprising:
 receiving a third editing user input at the second UI of the real-time incremental editor that result in a new feature being added to the application program; and   dynamically adding the new feature to the application program in real-time.   
     
     
         7 . The method as recited in  claim 1 , wherein updating the first UI to reflect the one or more desired edits to the one or more UI elements comprises previewing one or more changes to the one or more UI elements. 
     
     
         8 . One or more hardware storage devices having stored thereon computer-executable instructions that, when executed by one or more hardware processors of a computer system, cause the computer system to provide a real-time incremental editor for enacting changes to user interface (UI) elements of an active UI, including 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 UI model including particular declarative model data that declaratively defines a visual appearance of one or more UI elements of the first UI, each of the one or more UI elements being an instance of the particular declarative model data; and   concurrent to presenting the first UI of the application program:
 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 one or more UI elements; 
 based on selection of the particular declarative model data within the real-time incremental editor, visually distinguishing each of the one or more UI elements within the first UI as being selected at the second UI of the real-time incremental editor; 
 receiving a second editing user input at the second UI of the real-time incremental editor, the second editing user input providing one or more changes to the particular declarative model data corresponding to the one or more UI elements, in order to enact one or more desired edits to each of the one or more UI elements; and 
 updating the first UI to reflect the one or more desired edits to the one or more UI elements, including altering the visual appearance of each of the one or more UI elements based on the one or more changes to the particular declarative model data corresponding to the one or more UI elements. 
   
     
     
         9 . The one or more hardware storage devices as recited in  claim 8 , wherein visually distinguishing each of the one or more UI elements within the first UI as being selected at the second UI comprises drawing a highlight around each of the one or more UI elements at the first UI. 
     
     
         10 . The one or more hardware storage devices as recited in  claim 8 , wherein the declarative model data comprises a schematized extensible markup language application foundation (XAF) application description. 
     
     
         11 . The one or more hardware storage devices as recited in  claim 8 , wherein the declarative model data is divided into chunks based on corresponding portions of a UI tree. 
     
     
         12 . The one or more hardware storage devices as recited in  claim 8 , further comprising, based on the first editing user input, constructing a query that is used to query for each instance of a UI element corresponding to the particular declarative model data. 
     
     
         13 . The one or more hardware storage devices as recited in  claim 8 , further comprising:
 receiving a third editing user input at the second UI of the real-time incremental editor that result in a new feature being added to the application program; and   dynamically adding the new feature to the application program in real-time.   
     
     
         14 . The one or more hardware storage devices as recited in  claim 8 , wherein updating the first UI to reflect the one or more desired edits to the one or more UI elements comprises previewing one or more changes to the one or more UI elements. 
     
     
         15 . A computer system, comprising:
 one or more hardware processors; and   one or more storage devices having stored thereon computer-executable instructions that, when executed by the one or more hardware processors, cause the computer system to provide a real-time incremental editor for enacting changes to user interface (UI) elements of an active UI, including 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 UI model including particular declarative model data that declaratively defines a visual appearance of one or more UI elements of the first UI, each of the one or more UI elements being an instance of the particular declarative model data; and   concurrent to presenting the first UI of the application program:
 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 one or more UI elements; 
 based on selection of the particular declarative model data within the real-time incremental editor, visually distinguishing each of the one or more UI elements within the first UI as being selected at the second UI of the real-time incremental editor; 
 receiving a second editing user input at the second UI of the real-time incremental editor, the second editing user input providing one or more changes to the particular declarative model data corresponding to the one or more UI elements, in order to enact one or more desired edits to each of the one or more UI elements; and 
 updating the first UI to reflect the one or more desired edits to the one or more UI elements, including altering the visual appearance of each of the one or more UI elements based on the one or more changes to the particular declarative model data corresponding to the one or more UI elements. 
   
     
     
         16 . The computer system as recited in  claim 15 , wherein visually distinguishing each of the one or more UI elements within the first UI as being selected at the second UI comprises drawing a highlight around each of the one or more UI elements at the first UI. 
     
     
         17 . The computer system as recited in  claim 15 , wherein the declarative model data comprises a schematized extensible markup language application foundation (XAF) application description. 
     
     
         18 . The computer system as recited in  claim 15 , wherein the declarative model data is divided into chunks based on corresponding portions of a UI tree. 
     
     
         19 . The computer system as recited in  claim 15 , further comprising, based on the first editing user input, constructing a query that is used to query for each instance of a UI element corresponding to the particular declarative model data. 
     
     
         20 . The computer system as recited in  claim 15 , further comprising:
 receiving a third editing user input at the second UI of the real-time incremental editor that result in a new feature being added to the application program; and   dynamically adding the new feature to the application program in real-time.