primefaces

Welcome to Primefaces AccordionPanel example tutorial. Primefaces is the leading JSF implementation.

欢迎使用Primefaces AccordionPanel示例教程。 Primefaces是领先的JSF实施。

The excellent reputation Primefaces has gained is because of the dozens of UI components it provides . AccordionPanel is one of those components and it’s a container component that displays content in a stacked format.

Primefaces之所以获得卓越的声誉，是因为它提供了许多UI组件。 AccordionPanel是这些组件之一，并且是一个以堆叠格式显示内容的容器组件。

This tutorial is intended to provide you the all required information and practices for dealing with the AccordionPanel component, even using of newly primefaces’s paradigm, which consists of employing a special JavaScript library object for controlling the component itself.

本教程旨在为您提供处理AccordionPanel组件所需的所有信息和实践，甚至使用新的primefaces的范例，该范例包括使用特殊的 JavaScript库对象来控制组件本身。

Primefaces手风琴面板 (Primefaces AccordionPanel)

It’s important for any developer has been coming into leveraging any of the primefaces component, know the basic information for the component being used. The basic information gives the developer information like the tag that would be used in the Primefaces page, the component type, class, family and all of renderer information required in case a customizing is targeted.

对于任何开发人员来说，重要的是要充分利用任何primefaces组件，了解所使用组件的基本信息。 基本信息为开发人员提供了诸如Primefaces页面中将使用的标签之类的信息，组件类型，类，系列以及在进行定制时所需的所有渲染器信息。

Per Primefaces itself, the basic information of AccordionPanel are:

根据Primefaces本身，AccordionPanel的基本信息是：

Primefaces AccordionPanel属性 (Primefaces AccordionPanel Attributes)

Unlike the basic information that you’ve got in the Basic info section, the attributes help the developer controlling the component by means of visibility, populating data, styling, triggering certain behaviors and others.

与您在“基本信息”部分中获得的基本信息不同，这些属性通过可见性，填充数据，样式，触发某些行为等来帮助开发人员控制组件。

Per Primefaces, the all attributes are supported by AccordionPanel are:

按照Primefaces，AccordionPanel支持的所有属性是：

After that brief description about the AccordionPanel, it’s the time to get started using it and knowing how it works and how could we leverage its attributes to serve the business case that we have. But before getting into, it’s important to know that the tutorial being implemented has been evolved using the maven archetype. In case you are familiar with, just skip the next section toward implementing the business scenario directly.

在对AccordionPanel进行了简短描述之后，是时候开始使用它了，并且知道它如何工作以及我们如何利用其属性来为我们拥有的业务案例服务。 但是在开始之前，重要的是要知道正在实施的教程已经使用Maven原型进行了开发。 如果您熟悉，只需跳过下一部分，直接实现业务方案即可。

使用Eclipse IDE创建项目 (Create Project Using Eclipse IDE)

You’ve already created your project using Eclipse IDE Dynamic Web Project, but from now you will learn basically a new way of creating a Maven Project through Eclipse IDE without the need to convert the Dynamic Web Project into Maven. It’s an easy-peasy way, so just follow:

您已经使用Eclipse IDE 动态Web项目创建了项目 ，但是从现在开始，您将基本学习通过Eclipse IDE创建Maven项目的新方法，而无需将Dynamic Web Project转换为Maven。 这是一种简单的方法，因此请遵循：

1. Make sure that you have installed Maven into your machine.
   确保已将Maven安装到计算机中。
2. From your Project Explorer RightClick  – Select New – Project.
   在项目资源管理器中，右键单击–选择新建–项目。
3. Expand Maven node and select Maven Project and Click double Next.
   展开Maven节点并选择Maven Project，然后单击下一步。
4. From all of those templates that Eclipse provided for you, makes sure that you are selected the line beneath groupId: org.apache.maven.archetypes and the artifactId: maven-archetype-webapp and click next.
   从Eclipse为您提供的所有模板中，确保已选择groupId： org.apache.maven.archetypes和artifactId： maven-archetype-webapp下面的行 ，然后单击下一步。
5. Enter your preferred groupId, artifactId, version and package and click finish.
   输入您的首选groupId，artifactId，版本和软件包，然后单击完成。

Once you’ve finished the dialog, you are already got an Maven based project ready for your use. Before going forward into the next step, just makes sure that you have a java folder under your Java Resources, for doing that just do the following:

