Browse Prior Art Database

Method for defining RIA Toolkit theme integration with Theme Development Tools Disclosure Number: IPCOM000203589D
Publication Date: 2011-Jan-28
Document File: 6 page(s) / 110K

Publishing Venue

The Prior Art Database


The invention enables a tool to apply a simple style property, embodied by a set of styling rules contained within one or more styling files, to a widget which encapsulates a complex set of objects, represented by a Document Object Model (DOM) or equivalent structure. With HTML and CSS, it is simple to apply a style change, such as a change in background color, to a single node. However, when a visual entity is represented by a widget, it is no longer obvious where to apply the change. The widget may involve many HTML nodes, and applying visual changes to the top node in the structure may not have the desired visual effect or any effect at all. A system comprising metadata defines the relationship between the style information and the underlying DOM representation such the changes may be applied at runtime or applied to regenerate the styling files representing an overall styling theme.

This text was extracted from a PDF file.
This is the abbreviated version, containing approximately 34% of the total text.

Page 01 of 6

Method for defining RIA Toolkit theme integration with Theme Development Tools

Disclosed is a process for creating one or more theme metadata files providing a detailed cross-reference between widgets, widget sub-components (


                                          ), and widget interactive states, and styling rule selectors in styling files, for example, cascading style sheets (CSS) within a particular theme. Theme metadata typically provides sufficient information for an authoring tool of a visual authoring system to enable a designer/developer to modify the theme by selecting widgets and modifying associated styling values in a way similar to modification of hypertext markup language (HTML) element styles. The theme metadata file contains information describing construction of Rich Internet Applications (RIA) toolkit widgets needed by the design tool when editing theme styling.

RIA toolkits used to define rich user interfaces using browser-based technologies are well known. For example, toolkits for HTML-based RIAs such as Dojo, (available at,


                        and YUI, (available at have a typical toolkit construction based on HTML, JavaScript cascading style sheets and images using various formats including

                                                 . RIA toolkits often provide widgets coded as a single element at application development time. For HTML-based systems, this single element is usually an HTML element (for example, an HTML

element) as shown in a widget declaration of Figure 1.


(This page contains 00 pictures or other non-text object)

When the application is executed, scripting logic in the RIA toolkit transforms the widget declaration into a complete runtime document object model (DOM) to implement function and structure of the widget. Figure 2 is an example of a runtime widget HTML transformation using a declaration example of Figure 1.



Query, (available at http://


, and


Figure 1

Page 02 of 6

(This page contains 00 pictures or other non-text object)

Figure 2

The visual style of the widget is provided by the styling system of the RIA toolkit. For many HTML-based RIA toolkits, the toolkit uses Cascading Style Sheets. Typically the toolkit

  rovides one or more visual styling themes, defining styling rules across multiple widgets ensuring the appearance of the widgets is visually consistent. Each theme typically consists of one or more styling files. For HTML-based toolkits, a theme typically consists of a combination of CSS files and images referenced by the CSS files. The RIA toolkit places styling directives on the widget markup (for example, HTML elements) of the runtime elements within the DOM for the widgets. In HTML-based systems, RIA toolkits typically make extensive use of CSS class names using the class attribute on HTML elements. The class names correspond to selector rules defined in the theme files packaged with the RIA toolkit. Figure 3 is an example of a theme using a CSS file.



Page 03 of 6

(This page c...