Pre-children in a user interface tree
The described technology is directed towards a pre-child user interface element in a user interface tree that draws before the parent element draws, (and thus before any conventional child element of the parent draws). For example, based upon current state data such as whether the parent element has focus, the pre-child may draw a highlight or the like before (so as to be beneath) drawing the representation of the parent element, to indicate the focused state (or and/or other current state or states). The user interface tree maintains a property that it is composable because the parent user interface element code is independent of what any of its pre-child element or pre-children elements do when invoked.
1. A system comprising:
a processor; and
a memory operatively coupled to the processor, the memory having stored therein computer-executable instructions, which when executed perform operations, the operations comprising:
traversing a hierarchical tree of user interface elements, in which the hierarchical tree comprises a parent user interface element, and a pre-child user interface element that depends from the parent user interface element;
drawing a representation of the pre-child user interface element;
drawing a representation of the parent user interface element over the representation of the pre-child user interface element
animating the representation of the pre-child user interface element based on animation information associated with the pre-child user interface element; and
obtaining state data at the pre-child user interface element, the state data corresponding to at least one of: a listening state or a pressed state.
2. The system of claim 1 , wherein the animation information changes an opacity property of the representation of the pre-child user interface element over time.
3. The system of claim 1 , wherein the animation information changes a displayed location of the representation of the pre-child user interface element over time.
4. The system of claim 1 , wherein the animation information associated with the pre-child user interface element is first animation information, and wherein the operations further comprise animating the representation of the parent user interface element based on second animation information associated with the parent interface element.
5. The system of claim 1 , wherein the animation information associated with the pre-child user interface element is first animation information corresponding to first state data, wherein the pre-child user interface element is associated with second animation information corresponding to second state data, and wherein the operations further comprise detecting a change from the first state data to the second state data, and in response, animating the representation of the pre-child user interface element based on the second animation information.
6. The system of claim 1 , wherein the operations further comprise obtaining state data at the pre-child user interface element, the state data corresponding to at least one of: a hovered user interaction state, a focused user interaction state or a selected user interaction state.
7. The system of claim 1 , wherein the hierarchical tree further comprises a child user interface element that depends from the parent user interface element, and wherein the operations further comprise drawing a representation of the child user interface element over the representation of the parent user interface element.
8. The system of claim 7 , wherein the operations further comprise animating the representation of the child user interface element.
9. A method, comprising:
determining based on state data whether to draw a representation of a pre-child user interface element, in which the pre-child user interface element depends from a parent user interface element in a hierarchical tree of user interface elements;
in response to the determining based on the state data that the representation of the pre-child user interface element is to be drawn, drawing a representation of the pre-child user interface element, and drawing a representation of the parent user interface element over the representation of the pre-child user interface element; and
in response to the determining based on the state data that the representation of the pre-child user interface element is not to be drawn, drawing a representation of parent user interface element.
10. The method of claim 9 , wherein the representation of the pre-child user interface element is to be drawn, and further comprising animating the pre-child user interface element based on animation information associated with the pre-child user interface element.
11. The method of claim 9 , wherein the determining based on the state data comprises evaluating the state data for an indication of at least one of: a focused state, a hovered state, a listening state, a selected state or a pressed state.
12. The method of claim 9 , further comprising drawing a representation of a child user interface element over the representation of the parent user interface element.
13. One or more machine-readable storage media having machine-executable instructions, which when executed, cause a system comprising a processor to perform operations, the operations comprising:
drawing representations of user interface elements, comprising:
determining that a user interface element to be drawn is a hierarchical parent to a pre-child user interface element;
determining that the pre-child user interface element is to be drawn;
drawing a representation of the pre-child user interface element; and
drawing a representation of the hierarchical parent user interface element over the representation of the pre-child user interface element.
14. The one or more machine-readable storage media of claim 13 , wherein the pre-child user interface element has a lower-level pre-child user interface element, and wherein the operations further comprise drawing a representation of the lower-level pre-child user interface element before drawing the representation of the pre-child user interface element.
15. The one or more machine-readable storage media of claim 13 , wherein the determining that the pre-child user interface element is to be drawn comprises evaluating state data.
16. The one or more machine-readable storage media of claim 15 , wherein the representation of the pre-child user interface element is a first representation of the pre-child user interface element, wherein the state data comprises first state data that changes to second state data, and wherein the operations further comprise, in response to the change to the second state data, determining that the pre-child user interface element is to be drawn as a second representation of the pre-child user interface element that is different from the first representation of the pre-child user interface element, drawing the second representation of the pre-child user interface element in place of the first representation of the pre-child user interface element, and redrawing the representation of the hierarchical parent user interface element over the second representation of the pre-child user interface element.
17. The one or more machine-readable storage media of claim 13 , wherein the drawing the representation of the pre-child user interface element comprises drawing a shape that is relative to the representation of the parent user interface element.
18. The one or more machine-readable media of claim 13 , wherein the drawing the representation of the pre-child user interface element comprises drawing a highlight that is relative to the representation of the parent user interface element.
19. The one or more machine-readable media of claim 13 , wherein the operations further comprise animating the representation of the pre-child user interface element over a plurality of rendering frames.
20. The one or more machine-readable storage media of claim 13 , wherein the determining that the pre-child user interface element is to be drawn comprises evaluating state for an indication of at least one of: a focused state, a hovered state, a listening state, a selected state or a pressed state.