Primefaces

引：

p:dataList 标签里用到了jQuery 遍历 - parentsUntil() 方法，（参考

https://www.html.cn/jqapi-1.9/parentsUntil/

）

探究学习下 Primefaces以及 p:dataList 的构造。

参考：

Primefaces框架开发杂谈！

PrimeFaces：Java EE终极UI框架

Primefaces简介及使用

一、介绍

Primefaces是JSF众多框架之一，PrimeFaces是最受欢迎的Java EE UI库。

有组件式、拿来即用，熟悉之后可进行快速开发等优点。支持AJAX

PF有何优劣势？

优势：

1、组件式、拿来即用，熟悉之后可进行快速开发；

2、PF技术支持的也非常不错，有自己官方的BLOG和论坛；

3、官方有提供多种界面皮肤，可以省去大部分界面开发的时间；
4、轻量级，仅仅有一个JAR包，无任何其他JAR包依赖；
5、框架中已经集成了jQuery，无需再引入jQuery脚本而可以直接使用jQuery脚本；

        <ui:remove><br /> primefaces 框架中已经集成了jQuery，无需再引入jQuery脚本而可以直接使用jQuery<h:outputScript name="js/jquery-1.11.3.js"></h:outputScript></ui:remove>

已经测试，确实不用另外添加jquery

6、与Spring可以非常好的结合；
7、有Mobile版本，可支持iPhone, Android, Palm, Blackberry, Windows Mobile等众多类型的手机。

劣势：

1、对于国内的大部分开发者来说没有中文文档，是其最大的劣势；
2、虽然官方有皮肤样式但都相对来说比较丑陋，还需自己进行定制；
3、完全不支持IE6，部分版本对IE7的兼容性也不是那么尽如人意，这对国内还有众多IE6的用户来说无遗是一个灾难。

二、下载安装

下载：官网下载: https://www.primefaces.org/downloads.html

安装：

1）将下载的jar 包放到JSF项目的lib路径下

或者添加maven依赖

<dependency><groupId>org.primefaces</groupId><artifactId>primefaces</artifactId><version>6.1</version></dependency>

添加maven的时候，修改了阿里的库：

<mirror><id>alimaven</id>  <name>aliyun maven</name><url>http://maven.aliyun.com/nexus/content/groups/public/</url><mirrorOf>central</mirrorOf></mirror>

2）在页面xhtml的<html>标签中添加primefaces的tag，如用p表示：

xmlns:p=http://primefaces.org/ui

<html xmlns="http://www.w3.org/1999/xhtml"xmlns:ui="http://java.sun.com/jsf/facelets"xmlns:f="http://java.sun.com/jsf/core"xmlns:h="http://java.sun.com/jsf/html"xmlns:p="http://primefaces.org/ui"xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">

3) 在html的body中可以直接使用primefaces p标签的已写好的UI组件了

<p:dataList value="#{memberController.memberList()}" var="_member" ><f:facet name="header">Member</f:facet>#{_member.id},#{_member.email}</p:dataList>

4）很简单的一个后台获取list

package org.jboss.tools.examples.controller;import java.util.List;
import javax.annotation.PostConstruct;
import javax.enterprise.inject.Model;
import javax.enterprise.inject.Produces;
import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import javax.inject.Inject;
import javax.inject.Named;
import javax.persistence.EntityManager;
import javax.persistence.TypedQuery;
import javax.persistence.criteria.CriteriaBuilder;
import javax.persistence.criteria.CriteriaQuery;
import javax.persistence.criteria.Root;
import org.jboss.tools.examples.model.Member;
import org.jboss.tools.examples.service.MemberRegistration;// The @Model stereotype is a convenience mechanism to make this a request-scoped bean that has an
// EL name
// Read more about the @Model stereotype in this FAQ:
// http://www.cdi-spec.org/faq/#accordion6
@Model
public class MemberController {@Injectprivate EntityManager em;//写个查询listpublic List<Member> memberList(){CriteriaBuilder criteriaBuilder  = em.getCriteriaBuilder();CriteriaQuery<Member> query = criteriaBuilder.createQuery(Member.class);    //createQuery的参数是Query返回值类型Root<Member> member = query.from(Member.class);                               //参数是对应于order表的实体类，query.from类似于sql中的from语句，该方法的执行等价于sql中的from Member。//默认查询全部query.select(member);   //query.select(root)则等价于select *TypedQuery<Member> tq = em.createQuery(query);List<Member> list = tq.getResultList();return list;}
}

