Apple Style Breadcrumbs In XPages

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 :

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.

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.

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;}

/

Share this:

• Twitter
• Facebook

Like Loading...

Related