Method and apparatus for designing, rendering and programming a user interface

• US 7,441,200 B2
• Filed: 02/03/2003
• Issued: 10/21/2008
• Est. Priority Date: 02/01/2002
• Status: Expired due to Fees

• Current Assignee: Concepts Appsgo Incorporated
• Original Assignee: Concepts Appsgo Incorporated
• Inventors: Savage, Martin
• Primary Examiner(s): Chow; Denniis-Doon
• Assistant Examiner(s): CHAUDHURI, ANITA
• Application Number:
  US10/356,561
• Publication Number:
  US 20030169293A1
• Time in Patent Office: 2,087 Days
• Field of Search: 715/762, 715/744, 715/763, 715/764, 715/765, 715/760, 715/746, 715/749, 715/864, 715/865, 715/866
• US Class Current: 715/762
• CPC Class Codes: G06F 3/0481 based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance

Abstract

A method of displaying a user interface, comprising the steps of first obtaining a representation of the user interface. The representation includes conceptual components representing multi-dimensional arrays of elements of the user interface. The conceptual components include a vector parameter related to a multi-dimensional size of the array, and matrices having dimensions related to those of the array.

The method proceeds by executing a device-specific rendering algorithm on the representation of the user interface and displaying the user interface on the device.

Claims

1. A method of generating displayed elements in a user interface (UI) on a device selected from a plurality of devices, comprising:

a) providing three conceptual components to represent said displayed elements in said UI, said three conceptual components comprising

a container component defining frame objects relating to parent objects in common frames in said UI and having a set of child conceptual components defining child elements in said common frames;

a control component defining control objects used to generate input selections relating to said displayed elements in said UI; and

a text component defining text entry objects used to process text entries relating to said displayed elements in said UI;

b) providing a first data structure as a tree providing a representation of said UI, where each node of said tree represents a part of said displayed elements and comprises

a second data structure for one of said three conceptual components;

a third data structure for labels used to identify said frame objects, said control objects and said text entry objects;

a vector parameter containing array data associating said labels to said frame objects, said control objects and said text entry objects;

a set of directions representing a layout of said displayed elements in said UI and being mapped to each dimension of said vector parameter; and

a fourth data structure comprising one of;

a set of child conceptual components if said node is said container component;

an input selection template, if said node is said control component, that allows a user to perform selections,

comprising a label data structure providing selection domain and identifiers; and

a text field template, if said node is said text component, that allows text to be entered by a user for said element;

c) rendering said representation for said device to generate native controls used to display said displayed elements of said UI, utilizing

said array data in said vector parameter to determine

a size for said first data structure; and

a size for said frame objects, said control objects and said text entry objects, corresponding to a size of said frame objects of a parent of said container component, if said parent exists, and said vector parameter; and

in said each node in said tree, its vector parameter, the vector parameters of its parent nodes and its fourth data structure to render its element on said UI for said device; and

d) rendering said displayed elements on said device using said native controls.

2. The method of generating displayed elements in a user interface as claimed in claim 1, wherein said representation is displayed by pushing instances of said three conceptual components of first data structures onto a stack, and the user is allowed to interact with only the conceptual component at the top of the stack.

3. The method of generating displayed elements in a user interface as claimed in claim 2, wherein said stack has at least two entries and said first data structure at the top of the stack is rendered as a dialog box.

4. The method of generating displayed elements in a user interface as claimed in claim 3, wherein said elements of said UI are represented in a multi-dimensional array associated with said conceptual components.

5. The method of generating displayed elements in a user interface as claimed in claim 4, wherein said third data structure includes a labels matrix including identifiers associated with elements in the array.

6. The method of generating displayed elements in a user interface as claimed in claim 5, wherein the multi-dimensional size of said labels matrix is equal to said vector parameter.

7. The method of generating displayed elements in a user interface as claimed in claim 5, wherein said identifiers are used to display corresponding elements of the user interface.

8. The method of generating displayed elements in a user interface as claimed in claim 7, wherein the multi-dimensional size of said labels matrix is equal to said vector parameter.

9. The method of generating displayed elements in a user interface as claimed in claim 5, wherein said identifiers include text strings.

10. The method of generating displayed elements in a user interface as claimed in claim 5, wherein said identifiers include bitmap images.

11. The method of generating displayed elements in a user interface as claimed in claim 10, wherein said identifiers include text strings.

12. The method of generating displayed elements in a user interface as claimed in claim 4, wherein each element of said frame objects, said control objects or said text entry objects include a binary flag indicative of whether modification of said element of the user interface is permitted.

13. The method of generating displayed elements in a user interface as claimed in claim 4, wherein each element of said frame objects, said control objects or said text entry objects include an image providing an alternative rendering for said each element.

14. The method of generating displayed elements in a user interface as claimed in claim 1, wherein control component provides an interface selected from a group comprising at least:

push buttons, list boxes, radio buttons and check boxes.

15. The method of generating displayed elements in a user interface as claimed in claim 1, wherein said rendering said representation to generate native controls comprises utilizing a set of device control processes associated with said device to generate a fifth data structure containing device components mapped from said conceptual components in said tree, said device components indicating which said native controls to generate for said device, said set of device control processes selected to map boundary information related to said conceptual components to graphical mapping boundaries associated with said device.

16. The method of generating displayed elements in a user interface as claimed in claim 15, wherein said rendering said representation comprises traversing said fifth data structure to identify types of native objects related to each of said conceptual components using type information associated with said device provided in said fifth data structure.

17. The method of generating displayed elements in a user interface as claimed in claim 16, wherein said rendering said representation further comprises traversing said fifth data structure in a second instance to determine the layout of objects and to calculate physical boundaries of objects related to containers defined in conceptual components located in said second instance, using said boundary information associated with said device provided in said fifth data structure.

