Advanced XPages : A Nicer Domino Login Part 3

Dec's Dom Blog

Thursday, April 2, 2009 10:24 AM

In the first two parts of this servers we created the new custom control that will contain the login dialog box and we created the javascript that runs the actual login and processes 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 :

[

]var userName:NotesName = session.createName(@UserName());
if (userName.getCommon()=="Anonymous")
{
return true;
}
else
{
return false;
}[

]

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 thanks to some server side javascript. I have decided to create two links 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 anonymous.

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

[

]

<xp:link escape="true" id="link2" text="Logout">
<xp:this.value><![CDATA[#{javascript:facesContext.getExternalContext().getRequestContextPath() + "?logout&redirectTo=" + facesContext.getExternalContext().getRequestContextPath()}]]></xp:this.value>
</xp:link>

[]

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 true.

We can now save all the open xpages and custom controls in the application and refresh our web browser to test it out...

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.