Learning XPages Part 28 : Creating a Tabbed Panel
Tags : Lotus Domino XPages Tabbed Panels OneUI Rounded Corners CSS
Bookmark :
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.
Bookmark :
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.