完成对话框后，您已经准备好使用基于Maven的项目。 在继续下一步之前，只需确保在Java Resources下有一个Java文件夹，为此，只需执行以下操作：

1. Right Click Java Resources that located under the created project.
   右键单击位于创建的项目下的Java资源 。
2. Select New – Source Folder.
   选择“ 新建–源文件夹” 。
3. Browse your project.
   浏览您的项目。
4. Enter src/main/java inside Folder name.
   在Folder name中输入src / main / java 。
5. Click finish.
   单击完成。

Your final structure looks like below

您的最终结构如下所示

设置所需的文件和依赖项 (Setting Up Required Files and Dependencies)

As Maven promised, the all dependencies required for your project for making it runnable must be located into your maven configuration file and it’s for sure the pom.xml.

正如Maven所承诺的那样，必须将您的项目所需的所有依赖项都放置在您的maven配置文件中，以确保其可运行，该文件必须是pom.xml。

For being the targeted application has used the primefaces library for which the jsf, jsp and servlet libraries are required, the form of the pom.xml should be:

为了成为目标应用程序，使用了需要jsf，jsp和servlet库的primefaces库，pom.xml的形式应为：

<project xmlns="https://maven.apache.org/POM/4.0.0" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="https://maven.apache.org/POM/4.0.0 https://maven.apache.org/maven-v4_0_0.xsd"><modelVersion>4.0.0</modelVersion><groupId>com.journaldev</groupId><artifactId>Primefaces-AccordionPanel-Sample</artifactId><packaging>war</packaging><version>0.0.1-SNAPSHOT</version><name>Primefaces-AccordionPanel-Sample Maven Webapp</name><url>https://maven.apache.org</url><repositories><repository><id>prime-repo</id><name>PrimeFaces Maven Repository</name><url>https://repository.primefaces.org</url><layout>default</layout></repository></repositories><dependencies><!-- Servlet --><dependency><groupId>javax.servlet</groupId><artifactId>servlet-api</artifactId><version>2.5</version><scope>provided</scope></dependency><!-- Faces Implementation --><dependency><groupId>com.sun.faces</groupId><artifactId>jsf-impl</artifactId><version>2.2.4</version></dependency><!-- Faces Library --><dependency><groupId>com.sun.faces</groupId><artifactId>jsf-api</artifactId><version>2.2.4</version></dependency><!-- Primefaces Version 5 --><dependency><groupId>org.primefaces</groupId><artifactId>primefaces</artifactId><version>5.0</version></dependency><!-- JSP Library --><dependency><groupId>javax.servlet.jsp</groupId><artifactId>javax.servlet.jsp-api</artifactId><version>2.3.1</version></dependency><!-- JSTL Library --><dependency><groupId>javax.servlet</groupId><artifactId>jstl</artifactId><version>1.1.2</version></dependency></dependencies>
</project>

As for being the application uses the jsf framework, a set of needed lines should be added for making that framework running. Starting from the jsf listener – that should help the web container configure the jsf framework’s components like jsf custom components, validators and convertors that defined in the non required faces-config.xml or by using the annotations – ending with those required files like jsf framework properties, faces servlet and its mapping.

至于应用程序使用jsf框架，则应添加一组所需的行以使该框架运行。 从jsf侦听器开始-应该有助于Web容器配置jsf框架的组件，例如在非必需的faces-config.xml中定义的jsf自定义组件，验证器和转换器，或者通过使用批注-以这些必需的文件（例如jsf框架）结尾属性，面向servlet及其映射。

The whole work that you are located in the web.xml for establishing a full functional jsf isn’t far from what you would see below:

您在web.xml中用于建立完整功能jsf的全部工作与下面的内容并不遥远：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"xmlns="https://java.sun.com/xml/ns/javaee" xmlns:web="https://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"xsi:schemaLocation="https://java.sun.com/xml/ns/javaeehttps://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"id="WebApp_ID" version="2.5" metadata-complete="true"><servlet><servlet-name>Faces Servlet</servlet-name><servlet-class>javax.faces.webapp.FacesServlet</servlet-class><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>Faces Servlet</servlet-name><url-pattern>/faces/*</url-pattern></servlet-mapping><servlet-mapping><servlet-name>Faces Servlet</servlet-name><url-pattern>*.xhtml</url-pattern></servlet-mapping><context-param><description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description><param-name>javax.faces.STATE_SAVING_METHOD</param-name><param-value>client</param-value></context-param><listener><listener-class>com.sun.faces.config.ConfigureListener</listener-class></listener>
</web-app>

