In the first two parts of this servers
we created the new custom control that will contain the login dialog box
the results. In this part of the series we’ll tie everything together
with the login link in our application.
Lets start by opening the layout_Banner
custom control in Domino designer and then in the custom controls pane
on the right of the screen select your ‘layout_banner_Login’ custom control
and drag it into this custom control. Basically we have a custom control
inside a custom control. It doesn;t reall matter where the custom control
appears but I would suggest making sure it is outside the markup used for
the oneUI layout. I have placed mine at the top of the page.
This custom control is only ever going
to be used if the person is not logged in so we can add a formula to the
embedded custom control, select it and then look in the properties area.
Click the diamond beside the visible
property and choose the ‘compute value’ option. For the formula I’m going
to do a simple check to see if the username is anonymous or not. here’s
the code I’m using :
All that’s left to do is link the login
button to the dojo dialog box. At the moment we have a single link in the
layout_Banner custom control that switched from login to logout as required
and just display the correct one, again based on a similar ‘visible’ formula
like the one above. The login link will only appear if the current username
is anonymous and the logout name will only appear if the username is not
To achieve this I have rewritten the
existing link to be my logout link and I have dragged in a new link control
on the same line to be my login link
The logout link is a simple link with
a computed URL that takes the current URL and adds the ‘?logout&redirectTo=’
to the end of it. Here’s the source code for that link
+ “?logout&redirectTo=” + facesContext.getExternalContext().getRequestContextPath()}></xp:this.value>
The login link will have an onClick
event that runs on the client side. Select the new link, give it a name
and then switch to the events tab. Select the onClick event and then make
sure you change to the ‘Client’ tab and enter in the following code
Here we call the dojo framework and
tell it to activate the dijit dialogbox with the name of ‘loginDialog’.
Before we save the banner we need to
add in one final div where our login messages will be displayed. I have
placed mine between the OpenNTF logo and the unordered list tags.
At this stage the login dialog will
work but it won’t look good because the dojo widgets need to pickup a css
style from the body tag of the page. The style that we need to use if called
‘tundra’ and to make sure it appears in the <body> tag we need to
add it to every XPage in the application. Open each xPage in your application
( not custom controls ) and in the all properties section add the styleclass
and then save the xPage.
Then we also need to make sure the dojo
css files are loaded by the XPages processor. Again we could do this in
every XPage but there is no need to load in dojo css files unless we have
a dojo element on the page so back in the layout_banner_Login custom control
have a look at the basic properties and set the dojo specific options to
We can now save all the open xpages
and custom controls in the application and refresh our web browser to test
Clicking the login link now darkens
the background of the page and shows up the dojo dialog box. You can enter
in your username and password and click ‘ok’ and if you have entered in
valid credentials the page will reload with your logged in, if not the
dialog box will disappear and the error message will appear.
If you want to change the background
color of the overlay you can add the following css to your custom.css file
And that’s it, a nicer web 2.0 style
ajax login for an xpages application using dojo Widgits and dojo Ajax calls.