PrimeFaces 工具栏

17 Mar 2025 | 阅读 2 分钟

它是一个水平分组组件，用于形成包含命令和其他内容的工具栏。 PrimeFaces 提供了 <p:toolbar> 组件，用于在 JSF 应用程序中创建工具栏。它对于创建基于工具的 Web 应用程序很有用。它还具有下面表格中列出的各种属性。

工具栏属性

属性	默认值	类型	描述
id	null	String	它是组件的唯一标识符。
rendered	true	Boolean	它用于指定组件的渲染。
binding	null	Object	一个 el 表达式，它映射到后备 bean 中的服务器端 UIComponent 实例
style	null	String	它用于设置容器元素的内联样式。
styleClass	null	String	它用于设置容器的样式类。元素。

示例

在这里，在以下示例中，我们正在实现 <p:toolbar> 组件。此示例包含以下文件。

JSF 文件

// toolBar.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>ToolBar</title>
</h:head>
<h:body>
<h:form>
<p:growl id="messages" showDetail="true" />
<p:toolbar>
<f:facet name="left">
<p:commandButton type="button" value="New" icon="ui-icon-document" />
<p:commandButton type="button" value="Open" icon="ui-icon-folder-open" />
<span class="ui-separator">
<span class="ui-icon ui-icon-grip-dotted-vertical" />
</span>
<p:commandButton type="button" title="Save" icon="ui-icon-disk" />
<p:commandButton type="button" title="Delete" icon="ui-icon-trash" />
<p:commandButton type="button" title="Print" icon="ui-icon-print" />
</f:facet>
<f:facet name="right">
<p:menuButton value="Options">
<p:menuitem value="Save" actionListener="#{toolbar.save}" update="messages" icon="ui-icon-disk" />
<p:menuitem value="Update" actionListener="#{toolbar.update}" update="messages" icon="ui-icon-arrowrefresh-1-w" />
<p:menuitem value="Delete" actionListener="#{toolbar.delete}" ajax="false" icon="ui-icon-close" />
<p:menuitem value="Homepage" url="https://tpointtech.cn" icon="ui-icon-extlink" />
</p:menuButton>
</f:facet>
</p:toolbar>
</h:form>
</h:body>
</html>

ManagedBean

// ToolBar.java

package com.javatpoint;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.context.FacesContext;
@ManagedBean
public class ToolBar {
public void save() {
addMessage("Success", "Data saved");
}
public void update() {
addMessage("Success", "Data updated");
}
public void delete() {
addMessage("Success", "Data deleted");
}
public void addMessage(String summary, String detail) {
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, summary, detail);
FacesContext.getCurrentInstance().addMessage(null, message);
}
}

输出

下一主题PrimeFaces ConfirmDialog

PrimeFaces 工具栏

工具栏属性

示例

JSF 文件

ManagedBean

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

PrimeFaces 教程

PrimeFaces Ajax

UI 组件

面试题

PrimeFaces 工具栏

工具栏属性

示例

JSF 文件

ManagedBean

相关帖子

PF AccordionPanel

PF Signature

PF InputMask

PF Growl

PF SplitButton

PF InputText

PF Rating

PF Slider

PF NotificationBar

PF Knob

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器