You might want to ask, where is the faces-config.xml ? In fact and indeed, since the jsf 2, the faces-config.xml isn’t longer used, given hundred of annotations had covered the needed for defining the jsf component you may need. But for sure if you want to use it, it’s applicable and you have just add the following line into your web.xml file.

您可能要问， faces-config.xml在哪里？ 实际上，事实上，由于jsf 2，不再使用faces-config.xml，因为数百个注释已涵盖定义您可能需要的jsf组件所需的内容。 但是可以肯定的是，如果要使用它，它是适用的，只需将以下行添加到web.xml文件中。

<context-param><param-name>javax.faces.CONFIG_FILES</param-name><param-value>/WEB-INF/faces-config.xml</param-value></context-param>

For now, you have established the jsf framework and the all libraries required for leveraging the Primefaces into your application. So, let’s start developing an application uses the AccordionPanel component.

现在，您已经建立了jsf框架和将Primefaces集成到应用程序中所需的所有库。 因此，让我们开始开发使用AccordionPanel组件的应用程序。

For now, almost you are finished the all required steps for using the Primefaces 5 – AccordionPanel component, but one step just remaining.

到目前为止，几乎已经完成了使用Primefaces 5 – AccordionPanel组件所需的所有步骤，但仅剩一个步骤。

As we knew, jsf 2 has obsoleted using of JSP (Java Server Pages) as view library, it’s now Facelets (XHTML Pages) that should comply with the XML well-formed principle.

众所周知，jsf 2已不再使用JSP（Java服务器页面）作为视图库，现在应该符合XML格式正确的原则是Facelets（XHTML页面）。

Facelets library is already embedded in the jsf 2 dependencies and so, no need for adding a new libraries. For creating a new view using Facelets you shall follow the below steps:

Facelets库已经嵌入jsf 2依赖项中，因此，无需添加新库。 要使用Facelets创建新视图，您应遵循以下步骤：

1. Right Click on the webapp folder.
   右键单击webapp文件夹。
2. Select New – HTML File.
   选择新建– HTML文件。
3. Name your file as index and makes sure that the extension is xhtml & Click Next.
   将文件命名为索引 ，并确保扩展名为xhtml并单击“下一步”。
4. Just finish the wizard.
   只需完成向导即可。

By end of these steps, you will get an index.xhtml facelets page which will be updated accordingly for using the AccordionPanel. Just let’s your page like as below.

在完成这些步骤之后，您将获得一个index.xhtml facelets页面，该页面将相应更新以使用AccordionPanel。 只是让您的页面如下所示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><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"></html>

Primefaces AccordionPanel入门 (Getting Started With Primefaces AccordionPanel)

AccordionPanel consists of one or more tabs and each tab can group any content. Titles can also be defined with “title” facet. As a very simple using of AccordionPanel, you can consider the following lines as the minimal required code fragments for proper use of it.

AccordionPanel由一个或多个选项卡组成，每个选项卡都可以对任何内容进行分组。 标题也可以用“ title”构面定义。 作为对AccordionPanel的非常简单的使用，您可以将以下几行视为正确使用AccordionPanel所需的最少代码片段。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><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:body><div style="width: 500px;"><p:accordionPanel activeIndex="0"><p:tab title="Welcome Tab"><p:outputLabel value="Welcome JournalDev !"></p:outputLabel></p:tab><p:tab title="Component Tab"><p:outputLabel value="AccordionPanel Component !"></p:outputLabel></p:tab></p:accordionPanel></div></h:body>
</html>

Let’s analyze the above code for good understanding of it.

让我们分析上面的代码以更好地理解它。

• Primefaces JavaScript library is mandatory line, cause the all components within Primefaces have used that library for rendering styles and executing client side behaviors.
  Primefaces JavaScript库是必填项，因为Primefaces中的所有组件都已使用该库来呈现样式和执行客户端行为。
• JSF 2 library, provides you the <h:head/> & <h:body/> for representing the header & body normal tags that are defined in the HTML.
  JSF 2库为您提供了<h：head />和<h：body />，用于表示HTML中定义的标头和正文普通标签。
