Learning XPages : The basics of OneUI

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 :

Banner Contents Here

Titlebar Here

PlaceBar Here

Left Sidebar Here

Main Content Here

Footer Contents Here

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
datadirectorydominojavaxpsthemeoneui 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

  轉自:Dec's Dom Blog