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

<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pm="http://primefaces.org/mobile"
	contentType="text/html">

    <pm:page title="Contacts">

        <!-- Main View -->
        <pm:view id="main">
            <h:form id="listContactsForm">
                <pm:header title="Contacts">
                    <f:facet name="right">
                        <p:commandButton value="New" icon="plus" action="#{contactsView.prepareNewContact}" update=":newContactForm"/>
                    </f:facet>
                </pm:header>

                <pm:content>
                    <p:dataList id="contactsList" value="#{contactsView.contacts}" var="contact">
                        <p:column>
                            <p:graphicImage value="/images/pf-logo.png" />
                            <h3>
                                <p:commandLink value="#{contact.firstname} #{contact.surname}" action="pm:new" update=":newContactForm">
                                    <f:setPropertyActionListener value="#{contact}" target="#{contactsView.contact}" />
                                </p:commandLink>
                            </h3>
                            <p><a href="tel:#{contact.phone}">Call</a></p>
                        </p:column>
                    </p:dataList>
                </pm:content>
            </h:form>
        </pm:view>

        <!-- New Contact -->
        <pm:view id="new">
            <pm:header title="New Contact">
                <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
            </pm:header>

            <pm:content>
                <h:form id="newContactForm">
                    <p:inputText id="name" value="#{contactsView.contact.firstname}" label="Name:"/>

                    <p:inputText id="surname" value="#{contactsView.contact.surname}" label="Surname:"/>

                    <p:inputText id="age" value="#{contactsView.contact.age}" type="number" label="Age:"/>

                    <p:inputText id="phone" value="#{contactsView.contact.phone}" label="Phone:"/>

                    <p:inputText id="mail" value="#{contactsView.contact.mail}" label="Email:"/>

                    <p:inputTextarea id="address" value="#{contactsView.contact.address}" label="Address:"/>
                    
                    <p:commandButton value="Save" action="#{contactsView.saveContact}" update=":listContactsForm:contactsList" icon="check" />
                </h:form>
            </pm:content>

        </pm:view>

    </pm:page>

</f:view>