BreadCrumb trail

[Darryl Nortje]

Hi there Guys.

I am using a Stack in my bean to track where a user is a process. I want to display this to the user on there page like a bread crumb trail. I am getting it working with a datatable, but, that displays each step one on top of the other. like this.
page1
page2
page3

How could I change what I have so that it displays like this.
page1 - page2 - page3 etc...

I think this is pretty self explanatory so node code. But if you want to see the code, I'll post it.

thanks.
cheers
Darryl

[Dylan Honorez]

Instead of looping over your stack in your JSF/JSP file, I would define an extra getter on your bean, where you loop over it. Then instead of using your datatable, I would use a normal outputText.

[Darryl Nortje]

That's a lekker idea Dylan,

It does open up another can of worms though, I want the user to be able to use the breadcrumb to navigate through the site. So each item in the trail needs to be hyperlinked. That's what's nice about the datatable, you can bind your datatable to a HtmlDataTable in your bean, and figure out which element was acted on / clicked.

It's odd that "the jsf okes" think about this kind of problem with the select boxes, but not with the lists. In the select boxes / items, you can specify that they are either pagedirection or linedirection. So they will either render going down, or going across. Why note give the option for your lists as well. I spose it does get complicated when your list contains complex data types that have more than 1 element, ie more than 1 column to display in the table..., how would that then display if you were rendering your table across as opposed to downwards.

Anyway, I'll try it out Dylan, and if I get something "elegant" working I'll post it here, otherwise, if there is a non hack way of doing, any help would be appreciated.

thanks
cheers
Darryl

[Darryl Nortje]

Ok, maybe the code is necessary, 'cos I can't see how Dylan's jook will work. You see, I want the user to be able to click anywhere on the breadcrumb trail, and he goes there. So here is all the code. This is working fine, the only thing is, I would like the breadcrumb trail, to move across the page, as opposed to down.

//BEAN

package browser;
 
import java.io.DataInputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import java.util.Stack;
 
import javax.faces.component.html.HtmlDataTable;
import javax.faces.context.FacesContext;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
 
public class BrowserBean {
 
private List<File> dirs;
private List<File> files;
 
private Stack<File> breadcrumbTrail;
 
private HtmlDataTable dirTable;
private HtmlDataTable fileTable;
private HtmlDataTable breadcrumbTable;
 
//private File previousDir;
 
public BrowserBean() {
// initialise all vars.
init();
}
 
/**
 * gets called on construction as well as when the users has clicked "back"
 * all the way to the "root" diretory.
 */
private void init() {
dirs = new ArrayList<File>();
files = new ArrayList<File>();
breadcrumbTrail = new Stack<File>();
 
// initialise myself to point to some arb directory as my root.
String rootDir = "/home/darryl/";
File root = new File(rootDir);
showDirectoryContents(root);
}
 
/**
 * gets called from the jsf framework when the user clicks on a directory.
 */
public void showDirectoryContents() {
File selectedDir = (File) dirTable.getRowData();
breadcrumbTrail.push(selectedDir);
showDirectoryContents(selectedDir);
}
 
/**
 * Adds all the selected directories contents to the Collections for rendering
 * on the jsp page.
 * 
 * @param selDir
 */
public void showDirectoryContents(File selDir) {
// refresh the stored files.
dirs = new ArrayList<File>();
files = new ArrayList<File>();
 
// loop through the selected directory contents populating the lists
for (int i = 0; i < selDir.listFiles().length; i++) {
if (selDir.listFiles()[i].exists() && selDir.listFiles()[i].isDirectory()) {
 
dirs.add(selDir.listFiles()[i]);
} else if (selDir.listFiles()[i].exists()
&& selDir.listFiles()[i].isFile()) {
 
files.add(selDir.listFiles()[i]);
} // else do nothing
 
}
 
}
 
public void goBack() {
// get previously selected directory, and show it.
if (breadcrumbTrail.size() == 0) {
init();
} else {
breadcrumbTrail.pop();
if (breadcrumbTrail.size() == 0) {
init();
} else {
File mf = breadcrumbTrail.pop();
showDirectoryContents(mf);
breadcrumbTrail.push(mf);
}
}
 
}
 
public String downloadFile() {
File f = (File) fileTable.getRowData();
// stream this file back to the client... HOW??
try {
int length = 0;
FacesContext context = FacesContext.getCurrentInstance();
HttpServletResponse response = (HttpServletResponse) context
.getExternalContext().getResponse();
ServletOutputStream op = response.getOutputStream();
// TODO add mimetype discovery here
String mimeType = null;
response.setContentType((mimeType != null) ? mimeType : "application/octet-stream");
response.setContentLength((int) f.length());
response.setHeader("Content-Disposition", "attachment; filename=\"" + f.getName() + "\"");
 
// Stream to the requester.
byte[] bbuf = new byte[1024];
DataInputStream in = new DataInputStream(new FileInputStream(f));
 
while ((in != null) && ((length = in.read(bbuf)) != -1)) {
op.write(bbuf, 0, length);
}
 
in.close();
op.flush();
op.close();
 
context.responseComplete();
} catch (IOException ioe) {
ioe.printStackTrace();
}
 
return null;
}

public void breadcrumbBounce() {
File f = (File) breadcrumbTable.getRowData();
while (!f.equals(breadcrumbTrail.peek())) {
breadcrumbTrail.pop();
}
showDirectoryContents(f);
}

// GETTERS AND SETTERS
public List<File> getDirs() {
return dirs;
}
 
public void setDirs(List<File> dirs) {
this.dirs = dirs;
}
 
public List<File> getFiles() {
return files;
}
 
public void setFiles(List<File> files) {
this.files = files;
}
 
public Stack<File> getBreadcrumbTrail() {
return breadcrumbTrail;
}
 
public void setBreadcrumbTrail(Stack<File> breadcrumbTrail) {
this.breadcrumbTrail = breadcrumbTrail;
}
 
public HtmlDataTable getDirTable() {
return dirTable;
}
 
public void setDirTable(HtmlDataTable dirTable) {
this.dirTable = dirTable;
}
 
public HtmlDataTable getFileTable() {
return fileTable;
}
 
public void setFileTable(HtmlDataTable fileTable) {
this.fileTable = fileTable;
}

public HtmlDataTable getBreadcrumbTable() {
return breadcrumbTable;
}

public void setBreadcrumbTable(HtmlDataTable breadcrumbTable) {
this.breadcrumbTable = breadcrumbTable;
}
 
}

