ProductsStyleVisionVisual Stylesheet Design

Altova StyleVision® 2008 utilizes a unique, visual approach to designing stylesheets for transforming XML and database content into HTML, RTF, PDF, Word 2007 (OOXML), and Authentic® electronic forms.

Designing stylesheets in StyleVision is a visual, drag-and-drop process. You simply select components from your data source(s), drag them onto the design pane, and specify their presentation and layout properties using the user-friendly entry helper windows.

StyleVision designs can be based on one or multiple XML, DTD, and database source(s). This means your design can integrate data from multiple XML sources, or even combine data from an XML Schema and a relational database. In fact, you can even create designs to publish XML documents stored inside relational database columns (currently supported for IBM DB2 only).

Each design simultaneously produces standards-conformant XSLT 1.0/2.0 and XSL:FO stylesheets, the corresponding output in HTML, RTF, PDF, Word 2007, and an Authentic e-Form. This makes StyleVision the ultimate tool for single source, multi-channel publishing of XML and database data.

Click image to enlarge screenshot

 View the stylesheet design Flash demo now

The StyleVision user interface includes six synchronized tabs that allow you to save and view the stylesheets and output generated from your design directly in the design window. Each tab allows you to toggle between viewing the stylesheet and its associated output. Tabs include:

• Design tab for viewing your design. Clicking the tab to toggles to the JavaScript editor, where you define JavaScript functions for your design.
• Authentic tab for viewing the Authentic electronic form generated by your design.
• Preview HTML tab for viewing HTML output. Clicking the tab toggles to the standards-conformant XSLT 1.0/2.0 stylesheet that generates HTML output.
• Preview RTF tab for viewing RTF output. Clicking the tab toggles to the standards-conformant XSLT 1.0/2.0 stylesheet that generates RTF output.
• Preview PDF tab for viewing PDF output. Clicking the tab toggles to the standards-conformant XSL:FO stylesheet that generates PDF output.
• Preview Word 2007 tab for viewing OOXML output. Clicking the tab toggles to the standards-conformant XSLT 1.0/2.0 stylesheet that generates Microsoft® Word 2007 output.

The Design Overview window enables you to add schema sources, global parameters, modules, and CSS files to your active design. It gives you an overview of these components and enables you to manage them all conveniently in one location.

The StyleVision interface provides five advanced entry helper windows for viewing, editing, and assigning the style and layout properties of each element in your design.

The Schema Sources entry helper displays a tree view of the schema(s) and/or database on which your design will be based. This window also allows you to assign a working XML file and to specify the root element(s) of the design. From the Schema Sources window, you can drag nodes onto the design pane to specify the structure of your output. The window lists global elements as well as the reusable complex and simple types from your XML Schema, for which global templates can be assigned to apply styles throughout the design.

As you drag and drop components from the Schema Sources window to the design pane, you can define styling and layout rules as well as advanced stylesheet functions using the other entry helper windows described below.

The Design Tree entry helper provides an editable overview of your design, including globally defined parameters, XML and database schema sources, JavaScript functions defined in the JavaScript editor, global templates, and layout information for RTF, PDF, and Word 2007 printed media.

The Style Repository entry helper allows you to import external CSS stylesheets and define global CSS styles and XSL:FO page processing for the design. For more information, read about working with CSS in StyleVision.

The Properties entry helper allows you to view and modify properties assigned to individual components in the design. The properties displayed in the window are context-sensitive and depend upon which design component is currently selected. For instance, if the component selected is a template, only the properties relevant to template design will be displayed.

Properties can be set by keying them in directly or selecting them from drop down menus. Some properties, such as input format and XPath selectors, also have additional entry helper dialog boxes that pop up to provide additional support.

The Styles entry helper window allows you to define local CSS styles and XSL:FO styles for page processing for components in the design view. Any component in your design can be selected and assigned styling rules. Clicking a component in your design displays the styles for that individual component as well as its associated types. For example, if you click on a content element that is part of a table, the Styles window will display the available style settings for the content as well as the table and its components (row, column, etc.). This allows you to define multiple styling rules at once.

In addition to selecting static styling rules, you can assign dynamic style values using XPath expressions. For instance, you can use XPath to display incorrect data in red, to assign different colors to every other row in a table, and so on. XPath can be used to set style values based on data in any accessible XML file or taken directly from the XPath expression itself.

You can enter the XPath expression directly in the Value field of the Styles entry helper. Or, click the XPath icon to launch the Edit XPath dialog, which provides entry helpers and syntax checking for composing XPath expressions. Each XPath expression is evaluated at runtime, and the result is entered as the value of the property.

When your design requires a table of contents, you can create it at any location in your design, and you can even create multiple TOCs in the same document. (Please note: TOC support is only enabled when you have selected XSLT 2.0 on the StyleVision toolbar.)

Simply create TOC bookmarks to identify the items that will be included in the table and specify formatting using a handy TOC wizard.

Configurable options allow you to create conditional templates, flat or hierarchical TOCs, display TOC items as plain text or hyperlinks, include page numbers, and so on. TOC support in StyleVision allows you to easily deploy single source publishing solutions for documents of all sizes, even those that contain multiple sections and chapters.

StyleVision includes support for a variety of user-defined templates for defining formatting, layout, and processing rules to be reused throughout your design or applied when certain conditions exist in your source data.

Global templates allow you to define rules for presenting a particular element when it appears more than once in your output. For instance, when you want to apply consistent processing and formatting to every occurrence of an >email< element in your design, you can define the global template once, and StyleVision will automatically apply the rules you’ve specified to every occurrence of that element when the HTML, RTF, PDF, Word 2007, and Authentic form output is rendered.

StyleVision enables users to capitalize on the complex and simple types defined in the XML Schema standard by creating global templates based on these reusable components.

With portable design fragment templates, you can also define formatting and processing rules once, and then you can apply those rules to elements with different names within your design. Design fragments allow you to, in effect, save a fragment of your design and reuse it in multiple places.

In fact, you can even import another StyleVision design to have access to all of its global constructs in the design you're creating. You simply add an existing design as a module in the StyleVision design tree, and all the global templates, CSS styles, JavaScript functions, etc., defined in the existing file become available for use in your new design. Modular design support in StyleVision helps you save time by leveraging existing work and allows multiple users to collaborate on designs.

StyleVision also enables you to apply advanced dynamic functionality to your design through the use of conditional templates. Conditional templates are based on XPath expressions and allow you to design forms with layout and presentation that changes based on source data in the XML file(s) or database.

For HTML Web page design, StyleVision supports all the design elements found on today’s advanced Web pages, including hyperlinks, CSS styles, JavaScript functions, etc. It even includes a JavaScript editor for defining functions that add dynamic, event-based functionality to your HTML pages. Learn more about support for CSS and JavaScript in StyleVision.

Stylesheets designed in StyleVision support advanced functionality such as auto-calculations, business logic validation, and much more. Read more about advanced stylesheet functions.

StyleVision includes comprehensive project management support, allowing you to easily store and manage related stylesheets and their components in a project.

See for yourself how the StyleVision® 2008 visual stylesheet design approach will increase your productivity by removing the need to manually code multiple stylesheets to render content in HTML, RTF, PDF, Word 2007 (OOXML), and Authentic electronic forms. Download a free, 30-day trial today!