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.

A picture named M2

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.

A picture named M3

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

A picture named M4

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

A picture named M5

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.

A picture named M6

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

A picture named M7

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

Tagged with: , , , ,
Posted in None
4 comments on “Learning XPages Part 10 : Finalizing The Footer
  1. just wanted to thank you for your efforts… I have been following these tutorials, they are excellent.


  2. Joe says:

    Thanks for your efforts. This is great.

    The question I have is, after havng made the openntf as link, I am havng no space between An and the link. Similarly te text after the link. Do need t do te html space of ampersand nbsp for that?


  3. Joe says:

    Too may typos above. Hereis the right spelling:

    The question I have is, after havng made the openntf as link, I am havng no space between “An” and the link. Similarly the text after the link. Do I need to add ampersand nbsp for that?


Comments are closed.

%d bloggers like this: