primefaces 实现保存主题，使主题应用于所有JSF页面

最新推荐文章于 2020-07-19 21:00:51 发布

__BMGT()

最新推荐文章于 2020-07-19 21:00:51 发布

阅读量763

点赞数

分类专栏： JavaScript Java JavaEE Spring

本文链接：https://blog.csdn.net/xiuye2015/article/details/51601060

版权

Java 同时被 3 个专栏收录

297 篇文章 1 订阅

订阅专栏

JavaEE

94 篇文章 0 订阅

订阅专栏

JavaScript

85 篇文章 0 订阅

订阅专栏

$(function() {
	//该el表达式失效
	//PrimeFaces.changeTheme('${sessionScope.theme == null?"swanky-purse":sessionScope.theme}');
	$.ajax({
		type:"post",
		url:"currentTheme.do",
		dataType:"text",
		success:function(data){
			
			PrimeFaces.changeTheme(data?data:"swanky-purse");
				
			console.log(data);
			
		},
		error:function(XMLHttpRequest, textStatus, errorThrown){
			PrimeFaces.changeTheme('swanky-purse');
		}
	});
	
});

package com.xiuye.controller;

import javax.servlet.http.HttpSession;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;


@Controller
public class ViewController {

	@RequestMapping("currentTheme.do")
	@ResponseBody
	public String theme(HttpSession session){
		String theme = (String) session.getAttribute("theme");
		if(theme == null){
			theme = "swanky-purse";
			session.setAttribute("theme", theme);
		}
		return theme;
	}
	
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">


<h:head>
	<title>用户个人主页</title>
	<h:outputScript  library="js" name="current_theme.js">
		
	</h:outputScript>
	<h:outputStylesheet>
		
		.textInCenter{
			vertical-align:top;
			text-align:center;
			margin:auto;
		}
		
	</h:outputStylesheet>

</h:head>

<h:body>



	<h:form>

		<p:layout fullPage="true">


			<p:layoutUnit position="west" resizable="true" size="300">





			</p:layoutUnit>
			<p:layoutUnit position="north" resizable="true">
				<h:panelGrid columns="1">
					<p:outputLabel value="欢迎您，尊敬的用户:" title="dfa"></p:outputLabel>
				</h:panelGrid>
				<h:panelGrid width="100%" columns="3">
					<h:panelGrid columns="2">
						<p:outputLabel value="用户ID: "></p:outputLabel>
						<p:outputLabel value="${sessionScope.user.userid}"></p:outputLabel>
					</h:panelGrid>
					<h:panelGrid columns="2">
						<p:outputLabel value="用户名: "></p:outputLabel>
						<p:outputLabel value="${sessionScope.user.username}"></p:outputLabel>
					</h:panelGrid>
					<h:panelGrid columns="2">
						<p:outputLabel value="性别:"></p:outputLabel>
						<p:outputLabel value="${sessionScope.user.sex}"></p:outputLabel>
					</h:panelGrid>
					<h:panelGrid columns="2">
						<p:outputLabel value="生日: "></p:outputLabel>
						<p:outputLabel value="${sessionScope.user.birthday}">
							<f:convertDateTime pattern="yyyy年MM月dd日" />
						</p:outputLabel>
					</h:panelGrid>
					<h:panelGrid columns="2">
						<p:outputLabel value="Email: "></p:outputLabel>
						<p:outputLabel value="${sessionScope.user.email}"></p:outputLabel>
					</h:panelGrid>
					<h:panelGrid columns="2">
						<p:outputLabel value="QQ: "></p:outputLabel>
						<p:outputLabel value="${sessionScope.user.qq}"></p:outputLabel>
					</h:panelGrid>
					<h:panelGrid columns="2">
						<p:outputLabel value="手机号: "></p:outputLabel>
						<p:outputLabel value="${sessionScope.user.phone}"></p:outputLabel>
					</h:panelGrid>
					<h:panelGrid columns="2" rendered="${sessionScope.user.isAdmin}">
						<p:outputLabel value="管理员:"></p:outputLabel>
						<p:outputLabel value="${sessionScope.user.isAdmin?'是':'否'}"></p:outputLabel>
					</h:panelGrid>

				</h:panelGrid>
			</p:layoutUnit>
			<p:layoutUnit position="south" resizable="true">
				<h:panelGrid styleClass="textInCenter" columns="1">
					<p:outputLabel value="Xiuye Company Copyright © 2016 ">
					</p:outputLabel>
					<p:outputLabel value="All rights reserved."></p:outputLabel>
				</h:panelGrid>
			</p:layoutUnit>

			<p:layoutUnit position="center">

			</p:layoutUnit>
		</p:layout>
	</h:form>
</h:body>

</html>

关键部分原理：
1.JSF加载js等资源的路径要求是resources文件下的资源文件。
2.在浏览器端调用PrimeFaces.changeTheme方法可以runtime的时候，改变主题。
3.主题用ajax传到前台，调用2中的方法，用jquery的起始加载直接改变当前页面主题。

__BMGT()

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录