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

Posted on February 23, 2009 by qtzar

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.

A picture named M2

A picture named M3

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

A picture named M4


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 :

A picture named M5

Tagged with: , , , ,
Posted in None

Learning XPages Part 4 : Breaking Up Is Easy To Do

Posted on February 23, 2009 by qtzar

When developing an XPages application you
can, if you want, put everything into a single XPage but this can lead
to inconsistencies in the look and feel of your application if it contains
multiple XPages, for example in our Phonebook application we will have
an XPage for the homepage, an XPage for the list of people at a single
location and an XPage for the persons details. All of these XPages will
have the same basic layout but if I put that layout directly in each XPage
it means you have to change three different XPages if you want to change
part of the layout that is common for each page.

So lets break up our XPage into Custom
Controls that we can then include them in future XPages in the application.
We’ll use the oneUI structure as the basis for the custom controls that
we need. Let’s look at that original simple HTML again to see the DIV names
:

Banner Contents Here

Titlebar Here

PlaceBar Here

Left Sidebar Here

Main Content Here


</div>

Footer Contents Here


</div>

Each of the DIVs that contain content
make a logical breakup of the html into Custom Controls. You may be tempted
to also create custom controls for lotusFrame and lotusMain but there really
is no need, they are just containers and will probably never change.

To get started open up the Custom Controls
view in Domino designer and click the ‘New Custom Control’ button. You
will be prompted for a name for the custom control. You can give it whatever
name you like but I have found that I am leaning towards a standard naming
convention for the different types of custom controls that I create so
I’m going to call mine layout_Banner. You can name your custom control
however you like but you should also try stick to a standard naming convention
so if you come back to the application after a while you can easily work
out how everything fits together.

Once you have you blank custom control
open, switch to the source view and put in the single div for lotusBanner
and then save and close it. Here is how it’s going to look in the source
view once your done :

A picture named M2

UPDATE : The above screenshot
should say class=’lotusBanner’ and not id=’lotusBanner’ the OneUI css does
not have a DIV style for lotusBanner, just a class style. the reast of
the div’s are fine and should read id= for their names.

Do the same for the other parts of the
oneUI structure with one exception, for the lotusContent DIV give it’s
custom control a slightly different name, I’ll be calling mine content_HomePage.
The reason for this is that I’ll eventually have different custom controls
to include in this spot for the other XPages I’ll be making in my application.
Here are the Custom Controls I currently have in my demo database :

A picture named M3

If we open up the original XPage we
can now replace the DIVs in there with links to the Custom Controls. Just
drag the custom controls in from the controls pane on the right hand side
and then switch to the source view and move them to the correct places
in the source for the XPage, remembering to delete the unneeded DIVs. Here
is the new source for my XPage

A picture named M4

If we preview this in our web browser
we end up with the exact same result as before but now it has been broken
down into little chunks that will be easier to work with. In the next few
parts of the series we will be looking at each of the custom controls and
adding some real content to them.

Tagged with: , , , ,
Posted in None

Learning XPages Part 2 : The basics of OneUI

Posted on February 21, 2009 by qtzar

Welcome to part 2 in a series of blog entries
on how to create a simple phonebook application in Lotus Domino 8.5 using
XPages. In this part we are going to look at the basics of OneUI and understand
how to use it to provide the standard layout for your application.

By using a combination of DIVs and CSS
it is very easy to create a layout for your web based application. Your
CSS file will contain styles that match up with the divs in the html page
and this is what creates the layout. When we examine the OneUI core.css
file we find a section for structure that looks like this :



