In the last couple of parts of the series
we finished off the banner that appears above the application, in this
part we are going to look at the applications title bar. This section of
the application is used to display the name of the application. Now you
may be tempted to hard code in the application name because in reality
it will never change in this application but one of our objectives is to
create reusable code so we are going to programmatically populate the application
name.
Before we get started we need to get
rid of our placeholder text and drag in two panels just like we did for
the banner in part 3, the first panel will have a styleclass of ‘lotusRightCorner’
and the second panel will be nested inside the first panel and have a styleclass
of ‘lotusInner’. If you save and preview your XPage now you’ll see a slight
change in the titlebar.
The title bar now has a nice swoop style
graphical background. You can thank the OneUI theme for this, by adding
the panels with their styleclasses you have applied CSS to the html that
was created and this CSS tells the browser that the pane with the styleclass
of ‘lotusInner’ that is inside a div called ‘lotusTitleBar’ should have
a graphical background, here’s the bit of css from the defaulttheme.css
#lotusTitleBar
.lotusInner, .lotusTitleBar .lotusInner {
background-image:url(./images/titlebarLeft.png);
}
Now that we have the panels all setup
correctly lets look at two ways to get the application name in there…
Lets look at the easy method first.
We know that all Lotus Notes/Domino databases have a database title and
we can get to this title using formula language by using @DbTitle or by
using LotusScript’s NotesDatabase.GetTitle() so we can very quickly display
this in the title bar. Just drag in a computed field control into the panel
control and then look at it’s properties.
Change it’s name to ‘mainTitle’ and
then go to the ‘value’ properties tab. Ignore the simple binding request
and click on the JavaScript radio button and enter ‘database.getTitle()’
and then save and preview the XPage. While it is now showing you the database
title it still doesn’t look great so we need to follow the OneUI styles
and add a <h2> and </h2> around the computed text control.
Your final XPage source should look like this :
and when you save and preview the XPage
you should see the following :
In the next part I’ll show you how to
pull a value out of a profile document and use that to populate the titlebar
instead.
Dec's Dom Blog 
Declan,I found the width of the div that holds the Database Title to be too small for it to fit on the one line. It’s only 200px.If the title is “XPages Phonebook Part 1”, the 1 drops to the level below in Firefox and Google Chrome. In IE, it disappears.Its width is controlled by the css of the lotusTitleBar id (or class, if you are using that) modifying the h2 element (part of core.css).I found the best way to extend the width of the div was to modify the style of the h2 element, thus,<h2 style = “width:300px”>Why the developers selected 200px is beyond me.
LikeLike