Learning XPages Part 10 : Finalizing The Footer
Tags : Lotus Domino XPages Link Control Spans
Bookmark :
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.
Bookmark :
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.
Comments
Posted by Brian Labelle At 12:10:58 PM On 02/25/2009 | - Website - |
Posted by Patrick Kwinten At 01:09:53 PM On 02/26/2009 | - Website - |
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?
Posted by Joe At 10:46:08 AM On 03/09/2009 | - Website - |
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?
Posted by Joe At 10:48:06 AM On 03/09/2009 | - Website - |