• AccordionPanel component has defined in the page for containing two Tabs indexed starting from zero. The activeIndex attribute used for defining which Tabs from those defined should be displayed actively when the page get displayed. See AccordionPanel attributes section above.
  页面上定义的AccordionPanel组件包含两个从零开始索引的Tab。 显示页面时，用于定义应从定义的选项卡中选择的选项卡的activeIndex属性应主动显示。 请参阅上面的AccordionPanel属性部分。

As you’ve seen, AccordionPanel displays two different tabs in their respective order, they’re containing whatever content you wish. For being the activeIndex is zero by default, the first tab will be displayed once the page get shown. In case you’ve clicked on the Component Tab, the second tab will be displayed, while the Welcome Tab get closed.

如您所见，AccordionPanel按各自的顺序显示两个不同的选项卡，它们包含您想要的任何内容。 由于activeIndex默认为零，因此在显示页面后将显示第一个选项卡。 如果您单击了“组件”选项卡，将显示第二个选项卡，而“欢迎”选项卡将关闭。

If you’ve set activeIndex value equal to 1, Component Tab get displayed firstly.

如果将activeIndex值设置为1，则首先显示Component Tab。

Primefaces AccordionPanel –动态内容加载 (Primefaces AccordionPanel – Dynamic Content Loading)

AccordionPanel supports lazy loading of tab content, when dynamic attribute is set to true, only active tab contents will be rendered to the client side and clicking an inactive tab header will do an ajax request to load the tab contents.

AccordionPanel支持延迟加载选项卡内容，当dynamic属性设置为true时，仅活动的选项卡内容将被呈现到客户端，单击不活动的选项卡标题将进行ajax请求以加载选项卡内容。

This feature is useful to reduce bandwidth and speed up page loading time. By default activating a previously loaded dynamic tab does not initiate a request to load the contents again as tab is cached. To control this behavior use cache option.

此功能可用于减少带宽并加快页面加载时间。 默认情况下，激活先前加载的动态选项卡不会启动请求，因为缓存了选项卡后会再次加载内容。 若要控制此行为，请使用缓存选项。

For clarifying the dynamic concept, we’ve developed an AccordionPanelManagedBean that contains two String properties with their respective getter & setter.

为了阐明动态概念，我们开发了AccordionPanelManagedBean，其中包含两个String属性以及它们各自的getter和setter。

For each tab within the accordionPanel, an outputPanel component has been defined and its value is associated with a one of those defined properties. In case the tab has been loaded, a print message should be printed. By default the loading of certain tab within AccordionPanel means that the contained components being rendered. The rendition process does affect calling of getter methods. Let’s see the impact of using dynamic and cache attributes.

对于手风琴面板中的每个选项卡，已经定义了outputPanel组件，并且其值与这些已定义属性之一相关联。 如果已加载选项卡，则应打印一条打印消息。 默认情况下，在AccordionPanel中加载某些选项卡意味着正在渲染包含的组件。 呈现过程确实会影响getter方法的调用。 让我们看看使用动态和缓存属性的影响。

Firstly, in case they’re never used, neither dynamic nor cache.

首先，万一它们从未被使用过，无论是动态还是缓存。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><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:body><div style="width: 500px;"><p:accordionPanel activeIndex="0"><p:tab title="Welcome Tab"><p:outputLabel value="#{accordionPanelManagedBean.journalMessage}"></p:outputLabel></p:tab><p:tab title="Component Tab"><p:outputLabel value="#{accordionPanelManagedBean.componentMessage}"></p:outputLabel></p:tab></p:accordionPanel></div></h:body>
</html>

package com.journaldev.primefaces.beans;import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;@ManagedBean
@SessionScoped
public class AccordionPanelManagedBean {private String journalMessage = "Welcome JournalDev !";private String componentMessage = "AccordionPanel Component !";public String getJournalMessage() {System.out.println("Journal Message Loaded");return journalMessage;}public void setJournalMessage(String journalMessage) {this.journalMessage = journalMessage;}public String getComponentMessage() {System.out.println("Component Message Loaded");return componentMessage;}public void setComponentMessage(String componentMessage) {this.componentMessage = componentMessage;}
}

Where the resulted execution should be like this

结果执行应该是这样的

So, the two tabs have been loaded even the active tab is set zero, that’s because the dynamic value was set false. At the other hand the cache attribute is set true, so any additional clicking on the tabs will not cause a new loading to be initiated. Even if you’ve changed the value cache to be true, without using of dynamic no changes might be noticed.

