System and method for controlling user interface features of a web application

• US 8,032,837 B2
• Filed: 10/03/2003
• Issued: 10/04/2011
• Est. Priority Date: 12/09/2002
• Status: Expired due to Fees

• Current Assignee: Corel Corporation (Corel Holdings LP)
• Original Assignee: Corel Corporation (Corel Holdings LP)
• Inventors: Barrett, Peter, Bowman, Gordon
• Primary Examiner(s): Augustine; Nicholas
• Application Number:
  US10/679,181
• Publication Number:
  US 20040111673A1
• Time in Patent Office: 2,923 Days
• Field of Search: 715762-767, 715/788, 715/760, 715/744, 715/513, 715/234, 709/203, 709/219, 434/118, 345/333, 345/335, 345/356
• US Class Current: 715/760
• CPC Class Codes: G06F 9/451 Execution arrangements for user interfaces

Abstract

A system and method of controlling user interface features of a web application is provided. The system comprises a collection of user interface control elements, a collection of skin templates comprising extensible markup language based markup contained as children of a container element, and a collection of control element instructions for performing actions associated with the control elements. Each control element comprises a namespace, common attributes for defining graphical features of the control element and for associating the control element with the internal state of the core control element, other attributes for defining attributes that affect the intrinsic behavior of the control, and a skin template reference attribute for referencing a skin template. Each instruction is associated with a control element.

Claims

1. A method of controlling user interface features of a web application, the method comprising the steps of:

describing the web application using a presentation markup language that has been extended to include a collection of user interface control elements to create an extended presentation markup language, the web application description including a user interface control comprising a name element for associating the user interface control of the web application with a user interface control element of the collection of user interface control elements;

searching, in a document object model (DOM) of the web application, for user interface controls of the web application, each user interface control identified by a namespace associated with user interface control elements of the collection of user interface control elements included in the extended presentation markup language, the namespace including a prefix identifying the collection of user interface control elements as part of the extended presentation markup language and allowing a presentation markup language parser to identify them as part of the DOM;

for each located user interface control;

generating a function name for the located user interface control element following a predetermined naming convention comprising adding the prefix to a unique name associated with the located user interface control element;

calling a predetermined set of user interface control instructions associated with the located user interface control element using the generated function name, the predetermined set of user interface control instructions defining the behavior of the located user interface control element and comprising a first portion relating uniquely to the located user interface control element, a second portion commonly relating to multiple user interface control elements, and an attribute relating to a skin template controlling the display of the located user interface control; and

rendering the DOM of the web application described in the extended presentation markup language, including rendering the located user interface control of the web application based on at least the predetermined set of user interface control instructions.

2. The method as claimed in claim 1, wherein the step of searching includes the steps of:

traversing each node in the document object model; and

determining whether the node has a name which matches a designated naming convention.

3. The method as claimed in claim 1, wherein the step of calling a script includes the steps of:

dynamically generating a function name associated with the designated element;

passing an object associated with the designated control element as a parameter of the generated function name;

retrieving the attributes of the object; and

performing a function stored in memory having the generated function name.

4. The method as claimed in claim 3, wherein the step of generating a function name includes the steps of:

determining if the name of the designated element contains a designated prefix;

generating a function name comprising the name of the designated element;

assigning an object associated with the designated element as the parameter of the function name; and

assigning the control instructions of the designated element as steps for the function to perform.

5. The method as claimed in claim 1, further comprising the steps of:

searching for a control attribute of a user interface control element in the document object model; and

calling control attribute instructions associated with the control attribute.

6. The method as claimed in claim 5, wherein the step of searching for the control attribute comprises the steps of:

searching attributes of the user interface control element in the document object model; and

determining whether the attribute has a name which follows a designated naming convention.

7. The method as claimed in claim 6, wherein the step of calling the control attribute instructions includes the steps of:

determining if the name of the control attribute includes a designated prefix;

generating a function name comprising the name of the control attribute;

assigning an object associated with the control attribute as the parameter of the function name; and

assigning the control attribute instructions of the designated attribute as steps for a function having the function name to perform.

8. The method as claimed in claim 1, further comprising the steps of:

adding a behavior element as a child of a user interface control element;

receiving an event which is equal to an event attribute setting in the behavior element; and

calling behavior element instructions associated with the behavior element.

9. A system for controlling user interface features of a web application, the system comprising:

a collection of user interface control elements including a user interface control element associated with a user interface control identified in the web application, the user interface control comprising a name element for associating the user interface control of the web application with the user interface control element of the collection of user interface control elements, the web application described in a presentation markup language that has been extended to include the collection of user interface control elements to create an extended presentation markup language, each of the user interface control elements of the collection comprising;

