Learning XPages Part 5 : Adding an image to the right side of the banner
Tags : lotus Domino XPages Panel Custom Control
Bookmark :
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 :
Bookmark :
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 :
Comments
Theres no better way to learn!
I can't believe you can't use a PNG as an image resource in this day and age
Posted by Mark Barton At 06:19:29 AM On 02/24/2009 | - Website - |
Import the graphic as usual, but in the file name field, type in *.png and navigate to your PNG file...
Let me know...
Posted by Brian Labelle At 12:31:43 AM On 03/04/2009 | - Website - |
but when I use it on a page or form. it is blank, tried on 8.0.2 and 8.5
Posted by Dilip Patel At 05:33:53 PM On 04/16/2009 | - Website - |