At this stage in our application development
we have created a fairly nice looking homepage for our phonebook. When
you load up the phonebook in your web browser you see the OneUI layout,
a menu on the left of the screen listing all the locations and in the main
part of the screen a table listing all the locations with their main phone
number and main fax numbers. While it looks nice it doesn’t do anything
yet, there is nothing to click on to get more details and over the next
few sections in the Learning XPages blog series we will create a new XPage
and link it from the homepage.
The next XPage that we are going to
create will be designed to list all of the people at a single location.
The layout will be based on the OneUI just like the homepage, the only
different will be the contents of the main part of the page. We will start
the process by going to our Custom Controls view in the Domino Designer
and creating a new custom control I have called mine content_Location so
that I know what it is going to contain.
In our new blank custom control we will
drag in a panel control and then looking at it’s properties we add a style
class of ‘lotusContent’. I have also added some placeholder text into the
panel, I like to do this so when I preview pages I can make sure that the
content will appear in the correct place. Here’s what the source view of
my control looks like right now :
Save the custom control and then go
to the XPages view in your Domino Designer. Now we could create a brand
new blank XPage and then recreate all the divs and drag in custom control
for the layout just like we did for the original XPage but why reinvent
the wheel. An easier option is to select the ‘Home’ XPage and duplicate
it by doing a copy paste. This will result in a new XPage called ‘Copy_of_home’
so we need to rename it. In traditional Domino Development you can rename
design elements by opening then and looking at the properties of the element
or you can edit the name in-place within the design view however with XPages
you cannot do it this way, you must select the ‘Rename’ option from the
File menu. the keyboard shortcut for this option is F2, so highlight your
new XPage and press F2 to bring up the rename dialog box
Type in your new name and then open
the XPage in edit mode. I have given mine the simple name of ‘Location’.
Once you have opened the XPage you can remove the custom control for content_HomePage
and drag in the custom control for content_Location. When your finished
your XPage source should look like this
Now you can save your new XPage and
preview it in your web browser. You should see the OneUI layout that we
created earlier and your new placeholder text appearing in the main content
area.
In the next part we’ll add another repeat
control to the contents_Location custom control.
Dec's Dom Blog 