Home    Back    Document


Introducing Style Sheets

Introducing Cascading Style Sheets

Logi Info, Logi Report
v10.0 - 15 Apr 2010

This document introduces developers to the use of Cascading Style Sheets (CSS) to control the presentation of Logi applications. You'll learn how to include a style sheet within a Logi application and how to assign individual CSS classes to elements. This document assumes that you've already created a basic application whose appearance you want to affect by using a style sheet. Topics include:

 

About Cascading Style Sheets

Cascading Style Sheets (CSS) is a technology that allows the presentation aspects of web pages to be separated from the other page content. It can be used to add "style" (e.g. fonts, colors, alignment, spacing, and more) to web pages. It's a mature standard, fully supported by the W3C. If you're a developer with web design experience you should already be familiar with style sheets.

If not, as used with Logi applications, style sheets are independent text files that define style "classes" with property settings. For example, the definition for the class "font8ptBold", shown below, contains selectors that cause text to appear in an 8-point, bold font:
 

.font8ptBold
{
     font-size: 8pt;
     font-weight: bold;
}

Classes are assigned to elements within a Logi application in order to control their appearance. For example, we might assign the font8ptBold class to a Label element so that its caption will appear on the web page in an 8-point, bold font. CSS includes a wide variety of selectors that can affect everything from font weight, size, and color to the positioning of images on the page.

Use of style sheets creates slightly more complexity for the developer than having appearance properties directly associated (as attributes) with elements in Logi Studio. The trade-off, however, is that they offer far more flexibility and browser-version compatibility. Logi reporting tools are CSS standards-compliant and to help you work with style classes, Logi Studio includes a style sheet editor.

Logi v10 products allow you to set a "doctype declaration" for your application, which gives the browser some guidance about how to render the page. This is discussed in our document Using Doctype Declarations and can help sort out some the behavioral differences between browsers.

The "Cascading" part of the style sheet name refers to the way in which the effects of classes permeates downward through hierarchical structures of elements in web pages. The effects start at the top and, unless superceded by other classes, continues downward within the container, structure, or child elements.

You can develop your own "standard" style sheet file (or files) and then re-use it or parts of it with different Logi applications. This saves development time and promotes a consistent look for your applications, if desired. You may care to develop and share a "company style sheet" so that all of your Logi application developers produce pages with the same appearance

Style classes can be applied in a number of ways, including "inline" or embedded directly into HTML. However, it's beyond the scope of this document to provide a complete explanation of Cascading Style Sheets; excellent resources can be found online here.

 Logi v10 products include a feature called Themes which can instantly apply style and other presentation touches to your report. A number of stock themes are included with the products and you can also create your own. For more information about themes, see our document Working with Themes.

  Back to the top

 

Including a Style Sheet in Your Application

For the remainder of this document, we'll show screenshot images based on a fictional Logi application that pulls data from the NorthwindFoods database (creating a similar, real application is discussed in our Basic Report Tutorial). If you already have a basic Logi database table report created, you can use it as we proceed.

A style sheet is considered a Support File which is included with the application. In Logi Studio, the Support Files are organized in the Application Panel (upper left corner) beneath their own folder, as shown above.

Several style sheets were installed with the your Logi reporting product on your computer, so let's add one to your application and examine it:

  1. In Logi Studio, right-click the Support Files folder in the Application Panel.
  2. Select Add then Existing File... from the popup menus.
  3. Browse to the C:\Program Files\LogiXML IES Dev\LogiStudio\LGXPackages folder.
  4. Select Red.css as the style sheet and click OK.
  5. The Red.css style sheet will be added to your list of application support files and the file itself will be copied to your application project file, in the _SupportFiles folder.

Note that multiple style sheets can be included within a Logi application and you can also create new style sheets from scratch.

  Back to top

 

Editing a Style Sheet in the Studio Workspace

There are several ways to edit style sheets from Logi Studio and the most direct way is to do it right in the Studio Workspace editor:

 


     

  1. In the Application panel's Support Files folder, double-click the style sheet file to be edited.
  2. The style sheet contents are displayed in the Workspace panel, as shown above, and can be directly edited.
  3. As you type, the editor will provide assistance via pop-up lists of selector names and values.
  4. Make the necessary changes or additions and click Save on the toolbar.

Note that use of the Preview tab automatically saves definition files but does not save style sheet changes. You must click Save to save your changes before previewing.

  Back to top

 

Editing a Style Sheet in the Style Sheet Class Selector

