Patent Application
20090031211
This application relates to electronic commerce in general and Cascading Style Sheets (CSS) programming extension in particular.
In web development, Cascading Style Sheets, often abbreviated as CSS is a style language used to describe presentation of a document written in a markup language such as an eXtensible Markup Language (XML). A common application of CSS is to style web pages written in HTML and XHTML. CSS may also be utilized with any XML document. Example uses of CSS include defining colors, fonts, layout, and other aspects of document presentation. CSS allows to separate the content of a document (e.g., written in HTML) from the document presentation (written in CSS).
Embodiments of the present invention are illustrated by way of example and not limitation in the figures of the accompanying drawings, in which like reference numbers indicate similar elements and in which:
Cascading Style Sheets (CSS) gain increasing attraction with WEB 2.0. However, its programming style and process often present manageability issues, especially for larger commercial applications. One of the deficiencies of CSS identified by the inventors is lack of formal programming language support. Existing solution do not provide a CSS authoring application programming interface (API) or a CSS application API.
The raw text-based authoring, simply based on the CSS specification, even with advanced structure editor, may present a variety of issues. For example, text-based authoring typically lacks context-sensitive help with auto-completion. There is no programming reference model readily available during the authoring stage or during the application of a collection of style rules (e.g., there is no typed programming API to reference a specific rule within a CSS file). Due to the lack of referencing programming model, an author of a CSS file may need to clone, create, or alter style rules manually. For example, in order to create a family of rules (e.g., rules with same selectors but with different property values) the author may have to cut and paste rules from one text file into another. Such manual process may be prone to errors and time consuming. Since the property values in a CSS text file have to be in their final string format, the text-based authoring and editing of CSS presents difficulties where it may be desirable to reference externally defined data types.
In one example embodiment, a CSS programming extension is configured to enhance usability of CSS programming. A server-side CSS programming extension, in an example embodiment of a CSS authoring API, may be provided to emulate a higher level programming language, such as Java™. (Java™ is a trademark of Sun Microsystems, Inc.) A CSS authoring API may be implemented as a Java™ class that defines CSS rules in a Java™ object. One example embodiment of such Java™ class will be referred to as a Style Definition Class (e.g., named as JCssDef). The abstract JCssDef class, in one embodiment, provides a friendly authoring environment for defining specific CSS. An instance of CSS may be represented by an extended sub-class of base JCssDef.
A Style Definition Class, in one example embodiment, provides a set of complete programming APIs that may be used in any Java™ Integrated Development Environment (IDE) that provides context-sensitive help and auto-completion coding assistance. A Style Definition Class may be configured to include selector features to aid the authoring process. Table 1 below shows some example selector constructs using JCssDef. With predefined/configured tags and basic association functions, one can easily built various complex selectors.
The list below shows example tags defined by Style Definition Class.
Example Style Definition Class may be configured to have typed property definition methods in order to help eliminate the need for developer to remember the exact spelling of property names. Furthermore, enumerations may be provided for most of the standard CSS property values. this approach may be utilized advantageously by persons without extensive CSS expertise. The list and Table 2 below show some example property types and value enumerations.
The property API of an example Style Definition Class may permit both typed enumeration values and raw string values. Table 3 below shows example property API for a single property—an example “background” property. The properly overloaded methods may make CSS authoring more user-friendly.
A standard IDE may be used to provide coding assistance as illustrated in
The property API of the Style Definition Class, in one example embodiment, allows referencing of variables outside of the CSS definition, as well as variables from other Style Definition Class instances. The property API of the Style Definition Class may also provide value binding support to use external reference that can be resolved to different values based on environmental permutations. For example, an image reference can be used directly in style definition without the need to take its possible permutations into consideration. The final value, e.g., a universal resource locater (URL) of image could be properly resolved to be a localized image with proper protocols (such as, e.g., HTTP or HTTPs) based on its permutation.
For example, the definition in one Style Definition Class instance shown as Example 1 below may be resolved to the definition shown as Example 2 below, to localized images for a different locale (e.g., DE) shown in Example 3 below, or to secure images for secure pages shown in Example 4 below.
In one example embodiment, each rule in a Style Definition Class object may be programmatically referenced within or outside the Style Definition Class object, which, in turn, may contribute to easier cloning, altering, or extension of style rules. The style rules defined utilizing an example CSS programming extension may be scoped automatically (e.g., with late-binding), based on the operating environment, in order to confine the applicable matching range for the selectors.
For example, the rule shown in Example 6 below may produce the text form of CSS shown in Example 7 below and may be referred to as a scoped style rule.
div.title, p h4 {font-weight:bolder; color:blue
Another scoped style rule, shown in Example 8 below, may be configured to constrain its usage without the need to know its internal selectors and properties. The style rule shown in Example 8 below may produce the text form of CSS shown in Example 9 below.
JCssStyleRule RULE2=instance.rule(RULE1, ID.abc_);
#abc div.title, #abc p h4 {font-weight:bolder; color:blue}
In some embodiments, rules in a Style Definition Class instance may be defined as override rules over the inherited ones. For example, RULE3 inherits from RULE2 with same selectors (both shown in Example 10 below. RULE3 also overrides the color value and adds new font properties. The text form of CSS corresponding to the Style Definition Class instance shown in Example 10 is shown in Example 11 below.
#abc div.title, #abc p h4 {color:blue; font-size:x-large}
A Style Definition Class may be defined to correspond to a collection of Cascading Style Sheets (or CSS files). For example, such collection may include several localized versions of style definitions. In one embodiment, an appropriate localization instruction in a Style Definition Class instance may be invoked to return the requested localized set of style rules.
A Style Definition Class, in one example embodiment, supports more general permutation concepts. A permutation is a way to describe locale and target variations. For instance, fr_FR and en_US_AUTOS can represent different permutations. A JCssDef always has a DEFAULT permutation that is shared and inherited for all permutations.
A example instance of Style Definition Class in Example 12 below shows a DEFAULT section applicable to all permutations (locales), while fr_FR section provides override of default rule, and defines new rule.
The instance of a Style Definition Class shown in Example 12 produces the text form of CSS for fr_FR shown in Example 13 below and the text form of CSS for de_DE shown in Example 14 below.
div.title, p h4 {font-weight:bolder; color:blue}
As mentioned above, a Style Definition Class, in one example embodiment, is an active programming construct with extended capability that is beyond the capability of a raw text-based CSS file. For example, in a typical web application, a CSS id or class used by CSS definition may need to be set as an HTML attribute, and it may also need to be referenced by JavaScript. Using the Style Definition Class approach described herein, a constant can be defined externally and referenced by different parts of the system. When the value of that constant changes, there is no need to search every text files for making corresponding string replacement.
Furthermore, in one example embodiment, in component-based development environment, an application may be a composition of multiple pre-existing components that may have their associated CSS. With traditional text-based CSS definition, it may be difficult to automatically resolve the name conflict between different components. For example, different components on the system may select the same CSS id or class value at definition time. To address the issue, an example Style Definition Class may provide the ID reservation system for designer to choose proper values in its own name space in order to avoid name conflict. Each local ID reservation system may further retrieve its name scope and apply the name scope to the values handed out by the local ID reservation system.
For example, an id value “title” may be reserved from a local reservation instance. At runtime, a scope name, e.g., the term “buying,” may be applied to this reservation instance. Then the final resolved value may become “buying-title.” The scoping mechanism may resolve the conflict between this “title” and a “title” from another reservation instance, which can have different scoped name assigned to it at runtime.
As also shown in one example embodiment, the style rule override feature in Style Definition Class may contribute to avoiding the need for text-based cut and paste operations. When a style rule changes its selectors, any inherited or overridden rules may reflect the change automatically.
Additionally, in some example embodiments, a plug-in may be provided with an IDE that can auto-generate a Style Definition Class from a CSS file and vise versa. An example programming extension for authoring style rules may be implemented in the context of a network environment, which may be discussed with reference to
As shown in
The client system 110 may utilize the browser application 112 to access services provided by the network-based transaction facility 140. The services provided by the network-based transaction facility 140 may employ a style rules authoring system 142 that may be used to generate a Java™ representation of style rules that, in turn, may be used in a manner similar to using Cascading Style Sheets. In one embodiment, the network-based transaction facility 140 may be hosted by a web server. An architecture illustrating example use of the style rules authoring system 142 may be described with reference to
An architecture 200 shown in
In some embodiments, the style rules authoring system 300 may be configured to permit a user to create a collection of style rules “from scratch,” e.g., by monitoring user input and generating an associated Java™ representation for each rule. The style rules authoring system 300 may also include a mechanism, e.g., the converter 340, to receive a Cascading Style Sheets (CSS) file and convert the CSS file into a Style Definition Class object. The converter 340 may be configured to also receive a Style Definition Class object and, based on the Style Definition Class object, generate a corresponding CSS file.
An example method to author style rules utilizing a rules authoring system can be described with reference to
As shown in
The JCssDef base class, in one example embodiment, provides various APIs for authoring a style sheet. For any JCssDef instance that extends JCssDef, a Java IDEs may automatically provide code assistance for choosing the proper methods and properties with auto-completions, as discussed above with reference to
In addition, JCssDef-aware IDE plug-in may be configured to help bootstrap the JCssDef instance creation. For a given CSS text file, the plug-in can generate a corresponding JCssDef instance. For each rule defined in JCssDef, the plug-in can also generate corresponding style rule text for visual inspection.
In one example embodiment, a JCssDef instance can be referenced by any Java program to retrieve the CSS text for a given permutation. The resulting CSS text is resolved based on given conditions. For example, CSS id and class may have be scoped; images may be resolved based on its locale, request protocol (secure or non-secure) and environment (testing or production, etc); rules may be aggregated based on the JCssDef instance permutation, such as locale and targets.
A collection of JCssDef instances may be aggregated to produce final CSS text for an application to be consumed at runtime. For example, a properly generated CSS text section can be directly embedded into a web page when application responds a user's request.
The aggregated CSS text can also be prepared in advance via build process. Pre-generated CSS files (e.g., vectored based on all permutations) can be versioned and deployed into a file serving sub-system. When an application receives the user requests, it can reference pre-deployed CSS files in its generated web pages, e.g., via a style link.
It will be noted that while example implementation details are described above, various other techniques may be utilized in further embodiments. In one example embodiment, a machine-readable medium is provided having instruction data to cause a machine to receive a request to generate a collection of style rules, the collection of rules being suitable for use with a document-based web page, receive input associated with one or more style rules, and to generate a Java™ representation of the collection of style rules based on the input associated with the one or more style rules.
Machine readable medium will be understood as a medium that is capable of storing data in a form that can be accessed by an automated sensing device. Examples of machine-readable media include magnetic disks, cards, tapes, and optical disks, as well as other forms of volatile and non-volatile memory devices.
The example computer system 600 includes a processor 602 (e.g., a central processing unit (CPU), a graphics processing unit (GPU) or both), a main memory 604 and a static memory 606, which communicate with each other via a bus 608. The computer system 600 may further include a video display unit 610 (e.g., a liquid crystal display (LCD) or a cathode ray tube (CRT)). The computer system 600 also includes an alpha-numeric input device 612 (e.g., a keyboard), a user interface (UI) navigation device 614 (e.g., a cursor control device), a disk drive unit 616, a signal generation device 618 (e.g., a speaker) and a network interface device 620.
The disk drive unit 616 includes a machine-readable medium 622 on which is stored one or more sets of instructions and data structures (e.g., software 624) embodying or utilized by any one or more of the methodologies or functions described herein. The software 624 may also reside, completely or at least partially, within the main memory 604 and/or within the processor 602 during execution thereof by the computer system 600, with the main memory 604 and the processor 602 also constituting machine-readable media.
The software 624 may further be transmitted or received over a network 626 via the network interface device 620 utilizing any one of a number of well-known transfer protocols (e.g., Hyper Text Transfer Protocol (HTTP)).
While the machine-readable medium 622 is shown in an example embodiment to be a single medium, the term “machine-readable medium” should be taken to include a single medium or multiple media (e.g., a centralized or distributed database, and/or associated caches and servers) that store the one or more sets of instructions. The term “machine-readable medium” shall also be taken to include any medium that is capable of storing, encoding or carrying a set of instructions for execution by the machine and that cause the machine to perform any one or more of the methodologies of embodiments of the present invention, or that is capable of storing, encoding or carrying data structures utilized by or associated with such a set of instructions. The term “machine-readable medium” shall accordingly be taken to include, but not be limited to, solid-state memories, optical and magnetic media, and carrier wave signals. Such media may also include, without limitation, hard disks, floppy disks, flash memory cards, digital video disks, random access memory (RAMs), read only memory (ROMs), and the like.
The embodiments described herein may be implemented in an operating environment comprising software installed on a computer, in hardware, or in a combination of software and hardware.
Thus, a programming extension for authoring style rules has been described. Although embodiments have been described with reference to specific example embodiments, it will be evident that various modifications and changes may be made to these embodiments without departing from the broader spirit and scope of the inventive subject matter. Accordingly, the specification and drawings are to be regarded in an illustrative rather than a restrictive sense.
This application claims the priority benefits of U.S. Provisional Application Ser. No. 60/961,622, filed Jul. 23, 2007 which is incorporated herein by reference in its entirety.
| Number | Date | Country | |
|---|---|---|---|
| 60961622 | Jul 2007 | US |
