• Need to complete JSON implementation for this component (ICE-6978).
• Need to complete regression tests for this component.

Only useful when web page updates done by navigation, not by ajax? Do we read the browser history to create the links? Must be done on client side? What if user disables browser history?

7 jquery breadcrumbs. The most-mentioned seems to be jBreadCrumb. Note that it has fancy features (e.g. collapsible texts, mouseover effects) that may be time-consuming to re-invent. Therefore "can probably be developed without any specific 3rd party JS component ourselves, possibly just using base jQuery functions" is not possible.

PrimeFaces Breadcrumb just renders a <ul> list of menu item links. No JS involved. See source code.

Seems even jBreadCrumb requires a pre-marked-up <ul> list to start with. See example code. So nothing to do with browser history at all?

Decision from meeting: start with jBreadCrumb to do a prototype component first.

Working prototype: see attached screenshot.

Markup is like this:

<ace:breadcrumbs id="myCrumbs">
<h:outputLink value="http://www.icesoft.org">ICEfaces</h:outputLink>
<h:outputLink value="http://www.google.com">Google</h:outputLink>
<h:outputLink value="http://www.yahoo.com">Yahoo</h:outputLink>
<h:outputLink value="http://www.apache.org/">The Apache Software Foundation</h:outputLink>
......
</ace:breadcrumbs>

Tried reading browser history. Can't be done. "For security reasons, it's not possible to determine the URLs that the user has visited." (Professional JavaScript for web Developers, 3rd ed., p. 267.)

Technical details to work out:

• What kind of child components? <h:outputLink>?
• Dynamic list of links: attribute or component binding?
• Need attribute to distinguish between static and dynamic cases?
• Last link should not be clickable, just text. How to implement? Force disabling of link? User's responsibility to disable?
• First link home image rendered by jBreadCrumb. Should be disabled as well if on home page.
• Home link: use text, not image?
• Different cases of hiding intermediate links. Can't get it to work yet. See jBreadCrumb demo.
• ......

What kind of child components? <h:outputLink>?

• ace:breadcrumb tag, mimics h:outputlink, supports f:param child tags, doesn't need full attribute set as it will be styled by the parent component.

Dynamic list of links: attribute or component binding?

• Use EL with ace:breadcrumb, AND support a model API, like ace:list.

Need attribute to distinguish between static and dynamic cases?

• Model attribute if set is used.

Last link should not be clickable, just text. How to implement? Force disabling of link? User's responsibility to disable?

• Component renderer will ensure last link is not clickable.

First link home image rendered by jBreadCrumb. Should be disabled as well if on home page.

• No need to worry about this.

Home link: use text, not image?

• Not at this time. App can use first item in list to duplicate home with text label if wanted.

Different cases of hiding intermediate links. Can't get it to work yet. See jBreadCrumb demo.

• The ace:breadcrumb component should have attributes for the main behavioural configurations for each link (always expand, collapse, expand if room, etc.)

As per decision from last meeting, further research with additional requirements.
Searched through source code if feature not mentioned on plugin webpage. Findings:

Plugin	ThemeRoller support	ARIA support
Wijmo Breadcrumbs backLink param as Art mentioned.
Path Selector
jCrumb	jqUI param; partial support
xBreadcrumbs
jBreadCrumb
jquery-breadcrumb
Grails Breadcrumbs Part of BIG (114MB download) webapp framework. Has jBreadCrumb dependency.	no mention no source code	no mention no source code
Smart Breadcrumb Download link broken; demo not working.	no mention no source code	no mention no source code

Decision is to use Wijmo for this component, and leverage ace:menuItem if feasible.

First iteration using wijmenu backLink param working. It looks more like a menu bar than a breadcrumnbs bar. See screenshots: static list, dynamic list. Renderer looks more like Primefaces now. Also looks like a simplified menu bar renderer.

Very little documentation on breadcrumbs and backLink param:

• Customer support forum says: "set the backLink option to false, it will show the breadcrumb menu."
• API doc says: "This option determines whether the iPod menu shows a back link or a breadcrumb header in the menu."

Tried various other combinations of wijmenu options and style classes. No difference.

Added icons as decided in meeting. See screenshot of final result.

A: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\src\org\icefaces\ace\component\breadcrumbs#34548
A: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\src\org\icefaces\ace\component\breadcrumbs\Breadcrumbs.java#34548
A: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\src\org\icefaces\ace\component\breadcrumbs\BreadcrumbsMeta.java#34548
A: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\src\org\icefaces\ace\component\breadcrumbs\BreadcrumbsRenderer.java#34548
M: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\menu\menu.js#34548

It would be much better if the arrow was centered between the two menuItem labels.

Done. See screenshot. Just added some extra overriding CSS. No changes to existing wijmenu CSS or JS. For comparison's sake, here is screenshot with the other possible icon.

Let's add a demo to showcase for this that shows both the navigation ace:menuItem case and the command/Action event cases.

The example can use a tree component with selectable branches and nodes based on the Countries/States/Cities database the showcase already uses. As the user selected an item in the hierarchy, the selected hierarchy will be represented in the breadcrumbMenu. If the user clicks a menuItem in the breadCrumbMenu, it will select that item in the tree.

Done as required above. screenshot. Tree model and API same as in Tree demos. (Tree model and API quite a bit different than was used to in 1.8. Or did I remember wrong?)

