Learning XPages Part 4 : Breaking Up Is Easy To Do

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
:

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 :

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 :

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

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.