本文介绍了Primefaces的工具栏、工具栏组和工具提示组件。工具栏是命令和其他内容的水平分组，具有左右占位符，可用于封装JSF/Primefaces组件。ToolbarGroup是工具栏的辅助组件，用于定义占位符。工具提示组件提供了自定义效果、事件和HTML内容，可与Primefaces组件配合使用，还支持全局和异步更新。
primefaces
Primefaces Toolbar is a horizontal grouping for commands and other contents.
Primefaces工具栏是命令和其他内容的水平分组。
Primefaces工具栏基本信息 (Primefaces Toolbar Basic Info)
| Tag | Toolbar |
|---|---|
| Component Class | org.primefaces.component.toolbar.Toolbar |
| Component Type | org.primefaces.component.Toolbar |
| Component Family | org.primefaces.component |
| Renderer Type | org.primefaces.component.ToolbarRenderer |
| Renderer Class | org.primefaces.component.toolbar.ToolbarRenderer |
| 标签 | 工具列 |
|---|---|
| 组件类别 | org.primefaces.component.toolbar.Toolbar |
| 组件类型 | org.primefaces.component.Toolbar |
| 组件族 | org.primefaces.component |
| 渲染器类型 | org.primefaces.component.ToolbarRenderer |
| 渲染器类 | org.primefaces.component.toolbar.ToolbarRenderer |
Primefaces工具栏属性 (Primefaces Toolbar Attributes)
| Name | Default | Type | Description |
|---|---|---|---|
| id | null | String | Unique identifier of the component |
| rendered | true | Boolean | Boolean value to specify the rendering of the component, when set to false component will not be rendered. |
| style | null | String | Inline style of the container element. |
| binding | null | Object | An el expression that maps to a server sideUIComponent instance in a backing bean |
| styleClass | null | String | Style class of the container element. |
| 名称 | 默认 | 类型 | 描述 |
|---|---|---|---|
| ID | 空值 | 串 | 组件的唯一标识符 |
| 呈现 | 真正 | 布尔型 | 布尔值，用于指定组件的呈现，当设置为false时将不呈现组件。 |
| 样式 | 空值 | 串 | 容器元素的内联样式。 |
| 捆绑 | 空值 | 目的 | El表达式，它映射到支持bean中的服务器sideUIComponent实例 |
| styleClass | 空值 | 串 | 容器元素的样式类。 |
工具栏入门 (Getting Started With Toolbar)
Toolbar component has two placeholders (left & right) that are defined with facets. Following the most simple example help you understanding Toolbar component and its Left/Right sections.
工具栏组件有两个用facet定义的占位符（左和右）。 通过最简单的示例，可以帮助您了解工具栏组件及其左/右部分。
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:ui="https://java.sun.com/jsf/facelets"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:f="https://java.sun.com/jsf/core"
xmlns:p="https://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
<p:toolbar>
<f:facet name="left">
Left Side
</f:facet>
<f:facet name="right">
Right Side
</f:facet>
</p:toolbar>
</h:form>
</html>- Facets component used for defining Toolbar’s Left/Right Side. 构面组件，用于定义工具栏的左侧/右侧。
- It’s applicable for your, setting whatever components you want inside these defined sections. 它适用于您，在这些定义的部分中设置所需的任何组件。
Now, let’s see how can we use the same Toolbar component for enclosing different types of JSF/Primefaces components.
现在，让我们看看如何使用相同的工具栏组件来封装不同类型的JSF / Primefaces组件。
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:ui="https://java.sun.com/jsf/facelets"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:f="https://java.sun.com/jsf/core"
xmlns:p="https://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
<p:toolbar>
<f:facet name="left">
<p:commandButton type="push" value="New" image="ui-icon-document" />
<p:commandButton type="push" value="Open" image="ui-icon-folder-open" />
<h:outputText value="<h2>Just HTML Separator</h2>" escape="false"></h:outputText>
</f:facet>
<f:facet name="right">
<p:menuButton value="Navigate">
<p:menuitem value="Home" url="#" />
<p:menuitem value="Logout" url="#" />
</p:menuButton>
</f:facet>
</p:toolbar>
</h:form>
</html>- JSF/Primefaces components can be used in conjunction with Toolbar’s sections. JSF / Primefaces组件可与工具栏的部分结合使用。
- It’s also applicable for using rendered HTML using <h:outputText/>. 它也适用于通过<h：outputText />使用呈现HTML。
Primefaces ToolbarGroup基本信息 (Primefaces ToolbarGroup Basic Info)
ToolbarGroup is a helper component for Toolbar component to define Placeholders.
ToolbarGroup是用于Toolbar组件定义占位符的帮助器组件。
| Tag | ToolbarGroup |
|---|---|
| Tag | org.primefaces.component.toolbar.ToolbarGroup |
| Component Type | org.primefaces.component.ToolbarGroup |
| Component Family | org.primefaces.component |
| 标签 | 工具栏组 |
|---|---|
| 标签 | org.primefaces.component.toolbar.ToolbarGroup |
| 组件类型 | org.primefaces.component.ToolbarGroup |
| 组件族 | org.primefaces.component |
Primefaces ToolbarGroup属性 (Primefaces ToolbarGroup Attributes)
| Name | Default | Type | Description |
|---|---|---|---|
| id | null | String | Unique identifier of the component |
| rendered | true | Boolean | Boolean value to specify the rendering of the component, when set to false component will not be rendered. |
| align | null | String | Defines the alignment within toolbar, valid valuesare left and right. |
| style | null | String | Inline style of the container element. |
| binding | null | Object | An el expression that maps to a server side UIComponent instance in a backing bean |
| styleClass | null | String | Style class of the container element. |
| 名称 | 默认 | 类型 | 描述 |
|---|---|---|---|
| ID | 空值 | 串 | 组件的唯一标识符 |
| 呈现 | 真正 | 布尔型 | 布尔值，用于指定组件的呈现，当设置为false时将不呈现组件。 |
| 对齐 | 空值 | 串 | 定义工具栏中的对齐方式，有效值位于左侧和右侧。 |
| 样式 | 空值 | 串 | 容器元素的内联样式。 |
| 捆绑 | 空值 | 目的 | El表达式，它映射到支持Bean中的服务器端UIComponent实例 |
| styleClass | 空值 | 串 | 容器元素的样式类。 |
ToolbarGroup入门 (Getting Started With ToolbarGroup)
ToolbarGroup component is working in conjunction with Toolbar component, rather using of facets component for determining Right/Left place. Primefaces 5 has supported it as it’s might be not supported in the next coming version. Following simple example shows you how can we use ToolbarGroup for positioning the Toolbar’s content.
ToolbarGroup组件与Toolbar组件结合使用，而不是使用构面组件来确定“右/左”位置。 Primefaces 5支持它，因为在下一版本中可能不支持。 下面的简单示例向您展示了如何使用ToolbarGroup定位工具栏的内容。
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:ui="https://java.sun.com/jsf/facelets"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:f="https://java.sun.com/jsf/core"
xmlns:p="https://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
<p:toolbar>
<p:toolbarGroup align="right">
<p:commandButton type="push" value="New" image="ui-icon-document" />
<p:commandButton type="push" value="Open" image="ui-icon-folder-open" />
</p:toolbarGroup>
<p:toolbarGroup align="left">
<p:menuButton value="Navigate">
<p:menuitem value="Home" url="#" />
<p:menuitem value="Logout" url="#" />
</p:menuButton>
</p:toolbarGroup>
</p:toolbar>
</h:form>
</html>Primefaces工具提示基本信息 (Primefaces Tooltip Basic Info)
Similar to html, Tooltip component has the same functionality with more advantage by providing custom effects, events, html content and advance theme support.
与html相似，Tooltip组件具有相同的功能，并且通过提供自定义效果，事件，html内容和高级主题支持而具有更多优势。
| Name | Default | Type | Description |
|---|---|---|---|
| id | null | String | Unique identifier of the component |
| rendered | true | Boolean | Boolean value to specify the rendering of the component, when set to false component will not be rendered. |
| binding | null | Object | An el expression that maps to a server sideUIComponent instance in a backing bean |
| value | null | Object | Value of the component than can be either an ELexpression of a literal text |
| converter | null | Converter/String | An el expression or a literal text that defines aconverter for the component. When it’s an ELexpression, it’s resolved to a converter instance. Incase it’s a static text, it must refer to a converter id |
| widgetVar | null | String | Name of the client side widget. |
| showEvent | mouseover | String | Event displaying the tooltip. |
| showEffect | fade | String | Effect to be used for displaying. |
| hideEvent | mouseout | String | Event hiding the tooltip. |
| hideEffect | fade | String | Effect to be used for hiding. |
| showDelay | 150 | Integer | Delay time to show tooltip in milliseconds. |
| 名称 | 默认 | 类型 | 描述 |
|---|---|---|---|
| ID | 空值 | 串 | 组件的唯一标识符 |
| 呈现 | 真正 | 布尔型 | 布尔值，用于指定组件的呈现，当设置为false时将不呈现组件。 |
| 捆绑 | 空值 | 目的 | El表达式，它映射到支持bean中的服务器sideUIComponent实例 |
| 值 | 空值 | 目的 | 组件的值可以是文字文本的ELexpression |
| 转换器 | 空值 | 转换器/字符串 | 定义组件转换器的el表达式或文字文本。 当它是ELexpression时，它将解析为转换器实例。 如果是静态文本，则必须引用转换器ID |
| widgetVar | 空值 | 串 | 客户端小部件的名称。 |
| showEvent | 鼠标移到 | 串 | 显示工具提示的事件。 |
| showEffect | 褪色 | 串 | 用于显示的效果。 |
| hideEvent | 鼠标移出 | 串 | 事件隐藏工具提示。 |
| hideEffect | 褪色 | 串 | 用于隐藏的效果。 |
| showDelay | 150 | 整数 | 延迟时间以毫秒为单位显示工具提示。 |
Primefaces工具提示属性 (Primefaces Tooltip Attributes)
| Tag | Tooltip |
|---|---|
| Tag | org.primefaces.component.tooltip.Tooltip |
| Component Type | org.primefaces.component.Tooltip |
| Component Family | org.primefaces.component |
| Renderer Type | org.primefaces.component.TooltipRenderer |
| Renderer Class | org.primefaces.component.tooltip.TooltipRenderer |
| 标签 | 工具提示 |
|---|---|
| 标签 | org.primefaces.component.tooltip.Tooltip |
| 组件类型 | org.primefaces.component.Tooltip |
| 组件族 | org.primefaces.component |
| 渲染器类型 | org.primefaces.component.TooltipRenderer |
| 渲染器类 | org.primefaces.component.tooltip.TooltipRenderer |
工具提示入门 (Getting Started With Tooltip)
Tooltip component is working in conjunction with any of Primefaces components. For providing a Tooltip, two options can be used:
工具提示组件可与任何Primefaces组件一起使用。 为了提供工具提示，可以使用两个选项：
- Provide a value and a for Tooltip’s attributes for determining the value of the Tooltip and the component that is the Tooltip is for, respectively. 为工具提示的属性提供一个值和一个属性，分别确定工具提示的值和该工具提示所针对的组件。
- Just provide a for Tooltip’s attribute, in such cases, be careful that the component the Tooltip is for has specified the title attribute. 只需提供一个用于 Tooltip的属性，在这种情况下，请注意Tooltip所针对的组件已指定title属性。
Following sample, shows you the most simple example that help you define a Toolbar using mentioned both of ways.
下面的示例向您展示了最简单的示例，可以帮助您使用上述两种方法来定义工具栏。
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:ui="https://java.sun.com/jsf/facelets"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:f="https://java.sun.com/jsf/core"
xmlns:p="https://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:50%">
Enter Username : <p:inputText id="username"></p:inputText>
<p:separator/>
Enter Password : <p:inputText id="password" title="Enter Password"></p:inputText>
<p:tooltip for="username" value="Enter Username"></p:tooltip>
<p:tooltip for="password"></p:tooltip>
</h:form>
</html>全局工具提示 (Global Tooltip)
Primefaces has also provided a global Tooltip component. Global Tooltip binds to elements with title attributes. Global Tooltip is more efficient than using of individual instances. It’s suggested to be used instead of using individual Tooltip components unless a custom case would be implemented. Global Tooltip also has supported Ajax updates, in case your Targeted components are updating asynchronously, Global Tooltip component can still bind.
Primefaces还提供了一个全局的工具提示组件。 全局工具提示绑定到具有标题属性的元素。 全局工具提示比使用单个实例更有效。 除非要实现自定义案例，否则建议不要使用单个Tooltip组件。 Global Tooltip还支持Ajax更新，以防您的Targeted组件异步更新，Global Tooltip组件仍然可以绑定。
Following a simple example that depicts you how can you use the Global Tooltip for achieving both of Global Tooltip and Asynchronously Global Tooltip.
下面的简单示例向您描述如何使用全局工具提示来实现全局工具提示和异步全局工具提示。
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:ui="https://java.sun.com/jsf/facelets"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:f="https://java.sun.com/jsf/core"
xmlns:p="https://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:50%">
<p:tooltip id="tooltip"/>
Enter Username : <p:inputText id="username" title="Enter Username"></p:inputText>
<p:separator/>
Enter Password : <p:inputText id="password" title="Enter Password"></p:inputText>
<p:separator/>
<p:commandButton value="Change Tooltip Asynchrounsly"
action="#{tooltipManagedBean.changeTooltipValues}"
title="Asynchrouns Action"
update="username password tooltip"></p:commandButton>
</h:form>
</html>工具提示焦点，事件和效果 (Tooltip Focus, Events & Effects)
A Tooltip is shown on mouseover event and hidden when mouse is out by default. If you need to change this behavior you should use showEvent and hideEvent feature. Also, you can control the effect to be used for controlling the form that the Tooltip will use while showing.
默认情况下，鼠标悬停事件上会显示工具提示，鼠标悬停时会隐藏工具提示。 如果需要更改此行为，则应使用showEvent和hideEvent功能。 另外，您可以控制用于控制工具提示在显示时使用的形式的效果。
Following example shows you how can you use these events and effects for controlling the Tooltip behavior.
下面的示例向您展示如何使用这些事件和效果来控制工具提示行为。
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:ui="https://java.sun.com/jsf/facelets"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:f="https://java.sun.com/jsf/core"
xmlns:p="https://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:50%">
Enter Username : <p:inputText id="username"></p:inputText>
<p:tooltip for="username" value="Enter Username" showEvent="focus" hideEvent="blur" showEffect="bounce" hideEffect="explode" trackMouse="true"></p:tooltip>
</h:form>
</html>工具提示HTML内容 (Tooltip HTML Content)
It’s also applicable for you to display custom content as a tooltip rather using of just text value. Just inject whatever content you want inside Tooltip component. Following example shows you a Tooltip component that contains a text value in addition to image content.
它也适用于将自定义内容显示为工具提示，而不仅仅是使用文本值。 只需将任何所需的内容注入到Tooltip组件中即可。 下面的示例向您显示一个Tooltip组件，该组件除了图像内容外还包含文本值。
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:ui="https://java.sun.com/jsf/facelets"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:f="https://java.sun.com/jsf/core"
xmlns:p="https://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<p:tooltip/>
<h:form style="width:50%">
Enter Username : <p:inputText id="username" title="Enter Username"></p:inputText>
<p:tooltip for="username" showEvent="focus"
hideEvent="blur" showEffect="bounce"
hideEffect="explode">
<h:graphicImage value="/resources/images/journaldev.jpg"></h:graphicImage>
</p:tooltip>
</h:form>
</html>摘要 (Summary)
This tutorial intended to cover Toolbar, ToolbarGroup and Tooltip that’s used intensively inside any Primefaces application. Contribute us by commenting below and download the given source code.
本教程旨在介绍在任何Primefaces应用程序中大量使用的工具栏，工具栏组和工具提示。 通过在下面发表评论来贡献我们，并下载给定的源代码。
翻译自: https://www.journaldev.com/3540/primefaces-toolbar-toolbargroup-tooltip
primefaces
127
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
