Learning XPages Part 5 : Adding an image to the right side of the banner

If you have been following along so far
you will know that we now have a basic layout for our application but no
real content yet. In these next few parts of the series we are going to
take a look at each of the sections of the layout and start putting some
real content and code into them. The first part of the layout that we are
going to deal with is the banner that appears at the very top of the page.

If you look at any of the other oneUI
applications from IBM you’ll see that they use the banner in a fairly consistent
way, They have a logo on the left side of the banner for the application
and on the right side they have a login/logout link and maybe the name
of the person currently logged in. We are going to duplicate this look
and feel for our application and show how we can use some server side JavaScript
to decide if the link we need to show is the login link or the logout link.
lets start with the image on the left side of the banner.

Lets get started by opening the layout_banner
custom control that we created in the last part of the series. We are going
to remove the placeholder text and then drag in a new control from the
controls panel on the right side of your screen. The control we are going
to drag in is the ‘Panel’ container control. A panel is a special type
of control that allows you to put other controls inside of it. Go ahead
and drag in a panel and then have a look at it’s properties. Leave the
name of the panel blank and go down to the ‘All Properties’ tab. Because
we are following the OneUI we need to give this panel a special StyleClass
of ‘lotusRightCorner’. When the page is rendered to the users web browser
it will appear as <div
class="lotusRightCorner">
referencing that class in the OneUI CSS files. Lets pull in another panel
control and give it a StyleClass of ‘lotusInner’ while we are here.

UPDATE : The second panel is nested
inside the first panel as noted in the comments.

Before we can add an image to our banner
we will need an image file. I have created a new ‘Image Resource’ in the
design of my database called OpenNTF.jpg. This is the image that I’ll be
using for the final version of the application when it’s published on OpenNTF.
if you are writing your own applications for a corporate environment then
you may want to create your own standard image. To fit in properly it should
have a height of 24 pixels and should have a transparent background so
that it blends in well with your application. Once you have your image
resource in the database we need to drag in a new control from the right
hand side, it is a stand control called ‘Image’, drag it into the last
panel you created and have a look at it’s properties.

We have given the image control the
name of ‘lotusLogo’ and then selected the Image Resource by clicking on
the folder icon in the options section of the properties. We have also
provided some alternative text that will display when the user hovers over
the image in their web browser. The last thing we need to do is look at
the ‘All Properties’ section and give it a styleClass of ‘lotusLogo’. save
you custom control and preview it in your web browser

While this seems like a lot of work just to add an image to the banner
we have laid the groundwork for the other side of the banner by adding
in the two panels. In the next part we are going to add in an unordered
list of items styled with the OneUI styles to make horizontal option menu
that looks like this :