Right now our XPages phone book application
is finished and reaches the first objective that I had laid out for the
phone book. The other two objectives are not XPages related and won’t be
covered in this blog series. I could finish right here and release the
application to OpenNTF but there is one more function I want to add before
doing that…
I want to add a search function to my
XPages application, this will involve adding in an area to allow the user
to enter in the words they want to search for and a button to start the
search process. I’ve decided to add my search bar to the right side of
the placebar
I could have added it to the titleBar
or even in the lefthand sidebar but I think that this location is the most
logical as the search function really doesn;t belong as part of the application
title and having it in the sidebar may confuse the user into thinking they
are searching the current set of data they are viewing. By having the search
bar above the main application area I hope that the user will know that
they are searching the entire application.
Lets add the search bar, Open your layout_PlaceBar
custom control and drag in a new panel control from the controls pane on
the right of your screen. Go in to the source view and move the panel up
to the top of the page so that it appears just under the opening DIV on
the page. I have given my panel a name and I’ve set the styleclass to ‘lotusRight’.
Into this panel we need to drag in two
more controls. An Edit Box control and a Link control. For the Edit Box
control I have given it a name of mySearchValue and I have also specified
the width of the control to 200px.
For the Link control I have removed
it’s label value and I have also given it a friendly name
Because I don’t have a label value I
have specified an image. This is an image resource that I have imported
into the image resources section of my application.
The source for the search bar’s layout
now looks like this :
Note that I have also added a top and
righ margin to the overall panel control to move it into exactly the right
place.
In the next part I’ll add the events
that are needed to the controls.
Dec's Dom Blog 