> developer > dnu > courses > portal overview page 14

Novell Portal Services Overview and Gadget Development

April 2003

DeveloperNet University Course

Reader Rating    from ratings

Skins and Stylesheets

In this section of the course, the topics we cover include:

• Anatomy of a (NPS) Web Page
  
  
• Required stylesheets
  
  
• Tips and Tricks
  
  
• Localization
  
  

Anatomy of a NPS Web Page

Take a look at Figure 11. This is a fully created Web page, using NPS as the design tool. But how did we get here? We will do the following:

• Look at the XML document that NPS generated
  
  
• Look at the XSL files required to generate the page
  
  

Figure 11: Fully Created Web Page.

NPS 1.5 Modular XSL Files

NPS uses separate files for the different components to build a web page. These components are:

• Branding_area.xsl
  
  
• Inheritable_area.xsl
  
  
• Object_scheme.xsl
  
  
• Gadget_frame.xsl
  
  

By dividing up the pages into four separate components, this provides a modular and hence reusable environment. Figure 12 illustrates where the branding_area.xsl is on our web page.

Figure 12: branding_area.xsl on web page.

Figure 13 illustrates where the ineritable_area.xsl is on our web page.

Figure 13: inheritable_area.xsl on web page.

Figure 14 illustrates where the object_schema.xsl area is located on our web page.

Figure 14: object_schema.xsl on web page.

Figure 15 illustrates where the gadget_frame.xsl portion of the web page is located.

Figure 15: gadget_frame.xsl on web page.

NPS 1.5 Modular XSL Files

All of the previous stylesheets, mentioned above, are combined together in main.xsl. Figure 16 shows part of the main.xsl file.

Figure 16: Sample portion of main.xsl.

XSL File Locations

NPS is quite versatile in that it supports many different device types. The typical directory structure of the skins files are as follows:

• skins\skinname\devices\devicename\xsl files
  
  
• (example 1:) skins\digiair\devices\default\main.xsl
  
  
• (example 2:) skins\digiair\devices\pda\main.xsl
  
  

To control overall look and feel of the Web page, modify: nps\portal\stylesheets\skins\skinname\devices\devicename\main.xsl

To control gadget look and feel, modify: nps\portal\gadgets\gadgname\skins\skinname\devices\devicename\main.xsl

Steps to Creating a Skin

The following steps will help you create a skin:

1. Create a directory in: nps\portal\stylesheets\skins\
   
   
2. In this new directory, create the following directory structure: skinname\devices\default
   
   
3. Put all of your XSL files in the "default" directory.
   
   

If you want to also modify the gadget XSL files:

1. Create a directory in: nps\portal\gadgets\gadgetname\
   
   
2. In this new directory, create the following directory structure: skinname\devices\default\
   
   
3. Put all of your XSL files in the "default" directory.
   
   

   Note:

   If you don't modify the gadget XSL files, you will then receive the default look and feel for the gadget.
   
   

Let's go back to our sample Web page, Figure 17.

Figure 17: Sample Web Page.

Let's look at the raw XML document that NOS generated to create the Web page. Figures 18 and 19 show this. Figure 18 shows the document from the top.

Figure 18: XML Document from NPS.

Figure 19 shows the document from the middle:

Figure 19: XML Document From the Middle.

Now let's direct our attention to main.xsl, Figure 20.

Figure 20: main.xsl.

It looks quite complicated, to say the least! But if we strip out the XSL code, you can see that a large part of the document is just plain HTML (Figure 21).

Figure 21: main.xsl with xsl striped out.

A Few Tips and Tricks of the Trade

The following are a few suggestions from Novell's Developer Solutions Group.

1. First, get an XML/XSL editor!
   
   
   • XMLSpy - http://www.xmlspy.com
     
     
   • StylusStudio - http://www.exln.com/products/stylusstudio/
     
     
2. Disable caching of rendered stylesheets. Do this by going to the file portalservlet.properties. Add the following statement in the file:
   
   

System.renderer.DontCacheStylesheets=true

This will work with any web browser, but it will impact performance. You would be advised to not do this in a production environment.

3. When modifying a provided XSL file, make sure you enable borders. Do this by searching for "borders=0" and replace with "borders=1."
   
   
4. To view the XML document from NPS, perform the following steps:
   
   
   1. Disable backend rendering
      
      
   2. Assure that you have an XML Parser installed on your Web browser to render locally.
      
      
   3. For your URL, enter: http://ipaddress/nps/servlet/portal?render=off
      
      

View the source - it will be an XML document.

Localization

NPS 1.5 uses XLIFF for localizing XSL. The technology is from the Oasis open source organization. The purpose of the OASIS XLIFF TC is to define, through XML vocabularies, an extensible specification for the interchange of localization information. The specification will provide the ability to mark up and capture localizable data and interoperate with different processes or phases without loss of information. The vocabularies will be tool-neutral, support the localization-related aspects of internationalization and the entire localization process. The vocabularies will support common software and content data formats. The specification will provide an extensibility mechanism to allow the development of tools compatible with an implementer's own proprietary data formats and workflow requirements.

For more information about Oasis, check out: http://www.oasis-open.org/committees/xliff/

Some of the rules to follow when localizing your XSL include:

• All Static text should be XSL variables
  
  
• XSL variables must be stored in main_lang_XX.xsl file, where XX represents the language to localize. i.e. main_lang_fr.xsl and main_lang_de.xsl