When viewing a persons details in our XPages
phonebook we currently just see a simple table of labels and values. In
this part we are going to tidy that up a bit, create a nice rounded corner
upper section to display the persons picture, name and main phone number
and in the lower section of the screen we’ll create a tabbed table to allow
you to switch from their work details to their home details. Lets start
with the upper section by opening the content_Person custom control.
There are many ways that you can create
a nice ’rounded corner’ style area using CSS. I did a google search for
’rounded corners css’ and found quite a few examples. The one I went for
in the end is called ‘Spiffy
Corners‘ as it does not need any
images or special JavaScript so it is the easiest to implement. To make
your own rounded corners you visit the site, set the background and foreground
colors you want and it will generate the CSS and HTML. Copy and past the
CSS into your custom.css file and then copy and paste the HTML into the
source view of your XPage at the right spot.
Once you have your HTML and CSS in place
you can start designing your page. I have chosen to create a table in the
rounded area to display some basic information. It looks like this
The ‘No Image Available’ is just a place
holder for the moment and I moved some of the fields from the original
table up to the header area. Blow the rounded corner area I am going
to create a tabbed panel. Make sure you are in the design view of your
control and then drag over the ‘Tabbed Panel’ control from the right side
of the screen onto your XPage.
Once it is in place have a look at it’s
properties. The tabbed panel has some overall properties that apply to
the entire tabbel panel and then each tab has it’s own set of properties.
If you look at the overall properties you can set which tab will be open
by default and you can even add/remove and move tabs around.
The individual tab properties allow
you to set the name of the tab and if it is visible or now.
As you can see nearly everything has
the diamond beside it meaning we can compute the values if required. I’m
going to give my tabs the names of ‘Work Details’ and ‘Home Details’ and
then in the overall properties I’m going to look at the ‘All properties
section give the tab panel a style class of ‘lotusTabs’ and with the tabbed
panel there is a new style property called containerStyleClass, we give
this one the value of ‘lotusTabContainer’, these styles are taken from
the OneUI
If we save and preview our XPage now
we can see the start of our tabbed table.
I’ll leave the next task up to you,
in your tabbed panel create new tables in each tab and move the labels
and fields relevant for either work or home details to the correct table/tab.
Dec's Dom Blog 