因此，即使活动选项卡设置为零，这两个选项卡也已加载，这是因为动态值设置为false。 另一方面，将cache属性设置为true，因此在选项卡上进行的任何其他单击都不会导致启动新的加载。 即使您将值缓存更改为true，但未使用dynamic，也不会注意到更改。

By adding the dynamic attribute into accordionPanel component with true value and keeping the cache with its default value. The result would be

通过将动态属性添加为具有真实值的AccordionPanel组件，并将缓存保留为其默认值。 结果将是

Once the view get displayed. Now, when clicking the component tab the result should be

一旦显示视图。 现在，单击“组件”选项卡时，结果应为

As you’ve noticed, component tab isn’t loaded until you cause that loading by clicking on. Any next coming clicking on that tabs will not cause the loading anymore, thus, no new messages may seen. If you would to see the messages at every time you’ve clicked, you shall override the default value of cache to be false with retaining the existence of dynamic.

您已经注意到，只有在通过单击导致加载之前，才加载“组件”选项卡。 下次单击该选项卡将不再导致加载，因此，可能看不到任何新消息。 如果您希望在每次单击时都看到消息，则应将cache的默认值覆盖为false，同时保留dynamic的存在。

The result of such that change should be

这种改变的结果应该是

That’s expected, set cache value to be false, meaning that at every click, the content will be loaded instantly.

可以预期的是，将缓存值设置为false，这意味着每次单击都会立即加载内容。

Primefaces AccordionPanel – Ajax行为事件 (Primefaces AccordionPanel – Ajax Behavior Events)

One of the most benefits that the jsf come with, is the ajax. Ajax has built into jsf lifecycle inherently, so for ajaxifying any component you would, you’ve just added the original f:ajax behavior into its tag. Primefaces 5 isn’t exceptional case, as it’s provided its own ajax behaviors using its own tag. For ajaxifying any of Primefaces 5 components that you would, you just need to provide p:ajax tag inside the component tag.

jsf附带的最大好处之一就是ajax。 Ajax固有地已内置到jsf生命周期中，因此，为了使您可以使用的任何组件均能进行ajax处理 ，您只需将原始的f：ajax行为添加到其标签中。 Primefaces 5并非例外，因为它使用自己的标签提供了自己的ajax行为。 为了使您可以Primefaces 5的任何组件邻接，您只需要在component标记内提供p：ajax标记。

AccordionPanel is one of the primefaces component that leverage the concept of ajax, it provides you tabChange as a target behavior event that might be ajaxified. That event is executed when a tab is toggled.

AccordionPanel是利用ajax概念的质素组件之一，它为您提供tabChange作为可能被废止的目标行为事件。 切换选项卡时将执行该事件。

For all ajax behaviors in Primefaces, a listener should be defined in the managed bean for listening the event behavior fired.

对于Primefaces中的所有ajax行为，应在托管bean中定义一个侦听器，以侦听触发的事件行为。

You can provide an tabChange ajax event by using the p:ajax while the listening could be done through defining a public void method that takes a TabChangeEvent as an argument. Just look at the followed example.

您可以使用p：ajax提供一个tabChange ajax事件，而监听可以通过定义一个以TabChangeEvent作为参数的公共void方法来完成。 只要看下面的例子。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><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:body><h:form><div style="width: 500px;"><p:accordionPanel activeIndex="0"><p:ajax event="tabChange" listener="#{accordionPanelManagedBean.onChange}"></p:ajax><p:tab title="Welcome Tab"><p:outputLabel value="#{accordionPanelManagedBean.journalMessage}"></p:outputLabel></p:tab><p:tab title="Component Tab"><p:outputLabel value="#{accordionPanelManagedBean.componentMessage}"></p:outputLabel></p:tab></p:accordionPanel></div></h:form></h:body>
</html>

package com.journaldev.primefaces.beans;import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;import org.primefaces.event.TabChangeEvent;@ManagedBean
@SessionScoped
public class AccordionPanelManagedBean {private String journalMessage = "Welcome JournalDev !";private String componentMessage = "AccordionPanel Component !";public String getJournalMessage() {System.out.println("Journal Message Loaded");return journalMessage;}public void setJournalMessage(String journalMessage) {this.journalMessage = journalMessage;}public String getComponentMessage() {System.out.println("Component Message Loaded");return componentMessage;}public void setComponentMessage(String componentMessage) {this.componentMessage = componentMessage;}public void onChange(TabChangeEvent event) {System.out.println("Tab Changed :: You've Requested Seeing :: "+ event.getTab().getTitle());}
}