a namespace for associating the user interface control element with the user interface control of the web application, the namespace including a prefix for identifying the user interface control of the web application associated with the user interface control element as part of the extended presentation markup language and having names following a predetermined naming convention and allowing a parser to identify them as part of a document object model (DOM) of the web application; and

a set of core attributes common to all of the user interface control elements in the collection of user interface control elements;

a collection of skin templates, each of the skin templates associated with one of the user interface control elements through one of the core attributes of the user interface control elements, each of the skin templates describing how to display the user interface control element associated with the skin template, each of the skin templates described in the presentation markup language;

the parser for parsing the web application described in the extended presentation markup language, the parser parsing the user interface control of the web application associated with the user interface control element into the DOM of the web application;

a viewer for rendering the DOM of the web application described in the extended presentation markup language, including rendering the user interface control of the web application based on at least one of the skin templates associated with the user interface control elements, the viewer comprising a collection of user interface control instructions, each of the user interface control instructions associated with respective user interface control elements through a control function name, each of the control function names based on the namespace of the associated user interface control element, each of the user interface control instructions defining the behavior of the user interface control element to control user interface features of the web application; and

an initialization function associated with the viewer for directing the processing of one or more control elements in the DOM of the web application, the initialization function comprising instructions for;

traversing each node in the DOM of the web application searching for a node identified by the prefix of the namespace associated with the user interface control elements;

generating a function name based on the namespace of the user interface control element of the identified node, the function name generated following a predetermined naming convention comprising adding the prefix to a unique name associated with the user interface control element of the identified node, the generated function name corresponding to one of the control function names;

calling a predetermined set of user interface control instructions associated with the located user interface control element using the generated function name, the predetermined set of user interface control instructions defining the behavior of the located user interface control element and comprising a first portion relating uniquely to the located user interface control element, a second portion commonly relating to multiple user interface control elements, and an attribute relating to a predetermined skin template of the collection of skin templates for the user interface control; and

causing the viewer to render the DOM of the web application described in the extended presentation markup language, including rendering the located user interface control of the web application based on at least the predetermined set of user interface control elements.

10. The system as claimed in claim 9, wherein the skin template is associated with the user interface control element by a reference attribute that comprises a reference to a location of a skin template file comprising the collection of presentation markup language describing the user interface control element.

11. The system as claimed in claim 9, wherein the user interface control element is associated with an extensible markup language (XML) based element.

12. The system as claimed in claim 11, wherein the user interface control element is a parent of an extensible markup language based element.

13. The system as claimed in claim 11, wherein the user interface control element is a child of an extensible markup language based element.

14. The system as claimed in claim 9, further comprising:

a collection of control attributes for adding to the core attributes, the control attributes following the predetermined naming convention; and

a collection of control attribute instructions for performing actions associated with the collection of control attributes, each instruction associated with a control attribute.

15. The system as claimed in claim 14, wherein the initialization function contains instructions for traversing each node in the document object model and for searching and calling functions associated with the user interface control elements and the control attributes having names following the predetermined naming convention.

16. The system as claimed in claim 9, wherein the core attributes comprise state attributes for specifying the identification of a <

state>

child element of the user interface control element.

17. The system as claimed in claim 9, wherein the core attributes comprise one or more of:

an identification attribute for referencing the control element;

a label attribute for associating text control;

an x attribute for specifying the x-coordinate of the left edge of the control element;

a y attribute for specifying the y-coordinate of the top edge of the control element;

a width attribute for specifying the width of the control element;

a height attribute for specifying the height of the control element;

a preserve aspect ratio attribute for preserving the aspect ratio of the control element when either the width attribute or height attribute is known;

a label X attribute for specifying the x-coordinate of the left edge of the label, relative to the y attribute;

a label Y attribute for specifying the y-coordinate of the bottom edge of the label, relative to the x attribute;

a disabled attribute for specifying whether the control element is disabled and cannot be used;

a state hover attribute for specifying the identification of a <

state>

child element of the control element, the state hover attribute used to override the appearance of a hover state as defined in a skin of the control element;

a state focus attribute for specifying the identification of a<

state>

child element of the control element, the state focus attribute used to override the appearance of a focus state as defined in a skin of the control element;

a state up attribute for specifying the identification of a <

state>

child element of the control element, the state up attribute used to override the appearance of an up state as defined in a skin of the control element;

a state down attribute for specifying the identification of a <

state>

child element of the control element, the state down attribute used to override the appearance of a down state as defined in a skin of the control element;

a state hit attribute for specifying the identification of a <

state>

child element of the control element, the state hit attribute used to override the appearance of a hit state as defined in a skin of the control element;

a state disabled up attribute for specifying the identification of a <

state>

child element of the control element, the state disabled up attribute used to override the appearance of a disabled up state as defined in the skin of the control element; and

