Primefaces JoinFaces (二)

JoinFaces 主题和转发、重定向

官网地址

替换默认主题

  1. 下载主题
    pom.xml
    1
    2
    3
    4
    5
    6
    <!--primefaces themes-->
    <dependency>
    <groupId>org.primefaces.themes</groupId>
    <artifactId>bootstrap</artifactId>
    <version>1.0.10</version>
    </dependency>

若Maven不能正常下载,请通过其他渠道获取主题

  1. 应用主题
    application.yml
    1
    2
    3
    4
    # Theme
    jsf:
    primefaces:
    theme: bootstrap

关于转发、重定向

上一章,我们是通过访问地址:http://localhost:8080/hello.xhtml

现在我们修改配置,使通过访问地址:http://localhost:8080,达到同样的效果。

创建配置类

DefaultView.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
package com.ray.primefaces02;

import org.springframework.context.annotation.Configuration;
import org.springframework.core.Ordered;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
* @author Ray
* @date 2018/9/14 0014
* 配置类
* 使用Java配置而不是XML来指定页面转发或重定向
*/
@Configuration
public class DefaultView implements WebMvcConfigurer {

@Override
public void addViewControllers(ViewControllerRegistry registry) {

registry.addViewController("/").setViewName("forward:/hello.xhtml");
registry.setOrder(Ordered.HIGHEST_PRECEDENCE);

}
}

转发:forward
重定向:redirect

运行效果

启动Tomcat运行项目,请注意查看启动信息,如果有异常应该先解决异常信息,运行成功后的结果如下所示:
访问地址:http://localhost:8080

Layout

layout02.xhtml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
>
<h:head>
<title>Title</title>
</h:head>
<h:body>
<p:layout fullPage="true">

<p:layoutUnit position="north" size="100" header="Top" resizable="true" closable="true" collapsible="true">
<h:outputText value="North unit content." />
</p:layoutUnit>

<p:layoutUnit position="south" size="100" header="Bottom" resizable="true" closable="true" collapsible="true">
<h:outputText value="South unit content." />
</p:layoutUnit>

<p:layoutUnit position="west" size="200" header="Left" resizable="true" closable="true" collapsible="true">
<h:outputText value="West unit content." />
</p:layoutUnit>

<p:layoutUnit position="east" size="200" header="Right" resizable="true" closable="true" collapsible="true" effect="drop">
<h:outputText value="Right unit content." />
</p:layoutUnit>

<p:layoutUnit position="center">
//page code
</p:layoutUnit>

</p:layout>
</h:body>
</html>

运行效果

启动Tomcat运行项目,请注意查看启动信息,如果有异常应该先解决异常信息,运行成功后的结果如下所示:
访问地址:http://localhost:8080/layout02.xhtml

Schedule

时间表

JSF 视图

ScheduleView.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
/**
* @author Ray
* @date 2018/9/8 0008
* 时间表
*/
@Named
@ViewScoped
public class ScheduleView {

private ScheduleModel eventModel;

private ScheduleModel lazyEventModel;

private ScheduleEvent event = new DefaultScheduleEvent();

@PostConstruct
public void init() throws ParseException {
eventModel = new DefaultScheduleModel();
// 新增事件
eventModel.addEvent(new DefaultScheduleEvent("Champions League Match", previousDay8Pm(), previousDay8Pm()));
eventModel.addEvent(new DefaultScheduleEvent("Birthday Party", today1Pm(), today6Pm()));
eventModel.addEvent(new DefaultScheduleEvent("Breakfast at Tiffanys", nextDay9Am(), nextDay11Am()));
eventModel.addEvent(new DefaultScheduleEvent("Plant the new garden stuff", theDayAfter3Pm(), fourDaysLater3pm()));

// 实现延迟加载时
lazyEventModel = new LazyScheduleModel() {

@Override
public void loadEvents(Date start, Date end) {
Date random = getRandomDate(start);
addEvent(new DefaultScheduleEvent("Lazy Event 1", random, random));

random = getRandomDate(start);
addEvent(new DefaultScheduleEvent("Lazy Event 2", random, random));
}
};
}

public Date getRandomDate(Date base) {
Calendar date = Calendar.getInstance();
date.setTime(base);

//set random day of month
date.add(Calendar.DATE, ((int)(Math.random()*30)) + 1);

return date.getTime();
}

public Date getInitialDate() {
Calendar calendar = Calendar.getInstance();
calendar.set(calendar.get(Calendar.YEAR), Calendar.FEBRUARY, calendar.get(Calendar.DATE), 0, 0, 0);

return calendar.getTime();
}

public ScheduleModel getEventModel() {
return eventModel;
}


public ScheduleModel getLazyEventModel() {
return lazyEventModel;
}

private Calendar today(){
Calendar calendar = Calendar.getInstance();
calendar.set(calendar.get(Calendar.YEAR), calendar.get(Calendar.MONTH), calendar.get(Calendar.DATE), 0, 0, 0);

return calendar;
}

private Date previousDay8Pm(){
Calendar t = (Calendar) today().clone();
t.set(Calendar.AM_PM, Calendar.PM);
t.set(Calendar.DATE, t.get(Calendar.DATE) - 1);
t.set(Calendar.HOUR, 8);

System.out.println(t.getTime());
return t.getTime();
}

private Date previousDay11Pm() {
Calendar t = (Calendar) today().clone();
t.set(Calendar.AM_PM, Calendar.PM);
t.set(Calendar.DATE, t.get(Calendar.DATE) - 1);
t.set(Calendar.HOUR, 11);

return t.getTime();
}

private Date today1Pm() {
Calendar t = (Calendar) today().clone();
t.set(Calendar.AM_PM, Calendar.PM);
t.set(Calendar.HOUR, 1);

return t.getTime();
}

private Date theDayAfter3Pm() {
Calendar t = (Calendar) today().clone();
t.set(Calendar.DATE, t.get(Calendar.DATE) + 2);
t.set(Calendar.AM_PM, Calendar.PM);
t.set(Calendar.HOUR, 3);

return t.getTime();
}

private Date today6Pm() {
Calendar t = (Calendar) today().clone();
t.set(Calendar.AM_PM, Calendar.PM);
t.set(Calendar.HOUR, 6);

return t.getTime();
}

private Date nextDay9Am() {
Calendar t = (Calendar) today().clone();
t.set(Calendar.AM_PM, Calendar.AM);
t.set(Calendar.DATE, t.get(Calendar.DATE) + 1);
t.set(Calendar.HOUR, 9);

return t.getTime();
}

private Date nextDay11Am() {
Calendar t = (Calendar) today().clone();
t.set(Calendar.AM_PM, Calendar.AM);
t.set(Calendar.DATE, t.get(Calendar.DATE) + 1);
t.set(Calendar.HOUR, 11);

return t.getTime();
}

private Date fourDaysLater3pm() {
Calendar t = (Calendar) today().clone();
t.set(Calendar.AM_PM, Calendar.PM);
t.set(Calendar.DATE, t.get(Calendar.DATE) + 4);
t.set(Calendar.HOUR, 3);

return t.getTime();
}

public ScheduleEvent getEvent() {
return event;
}

public void setEvent(ScheduleEvent event) {
this.event = event;
}

public void addEvent(){
if (event.getId() == null){
eventModel.addEvent(event);
}else {
eventModel.updateEvent(event);
}
event = new DefaultScheduleEvent();
}

public void onEventSelect(SelectEvent selectEvent){
event = (ScheduleEvent) selectEvent.getObject();
}

public void onDateSelect(SelectEvent selectEvent){
event = new DefaultScheduleEvent("", (Date) selectEvent.getObject(), (Date)selectEvent.getObject());
}

public void onEventMove(ScheduleEntryMoveEvent event){
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Event Moved", "Day delta:" + event.getDayDelta() + ",Minute delta:" + event.getMinuteDelta());

addMessage(message);
}

public void onEventResize(ScheduleEntryResizeEvent event) {
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Event resized", "Day delta:" + event.getDayDelta() + ", Minute delta:" + event.getMinuteDelta());

addMessage(message);
}

private void addMessage(FacesMessage message){
FacesContext.getCurrentInstance().addMessage(null, message);
}
}

