Posted under JSF
Permalink
Tags Gotcha, JSF, Primefaces, Tip, Tutorial
I did some experimentation on the best look and feel (in my humble opinion!) for this component, and found the following points along the way:-
- By default the component was underlining all the entries. This was because all anchor tags were being underlined. The Primefaces showcase has specific rules in default.css to turn this off, so I added them too. (You might have expected this to all be done by the themes or breadcrumb css, but not the case). I just added “a {text-decoration: none;}” and “a:hover {text-decoration: underline;}” rules, but obviously there are other ways if you want other links to be underlined.
- I then tried to place a breadcrumb in a scrolling div, to ensure that it would still work if the content overflowed. I knew that horizontal scroll bars on a breadcrumb would not look at all sexy, but wanted at least some solution for edge cases with extreme amounts of content, as by default the component truncates to the right and content is lost/not accessible. I was unable to solve this issue – the component would not play ball. I wanted to leave an inner div containing the component at a floating size, so that the control sized itself for the content, and then add a scrollable outer div with overflow:auto so that it would scroll if needed. However, the component appears to use some jQuery magic to detect the size of any fixed ancestor outer level div of the component, and then fix the control width to that size using inline styling added to one of its own inner divs by jQuery/Javascript. The only partial solution was to have a large fixed size component in a smaller outer scrolling div, but this was not good as the scrollbars were present even if not needed as the control had a fixed size.
- The problem could probably be solved using jQuery, perhaps by modifying the jBreadcrumb jQuery component which Primefaces uses, but I did not investigate this further.
- In the end, I reconciled myself with the default way the component works. It does have a good solution to this issue by (optionally) dynamically collapsing the entries to a designated preview width, and then expanding an entry on mouse hover (so-called preview mode). This does save a lot of space, and I decided that I could easily have more than enough entries for my needs in say an 800 pixel wide breadcrumb. Alternatively the component can be left to float entirely and rely on the browser for scrolling, but in practice there will generally be an outer container of some kind which will set a limit and trigger the above issue. In my case, this would likely be an outer level tab for a form.
- I also decided that in practice it would be helpful to turn the preview mode on dynamically, perhaps say when the number of entries exceeded a certain number, or better still when the total character count in the breadcrumb exceeds a certain figure, as this would give good results on average and still be easy to calculate. For normal use, when there is plenty of room left in the breadcrumb, preview mode is a nuisance, but it is obviously essential when the component fills up. Ideally, this would be done when the component is filled rather than based on an entry count, but this would be tricky to calculate. Ideally this would be done dynamically by the component itself. Best of all might be a dynamic preview mode which shrinks the entries only when required and only enough to fit everything in the component.
- Rendering the component in preview mode takes significant time when there are a lot of entries (even on my Core I7 920). This might be an issue when partially updating a page (and the component) during navigation. This is even more reason not to use preview mode unless it is really essential, as with it turned off the breadcrumb renders very quickly. On some occasions it would be possible to update the control client side, for example when just changing the underline/italic decoration on the text (see below re traversing a hierarchy) and no entries are added or removed. In this case the necessary classes could just be added and removed from the breadcrumb entries dynamically with jQuery. I have also not tried any Ajax/partial form updates with it, for example just adding or removing a single entry, but I expect the whole component will be re-rendered each time as the manual makes no mention of partial updating.
- I experimented a bit with the expand and contract timings in preview mode. These interact with the time taken by the JavaScript to dynamically collapse the entries when the component is first rendered, so if you try to make them too fast it looks clunky. Also if the expand is too fast it can confuse you as to which entry you are hovering on, especially when there is a lot of preview compression, as you can end up highlighting the next entry along without realising it, just due to the expand/collapse effect.
- One common use case for me is to use the component to hold the navigation path when traversing a hierarchical data set. A desirable feature would be that when you traverse back up the tree say by clicking on one of the higher levels in the breadcrumb, you do not immediately lose all the lower levels you visited. They would only be removed if you visited a higher level and then traversed down a different lower level path at some point, in which case the lower levels visited previously beyond that point would then be removed and a new path built.
- The nice thing about the above concept is that you can repeatedly wander freely up and down a given tree path via the breadcrumb without losing any of the context, which is handy in my case as the UI deliberately only shows the current level of the tree in a table – no tree or treetable components are used in order to keep things intuitive and simple for novice users.
- When applying this concept, it is necessary to highlight the current location in the breadcrumb, as this will no longer always be the rightmost entry. The most logical way to do this seemed to apply the same highlight as the mouse hover, which is to underline an entry. Therefore, the current entry will always be underlined, as will any other entry that is hovered over.
- In addition, it is desirable to distinguish between the breadcrumb levels between the root and the current point from those previously visited below the current point, as the breadcrumb is no longer only showing the path to where you currently are. I tried various kinds of dimmed, disable style highlighting, but whilst it is important to make these previously visited lower level entries look different, it must also be clear that you can still click on them. In the end, my preferred solution which looks good in all the top 5 browsers and with all the Primefaces themes was to italicise the previously visited lower level entries. You therefore end up with ‘normal’ styling up to the current level. The current level itself is then shown underlined so it is clear where you are. All the entries to the right (if any) are then italicised.
The following example shows my preferred component, which is somewhat thinner than the default due to the removed padding. Examples of the different highlighting discussed above are all just coded directly into the menu options. The example also uses my theme switcher component which is not listed.
index.xhtml
<!DOCTYPE HTML>
<html xmlns="http://www.w3c.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:util="http://java.sun.com/jsf/composite/uk.co.salientsoft/util">
<f:view contentType="text/html">
<h:head>
<util:themeSwitcher outputStyle="true"
themeBase="/resources/themes"
defaultTheme="redmond"/>
<style>
.ui-widget {
font-size: 75% !important;
}
h1.header {
font-size: 1.2em !important;
padding: 5px;
margin: 0px 0px 20px 0px;
float: left;
}
.themeswitcher {
float: left;
clear: both;
margin-bottom: 20px;
}
.ss-breadcrumb {
clear:both;
margin: 0 0 10px 0;
padding: 0;
width:800;
}
a {text-decoration: none;}
a:hover {text-decoration: underline;}
.ss-currentlevel {text-decoration:underline;}
.ss-lowerlevel {font-style: italic;}
</style>
</h:head>
<h:body>
<h1 class="header ui-widget ui-widget-header ui-corner-all" style="">Breadcrumb</h1>
<h:form id="frmTest">
<util:themeSwitcher form="frmTest" outerStyleClass="themeswitcher"/>
<br/><br/>
<p:breadCrumb styleClass="ss-breadcrumb" preview="false">
<p:menuitem value="Categories" url="#" />
<p:menuitem value="Sports" url="#" />
<p:menuitem value="Football" url="#" />
<p:menuitem value="Countries" url="#" styleClass="ss-currentlevel"/>
<p:menuitem value="Spain" url="#" styleClass="ss-lowerlevel"/>
<p:menuitem value="F.C. Barcelona" url="#" styleClass="ss-lowerlevel"/>
<p:menuitem value="Squad" url="#" styleClass="ss-lowerlevel"/>
<p:menuitem value="Lionel Messi" url="#" styleClass="ss-lowerlevel"/>
<p:menuitem value="Squad" url="#" styleClass="ss-lowerlevel"/>
<p:menuitem value="Lionel Messi" url="#" styleClass="ss-lowerlevel" />
</p:breadCrumb>
<p:breadCrumb styleClass="ss-breadcrumb" preview="true" previewWidth="24"
expandEffectDuration="400" initialCollapseEffectDuration="100"
expandedBeginningItems="1" expandedEndItems="1">
<p:menuitem value="Categories" url="#" />
<p:menuitem value="Sports" url="#" />
<p:menuitem value="Football" url="#" />
<p:menuitem value="Countries" url="#" />
<p:menuitem value="Spain" url="#" />
<p:menuitem value="F.C. Barcelona" url="#" styleClass="ss-currentlevel"/>
<p:menuitem value="Squad" url="#" styleClass="ss-lowerlevel" />
<p:menuitem value="Lionel Messi" url="#" styleClass="ss-lowerlevel" />
<p:menuitem value="Categories" url="#" styleClass="ss-lowerlevel" />
<p:menuitem value="Sports" url="#" styleClass="ss-lowerlevel" />
<p:menuitem value="Football" url="#" styleClass="ss-lowerlevel" />
<p:menuitem value="Countries" url="#" styleClass="ss-lowerlevel" />
<p:menuitem value="Spain" url="#" styleClass="ss-lowerlevel" />
<p:menuitem value="F.C. Barcelona" url="#" styleClass="ss-lowerlevel" />
<p:menuitem value="Squad" url="#" styleClass="ss-lowerlevel" />
<p:menuitem value="Lionel Messi" url="#" styleClass="ss-lowerlevel" />
</p:breadCrumb>
</h:form>
</h:body>
</f:view>
</html>