Learning XPages Part 2 : The basics of OneUI
Tags : Lotus Domino XPages OneUI
Bookmark :
Welcome to part 2 in a series of blog entries on how to create a simple phonebook application in Lotus Domino 8.5 using XPages. In this part we are going to look at the basics of OneUI and understand how to use it to provide the standard layout for your application.
By using a combination of DIVs and CSS it is very easy to create a layout for your web based application. Your CSS file will contain styles that match up with the divs in the html page and this is what creates the layout. When we examine the OneUI core.css file we find a section for structure that looks like this :
/*** S T R U C T U R E ***/
#lotusFrame, .lotusFrame{margin:0 auto;padding:0;min-width:990px;}
#lotusTitleBar, #lotusPlaceBar, .lotusTitleBar, .lotusPlaceBar{margin:0 20px}
#lotusMain, #lotusFooter, .lotusMain, .lotusFooter{border-style:solid;clear:both;margin:0 20px 10px 20px;overflow:hidden}
#lotusMain, .lotusMain{padding:0 0 5px 0;min-height:400px;border-width:0 1px 1px 1px;-moz-border-radius:0 0 4px 4px;-webkit-border-bottom-left-radius:4px;-webkit-border-bottom-right-radius:4px; background-repeat:no-repeat}
#lotusColLeft, .lotusColLeft{width:180px;padding:20px 10px 10px 10px;}
#lotusColRight, .lotusColRight{width:180px;padding:15px 10px;font-size:.9em}
#lotusColRight h2, .lotusColRight h2{}
#lotusColLeft .lotusFirst, #lotusColRight .lotusFirst, .lotusColLeft .lotusFirst, .lotusColRight .lotusFirst{margin-top:0;}
#lotusContent, .lotusContent{padding:16px 20px 20px 20px;overflow:hidden;margin-right:auto;margin-left:auto;}
.lotusContentColOne{width:45%;}
.lotusContentColTwo{width:45%;}
This defines parts of the basic layout however it does not include the OneUI color scheme or graphics. These are stored in a separate css file called defaulttheme.css. If you match these two css files up with some simple html that looks like this :
<div id="lotusFrame">
<div id="lotusBanner">Banner Contents Here</div>
<div id="lotusTitleBar">Titlebar Here</div>
<div id="lotusPlaceBar">PlaceBar Here</div>
<div id="lotusMain">
<div id="lotusColLeft">Left Sidebar Here</div>
<div id="lotusContent">Main Content Here</div>
</div>
<div id="lotusfooter">Footer Contents Here</div>
</div>
You'll end up with an instant webpage with a nice look and feel that looks like this :
( footer and banner contents not shown )
The core.css and defaulttheme.css and a couple of other css files are all stored on the domino server in the datadirectory\domino\java\xps\theme\oneui directory. We could reference the files directly in the XPage application but as you will see in part 3 of this series we are going to use a theme document to include the files instead.
Bookmark :
Welcome to part 2 in a series of blog entries on how to create a simple phonebook application in Lotus Domino 8.5 using XPages. In this part we are going to look at the basics of OneUI and understand how to use it to provide the standard layout for your application.
By using a combination of DIVs and CSS it is very easy to create a layout for your web based application. Your CSS file will contain styles that match up with the divs in the html page and this is what creates the layout. When we examine the OneUI core.css file we find a section for structure that looks like this :
/*** S T R U C T U R E ***/
#lotusFrame, .lotusFrame{margin:0 auto;padding:0;min-width:990px;}
#lotusTitleBar, #lotusPlaceBar, .lotusTitleBar, .lotusPlaceBar{margin:0 20px}
#lotusMain, #lotusFooter, .lotusMain, .lotusFooter{border-style:solid;clear:both;margin:0 20px 10px 20px;overflow:hidden}
#lotusMain, .lotusMain{padding:0 0 5px 0;min-height:400px;border-width:0 1px 1px 1px;-moz-border-radius:0 0 4px 4px;-webkit-border-bottom-left-radius:4px;-webkit-border-bottom-right-radius:4px; background-repeat:no-repeat}
#lotusColLeft, .lotusColLeft{width:180px;padding:20px 10px 10px 10px;}
#lotusColRight, .lotusColRight{width:180px;padding:15px 10px;font-size:.9em}
#lotusColRight h2, .lotusColRight h2{}
#lotusColLeft .lotusFirst, #lotusColRight .lotusFirst, .lotusColLeft .lotusFirst, .lotusColRight .lotusFirst{margin-top:0;}
#lotusContent, .lotusContent{padding:16px 20px 20px 20px;overflow:hidden;margin-right:auto;margin-left:auto;}
.lotusContentColOne{width:45%;}
.lotusContentColTwo{width:45%;}
This defines parts of the basic layout however it does not include the OneUI color scheme or graphics. These are stored in a separate css file called defaulttheme.css. If you match these two css files up with some simple html that looks like this :
<div id="lotusFrame">
<div id="lotusBanner">Banner Contents Here</div>
<div id="lotusTitleBar">Titlebar Here</div>
<div id="lotusPlaceBar">PlaceBar Here</div>
<div id="lotusMain">
<div id="lotusColLeft">Left Sidebar Here</div>
<div id="lotusContent">Main Content Here</div>
</div>
<div id="lotusfooter">Footer Contents Here</div>
</div>
You'll end up with an instant webpage with a nice look and feel that looks like this :
( footer and banner contents not shown )
The core.css and defaulttheme.css and a couple of other css files are all stored on the domino server in the datadirectory\domino\java\xps\theme\oneui directory. We could reference the files directly in the XPage application but as you will see in part 3 of this series we are going to use a theme document to include the files instead.
Comments
Posted by Ulrich Krause At 01:59:56 AM On 02/22/2009 | - Website - |
it should be "datadirectory\domino\java\xsp\theme"
Posted by Simon O'Doherty At 04:20:00 PM On 03/09/2009 | - Website - |