a state disabled down attribute for specifying the identification of a <

state>

child element of the control element, the state disabled down attribute used to override the appearance of a disabled down state as defined in a skin of the control element.

18. The system as claimed in claim 17, wherein the collection of user interface control elements comprises one or more of:

a dsvg;

button control element for defining a control that is clicked to trigger an action, the dsvg;

button control element comprising control attributes including;

a toggle attribute for specifying whether the button is a toggle or a sticky button;

a group attribute for specifying the name of a group to which the button control element belongs; and

a checked attribute for specifying whether the button control element is down/checked or up/unchecked;

a dsvg;

comboBox control element for defining a control that is clicked to trigger an action, the dsvg;

comboBox control element comprising control attributes including;

a dropdown attribute for specifying whether the comboBox control element has a dropdown list;

an editable attribute for specifying whether the comboBox control element is editable;

a value attribute for specifying the value of the label attribute of a currently selected item;

a name attribute for specifying the value of a name attribute of a currently selected item; and

a selected identification attribute for specifying the value of the identification attribute of a currently selected item;

a dsvg;

listBox control element for defining a control that is clicked to trigger an action, the dsvg;

listBox control element comprising control attributes including;

a multi select attribute for specifying whether more than one item can be selected;

an editable attribute for specifying whether the listBox control element is editable;

a value attribute for specifying the value of the label attribute of a currently selected item;

a name attribute for specifying the value of a name attribute of a currently selected item; and

a selected identification attribute for specifying the value of the identification attribute of a currently selected item;

a dsvg;

listView control element for defining a control that is clicked to trigger an action, the dsvg;

listView control element comprising control attributes including;

a multi select attribute for specifying whether more than one item can be selected;

an editable attribute for specifying whether the comboBox control element is editable;

a display attribute for specifying a semicolon-delimited list of the names of the attributes in all of the <

item>

children of a control element;

an anything attribute for specifying an attribute name in which to store data; and

a selected identification attribute for specifying the value of the identification attribute of a currently selected item;

a dsvg;

contextMenu control element for defining a control that is clicked to trigger an action, the dsvg;

contextMenu control element comprising control attributes including;

an event source attribute for specifying the identification of an element that triggered the contextMenu control element to appear;

a value attribute for specifying the value of the label attribute of currently selected item;

a name attribute for specifying the value of a name attribute of a currently selected item; and

a selected identification attribute for specifying the value of the identification attribute of a currently selected item;

a dsvg;

item control element for defining a control that is clicked to trigger an action, the dsvg;

item control element comprising control attributes including;

an access key attribute for specifying a shortcut key which, when pressed, selects this item; and

an anything attribute for specifying an attribute name in which to store data;

a dsvg;

textbox control element for defining a control that is clicked to trigger an action, the dsvg;

textbox control element comprising control attributes including;

a value attribute for specifying default text within the textbox control element;

a num lines attribute for specifying a number of lines allowed in the textbox control element;

a max length attribute for specifying a maximum number of characters allowed in the textbox control element;

a wrap attribute for specifying whether to auto-wrap text;

a read only attribute for specifying if the textbox control element is non-editable;

a secret attribute for specifying whether text is secret;

a data type attribute for specifying a type of data that is allowed to be entered;

a mask attribute for specifying a pattern that allows extra characters to be inserted into data as it is entered and for only allowing specific characters in specific locations; and

a case attribute for specifying the case of data entered into the textbox control element;

a dsvg;

slider control element for defining a control that is clicked to trigger an action, the dsvg;

slider control element comprising control attributes including;

a min attribute for specifying a minimum value of the slider control element;

a max attribute for specifying a maximum value of the slider control element;

a min position attribute for specifying a minimum allowed value of a thumb;

a max position attribute for specifying a maximum allowed value of a thumb;

a value attribute for specifying an initial value of the slider control element;

an increment attribute for specifying allowed values that the slider control element can create;

a page increment attribute for specifying an amount that a thumb moves;

an orientation attribute for specifying a rotation angle of the slider control attribute;

a ticks major attribute for specifying an interval at which major tick marks are displayed; and

a ticks minor attribute for specifying an interval at which minor tick marks are displayed;

a dsvg;

scrollbar control element for defining a control that is clicked to trigger an action, the dsvg;

scrollbar control element comprising control attributes including;

a bars attribute for specifying the appearance of a horizontal scrollbar or a vertical scrollbar; and

a dsvg;

spin control element for defining a control that is clicked to trigger an action, the dsvg;

spin control element comprising control attributes including;

a min attribute for specifying a minimum value of the spin control element;

a max attribute for specifying a maximum value of the spin control element;

a value attribute for specifying an initial value of the spin control element; and

an increment attribute for specifying allowed values that the spin control element can create.