Apple Style Breadcrumbs In XPages

Posted on April 2, 2009 by qtzar

If you followed along with the ‘Learning
XPages’ blog series then in part 26 and part 27 we created some basic breadcrumbs
for the application. Breadcrumbs are a method of natigation that expand
out as you progress deeper into an application, In the XPages Phonebook
application we had three levels of breadcrumb, one for the hompage, one
for the location name and one for the person document we were viewing.
 At the deepest level it looks something like this :

A picture named M2

These breadcrumbs look very basic so
for another application I’m working on I wanted to make them look a little
nicer and through the use of CSS and a couple of image files I was able
to make the breadcrumbs look similar to the ones that you can see on the
Apple website.

First of all I need two file, One for
the homepage link and one for the arrows between the breadcrumb items.
For the homepage link I used the ‘house’ icon from the famfamfam Silk
icon pack. You can down load the entire pack from their website,
there are lots of great other icons that you may end up using in your own
applications. For the separator image I ended up creating my own in photoshop.
You can download it from here. Add the two images
into your application as resources, the crumb.gif can be added as an Image
Resource and the house.png will need to be added as a file resource.

As an aside, I really wish PNG files
could be added as image resources and that the notes client ( not web )
would render them. Maybe if enough people promote thisIdeaJam Idea
it will happen in a future version of the client.

For the CSS I edited the custom.css
and replaced all the #phonebookBreadcrumbs lines with the following



.crumbs {width:100%; margin:0 auto;
padding: 0; line-height:3em; background:#fdfdfd; border:1px solid #dedede;}
.crumbs a {margin:0 5px 0 0; padding:10px 15px 10px 6px; background: #fdfdfd
url(crumbs.gif) no-repeat right center;}
.crumbs span.house {margin:0 5px 0 0; padding:10px 15px 10px 6px; background:#fdfdfd
url(crumbs.gif) no-repeat right center;}
.crumbs img.house {margin:0 5px 0 0; padding:10px 15px 10px 6px; background:#fdfdfd
url(crumbs.gif) no-repeat right center;}

Then opening the layout_PlaceBar custom
control I replaced the styleclasses with the correct classes.

A picture named M3

I also had to adjust the ‘Home’ link
so it displayed the house.png image instead of the word ‘Home’ and I removed
the ‘ > ‘ labels that I had manually used to separate the breadcrumbs
in the original version.

Now when you save the custom control
and refresh your application the breadcrumb bar looks much nicer.

A picture named M4

NOTE : Due to the way the screenshot
is pasted into this blog entry the nice fading effect is lost so you’ll
have to imagine the grey of the arrow fading backwards giving a nice smooth
effect or you can have a look at the live demo.

IE7 Update : Some extra CSS is required
for the breadcrumbs to work correctly in IE7 :



.crumbs img {margin:0 0 0 0;padding:10px
0;}

/

Tagged with: , , ,
Posted in None

Advanced XPages : A Nicer Domino Login Part 3

Posted on April 2, 2009 by qtzar

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.

A picture named M2

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.

A picture named M3

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

A picture named M4

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><!DATA[#{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

A picture named M5

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.

A picture named M6

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.

A picture named M7

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.

A picture named M8

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

A picture named M9

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.

A picture named M10

If you want to change the background
color of the overlay you can add the following css to your custom.css file



#loginDialog_underlay {background-color:black;}

And that’s it, a nicer web 2.0 style
ajax login for an xpages application using dojo Widgits and dojo Ajax calls.

Tagged with: , , ,
Posted in None

Advanced XPages : A Nicer Domino Login Part 2

Posted on April 1, 2009 by qtzar

In part one of this mini series I described
how to add the dojo modules to our custom control and created the layout
for the dialog box where the user enters their username and password. In
this part I’ll create and describe the client side javascript that will
perform the actual login.

In domino designer go to the Code ->
Script Libraries and click the button to create a new javascript library.
I called mine ‘login’ and here is the javascript code I entered.

function dominoLogin(data){

dojo.xhrPost({
url: ‘/names.nsf?login’,
content: data,
load: function (data) {
if( String(data).substring(0,3) == "GIF")
{
dojo.byId("loginMsg").style.color = "green"
dojo.byId("loginMsg").style.backgroundColor = "transparent"

dojo.byId("loginMsg").innerHTML = "Please Wait…"

location.reload();
} else {
if ( dojo.cookie(‘DomAuthSessId’) != null || dojo.cookie(‘LtpaToken’) !=
null )
{
dojo.byId("loginMsg").style.color = "red"
dojo.byId("loginMsg").style.backgroundColor = "transparent"

dojo.byId("loginMsg").innerHTML = "Not Authorized."

dojo.cookie(‘DomAuthSessId’, null, { path: ‘/’, domain: ‘qtzar.com’ });

dojo.cookie(‘LtpaToken’, null, { path: ‘/’, domain: ‘qtzar.com’ });
} else {
dojo.byId("loginMsg").style.color = "red"
dojo.byId("loginMsg").style.backgroundColor = "transparent"

dojo.byId("loginMsg").innerHTML = "Invalid User/Password."

}
}
},
error: function (error) {
console.error (‘Error: ‘, error);
}
});
}

The script libary will contain a single
function called dominoLogin which accepts as it’s arguments a keypaired
set of fieldnames and values from the dojo dialog box that we created in
the last part.

We then do an AJAX post to the url of
‘names.nsf?login’ and the username, password and redirect fields are passed
in as the contents.

When the ajax request is returned to
the browser the ‘load’ function is run using the returned value. If you
remember I was redirecting to a gif file. If the login was successful then
the gif file is returned so I can check for that by looking at the first
three characters of the file. If they are equal to ‘GIF’ then I know I’m
logged in. I can set a ‘Please wait’ message and then reload the page.
the dojo.byID finds a div on my page to update either the style or the
inner HTML.

What if I didn’t get the gif file returned?
Well it can mean one of two things, I’ve either successfully logged into
the server but I am not authorized to access the application because of
the database ACL or I have not logged in because I have supplied an invalid
username or password.

To see if I have logged into the server
I check for the DomAuthSessID or LtpaToken cookies. One of these two cookies
will exist if I’m logged in successfully but I already know that if I’ve
gotten this far in the process then I didn;t have the correct rights to
open the database. So if the cookie exists, then use the dojo.ByID to display
an error message and also clear the cookies ( effectively logging you back
out of the server )

If the cookies didn’t exist and we got
this far in the processing then it was just a plain failed login so again
display an error message

If the overall AJAX request failed then
I’m just outputting the error to the console so if you have the javascript
debugger turned on you’d see the error.

Now that the javascript library is done
return to the ‘layout_banner_Login’ custom control and in the resources
section and click the ‘Add script Library’ option and select the script
library we just created.

A picture named M2

We now have the custom control and the
script library created.  In the next and final part I’ll adjust the
original layout_Banner custom control to load the new login method.

Tagged with: , ,
Posted in None

Advanced XPages : A Nicer Domino Login Part 1

Posted on April 1, 2009 by qtzar

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.

A picture named M2

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.

A picture named M3

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.

A picture named M4

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.



Username:
Password:


OK

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.

Tagged with: , , ,
Posted in None
Archives