Advanced XPages : A Nicer Domino Login Part 1
Tags : Lotus Domino XPages DoJo
Bookmark :
When logging into a Domino web based application with session authentication you are normally brought to to the login page that is held in the domcfg.nsf database ( or the server default login screen if you don't have domcfg.nsf setup ). Last year Jake Howlett described a method to do an AJAX login on the Domino server so I have taken it a bit further and rewrote it to work with Dojo and XPages.
This short series ( only three parts, I promise ) will describe the methods I used to integrate it into the phonebook application from the 'Learning Xpages' series. As we are going to be using some dojo/dijit widgets it will also be a great introduction on how to use some advanced XPages features.
Lets start by opening the XPages Phonebook application in Domino Designer. I am going to put the login dialog box into it's own custom control so goto the custom controls section and create a new one. I'm calling mine 'layout_Banner_Login' because I'm going to nest it inside the 'layout_banner' custom control in a bit.
In your nice empty custom control we need to add a couple of DoJo and DiJit modules. To do this we will go to the all properties section of the page and under resources we'll click the 'add' button and select the xp:dojoModule option.
In the new resource we'll fill in the name of the dojo module that we want to load. The first one is called dojo.cookie and we also need resources for dijit.Dialog, dijit.form.TextBox and dijit.form.Button. If you look at your source once you have done this you should see something like the following. Don't forget that there are all case sensitive.
With our modules in place stay in the source view and we'll manually in in the required html to get the login dialog box to appear on the screen. Here is the initial DIV that we will create.
The DIV references a few parameters that may not be familiar with if you have never used dojo before. The dojoType specifies what the div should be converted into by the dojo parser. The execute parameter references a javascript that will be run when the dialog box is submitted. Here is the full code to paste into the custom control.
<div dojoType="dijit.Dialog" id="loginDialog" title="Please Login." execute="dominoLogin(arguments;">
<table>
<tr>
<td><label for="name">Username:</label></td>
<td><input dojoType="dijit.form.TextBox" type="text" name="username" id="username" /></td>
</tr>
<tr>
<td><label for="loc">Password:</label></td>
<td><input dojoType="dijit.form.TextBox" type="password" name="password" id="password" /></td>
</tr>
<tr><td colspan="2" align="center">
<input dojoType="dijit.form.TextBox" type="hidden" name="RedirectTo" id="RedirectTo" value="/icons/view.gif" />
<button dojoType="dijit.form.Button" type="submit"> OK</button>
</td>
</tr>
</table>
</div>
As you can see we have a table to assist in the layout of the dialog box and each of the input fields also have a dojoType to tell the dojo parser what type of field it is. You may also notice a hidden field called 'RedirectTo'. This will be passed to the domino login as the item to return to the browser after the login. As we are using AJAX to do the login the end user will never see the returned file. I have selected a small gif image from the domino/icons directory.
In the next part I'll add the client side javascript that you need that will do the actual login.
Bookmark :
When logging into a Domino web based application with session authentication you are normally brought to to the login page that is held in the domcfg.nsf database ( or the server default login screen if you don't have domcfg.nsf setup ). Last year Jake Howlett described a method to do an AJAX login on the Domino server so I have taken it a bit further and rewrote it to work with Dojo and XPages.
This short series ( only three parts, I promise ) will describe the methods I used to integrate it into the phonebook application from the 'Learning Xpages' series. As we are going to be using some dojo/dijit widgets it will also be a great introduction on how to use some advanced XPages features.
Lets start by opening the XPages Phonebook application in Domino Designer. I am going to put the login dialog box into it's own custom control so goto the custom controls section and create a new one. I'm calling mine 'layout_Banner_Login' because I'm going to nest it inside the 'layout_banner' custom control in a bit.
In your nice empty custom control we need to add a couple of DoJo and DiJit modules. To do this we will go to the all properties section of the page and under resources we'll click the 'add' button and select the xp:dojoModule option.
In the new resource we'll fill in the name of the dojo module that we want to load. The first one is called dojo.cookie and we also need resources for dijit.Dialog, dijit.form.TextBox and dijit.form.Button. If you look at your source once you have done this you should see something like the following. Don't forget that there are all case sensitive.
With our modules in place stay in the source view and we'll manually in in the required html to get the login dialog box to appear on the screen. Here is the initial DIV that we will create.
The DIV references a few parameters that may not be familiar with if you have never used dojo before. The dojoType specifies what the div should be converted into by the dojo parser. The execute parameter references a javascript that will be run when the dialog box is submitted. Here is the full code to paste into the custom control.
<div dojoType="dijit.Dialog" id="loginDialog" title="Please Login." execute="dominoLogin(arguments;">
<table>
<tr>
<td><label for="name">Username:</label></td>
<td><input dojoType="dijit.form.TextBox" type="text" name="username" id="username" /></td>
</tr>
<tr>
<td><label for="loc">Password:</label></td>
<td><input dojoType="dijit.form.TextBox" type="password" name="password" id="password" /></td>
</tr>
<tr><td colspan="2" align="center">
<input dojoType="dijit.form.TextBox" type="hidden" name="RedirectTo" id="RedirectTo" value="/icons/view.gif" />
<button dojoType="dijit.form.Button" type="submit"> OK</button>
</td>
</tr>
</table>
</div>
As you can see we have a table to assist in the layout of the dialog box and each of the input fields also have a dojoType to tell the dojo parser what type of field it is. You may also notice a hidden field called 'RedirectTo'. This will be passed to the domino login as the item to return to the browser after the login. As we are using AJAX to do the login the end user will never see the returned file. I have selected a small gif image from the domino/icons directory.
In the next part I'll add the client side javascript that you need that will do the actual login.
Comments