Client-side components

• US 8,504,913 B2
• Filed: 06/08/2007
• Issued: 08/06/2013
• Est. Priority Date: 06/08/2007
• Status: Active Grant

• Current Assignee: Apple Inc.
• Original Assignee: Apple Inc.
• Inventors: Marchant, Benoit, Jolley, Charles
• Primary Examiner(s): Ries, Laurie
• Assistant Examiner(s): AMIN, MUSTAFA A
• Application Number:
  US11/811,293
• Publication Number:
  US 20080307299A1
• Time in Patent Office: 2,251 Days
• Field of Search: 715/202, 715/255
• US Class Current: 715/255
• CPC Class Codes: G06F 16/972 Access to data in other repository systems, e.g. legacy data or dynamic Web page generation

Abstract

Generating web pages dynamically at a client is disclosed. In some embodiments, when a web application or other code determines that a page is to be displayed, a set of components required to generate the page dynamically at the client is determined. Any components not already available at the client is obtained from a server. In some embodiments each component includes a display portion and may include one or both of a set of binding declarations and a logic portion. The components are parsed at the client and used to generate the page dynamically at the client, e.g., by generating associated portions of the document object model (DOM), retrieving JavaScript™ or other functions/classes and linking them to the respective portions of the DOM to which they correspond, and using the browser to render the page so created.

Claims

1. A method for generating a page, comprising:

receiving, at a client, a plurality of components of the page, the plurality of components comprising a root component and one or more child components, each component being associated with at least a part of the page and each component comprising at least one of a display definition portion and a logic portion;

constructing, at the client and based on the plurality of components, a document object model (DOM) tree that defines a hierarchy of display elements, wherein each display element defines either a static portion of the page or a dynamic portion of the page and resides at a particular hierarchical level within the DOM tree;

constructing, at the client and based on both the DOM tree and the plurality of components, a logic tree that defines a hierarchy of logic objects, wherein the constructing comprises;

adding, for each display element in the DOM tree that defines a dynamic portion of the page, a logic object to the logic tree, wherein the logic object is at a same hierarchical level within the logic tree as the particular hierarchical level at which the display element resides in the DOM tree, and, when executed, carries out a particular action within the page;

rendering, at the client, the static portions of the page; and

rendering, at the client, the dynamic portions of the page based on both the DOM tree and the logic tree.

2. The method as recited in claim 1, wherein the display definition portion of a component of the plurality of components comprises an XHTML template or tag.

3. The method as recited in claim 1, wherein the logic portion of a component of the plurality of components comprises a software object.

4. The method as recited in claim 1, wherein the logic portion of a component of the plurality of components comprises an instance of a JavaScript class.

5. The method as recited in claim 1, wherein a component of the plurality of components includes one or more subcomponents.

6. The method as recited in claim 1, wherein a component of the plurality of components includes one or more declarations.

7. The method as recited in claim 1, wherein a component of the plurality of components includes one or more binding declarations.

8. The method as recited in claim 1, wherein the display definition portion of a component of the plurality of components is represented by at least one display element included in the DOM tree of the page.

9. The method as recited in claim 1, wherein the logic portion of a component of the plurality of components is represented by at least one logic object included in the logic tree.

10. The method as recited in claim 1, wherein each logic object in the logic tree registers as an event listener for DOM events associated with the corresponding display element included in the DOM tree.

11. The method as recited in claim 1, wherein a page-level logic object included in the logic tree registers as an event listener for all DOM events that occur within the page.

12. The method as recited in claim 1, wherein a display element in the DOM tree and a logic object in the logic tree that correspond to one another have the same name or identifier.

13. The method as recited in claim 12, wherein the name or identifier is unique.

14. The method as recited in claim 1, further comprising requesting an additional component.

15. The method as recited in claim 14, wherein the additional component is requested in response to receiving a request for another page.

16. The method as recited in claim 14, wherein requesting the additional component comprises requesting an XML file associated with the component.

17. The method as recited in claim 14, wherein receiving the requested additional component at the client comprises receiving an XHTML file of the requested component.

18. The method as recited in claim 17, further comprising parsing the XHTML file of the requested additional component without rendering.

19. The method as recited in claim 1, further comprising receiving client-side code associated with a web application with which the page is associated.

20. A method for providing a page, comprising:

receiving from a client a request for a page;

sending to the client a plurality of components of the page, the plurality of components comprising a root component and one or more child components, each component being associated with at least a part of the page and each component comprising at least one of a display definition portion and a logic portion;

constructing, at the client and based on the plurality of components, a document object model (DOM) tree that defines a hierarchy of display elements, wherein each display element defines either a static portion of the page or a dynamic portion of the page and resides at a particular hierarchical level within the DOM tree;

constructing, at the client and based on both the DOM tree and the plurality of components, a logic tree that defines a hierarchy of logic objects, wherein the constructing comprises;