M: C:\svn\ossrepo\icefaces3\trunk\icefaces\samples\showcase\showcase\src\main\java\org\icefaces\samples\showcase\view\navigation\AceMenu.java#34768
A: C:\svn\ossrepo\icefaces3\trunk\icefaces\samples\showcase\showcase\src\main\java\org\icefaces\samples\showcase\example\ace\breadcrumbs#34768
A: C:\svn\ossrepo\icefaces3\trunk\icefaces\samples\showcase\showcase\src\main\webapp\resources\examples\ace\breadcrumbs#34768
A: C:\svn\ossrepo\icefaces3\trunk\icefaces\samples\showcase\showcase\src\main\webapp\resources\examples\ace\breadcrumbs\breadcrumbs.xhtml#34768
A: C:\svn\ossrepo\icefaces3\trunk\icefaces\samples\showcase\showcase\src\main\java\org\icefaces\samples\showcase\example\ace\breadcrumbs\BreadcrumbsBean.java#34768
M: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\src\org\icefaces\ace\component\breadcrumbs\BreadcrumbsMeta.java#34768
M: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\src\org\icefaces\ace\component\breadcrumbs\BreadcrumbsRenderer.java#34768
A: C:\svn\ossrepo\icefaces3\trunk\icefaces\samples\showcase\showcase\src\main\java\org\icefaces\samples\showcase\example\ace\breadcrumbs\BreadcrumbsResources.java#34768
M: C:\svn\ossrepo\icefaces3\trunk\icefaces\samples\showcase\showcase\src\main\resources\org\icefaces\samples\showcase\view\resources\messages.properties#34768

Nothing to do with breadcrumbs component. The tree demo has the same problem. See video. Seems like some states or some node ids (the digits in the id is the key to the tree node) are lost once you navigate elsewhere and come back. And it seems to occur only in single select mode. (Tree Overview demo uses multiple select mode, change source to use single select mode to reproduce problem.)

JS error issue has been moved to ICE-9261.

1. All renaming done.
2. Widened right column of top layout table. (Originally copied from tree demo. Required adjustment to other CSS as well.)
3. For crumbs with action listeners: when clicked, clicked crumb disabled, following crumbs truncated. (Disabled last crumb is component requirement, not application-controlled.)
4. Hover CSS fixed.

M: C:\svn\ossrepo\icefaces3\trunk\icefaces\samples\showcase\showcase\src\main\java\org\icefaces\samples\showcase\view\navigation\AceMenu.java#34972
M: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\src\org\icefaces\ace\component\breadcrumbs#34971 -> C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\src\org\icefaces\ace\component\breadcrumbmenu#34972
M: C:\svn\ossrepo\icefaces3\trunk\icefaces\samples\showcase\showcase\src\main\java\org\icefaces\samples\showcase\example\ace\breadcrumbs#34971 -> C:\svn\ossrepo\icefaces3\trunk\icefaces\samples\showcase\showcase\src\main\java\org\icefaces\samples\showcase\example\ace\breadcrumbmenu#34972
M: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\breadcrumbs#34971 -> C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\breadcrumbmenu#34972
M: C:\svn\ossrepo\icefaces3\trunk\icefaces\samples\showcase\showcase\src\main\webapp\resources\examples\ace\breadcrumbs#34971 -> C:\svn\ossrepo\icefaces3\trunk\icefaces\samples\showcase\showcase\src\main\webapp\resources\examples\ace\breadcrumbmenu#34972
M: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\breadcrumbs\breadcrumbs.css#34971 -> C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\breadcrumbmenu\breadcrumbmenu.css#34972
M: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\src\org\icefaces\ace\component\breadcrumbs\Breadcrumbs.java#34971 -> C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\src\org\icefaces\ace\component\breadcrumbmenu\BreadcrumbMenu.java#34972
M: C:\svn\ossrepo\icefaces3\trunk\icefaces\samples\showcase\showcase\src\main\webapp\resources\examples\ace\breadcrumbs\breadcrumbs.xhtml#34971 -> C:\svn\ossrepo\icefaces3\trunk\icefaces\samples\showcase\showcase\src\main\webapp\resources\examples\ace\breadcrumbmenu\breadcrumbMenu.xhtml#34972
M: C:\svn\ossrepo\icefaces3\trunk\icefaces\samples\showcase\showcase\src\main\java\org\icefaces\samples\showcase\example\ace\breadcrumbs\BreadcrumbsBean.java#34971 -> C:\svn\ossrepo\icefaces3\trunk\icefaces\samples\showcase\showcase\src\main\java\org\icefaces\samples\showcase\example\ace\breadcrumbmenu\BreadcrumbMenuBean.java#34972
M: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\src\org\icefaces\ace\component\breadcrumbs\BreadcrumbsMeta.java#34971 -> C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\src\org\icefaces\ace\component\breadcrumbmenu\BreadcrumbMenuMeta.java#34972
M: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\src\org\icefaces\ace\component\breadcrumbs\BreadcrumbsRenderer.java#34971 -> C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\src\org\icefaces\ace\component\breadcrumbmenu\BreadcrumbMenuRenderer.java#34972
M: C:\svn\ossrepo\icefaces3\trunk\icefaces\samples\showcase\showcase\src\main\java\org\icefaces\samples\showcase\example\ace\breadcrumbs\BreadcrumbsResources.java#34971 -> C:\svn\ossrepo\icefaces3\trunk\icefaces\samples\showcase\showcase\src\main\java\org\icefaces\samples\showcase\example\ace\breadcrumbmenu\BreadcrumbMenuResources.java#34972
M: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\menu\menu.js#34972
M: C:\svn\ossrepo\icefaces3\trunk\icefaces\samples\showcase\showcase\src\main\resources\org\icefaces\samples\showcase\view\resources\messages.properties#34972