Primefaces工具列，工具列组和工具提示
时间：2020-02-23 14:41:40 来源:igfitidea点击:
Primefaces工具列是命令和其他内容的水平分组。
Primefaces工具列基本信息
| 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 |
Primefaces工具列属性
| 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. |
工具列入门
工具列组件有两个用构面定义的占位符(左和右)。
通过最简单的示例，可以帮助您了解工具列组件及其左/右部分。
<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>
构面组件，用于定义工具列的左侧/右侧。
适用于您，在这些定义的部分中设置所需的任何组件。
现在，让我们看看如何使用相同的工具列组件来封装不同类型的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组件可与工具列的部分结合使用。
它也适用于通过<h：outputText 使用呈现HTML。
Primefaces ToolbarGroup基本信息
ToolbarGroup是用于Toolbar组件定义占位符的帮助器组件。
| Tag | ToolbarGroup |
|---|---|
| Tag | org.primefaces.component.toolbar.ToolbarGroup |
| Component Type | org.primefaces.component.ToolbarGroup |
| Component Family | org.primefaces.component |
Primefaces ToolbarGroup属性
| 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. |
ToolbarGroup入门
ToolbarGroup组件与Toolbar组件协同工作，而不是使用facets组件确定右/左位置。
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工具提示基本信息
与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. |
Primefaces工具提示属性
| 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 |
工具提示入门
工具提示组件可与任何Primefaces组件一起使用。
为了提供工具提示，可以使用两个选项：
提供"值"和"工具提示"属性，分别确定工具提示和工具提示所针对的组件的值。
只需提供一个用于Tooltip的属性，在这种情况下，请注意Tooltip所针对的组件已指定了title属性。
下面的示例向您展示了最简单的示例，可以帮助您使用上述两种方法来定义工具列。
<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>
全局工具提示
Primefaces还提供了一个全局的工具提示组件。
全局工具提示绑定到具有标题属性的元素。
全局工具提示比使用单个实例更有效。
建议不要使用单独的工具提示组件，除非会实施自定义案例。
Global Tooltip还支持Ajax更新，以防您的Targeted组件异步更新，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>
工具提示焦点，事件和效果
默认情况下，鼠标悬停事件上会显示工具提示，鼠标悬停时隐藏。
如果您需要更改此行为，则应使用showEvent和hideEvent功能。
另外，您可以控制用于控制工具提示在显示时将使用的形式的效果。
下面的示例显示如何使用这些事件和效果来控制工具提示行为。
<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组件中即可。
下面的示例向您显示一个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/theitroad.jpg"></h:graphicImage> </p:tooltip> </h:form> </html>
