Working with Themes
Working with Themes
|
Logi Info, Logi Report
v10.0.169 - 31 Aug 2010
|
Logi 10 includes a new feature, Themes, designed to help developers instantly apply a consistent "look" to their applications. This document discusses Themes, how to apply them, and how to create them. Topics include:
About Themes
In the context of Logi products, a "theme" is a collection of graphic images, a style sheet, and a template modifier file, that impart a specific appearance to a Logi application. Several stock themes are included with Logi 10 for your use (and are also available here on DevNet in the Sample Themes library).
Themes do the work for you, setting appearance attributes for complex elements such as charts and super-elements such as the Analysis Grid, and making it easier to produce great looking reports without an in-depth knowledge of Cascading Style Sheets. You can easily switch between themes in order to experiment with them.
As of this writing the stock themes provided with the product include:
- BlackPearl
- ProfessionalBlue
- ProfessionalGreen
- Rounded (rounds all square corners, when viewed with Firefox, Chrome, Safari, etc. but not IE 6,7,8)
- Silver
- SimpleBlue
Back to top
Selecting a Theme in Studio's Wizard
When you use the New Application wizard in Studio, one of the steps is the selection of a theme for the new application:
Just select a theme from the list and it will be applied automatically to your new application.
Back to top
Adding Themes Manually
You can also apply a theme manually. A theme can be applied at the application level (which is what the wizard does):
As shown above, to apply a theme to the application as a whole, add a Global Style element to the _settings definition. Then set its Theme attribute to the name of one of the available themes. All reports in the application will have the theme applied to them.
To apply a theme to an individual report definition:
As shown above, add a Style Sheet element to the report definition. Then set its Theme attribute to the name of one of the available themes. The report will have the theme applied to it.
Adding Multiple Themes
You can add more than one theme to an application or report. For instance, the stock collection of themes distributed with Logi 10 products includes a theme named Rounded, which you can combine with other themes for a different look.
Note that the Rounded theme does not work with Internet Explorer 6, 7, or 8.
In the example shown above left, a Global Style element has been added to the _Settings definition, and its Theme attribute has been set to Professional Blue. The resulting blue colors and gradient in Firefox are shown above right.
Now, as shown above left, a second Global Style element has been added, and its Theme attribute has been set to Rounded. This is the proper method of adding multiple themes, either in _Settings or in individual report definitions. Multiple themes used like this will combine with each other, with the theme from the bottom-most (last) Global Style element "winning" any conflicts where classes, etc. share the same name. As you can see, the tabs in the Firefox example above right
still show the blue gradient and now also have rounded corners.
Back to top
Themes and Style Sheets
When a Theme is selected for a definition or application, it automatically applies a specific appearance to super-elements, like the Analysis Grid. In addition, the Theme makes available a standard set of style classes that developers can apply to regular elements. This can save a lot of time and helps to create a consistent appearance.
In the example shown above, we see a definition that has had a Theme applied to it. A Division element has been selected and one of the Theme-supplied style classes is being assigned to it. As you can see, all of the Theme-supplied classes begin with the letters "Theme" and they address alignment, font sizes, borders, and other useful styles.
If you have a style sheet and a Theme assigned, the available classes from both will appear in the drop-down class list.
Interaction with Other Style Sheets
You may already have a style sheet that you like to work with when developing reports. How will that interact with a theme when it's applied to your report?
If you have assigned a style class to an element and the theme also applies a style class to that same element, the theme's style will be applied first, then yours. This means both styles will be applied but your style will "win" when there's a direct conflict. When there's no conflict, the effect will be additive.
Back to top
Creating Your Own Themes
More advanced developers are encouraged to examine the stock themes and use them as a "jumping off" point for the creation of their own custom themes. You are also encouraged to share your themes here on DevNet. Additional stock themes will be added over time. Themes usually consist of at least a collection of images, a Theme style sheet, and a Theme Modifier file.
Stock themes are stored in <yourApp>\rdTemplate\rdTheme and these should never be edited. However, you can copy them and then customize them. Any themes you create should be stored in a folder named _Themes beneath your application folder. They will then be available for your application., along with the stock themes, in the Style element's Theme attribute selection list.
If you want your custom themes to be available in Studio's New Application wizard, copy them to
(.NET) C:\Program Files\LogiXML IES Dev\LogiStudio\BaseApp\RepDev\rdTemplate\rdTheme
(Java) C:\Program Files\LogiXML IES Dev\LogiStudio\BaseApp\RepDevJava\rdTemplate\rdTheme
The New Application wizard displays a thumbnail image of each theme and, if you want to include images for your custom themes, place them, as a 225 x 160 px .JPGs with the same names as your themes, in this folder:
One of the key mechanisms in a theme is the "template modifier file" or TMF. A TMF is an XML file that includes instructions for modifying the elements and attributes in a report definition. The TMFs in the stock themes are quite complex, as they attempt to cover all of the elements one might use in a report. Your custom themes do not necessarily have to be so all-encompassing; they could, for example, only address the charts or other elements that are specifically in your reports.
If you examine the TMF and style sheet in one of the stock themes, you'll see that the class and ID names are all carefully constructed to be unique, which is very important and which you are also encourage to do.
Our document Using Template Modifier Files provides detailed information about creating and using TMFs.
Element-Specific Theme Classes
In v10.0.169, an additional element-specific class filtering mechanism was added to the Theme definition. This mechanism ensures that Theme-related style classes meant for a specific element will appear in the Class attribute drop-down list for that element and only for that element.
If you're creating your own Theme, and want to include element-specific classes, use the following text in its Theme.css file to indicate the start of those class definitions:
/*User classes*/
/*rdElement: elementName */
where elementName is the name of the element (the XML source name, which appears at the top of the Attributes panel, not the name that appears in the Element Tree, which may have embedded spaces)
Classes that apply to multiple elements can be specified by using the | character to combine the element names, like this:
/*rdElement: element1Name | rdElement: element2Name */
Classes defined like this will appear in the class list for the named elements, along with all the other appropriate Theme classes and style sheet classes.
Back to top