Source

contacts.xhtml

<!DOCTYPE html>
<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:pt="http://xmlns.jcp.org/jsf/passthrough"
	xmlns:p="http://primefaces.org/ui"
    xmlns:pm="http://primefaces.org/mobile">
    
    <f:view renderKitId="PRIMEFACES_MOBILE" />
    
    <h:head>
        <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/syntaxhighlighter/syntaxhighlighter.css" />
    </h:head>
    
    <h:body>
        
        <pm:page id="list">
            <pm:header title="Contacts" swatch="b">
                <p:commandButton styleClass="ui-toolbar-header-button-left ui-button-inline" value="New" icon="ui-icon-plus" update=":editForm:editFormPanel" action="#{contactsView.prepareNewContact}"/>
            </pm:header>
            
            <pm:content>
                <h:form id="listForm">
                    <p:dataList id="contactsList" value="#{contactsView.contacts}" var="contact" pt:data-inset="true">
                        <p:commandLink value="#{contact.firstname} #{contact.surname}" update=":editForm:editFormPanel" action="pm:edit?transition=flip">
                            <f:setPropertyActionListener value="#{contact}" target="#{contactsView.contact}" />
                        </p:commandLink> 
                    </p:dataList>
                </h:form>
            </pm:content>
        </pm:page>
        
        <pm:page id="edit">
            <pm:header title="Contacts" swatch="b">
                <p:button styleClass="ui-toolbar-header-button-left ui-button-inline" value="Back" icon="ui-icon-arrow-l" outcome="pm:list?transition=flip"/>
            </pm:header>
            
            <pm:content>
                <h:form id="editForm">
                    <p:outputPanel id="editFormPanel">
                        <pm:field>
                            <p:outputLabel for="firstname" value="Firstname" />
                            <p:inputText id="firstname" value="#{contactsView.contact.firstname}" />
                        </pm:field>

                        <pm:field>
                            <p:outputLabel for="surname" value="Surname" />
                            <p:inputText id="surname" value="#{contactsView.contact.surname}" />
                        </pm:field>

                        <pm:field>
                            <p:outputLabel for="phone" value="Phone" />
                            <p:inputText id="phone" value="#{contactsView.contact.phone}" type="tel"/>
                        </pm:field>

                        <pm:field>
                            <p:outputLabel for="email" value="Email" />
                            <p:inputText id="email" value="#{contactsView.contact.email}" type="email"/>
                        </pm:field>

                        <pm:field>
                            <p:outputLabel for="address" value="Address" />
                            <p:inputTextarea id="address" value="#{contactsView.contact.address}" />
                        </pm:field>

                        <pm:field>
                            <p:outputLabel for="gender" value="Gender" />
                            <p:selectOneButton id="gender" value="#{contactsView.contact.gender}">
                                <f:selectItem itemLabel="Male" itemValue="Male" />
                                <f:selectItem itemLabel="Female" itemValue="Female" />
                            </p:selectOneButton>
                        </pm:field>
                    </p:outputPanel>
                    
                    <p:commandButton value="Save" action="#{contactsView.saveContact}" update=":listForm:contactsList" icon="ui-icon-check"/>
                </h:form>
                
            </pm:content>
        </pm:page>
        
        <script language="javascript" src="#{request.contextPath}/syntaxhighlighter/scripts/sh.js"></script>
        <script language="javascript">
            SyntaxHighlighter.all();
        </script>
    </h:body>
    
</html>

ContactsView.java

package org.primefaces.showcase.mobile;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import org.primefaces.showcase.domain.Contact;

@ManagedBean
@ViewScoped
public class ContactsView implements Serializable {
    
    private Contact contact;
    
    private List<Contact> contacts;
    
    @PostConstruct
    public void init() {
        contact = new Contact();
        contacts = new ArrayList<Contact>();
    }
        
    public Contact getContact() {
        return contact;
    }
    public void setContact(Contact contact) {
        this.contact = contact;
    }
    
    public List<Contact> getContacts() {
        return contacts;
    }
    
    public String saveContact(){
        if(!contacts.contains(contact)) {
            contacts.add(contact);
        }
        
        return "pm:list?transition=flip";
    }
    
    public void deleteContact(){
        if(contacts.contains(contact)) {
            contacts.remove(contact);
        }                
    }    
    
    public String prepareNewContact() {
        contact = new Contact();
        
        return "pm:edit?transition=flip";
    }

}

Contact.java

package org.primefaces.showcase.domain;

import java.io.Serializable;

public class Contact implements Serializable{

    private String firstname;
    private String surname;
    private String phone;
    private String address;
    private String email;
    private Integer age;
    private String gender;

    public String getFirstname() {
        return firstname;
    }

    public void setFirstname(String firstname) {
        this.firstname = firstname;
    }

    public String getSurname() {
        return surname;
    }

    public void setSurname(String surname) {
        this.surname = surname;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getPhone() {
        return phone;
    }

    public void setPhone(String phone) {
        this.phone = phone;
    }
    
    public String getAddress() {
        return address;
    }
    
    public void setAddress(String address) {
        this.address = address;
    }
}