Back at the start of this series I mentioned
three application objectives, the first was to build an XPages based phone
book, the second was to give the notes client side of the application the
Java Views look and feel and the third was to create an agent to sync the
phone book with a Lotus Domino directory.

Throughout this series we have been
working on part 1 of the application objectives, to build an XPages phonebook
application, and at long last we have reached our goal, we now have a beautiful
XPages application that follows the oneUI look and feel that you are familiar
with in some other IBM products and allows the end user to look up peoples
details etc. We have also created the ability for a phone book editor to
be able to create locations and people right there from web interface.

If you have followed the entire series
and tried to build the application yourself you would have been introduced
to a wide variety of areas within the XPages, we have looked at many of
the built-in controls and also created out own custom controls. We have
seen how you don’t need to learn advanced JavaScript to be able to write
snippits of code, just learning the simple language operators will get
you by and we have also seen how you can easily use your existing lotusscript
and formula language skills within your javascript code.

I certainly hope that you have enjoyed
the series and that the power of XPages is now a little clearer for you.
I know I have learnt a lot by pulling apart the sample templates and presenting
my findings to you in the series. I think I can safely say that my future
Domino website development will be done in XPages rather then the traditional
methods.

You can now download the final phone
book application from OpenNTF here.

enjoy.

Our search bar is complete but searching
for something right now will result in an error because the page that we
are trying to open does not exist in the application. In this part I’m
going to build the search results XPage and show you how to display the
results.

Lets start by copying and pasting one
of our existing XPages and renaming it to ‘Search’. Because I want to search
for people I have decided to copy the ‘Location’ XPage. Once renamed I
then went to the custom control and duplicated the content_Location custom
control and renamed it to content_Search. I then returned to the ‘Search’
XPage and in the source view I updated it to use the ‘content_Search’ custom
control instead of the content_Location one. By breaking your application
layout into these smaller custom controls you can quickly add entire new
parts to the application just like we have done here.

Now lets open the content_Search custom
control. There are a few things we need to do to tidy this custom control
up before we make it display the search results. The first thing we need
to do is remove the two panels at the top of the screen that display the
location information and the action bar. You should just have your pager
and table ( with repeat inside ) left on the screen.

In the data tab for the custom control
you can remove the datasource for the locationDoc so you are just left
with the datasource for the peopleView.

You can also remove the server side
script library from the resources section and in the all properties section
you can remove the beforePagesLoads script.

Our page is now cleaned of all the bits
we no longer need, all that’s left to do it tell the data source that we
want to do a search.

Staying in the all properties view for
the custom control open out the data section till you find your data source.
We want to make sure that the search is done across all the documents in
the view so we will need to remove the categoryFilter.

Next move down to the search property.
In here we will compute the value so click on the diamond and enter in
the following code

Now save the custom control and try
doing a search in your application. Here’s the result of a search for the
name Smith.

You might want to adjust the table to
show the location name for the person but in terms of searching that’s
it. Simple.

Our search bar is starting to take shape,
it is displaying on the screen when it knows the database is full text
indexed and the edit box has a default value that disappears when you click
it in the web browser. We have also bound the editbox to a viewScope variable.
In this part we’ll tell the editbox and the link what page to go to to
show the search results and then in Part 53 we’ll build the new XPage to
display the results.

Lets start with the link as it will
be the easier of the two and we’ll be able to resuse some of the code we
write in the editbox. Open the layout_Placebar custom control in your Domino
designer and select the link in the searchbar area.

When a user clicks on the link I’d like
to open an XPage called SearchResults.xsp and pass in the value that I’m
searching for. To do this I need to create an onClick event for the link
so switch to the events tab and then select the onClick event and then
click the ‘Add Action’. The action I’m going to add is a basic ‘Open Page’
action.

The page that I’m going to open will
be computed as an example of how you can use the viewScope variable. Click
on the diamond for the page to open argument and enter in the following
code :

That’s everything we need to do for
the link. The editbox is a little more complex. We’d like to give the user
the ability to press the ‘enter’ key on the keyboard to kick off the search
so that they don’t have to click the link.

Select the editbox control in your domino
designer and go to the events tab. The event that we want to change is
the ‘onkeypress’ event. Select it.

For the server event we want to create
a basic ‘Open Page’ action just like we did above for the link using the
exact same code for the computed page. On it’s own this event is useless,
the user would only get to press one letter and the event would fire, to
make sure it only fires when the user presses the ‘enter’ key on the keyboard
we also need to write a ‘Client Side’ event.

In the same ‘onkeypress’ event switch
to the client tab and enter in the following code

This code checks to see what key has
been presses and if it is not the enter key then the event just returns
false, if on the other hand the event returns a true value because the
person has pressed enter then control is handed to the server side event
which opens the page.

So now we have accepted the search value
and instructed the page to go to the search.xsp XPage. In the next part
we’ll build that page.