JSF 页面

shedule.xhtml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<?xml version="1.0" encoding="UTF-8"?><!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:p="http://primefaces.org/ui" xmlns:f="http://java.sun.com/jsf/core">

<h:head></h:head>

<h:form>
<p:growl id="messages" showDetail="true" />

<h:panelGrid columnClasses="value">
<h3 style="margin-top: 10px;">Editable Schedule - 可编辑时间表</h3>
<p:schedule id="schedule" value="#{scheduleView.eventModel}" widgetVar="myschedule" timeZone="GMT+8">
<p:ajax event="dateSelect" listener="#{scheduleView.onDateSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
<p:ajax event="eventSelect" listener="#{scheduleView.onEventSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
<p:ajax event="eventMove" listener="#{scheduleView.onEventMove}" update="messages" />
<p:ajax event="eventResize" listener="#{scheduleView.onEventResize}" update="messages" />
</p:schedule>

<h3>Locale Support - 地区支持</h3>
<p:schedule id="scheduleLocale" value="#{scheduleView.eventModel}" locale="tr" timeZone="GMT+8" />

<h3>Lazy Schedule - 懒加载</h3>
<p:schedule value="#{scheduleView.lazyEventModel}" />
</h:panelGrid>

<p:dialog widgetVar="eventDialog" header="Event Details" >
<h:panelGrid id="eventDetails" columns="2">
<p:outputLabel for="title" value="Titles:" />
<p:inputText id="title" value="#{scheduleView.event.title}" required="true" />

<p:outputLabel for="from" value="From:" />
<p:calendar id="from" value="#{scheduleView.event.startDate}" timeZone="GMT+8" pattern="yyyy-MM-dd HH:mm" />

<p:outputLabel for="to" value="To:" />
<p:calendar id="to" value="#{scheduleView.event.endDate}" timeZone="GMT+8" pattern="yyyy/MM/dd HH:mm" />

<p:outputLabel for="allDay" value="All Day:" />
<h:selectBooleanCheckbox id="allDay" value="#{scheduleView.event.allDay}" />

<p:commandButton type="reset" value="Reset" />
<p:commandButton id="addButton" value="Save" actionListener="#{scheduleView.addEvent}" oncomplete="PF('myschedule').update();PF('eventDialog').hide();" />
</h:panelGrid>
</p:dialog>
</h:form>

<script type="text/javascript">
PrimeFaces.locales['tr'] = {
currentText: '回到今天',
dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
firstDay: 1, // 周一开始
month: '月',
week: '周',
day: '日',
};
</script>
<style type="text/css">
.value {
width: 1000px;
}
</style>
</html>

运行效果

启动Tomcat运行项目,请注意查看启动信息,如果有异常应该先解决异常信息,运行成功后的结果如下所示:
访问地址:http://localhost:8080/shedule.xhtml