//THE JSP FILE

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>File browser</title>
</head>
  
<body>
<f:view>

  <h:form id="mainform">
  
  <h:commandButton action="#{browserBean.goBack}" value="Back" />
  
  <fieldset>
  <legend>Breadcrumb Trail</legend>
  
  <h:dataTable id="breadcrumbTable" value="#{browserBean.breadcrumbTrail}" var="bc"
  binding="#{browserBean.breadcrumbTable}">
  
  <h:column>
  <h:commandLink action="#{browserBean.breadcrumbBounce}">
  <h:outputText value="#{bc.name}"/>
  </h:commandLink>
  </h:column>
  
  </h:dataTable>
  
  </fieldset>
  

<fieldset>
<legend>Contents</legend>

  <h:panelGroup>
<h:dataTable id="dirTable" value="#{browserBean.dirs}" var="dir"
binding="#{browserBean.dirTable}">

<h:column>
<h:commandLink action="#{browserBean.showDirectoryContents}">
<h:outputText value="#{dir.name}"/>
</h:commandLink>
</h:column>
</h:dataTable>
  </h:panelGroup>
  
  <h:panelGroup>
<h:dataTable id="fileTable" value="#{browserBean.files}" var="file"
binding="#{browserBean.fileTable}">
<h:column>
<h:commandLink action="#{browserBean.downloadFile}">
<h:outputText value="#{file.name}"/>
</h:commandLink>
</h:column>
</h:dataTable>
</h:panelGroup>

</fieldset>

</h:form>  
</f:view>
</body>
</html>

So the breadcrumb trail's purpose is more than just a display, it is functional. And using it this way works very well, it's just the way it is rendered that I am not happy with. Any help please !!!

cheers
Darryl

[Darryl Nortje]

Howzit guys,

Ok, so what I'm busy doing now is this.

I have the type HtmlPanelGroup on my bean. Whenever the user performs an action that needs to add something to the BreadcrumbTrail, I dynamically add an HtmlCommandLink to the panel. And add an ActionListener to the link. like this.

HtmlCommandLink link = new HtmlCommandLink();
  link.setValue(selectedDir.getName());
  link.setId("w_" + selectedDir.getName());
  link.setActionExpression(createELMethodExpr("#{browserBean.test}", null));
  link.addActionListener(createELMethodExprActionListener("#{browserBean.breadcrumbAction}"));
  link.setTitle(selectedDir.getName());
  link.setStyleClass("text_style");
  link.getAttributes().put("breadcrumbName", selectedDir.getName());
  breadcrumbPanel.getChildren().add(link);

Than in my jsp I bind an <h:panelGroup to this HtmlPanelGroup in my bean.

Still a bit buggy, but when I've got it working I'll post it here. I think it might be useful to some people. What I like about it, although it is a jook, is that you don't have to write your own custom component.

Having said that, if anyone out there perhaps has a better (cleaner) idea, please feel free to let me know ;-)

cheers
Darryl

[Darryl Nortje]

Ok last post. I have found the cleanest solution, although the above 2 work, this is the best, by far.

Tomahawk dataList layout="simple"

Works just like dataTable, just renders across.

Bob's your uncle.

cheers
Darryl