18. The method of generating displayed elements in a user interface as claimed in claim 17, wherein said rendering said representation further comprises traversing said fifth data structure in a third instance to generate a final user interface for said device, objects and a layout for said objects using data from each node in said fifth data structure to determine native component type and position data, using native control information associated with said device provided in said fifth data structure.

19. The method of generating displayed elements in a user interface as claimed in claim 18, wherein for a particular node of said tree its vector parameter defines the number of its labels.

20. The method of generating displayed elements in a user interface as claimed in claim 19, wherein for said particular node, data from its vector parameter is accumulated with data from a parent vector parameter from all of its parent nodes to define sizes of its frame, control or text entry data structures.

21. The method of generating displayed elements in a user interface as claimed in claim 20, wherein said rendering said representation comprises calculating a layout for elements of said UI for said device in a second bottom-up pass utilizing said conceptual components and their related third data structures and their frame, control or text entry data structures to generate said elements for said UL to accumulate the size of components from child nodes into the size of components from parent nodes to the root node.

22. The method of generating displayed elements in a user interface as claimed in claim 21, wherein said rendering said representation further comprises parsing said nodes of said tree in a third pass in a top-down manner to generate selected native controls, lay them out and render them after collecting relevant underlying data to render and lay out said native controls in said first and second passes.

23. The method of generating displayed elements in a user interface as claimed in claim 22, wherein said rendering said representation further comprises repeating said parsing said nodes of said tree as per said third pass to generate arrays of homogeneous selected native controls according to size data provided in vector parameters of said nodes to render multiple native controls each having a type that is uniquely defined by each said node attributes.

24. The method of generating displayed elements in a user interface as claimed in claim 16, wherein said traversing said tree is done in a top-down manner to select which of said native controls to generate.

25. The method of generating displayed elements in a user interface as claimed in claim 24, wherein said rendering said representation further comprises selecting for each particular node of said tree which native controls to generate by referencing a set of said native controls related to said device.

26. The method of generating displayed elements in a user interface as claimed in claim 25, wherein said rendering said representation further comprises selecting for said each particular node which native controls to generate utilizing data of user interface parameters, user interface guidelines, form factors, and characterizations for said UI for said device, wherein said data is specific to a class of devices that includes said device.

27. The method of generating displayed elements in a user interface as claimed in claim 26, wherein said rendering said representation further comprises selecting for said each particular node what said native controls to generate utilizing the types of native controls previously identified from its parent nodes in order for said native controls to fit within their selected frame control.

28. The method of generating displayed elements in a user interface as claimed in claim 27, wherein said rendering said representation further comprises selecting for said each particular node what said native controls to generate utilizing its said vector and data in its third data structure and its frame, control or text entry data structures to select an appropriate native control to process the number of values defined by the sizes of said data structures.

29. The method of generating displayed elements in a user interface as claimed in claim 28, wherein said rendering said representation recursively traverses said fifth data structure to select one device component of said device components according to a state machine having states related to target device native control types.

30. The method of generating displayed elements in a user interface as claimed in claim 29, wherein in said state machine, a previous state before selecting said one device component relates to a frame object type defined by its parent component.

31. The method of generating displayed elements in a user interface as claimed in claim 30, wherein

a new state in said state machine is determined by its previous state and properties of the corresponding conceptual component;

and

said new state specifies a native control type that complies with conceptual component settings and a context frame used to embed instances of said new state.

32. The method of generating displayed elements in a user interface as claimed in claim 15, wherein said device components represent multi- dimensional arrays of said displayed elements of said UI.

33. The method of generating displayed elements in a user interface as claimed in claim 15, wherein said boundary information relates to one or more of said vector parameter, conceptual component type, and dimensions.

34. A system for generating displayed elements in a user interface (UI) on a device, comprising:

electronic memory for storing and updating a plurality of data structures;

a first data structure of said plurality of data structures, said first data structure being a tree providing a representation of said UI, where each node of said tree represents a part of said displayed elements and comprises

a second data structure for one of said three conceptual components;

a third data structure for labels used to identify said frame objects, said control objects and said text entry objects;

a vector parameter containing array data associating said labels to said frame objects, said control objects and said text entry objects;

a set of directions representing a layout of said displayed elements in said UI and being mapped to each dimension of said vector parameter; and

a fourth data structure comprising one of;

a set of child conceptual components if said node is said container component;

an input selection template, if said node is said control component, that allows a user to perform selections, comprising a label data structure providing selection domain and identifiers; and

a text field template, if said node is said text component, that allows text to be entered by a user for said element;

a processor for accessing said electronic memory and executing instructions;

a display; and

a rendering engine providing instructions to said processor for rendering said representation for said device to generate native controls used to generate said displayed elements of said UI on said display, said rendering engine providing instructions to said processor to render said displayed elements on said display using said native controls, said rendering engine utilizing said array data in said vector parameter to determine

a size for said first data structure;

a size for said frame objects, said control objects and said text entry objects, corresponding to a size of said frame objects of a parent of said container component, if said parent exists, and said vector parameter; and

in said each node in said tree, its vector parameter, the vector parameters of its parent nodes and its fourth data structure to render its element on said UI for said device.

35. The system for generating displayed elements in a user interface (UI) on a device as claimed in claim 34, wherein said rendering engine utilizes a set of device control processes associated with said device to generate a fifth data structure containing device components mapped from said conceptual components in said tree, said device components indicating which said native controls to generate for said device, said set of device control processes selected to map boundary information related to said conceptual components to graphical mapping boundaries associated with said device.