Learning XPages Part 3 : Using themes to apply your CSS
Tags : lotus Domino XPages Themes
Bookmark :
Welcome to part 3 in a series of blogs on how to build a simple phonebook application in Lotus Domino 8.5 using XPages. In the last part we talked about the oneUI css files that are supplied by IBM and how we are going to use them to apply a standard look and feel to our application. In this part we will look at how to put them into the XPages application by using a theme document.
Themes are a very powerful aspect of XPages. They allow you to define which CSS files you want to be sent down to the users web browser when they access your application. If you are designing applications for a corporate environment you may already have a look and feel that all your applications should use and with some careful planning you could turn those css files into a theme that you can apply for all your future XPage applications. The CSS files that the theme references can be stored either in the actual database or on the domino file server in the same way the oneUI css files are stored.
The oneUI css files are stored in the datadirectory\domino\java\xps\theme\oneui directory on the server and if you look at this directory you will find quite a few files in addition to the core.css and defaulttheme.css that I mentioned in part 2 of this series. In that directory you will also file files like iehacks.css, xps.css, xpsIE06.css, xpsIE78.css and xpsFF.css. As you may notice some of these css files are specific to the web browser hitting the XPage application and it is through the use of the theme document that we can make sure that the Firefox specific css is not sent to the internet explorer browser and vice versa.
Lets have a look at a few lines from a theme document to see what I mean...
<!-- Internet Explorer 7 & 8 Specific -->
<resource rendered="#{javascript:context.getUserAgent().isIE(7,8)}">
<content-type>text/css</content-type>
<href>/.ibmxspres/global/theme/oneui/xspIE78.css</href>
</resource>
<!-- FireFox Specific -->
<resource rendered="#{javascript:context.getUserAgent().isFirefox()}">
<content-type>text/css</content-type>
<href>/.ibmxspres/global/theme/oneui/xspFF.css</href>
</resource>
By using the rendered="#{javascript:context.getUserAgent().isFirefox()}" line for the resource we can check to see if the user is using Firefox and if it evaluates as true then that specific css file is sent to the users web browser. By using javascript to return the true of false result to the rendered line you can do all sorts of tricks here, Imagine being able to return a different set of css files between certain dates to give your applications a seasonal look and feel or use a different look and feel based on if the site URL ends in .net or .com. Infact the oneUI theme document is setup in such a way that it will use a different set of css files depending on if the browser is setup for Left To Right reading or Right To left reading.
Once you have created your theme document don't forget to tell your application to start using it by looking at the application properties.
To get you started here is your first download. There are THREE design elements in this database, The first is a theme document that references the oneUI css files on your domino server, the second is an internal css file called cutom.css, it is currently empty but it is referenced by the theme document as an example of how to include a mixure of both external and internal css files. We will eventually end up using this css file in future parts when we need to add application specific css to the phonebook. The theme document in this database originated in the OpenNTF xPages Wiki application.
The last design element included in the download is a single xpage called home.xps. This xpage just contains the simple html that I showed in part 2 of the series so that you can view how the oneUI theme document works. In the next part of the series will will replace this simple html with proper XPages and Custom Controls to show you how to build the basic parts of the XPage application.
Bookmark :
Welcome to part 3 in a series of blogs on how to build a simple phonebook application in Lotus Domino 8.5 using XPages. In the last part we talked about the oneUI css files that are supplied by IBM and how we are going to use them to apply a standard look and feel to our application. In this part we will look at how to put them into the XPages application by using a theme document.
Themes are a very powerful aspect of XPages. They allow you to define which CSS files you want to be sent down to the users web browser when they access your application. If you are designing applications for a corporate environment you may already have a look and feel that all your applications should use and with some careful planning you could turn those css files into a theme that you can apply for all your future XPage applications. The CSS files that the theme references can be stored either in the actual database or on the domino file server in the same way the oneUI css files are stored.
The oneUI css files are stored in the datadirectory\domino\java\xps\theme\oneui directory on the server and if you look at this directory you will find quite a few files in addition to the core.css and defaulttheme.css that I mentioned in part 2 of this series. In that directory you will also file files like iehacks.css, xps.css, xpsIE06.css, xpsIE78.css and xpsFF.css. As you may notice some of these css files are specific to the web browser hitting the XPage application and it is through the use of the theme document that we can make sure that the Firefox specific css is not sent to the internet explorer browser and vice versa.
Lets have a look at a few lines from a theme document to see what I mean...
<!-- Internet Explorer 7 & 8 Specific -->
<resource rendered="#{javascript:context.getUserAgent().isIE(7,8)}">
<content-type>text/css</content-type>
<href>/.ibmxspres/global/theme/oneui/xspIE78.css</href>
</resource>
<!-- FireFox Specific -->
<resource rendered="#{javascript:context.getUserAgent().isFirefox()}">
<content-type>text/css</content-type>
<href>/.ibmxspres/global/theme/oneui/xspFF.css</href>
</resource>
By using the rendered="#{javascript:context.getUserAgent().isFirefox()}" line for the resource we can check to see if the user is using Firefox and if it evaluates as true then that specific css file is sent to the users web browser. By using javascript to return the true of false result to the rendered line you can do all sorts of tricks here, Imagine being able to return a different set of css files between certain dates to give your applications a seasonal look and feel or use a different look and feel based on if the site URL ends in .net or .com. Infact the oneUI theme document is setup in such a way that it will use a different set of css files depending on if the browser is setup for Left To Right reading or Right To left reading.
Once you have created your theme document don't forget to tell your application to start using it by looking at the application properties.
To get you started here is your first download. There are THREE design elements in this database, The first is a theme document that references the oneUI css files on your domino server, the second is an internal css file called cutom.css, it is currently empty but it is referenced by the theme document as an example of how to include a mixure of both external and internal css files. We will eventually end up using this css file in future parts when we need to add application specific css to the phonebook. The theme document in this database originated in the OpenNTF xPages Wiki application.
The last design element included in the download is a single xpage called home.xps. This xpage just contains the simple html that I showed in part 2 of the series so that you can view how the oneUI theme document works. In the next part of the series will will replace this simple html with proper XPages and Custom Controls to show you how to build the basic parts of the XPage application.
Download File xPhoneP3.zip
Comments
My case for needing an override was the tileBar h2 was only 200px wide and I had database titles larger than that (cut off in IE and line wrapped messing up the placeBar on Firefox). I changed the width to 500px.
Posted by Steve Smillie At 02:23:35 PM On 03/13/2009 | - Website - |
Posted by 7410 At 09:44:38 AM On 04/07/2009 | - Website - |