Learning XPages Part 10 : Finalizing The Footer

Before we move onto to real content for
the phonebook application I am going to jump down to the footer section
and finish that off quickly. The footer, according to the OneUI guidelines,
is a place for links to online support and contact information however
my personal preference that that it should be kept as simple as possible.
Because this application will eventually be released on OpenNTF I’m going
to just put in a small piece of text that reads ‘An OpenNTF project by
Declan Lynch’. and I’ll link the word OpenNTF to their website.

Lets start by opening the layout_Footer
custom control that we built earlier and drag in a few panels, as usual
the first panel will have a styleclass of ‘lotusRightCorner’ and the second
panel will be nested inside the first panel and will have a styleclass
of ‘lotusInner’. Then we can just type our text directly into the inner
panel, Save and Preview.

Looks ok so far but I’d much prefer
it on the right side of the footer so lets add a styleclass to the text.
The styleclass I’m going to use is called ‘lotusRight’ and it is setup
in the CSS to float anything with this style over to the right of the screen.
Select the text in your XPage and look at the all properties view and just
add the styleclass. If you look at the XPage source now you’ll see that
the text has been moved into a <span> tag and the selected class
is showing.

If you save and preview your XPage now
you’ll see the text jump over to the far side of the screen.

The last thing to do is convert the
word OpenNTF into a link. We start by dragging in link control from the
controls pane to where we want the link to appear and then delete the original
OpenNTF text. If we click on the link to get to the properties we can fill
in the label as OpenNTF and the URL as http://www.openntf.org. It’s a simple
link so we don’t need to compute anything. if we save and close right now
things will look a little weird in the browser, the ‘link’ will be back
over on the left side of the screen because we didn’t give it a styleclass
of lotusRight

The reason for this is beacuse the SPAN
has been broken into two seperate parts, one before the link and one after
the link and also because the link does not have any styleclass. A quick
way to fix this would be to go into the XPage source view and remove the
extra span tags that XPages designer has added in for you that I have highlighted
below. You’ll also need to add in some spacing around the link’s title.

Once that’s done you can save and preview
your XPage and you’ll see our nice new footer :

In the next part we will start working
on some domino forms so we can enter in some details to display in the
xpage.