The second editing approach available is via the Class Selector tool, which is opened from the Attributes panel:
 

The Class Selector tool can be opened by selecting it from the list of Class attribute value choices for any element, as shown above.
 

The Class Selector tool, shown above, allows a class to be assigned by selecting it in the class list (1) and clicking OK. The attributes of the selected class are shown in the upper right panel (2) and they can be edited there. Controls (3) allow you to save, add, and delete classes and the effect of the selected class is shown in the lower preview panel (4).

  Back to top

 

Assigning a Style Sheet to Your Definition

The Red.css style sheet file has now been copied to and included in your Logi application but before you can use it, you have to assign it to your report definition.



     

  1. In the Application Panel, select your report definition. Your definition will appear in the Workspace Panel.
  2. In your definition, select the Style Sheet element, as shown above.
  3. In the Attributes Panel, click the Style Sheet attribute and pull-down the list of available style sheets.
  4. Select the Red.css style sheet entry in the list, which will assign it to the Style Sheet attribute. Now the classes in Red.css are available for use in your definition.
  5. Note that you can open the selected style sheet in an external editor, if you have installed one, by clicking the Open File... link at the top of the panel. This will launch the application associated in the file system with the .css file extension and open the file in it.

Assignment Using a URL

If a style sheet resides on a web server, it can instead be assigned using a fully-formed URL, such as

    http://www.myFirm.com/CSS/red.css 

Just enter the URL into the Style Sheet attribute, instead of a file name.
 

Global vs. Local Assignment

The presence of the Style Sheet element in a report definition indicates a local style sheet. A Logi application may contain several report definitions and each definition may use a separate style sheet. Or, if they all use the same style sheet, a global style sheet can be used for all report definitions in the application. The global style sheet is configured in the _settings definition:


  1. Select the _settings definition in the Application Panel and then select the root element (_settings) in the Workspace Panel.
  2. Double-click a Global CSS element in the Element Toolbox to add it to the definition.
  3. Select the newly added Global CSS element in the Workspace.
  4. In the Attributes Panel, enter a value for the Style Sheet attribute or select one from the pull-down list.
     

  Back to the top

 

Assigning Classes to Elements

Now you're ready to assign classes to elements in your application. The images below assume this query

SELECT CategoryID, CategoryName, Description FROM Categories

has been used to produce a report from the NorthwindFoods database. Follow along in your application, making adjustments as necessary. These examples assume you've already assigned the Red.css style sheet to your application.



     

The report output above shows the data returned by the query. It's raw, unformatted, and ugly. Let's assign some style sheet classes to improve the appearance of our output.

Elements that can be affected by classes have a Class attribute. Some may have several class-related attributes depending on the complexity of the element.
 



In your report definition, select the Data Table element and in the Attributes panel, using the pull-down list, select the table and tableHeader classes to the Class and Column Header Class attributes, respectively, as shown above. It's also possible to manually assign multiple classes, separated by spaces, as a Class attribute value.

These classes will affect everything about the report output (a table) unless superceded by other classes assigned to specific elements lower down within the Data Table element hierarchy (this is the "cascading" effect). Let's assign one of those.



     

Select a Data Table Column element and assign the cell class to its Class attribute. Repeat for each Data Table Column element. Remember that you may want to enter Column Header text and Width in each Data Table Column, too.



     

The image above illustrates what the report looks like with the style sheet classes applied. Quite a difference from the raw table! The style sheet has affected font sizes and colors, text alignment, background color, spacing and padding, and borders.


Create an Alternate Row Class

In the following exercise, you'll manually add a new class to the style sheet and then assign it to the Data Table. The goal is to have alternate rows in our table appear slightly differently.

  1. In the Application Panel, double-click and open the Red.css style sheet file.
  2. In the Workspace Panel, add the following CSS class:

    .alternateRows
    {
        color: #D2691E;
        font-style: italic;
    }

     
  3. Click the Save icon in the toolbar, to save the style sheet changes.
  4. Click the tab at the top of the Workspace Panel to return to your report definition.
  5. Select the Data Table element and assign your new alternateRows class to the Alternating Row Class attribute.
  6. Preview the results:



As you have seen, style sheets are powerful tools that assist you in creating visually-interesting report presentations. More information about style sheets and Logi applications can be found in our documents Managing Style Sheets and Using Style Sheets.

  Back to the top

 





        © Copyright 2007-2010 LogiXML, Inc. All rights reserved.