adding, for each display element in the DOM tree that defines a dynamic portion of the page, a logic object to the logic tree, wherein the logic object is at a same hierarchical level within the logic tree as the particular hierarchical level at which the display element resides in the DOM tree, and, when executed, carries out a particular action within the page

wherein the static portions of the page are rendered at the client based on the DOM tree; and

wherein the dynamic portions of the page are rendered at the client based on both the DOM tree and the logic tree.

21. A system for generating a page, comprising:

a processor at a client configured to;

receive a plurality of components of the page, the plurality of components comprising a root component and one or more child components, each component being associated with at least a part of the page and each component comprising at least one of a display definition portion and a logic portion;

construct, based on the plurality of components, a document object model (DOM) tree that defines a hierarchy of display elements, wherein each display element defines either a static portion of the page or a dynamic portion of the page and resides at a particular hierarchical level within the DOM tree;

construct, based on both the DOM tree and the plurality of components, a logic tree that defines a hierarchy of logic objects, wherein the constructing comprises;

adding, for each display element in the DOM tree that defines a dynamic portion of the page, a logic object to the logic tree, wherein the logic object registers as an event listener for DOM events associated with the display element and is at a same hierarchical level within the logic tree as the particular hierarchical level at which the display element resides in the DOM tree, and, when executed, carries out a particular action within the page;

render the static portions of the page based on the DOM tree; and

render the dynamic portions of the page based on both the DOM tree and the logic tree; and

a memory coupled to the processor and configured to provide instructions to the processor.

22. The system as recited in claim 21, wherein the display definition portion of a component of the plurality of components comprises an XHTML template or tag.

23. The system as recited in claim 21, wherein the logic portion of a component of the plurality of components comprises a software object.

24. The system as recited in claim 21, wherein a component of the plurality of components includes one or more declarations.

25. A computer program product for generating a page, the computer program product being embodied in a non-transitory computer readable storage medium and comprising computer instructions for:

receiving, at a client, a plurality of components of the page, the plurality of components comprising a root component and one or more child components, each component being associated with at least a part of the page and each component comprising at least one of a display definition portion and a logic portion;

constructing, at the client and based on the plurality of components, a document object model (DOM) tree that defines a hierarchy of display elements, wherein each display element defines either a static portion of the page or a dynamic portion of the page and resides at a particular hierarchical level within the DOM tree, and wherein one of the display elements in the DOM tree is a page-level display element that defines a dynamic portion of the page;

constructing, at the client and based on both the DOM tree and the plurality of components, a logic tree that defines a hierarchy of logic objects, wherein the constructing comprises;

adding, for the page-level display element in the DOM tree, a page-level logic object in the logic tree that registers as an event listener for all DOM events that occur within the page; and

adding, for each additional display element in the DOM tree that defines a dynamic portion of the page, a logic object to the logic tree, wherein the logic object is at a same hierarchical level within the logic tree as the particular hierarchical level at which the display element resides in the DOM tree, and, when executed, carries out a particular action within the page;

rendering, at the client, the static portions of the page based on the DOM tree; and

rendering, at the client, the dynamic portions of the page based on both the DOM tree and the logic tree.

26. The computer program product as recited in claim 25, wherein the display definition portion of a component of the plurality of components comprises an XHTML template or tag.

27. The computer program product as recited in claim 25, wherein the logic portion of a component of the plurality of components comprises a software object.

28. The computer program product as recited in claim 25, wherein a component of the plurality of components includes one or more declarations.

29. The computer program product as recited in claim 25, wherein a component of the plurality of components includes one or more binding declarations.

30. A computer program product for providing a page, the computer program product being embodied in a non-transitory computer readable storage medium and comprising computer instructions for:

receiving from a client a request for the page; and

sending to the client a plurality of components of the page, the plurality of components comprising a root component and one or more child components, each component being associated with at least a part of the page and each component comprising at least one of a display definition portion and a logic portion;

constructing, at the client and based on the plurality of components, a document object model (DOM) tree that defines a hierarchy of display elements, wherein each display element defines either a static portion of the page or a dynamic portion of the page and resides at a particular hierarchical level within the DOM tree;

constructing, at the client and based on both the DOM tree and the plurality of components, a logic tree that defines a hierarchy of logic objects, wherein the constructing comprises;

adding, for each display element in the DOM tree that defines a dynamic portion of the page, a logic object to the logic tree, wherein the logic object registers as an event listener for DOM events associated with the display element and is at a same hierarchical level within the logic tree as the particular hierarchical level at which the display element resides in the DOM tree, and, when executed, carries out a particular action within the page;

rendering, at the client and based on the DOM tree, the static portions of the page; and

rendering, at the client and based on both the DOM tree and the logic tree, dynamic portions of the page.