Primefaces

最新推荐文章于 2020-07-13 21:17:55 发布

阿姨不可以嘛

最新推荐文章于 2020-07-13 21:17:55 发布

阅读量1k

点赞数

分类专栏： Primefaces

本文链接：https://blog.csdn.net/qq_17058993/article/details/87874816

版权

Primefaces 专栏收录该内容

1 篇文章

订阅专栏

引：

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 {
    @Inject
    private EntityManager em;
    
    //写个查询list
    public 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标签消失。