Primefaces Breadcrumb-Beispiel

Primefaces bietet verschiedene Arten von Navigationskomponenten, eine davon ist Brotkrümel, Es handelt sich um eine der Navigationskomponenten, die kontextbezogene Informationen zur Seitenhierarchie im Workflow bereitstellt. Dadurch werden Schritte als untergeordnete Schritte definiert Menüpunkt Komponenten in Paniermehl. Das Erstellen von Menüpunkten kann übrigens auf eine der folgenden Arten erfolgen:

  • Deklarativ: Wo die Menüelemente innerhalb der Breadcrumb-Komponente definiert sind.
  • Programmatisch: Wobei die Breadcrumb-Komponente mithilfe des Modellattributs ein MenuModel definiert.

Der deklarative Weg, sich mit a zu engagieren Tag, während der programmatische Weg mit a involviert wird DefaultMenuModel und DefaultMenuItem. In diesem Tutorial wird erklärt, wie Sie das BreadCrumb mit dem PrimeFaces-Framework verwenden. Wenn Sie Fragen haben, schreiben Sie diese bitte in den Kommentarbereich.

  • Lesen : PrimeFaces-Tutorials

1. PrimeFaces BreadCrumb-Tag-Informationen

PrimeFaces BreadCrumb-Tag-Informationen

2. PrimeFaces BreadCrumb-Tag-Attribute

PrimeFaces BreadCrumb-Tag-Attribute

3. Verwaltete Bohne

BreadCrumb.java

package net.javabeat.primefaces;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import org.primefaces.model.menu.DefaultMenuItem;
import org.primefaces.model.menu.DefaultMenuModel;
import org.primefaces.model.menu.MenuModel;

@ManagedBean
@SessionScoped
public class BreadCrumb {
	private MenuModel menuModel = new DefaultMenuModel();

	public BreadCrumb(){

		// Initialize
		this.menuModel = new DefaultMenuModel();

		// Create index menuItem
		DefaultMenuItem index = new DefaultMenuItem();
		index.setValue("Index");
		index.setCommand("#{breadCrumb.navigateIndex}");

		// Add menuItems
		this.menuModel.addElement(index);
	}

	public MenuModel getMenuModel() {
		return menuModel;
	}

	public void setMenuModel(MenuModel menuModel) {
		this.menuModel = menuModel;
	}

	public String navigateIndex(){
		// Initialize
		this.menuModel = new DefaultMenuModel();

		// Create index menuItem
		DefaultMenuItem index = new DefaultMenuItem();
		index.setValue("Index");
		index.setCommand("#{breadCrumb.navigateIndex}");
		index.setUrl("index.xhtml");

		// Add menuItems
		this.menuModel.addElement(index);

		return "index";
	}

	public String navigateHome(){
		// Initialize
		this.menuModel = new DefaultMenuModel();

		// Create index menuItem
		DefaultMenuItem index = new DefaultMenuItem();
		index.setValue("Index");
		index.setCommand("#{breadCrumb.navigateIndex}");
		index.setUrl("index.xhtml");

		// Create home menuItem
		DefaultMenuItem home = new DefaultMenuItem();
		home.setValue("Home");
		home.setCommand("#{breadCrumb.navigateHome}");
		index.setUrl("home.xhtml");

		// Add menuItems
		this.menuModel.addElement(index);
		this.menuModel.addElement(home);

		return "home";
	}

	public String navigatePrimefaces(){
		// Initialize
		this.menuModel = new DefaultMenuModel();

		// Create index menuItem
		DefaultMenuItem index = new DefaultMenuItem();
		index.setValue("Index");
		index.setCommand("#{breadCrumb.navigateIndex}");
		index.setUrl("index.xhtml");

		// Create home menuItem
		DefaultMenuItem home = new DefaultMenuItem();
		home.setValue("Home");
		home.setCommand("#{breadCrumb.navigateHome}");
		index.setUrl("home.xhtml");

		// Add menuItems
		this.menuModel.addElement(index);
		this.menuModel.addElement(home);

		// Create Primefaces menuItem
		DefaultMenuItem primefaces = new DefaultMenuItem();
		primefaces.setValue("Primefaces Tutorial");
		primefaces.setCommand("#{breadCrumb.navigatePrimefaces}");

		// Add menuItem
		this.menuModel.addElement(primefaces);

		return "primefaces";
	}
}

4. Die Ansichten

index.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
	<h:head>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<f:view>
		<h:form prependId="false">
			<h1>JavaBeat Primefaces Example</h1>
			<h2>Primefaces - BreadCrumb</h2>
			<p:breadCrumb model="#{breadCrumb.menuModel}"></p:breadCrumb>
			<br/>
			<h:commandButton value="Go Home" action="#{breadCrumb.navigateHome}"></h:commandButton>
		</h:form>
	</f:view>
</html>

home.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
	<h:head>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<f:view>
		<h:form prependId="false">
			<h1>JavaBeat Primefaces Example</h1>
			<h2>Primefaces - BreadCrumb</h2>
			<p:breadCrumb model="#{breadCrumb.menuModel}">
			</p:breadCrumb>
			<br/>
			<h:commandButton value="Go Index" action="#{breadCrumb.navigateIndex}"></h:commandButton>
			<h:commandButton value="Go Primefaces Tutorial" action="#{breadCrumb.navigatePrimefaces}"></h:commandButton>
		</h:form>
	</f:view>
</html>

primefaces.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
	<h:head>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<f:view>
		<h:form prependId="false">
			<h1>JavaBeat Primefaces Example</h1>
			<h2>Primefaces - BreadCrumb</h2>
			<p:breadCrumb model="#{breadCrumb.menuModel}">
			</p:breadCrumb>
			<br/>
			<h:commandButton value="Go Index" action="#{breadCrumb.navigateIndex}"></h:commandButton>
			<h:commandButton value="Go Home" action="#{breadCrumb.navigateHome}"></h:commandButton>
		</h:form>
	</f:view>
</html>

5. Primefaces BreadCrumb + Programmatic Demo

Primefaces – BreadCrumb-Beispiel 1

Primefaces – BreadCrumb-Beispiel 2

Primefaces – BreadCrumb-Beispiel 3

6. Primefaces BreadCrumb + Deklarative Demo

Wenn Sie sich für die Verwendung entschieden haben Brotkrümel auf deklarative Weise, sodass das menuItem-Tag daran beteiligt ist, dies zu erreichen. Nachfolgend finden Sie ein Beispiel davon.

index.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
	<h:head>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<f:view>
		<h:form prependId="false">
			<h1>JavaBeat Primefaces Example</h1>
			<h2>Primefaces - BreadCrumb</h2>
			<p:breadCrumb>
				<p:menuitem value="Home" url="#"></p:menuitem>
			</p:breadCrumb>
			<br/>
		</h:form>
	</f:view>
</html>

(wpdm_file id=71)

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen