When developing web based applications
for Domino in the past I have always avoided using hardcoded url’s, titles,
lables, well basically everything would be an option of some sort stored
in a notes document that the owner of the application could edit. In this
part of my Learning XPages series I’m going to replace the application
title that I’m showing in the titlebar with a value pulled from a profile
document. You might ask why bother when It is already softcoded using the
database title and it’s a good question, my answer, what if the application
owner is not the admin and they don;t have access to change the database
title.

Before we get started on the XPages
code for this section I needed to do a little bit o traditional notes client
development. I have added my first form to the database design which I
have given an alias of ‘prof_AppConfig’ and I have added a single field
to that form called ‘cfg_ApplicationTitle’. I then created a small formula
language agent to run from the actions menu with a single line of code
that reads @Command([EditProfileDocument];"prof_AppConfig");.
Then I went into the application in my notes client, ran the agent and
added an application title into the profile document and saved it. We’re
now ready to get XPages to read in the profile document and use that value
for the application title.

Open the layout_TitleBar again and select
the computed field that we created earlier that uses the database title
for it’s value. We are going to be editing it’s value so go to the value
properties and double click on the blue ‘computed value’ text to bring
up the javascript editor dialog box. Here’s the code we are going to use
:

var
profDoc:NotesDocument = database.getProfileDocument("prof_AppConfig","");

return
profDoc.getItemValue("cfg_ApplicationName"){0};

NOTE: Replace the curly brackets
with square brackets. Due to the way blogsphere works if won;t display
the square brackets correctly.

This is very similar to LotusScript’s
method of getting a value from a profile document. In the first line we
are setting up a new variable called profDoc that is based on the NotesDocument
class and we set it to the profile document by calling the database.getprofiledocument
method. In the second line we are returning the field we need by using
the getItemValue method of the notesdocument. Notice the square brackets
with the zero in it? This is the same as getting the first value of the
array by using (0) in LotusScript.

When I first implemented this in my
application I ran into a CSS issue when the title of my application was
more then 200 pixels wide and it resulted in my page looking like this
:

As you can see the restricted width
of the H2 tag when it appears in the lotusTitleBar div has caused the extra
long title to wrap into the next line and it pushed the place bar over.
To get around this I need to override the oneUI CSS with my own custom
CSS. Open the blank custom.css file that we created when we created the
theme and add the following lines :

If you save and close the css and refresh
your XPage in the browser then it still won’t because we need to make one
more change.

When I initially created the Theme document
and pointed it to all the external CSS files and the internal custom.css
file I listed the custom.css file before all the external OneUI css files.
This means that the OneUI css is overriding the custom.css file. You need
to edit your theme file and move the resource section for custom.css down
below where it loads it’s last external css file. Save the theme document
and refresh the browser and everything will look perfect.

I’ll attach an updated development database
to the next part of the series where I’ll jump down to the page footer
and get it completed before starting on displaying some real live data
in the sidebar and main contents.

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

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.

In the last part we set the groundwork
for the banner section of our application and added a small graphic to
the left side of the banner. In this part we are going to build the links
on the right side of the banner and show how we can use some server side
javascript to determin if we should show a login link or a logout link.

Examining the sample XPage applications
that use the OneUI interface we see that the right side of the banner is
made up of an unordered list with a special style class. In the XPages
designer there is no easy control to drag over to the XPage to create the
list so you need to rely on your basic HTML skills to get you started.
First open the layout_Banner custom control that you have created from
earlier and put it into the source view. You should see the control that
we created for the image in the last part, it will look something like
this <xp:image url="/OpenNTF.jpg" id="lotusLogo"
alt="OpenNTF" styleClass="lotusLogo"></xp:image>.
We will add in our basic unordered list below this, add in a new line and
paste the following html directly into the source view :

<ul class="lotusInlinelist">

<li class="lotusFirst">

First List Item

</li>

<li>

Second List Item

</li>

</ul>

The ul class name of ‘lotusInlinelist’
is defined in the oneUI css as a horizontal list. List items in this class
of list have been defined to have a left side border of 1 pixel however
that would look a little out of place on the first item in the list so
the class name of ‘lotusFirst’ overrides this css behavior and ensures
that the first item does not display the left side border. If you switch
back to the design view of the XPage you can see you list or you could
save the XPage and preview it in your browser to see how it’s going to
look.

Now that we have the basic list in place
we can replace our placeholder text with some XPages controls and write
some code to make them display what we need. lets start with the first
list item. For the moment we would like this to be a simple computed text
field that displays either ‘anonymous’ or the users common name depending
on if they are logged in or not. Remove the first bit of placeholder text
and then drag over the ‘Computed Field’ control from your controls list
on the right side of your screen. Once it’s in the correct place on the
list we can have a look at it’s properties. Don’t worry about the controls
name and make sure the ‘visible’ option is enabled and then go to the ‘Value’
tab of the properties. You will see a reminder hint that you need to bind
the value to something, you can ignore this, we are going to use some server
side JavaScript to work out the value.

Select the JavaScript option and then
click on the ‘Edit Script’ button to bring up the JavaScript editor. here
is the JavaScript that we are going to use :

If you have done any LotusScript code
in the past then you can very quickly see that we are creating a new object
called userName based on the NotesName class and setting it to the notes
name of the user who is currently logged in on the session. In LotusScript
we would look at NotesSession.Username() but here we have an @UserName()
which is based on formula language. Yes, your existing LotusScript and
Formula language skills are certainly not going to waste, you’ll just learn
a new way to put them to use.

Lets save the XPage and refresh the
preview in the browser and see what we have.

In the next part we’ll do the second
list item. It’s pretty much the same as the first list item but there is
a little more JavaScript to deal with.