@Model构造型是一种便利机制，可以使它成为一个具有的请求范围的bean
// EL名字
//阅读本常见问题解答中有关@Model构造型的更多信息：
// http://www.cdi-spec.org/faq/#accordion6

三、扩展

下表显示了Facelets支持的标签库。

四、页面测试

回到最初的引入的问题，

发现p:dataList 标签确实是ul和li 组合的。

修改页面代码：

<p:dataList value="#{memberController.memberList()}" var="_member" ><f:facet name="header">Member</f:facet><p:panel header="#{_member.id}"><h:outputText value="#{_member.email}" class="removeBtn"/></p:panel></p:dataList>$('.removeBtn').click(function () {console.log("000")var li = $(this).parentsUntil('li');li.fadeOut();});

点击p:panel 标签里的内容，使用 .parentsUntil() 查找当前元素的所有的前辈元素li标签，直到遇到选择器， DOM 节点或 jQuery 对象匹配的元素为止，但不包括这些元素。

使整个li标签消失。

Primefaces相关推荐

primefaces 查询点击按钮加载动画 ajax loader
只要在/WEB-INF/template.xhtml中body 里面加入: <ui:insert name="status"> <p:ajaxStatus sty ...
ICEfaces抄袭PrimeFaces
ICEfaces涉嫌抄袭PrimeFaces ICEfaces 3发布后,本来我是很激动的,以为这是一个伟大的版本.但是,PrimeFaces的同行们发现了ICEfaces抄袭了PrimeFaces的 ...
primefaces_通过OmniFaces缓存组件以编程方式缓存PrimeFaces图表
primefaces 在这篇文章中,您将看到如何结合PrimeFaces和OmniFaces获得可缓存的图表. 为了使事情变得简单,我们将使用PrimeFaces 折线图. 对于这种图表,我们可以在页 ...
jax-ws和jax-rs_带有JAX-RS和PrimeFaces的RESTful图表
jax-ws和jax-rs 通常,利用图表提供数据的直观表示很有用. PrimeFaces提供制图解决方案,可轻松将数据的可视表示形式添加到Web和移动应用程序中. 如果我们将PrimeFaces图表 ...
primefaces_使用WildFly 8.2.0.Final，Primefaces 5.1和MySQL 5的JDBC领域和基于表单的身份验证...
primefaces 我会不时查看我博客上最受欢迎的内容,并尝试最好地满足您的需求. 因此,阅读我的博客是其他读者推动内容的一种方式. 另一种方法是通过评论或电子邮件与我联系. 今天,我将使用Prim ...
primefaces_使用Bean验证扩展PrimeFaces CSV
primefaces 你们中有些人已经知道我和我的合著者MertÇalışkan正在研究PrimeFaces Cookbook的2.版. Packt Publishing允许我从新章节"客户 ...
primefaces_使用PrimeFaces开发数据导出实用程序
primefaces 我的日常工作涉及大量使用数据. 我们使用关系数据库来存储所有内容,因为我们依赖于企业级的数据管理. 有时,具有将数据提取为简单格式(例如电子表格)的功能很有用,以便我们可以按需进 ...
tomee_使用Vysper，TomEE和PrimeFaces将XMPP服务器嵌入JSF Web应用程序内部
tomee 我有一个需要在完成某些工作时通知用户的应用程序. 它使用JSF和Primefaces,因此可以使用大气 (也称为Push)来实现这种通知. 但是另一个有趣的方法是使用嵌入在Java Web ...
antlr4 代码语法树_使用ANTLR4，用于代码镜像和基于Web的DSL的Primefaces扩展
antlr4 代码语法树 DSL是很酷的东西,但我不清楚它们有什么用. 然后我意识到它们对以下方面有好处: 摆脱复杂的UI 意思是更快的做事方式而已. 当我阅读此博客时,我得出了这个结论. 如果 ...
jpa 分页排序过滤_使用JPA标准@ViewScoped通过分页，过滤和排序进行Primefaces DataTable延迟加载...
jpa 分页排序过滤 Primefaces数据表惰性分页有效,但是在Web上使用Criteria搜索完整示例后,我感到非常沮丧. 所以我混合了来自 http://stackoverflow.com ...