Where the result of execution should be like below

执行结果应如下所示

Just one note should be noticed here, is that the ajax is a normal event that handled by the jsf lifecycle, thus it’s mandatory for you to put your component within an h:form and if you were missed it up, your ajax won’t fired and your listener isn’t invoked.

这里只需要注意一个注意事项，即ajax是由jsf生命周期处理的正常事件，因此将组件放在h：form中是强制性的，如果错过了它，则ajax不会会触发，并且不会调用您的侦听器。

Primefaces AccordionPanel –客户端API (Primefaces AccordionPanel – Client Side API)

Primefaces featured a new client side JavaScript API that’s used for make Primefaces’ components full functional plus the ability of controlling them through the PF object. PF is an implicit JavaScript object that provided by the Primefaces JavaScript API, it accepts a WidgetVar variable as a component argument as allowing the developer invoke component’s methods through it. Before Pimefaces 5, it was applicable for you to invoke the methods for a certain component through using the WidgetVar itself. Since Primefaces 4, using of WidgetVar variable directly has been deprecated and in the version 5 it’s removed totally. 

Primefaces具有一个新的客户端JavaScript API，该API用于使Primefaces的组件发挥全部功能，并具有通过PF对象进行控制的功能。 PF是Primefaces JavaScript API提供的隐式JavaScript对象，它接受WidgetVar变量作为组件参数，因为它允许开发人员通过它调用组件的方法。 在Pimefaces 5之前，适用于您通过使用WidgetVar本身来调用某个组件的方法。 从Primefaces 4开始，不建议直接使用WidgetVar变量，而在版本5中将其完全删除。  

Primefaces JavaScript library provides you two methods can be invoked against AccordionPanel component; select(index) and unselect(index). By passing the accordionPanel widgetVar into PF object, those provided methods are accessible there.

Primefaces JavaScript库为您提供了两种可以针对AccordionPanel组件调用的方法； 选择（索引）和取消选择（索引） 。 通过将手风琴面板widgetVar传递到PF对象，可以在此处访问那些提供的方法。

Look below, an example provided for AccordionPanel get controlled by using JavaScript library.

下面看，提供了一个使用JavaScript库控制AccordionPanel的示例。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><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><script>alert(PF);function doSelect(index){PF('accordionPanel').select(index);}function doUnSelect(index){PF('accordionPanel').unselect(index);}</script></h:head><h:body><h:form><div style="width: 500px;"><p:accordionPanel widgetVar="accordionPanel" activeIndex="0"><p:ajax event="tabChange" listener="#{accordionPanelManagedBean.onChange}"></p:ajax><p:tab title="Welcome Tab"><p:outputLabel value="#{accordionPanelManagedBean.journalMessage}"></p:outputLabel></p:tab><p:tab title="Component Tab"><p:outputLabel value="#{accordionPanelManagedBean.componentMessage}"></p:outputLabel></p:tab></p:accordionPanel><input id="index" type="text"/><input id="Select" value="Select" type="button" onclick="doSelect(document.getElementById('index').value);false"/><input id="UnSelect" value="UnSelect" type="button" onclick="doUnSelect(document.getElementById('index').value);false"/></div></h:form></h:body>
</html>

As being seen, we have two JavaScript actions invoke the select and unselect methods against AccordionPanel component.

可以看出，我们有两个JavaScript操作针对AccordionPanel组件调用select和unselect方法。

Just put inside the number index you want, and see the the component does respond for your client side actions.

只需将其放入所需的数字索引中，即可看到该组件确实响应了您的客户端操作。

After finishing the tutorial, it’s good for you to see the all structure that the project reached into.

学习完本教程后，对您而言，了解项目所涉及的所有结构是非常有益的。

Primefaces手风琴面板摘要 (Primefaces AccordionPanel Summary)

Primefaces 5 provides you dozens of ready made UI controls, one of them is the AccordionPanel. This tutorial has introduced the AccordionPanel component with all of its capabilities that might need when coming into using it. Download the sample project from below link and play around with it to learn more.

Primefaces 5为您提供了许多现成的UI控件，其中之一就是AccordionPanel。 本教程介绍了AccordionPanel组件及其在使用时可能需要的所有功能。 从下面的链接下载示例项目，并进行试用以了解更多信息。

翻译自: https://www.journaldev.com/3086/primefaces-accordionpanel-component-example

primefaces