/*** S T R U C T U R E ***/
#lotusFrame, .lotusFrame{margin:0 auto;padding:0;min-width:990px;}
#lotusTitleBar, #lotusPlaceBar, .lotusTitleBar, .lotusPlaceBar{margin:0
20px}
#lotusMain, #lotusFooter, .lotusMain, .lotusFooter{border-style:solid;clear:both;margin:0
20px 10px 20px;overflow:hidden}
#lotusMain, .lotusMain{padding:0 0 5px 0;min-height:400px;border-width:0
1px 1px 1px;-moz-border-radius:0 0 4px 4px;-webkit-border-bottom-left-radius:4px;-webkit-border-bottom-right-radius:4px;
background-repeat:no-repeat}
#lotusColLeft, .lotusColLeft{width:180px;padding:20px 10px 10px 10px;}
#lotusColRight, .lotusColRight{width:180px;padding:15px 10px;font-size:.9em}
#lotusColRight h2, .lotusColRight h2{}
#lotusColLeft .lotusFirst, #lotusColRight .lotusFirst, .lotusColLeft .lotusFirst,
.lotusColRight .lotusFirst{margin-top:0;}
#lotusContent, .lotusContent{padding:16px 20px 20px 20px;overflow:hidden;margin-right:auto;margin-left:auto;}
.lotusContentColOne{width:45%;}
.lotusContentColTwo{width:45%;}

This defines parts of the basic layout
however it does not include the OneUI color scheme or graphics. These are
stored in a separate css file called defaulttheme.css.  If you match
these two css files up with some simple html that looks like this :



Banner Contents Here

Titlebar Here

PlaceBar Here

Left Sidebar Here

Main Content Here

</div>

Footer Contents Here

</div>

You’ll end up with an instant webpage
with a nice look and feel that looks like this :

A picture named M2

( footer and banner contents not shown
)

The core.css and defaulttheme.css and
a couple of other css files are all stored on the domino server in the
datadirectorydominojavaxpsthemeoneui directory. We could reference
the files directly in the XPage application but as you will see in part
3 of this series we are going to use a theme document to include the files
instead.

Tagged with: , , ,
Posted in None

Learning XPages Part 1 : Application Objectives

Posted on February 21, 2009 by qtzar

Welcome to the first in a series of blog
entries on learning XPages to develop a simple application. In each part
of this series of blog entries we will build, from scratch, a XPages based
phonebook application with the resulting application being released on
OpenNTF once it is complete. As I’m still learning XPages myself this should
be a fascinating exploration into the capabilities of XPages and should
help both myself and you, my readers, to get over the learning curve that
is involved in learning XPages in Lotus Domino 8.5.

Building a phonebook application is
probably one of the easiest applications you can create and phonebook applications
can be found in many companies as part of their intranet in one form or
another. For the purpose of this blog series I’ll be keeping the application
simple at first and then as the application progresses we can adding some
advanced features. Lets have a look at some of the objectives that I’ve
set for the application.

Xpages OneUI.

The base layout and look and feel is
going to use the OneUI CSS that IBM has developed. This is the same look
and feel that is used in the OpenNTF XPages Wiki application by Steve Castledine
and is also similar to the look and feel that the Discussion template in
8.5 uses. I have been told that the discussion template may even be moving
to the OneUI CSS in the 8.5.1 release but that remains to be seen. By using
this OneUI we can quickly set a predefined look for the application and
not have to worry about too much additional CSS.

Locations and People.

There will be two main data sources,
the first being a ‘location’ document that stores the main contact information
for an office, the office address, main fax number etc. and the second
will be a ‘person’ document that will contain all the information about
an individual person. The person document will also contain a field which
specifies which location the person belongs to.

Editable profiles.

When a user is logged in they should
have the ability to edit their own person document so that they can update
their details. This could be linked to a configuration setting so that
the application owner can disable this ability.

Notes client interface.

The notes client interface will be developed
using the Java Views to provide a similar look and feel to the Xpages Wiki
template. This will probably be the last thing that will be done to the
application as the main interface will be the XPages part.

Domino Addressbook Sync Agent.

Finally we’ll look at creating an agent
that will keep the phonebook up-to-date with the names found in the Domino
Directory. Again this will be done in the final stages as we’ll mainly
be concentrating on the XPages parts.

So there you have it, a rough plan for
the objectives of the XPages phonebook application. In the next part of
this series we’ll look at creating the initial OneUI layout in XPages and
then after that we’ll adding the data sources to the Xpages and linking
them all together.

Tagged with: , ,
Posted in None
Archives