Saturday, September 08, 2012

JSF 2.1 Tip of the Day: PrimeFaces 3.4 Advanced Table Example with JPA

PrimeFaces 3.4 Data Table
I was working on an example table to demonstrate some of the PrimeFaces data table capabilities. I think I may use it as an interview problem: "Create an advanced table with the layout seen in this picture using JPA".

The example was developed using Maven on NetBeans 7.2. The source code can be downloaded from here: advanced-table.zip.

Index.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
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
<?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:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Advanced PrimeFaces Table</title>
    </h:head>
    <h:body>
        <h:form>
            <p:dataTable value="#{customerManager.customers}" var="customer">
                <p:columnGroup type="header">
                    <p:row>
                        <p:column colspan="12" headerText="Customers"/>
                    </p:row>
                    <p:row>
                        <p:column colspan="5" headerText="Customer Information"/>
                        <p:column colspan="5" headerText="Address"/>
                        <p:column colspan="2" headerText="Financial"/>
                    </p:row>
                    <p:row>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="ID"/>
                            </f:facet>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Customer Name"/>
                            </f:facet>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Email"/>
                            </f:facet>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Phone"/>
                            </f:facet>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Fax"/>
                            </f:facet>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Address Line 1"/>
                            </f:facet>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Address Line 2"/>
                            </f:facet>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="City"/>
                            </f:facet>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="State"/>
                            </f:facet>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Zip Code"/>
                            </f:facet>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Credit Limit"/>
                            </f:facet>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Discount Rate"/>
                            </f:facet>
                        </p:column>
                    </p:row>
                </p:columnGroup>
                <p:column id="cid" >
                    #{customer.customerId}
                </p:column>
                <p:column id="nid">
                    #{customer.name}
                </p:column>
                <p:column>
                    #{customer.email}
                </p:column>
                <p:column>
                    #{customer.phone}
                </p:column>
                <p:column>
                    #{customer.fax}
                </p:column>
                <p:column>
                    #{customer.addressline1}
                </p:column>
                <p:column>
                    #{customer.addressline2}
                </p:column>
                <p:column>
                    #{customer.city}
                </p:column>
                <p:column>
                    #{customer.state}
                </p:column>
                <p:column>
                    #{customer.zip.zipCode}
                </p:column>
                <p:column>
                    #{customer.creditLimit}
                </p:column>
                <p:column>
                    #{customer.discountCode.rate}%
                </p:column>
                <p:columnGroup type="footer">
                    <p:row>
                        <p:column colspan="10"/>
                        <p:column footerText="$ #{customerManager.creditTotal}" />
                        <p:column/>
                    </p:row>
                </p:columnGroup>
            </p:dataTable>
        </h:form>
    </h:body>
</html>
Labels: , , , , , , , , , ,

1 comments :

Mark Heckler said...

Nice work, John. Thanks for sharing it!

10 September, 2012 11:31

Post a Comment

Subscribe to: Post Comments ( Atom )

Popular Posts