I bulit a mobile app with some pages. I did it with the Multipage approach from the showcase with the pm: navigation...
The is, that I display a large datalist and if I select one link @ the bottom of the list during loading the next page the screen jumps to top of the page and display the content (shortly) without formatting (on iphone and ipad not on pc).. also I seek a way to save the scroll position of the page, because if I open the page behind the datalist entry and I navigate back I want to display the same position...
my source:
Code: Select all
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:pm="http://primefaces.org/mobile"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">
<f:view renderKitId="PRIMEFACES_MOBILE" />
<h:head>
<title>MyApp</title>
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
</h:head>
<h:body rendered="#{userBean.user.isLoggedIn}">
<p:growl id="messages" showDetail="true" showSummary="true" autoUpdate="true"/>
<pm:page id="toDo" rendered="#{userBean.user.isLoggedIn}">
<pm:header title="ToDo-Liste">
<a class="jqm-navmenu-link ui-nodisc-icon ui-alt-icon ui-btn-right ui-btn ui-icon-bars ui-btn-icon-notext" href="#menu" data-role="button" role="button">Menu</a>
</pm:header>
<pm:content>
<div id="menu" data-role="panel" class="jqm-navmenu-panel" data-position="right" data-display="overlay" data-theme="a">
<h:form>
<p:menu>
<p:submenu label="Menü">
<p:menuitem value="To-Do Liste" action="pm:toDo?transition=slide"/>
<p:menuitem value="File Upload" action="pm:fileUpload?transition=slide"/>
<p:menuitem value="Logout" action="#{userBean.logout()}"/>
</p:submenu>
</p:menu>
</h:form>
</div>
<h:form>
<p:dataList value="#{userBean.user.tasks}" pt:data-filter="true" pt:data-filter-placeholder="Search key..." var="task" pt:data-inset="true">
<h:commandLink action="#{userBean.viewTask(task)}">
<h2>#{task.subject}</h2>
<h2>#{task.customer}</h2>
<p>#{task.zip} #{task.city}, #{task.street}</p>
<p class="ui-li-aside"><strong>#{task.state}</strong></p>
</h:commandLink>
</p:dataList>
</h:form>
</pm:content>
<pm:footer fixed="false" tapToggle="false">
<p style="text-align: center; font-size: x-small;"></p>
</pm:footer>
</pm:page>
<pm:page id="viewTask">
<pm:header title="#{userBean.selectedTask.subject}">
<h:form>
<p:commandLink class="jqm-navmenu-link ui-nodisc-icon ui-alt-icon ui-btn-left ui-btn ui-icon-arrow-l ui-btn-icon-notext" action="pm:toDo"/>
</h:form>
</pm:header>
<pm:content>
<h:form>
<p:panel header="#{userBean.selectedTask.subject}" style="width: 94%; margin-left: auto; margin-right: auto; margin-top: 5px; margin-bottom: 5px;">
<h2>#{userBean.selectedTask.tid} #{userBean.selectedTask.customer}</h2>
<h3><a target="_blank" href="https://maps.google.com/?q=#{userBean.selectedTask.zip} #{userBean.selectedTask.city}, #{userBean.selectedTask.street}">#{userBean.selectedTask.zip} #{userBean.selectedTask.city}, #{userBean.selectedTask.street}</a></h3>
<h:outputText value="VU: #{userBean.selectedTask.vu}"/>
<br/>
Tel: <a href="tel:#{userBean.selectedTask.phone}">#{userBean.selectedTask.phone}</a>
<br/>
Kontakt: #{userBean.selectedTask.contactPerson},
Tel: <a href="tel:#{userBean.selectedTask.phoneConactPerson}">#{userBean.selectedTask.phoneConactPerson}</a>
<br/><br/>
<h:outputText value="Notiz: #{userBean.selectedTask.notes}"/>
<p:dataList value="#{userBean.selectedTask.articles}" var="article" pt:data-inset="true">
<f:facet name="header">
Artikel
</f:facet>
#{article.count} #{article.description}
</p:dataList>
</p:panel>
</h:form>
</pm:content>
<pm:footer fixed="false" tapToggle="false">
<p style="text-align: center; font-size: x-small;"></p>
</pm:footer>
</pm:page>
<pm:page id="fileUpload">
<pm:header title="File Upload">
<h:form>
<p:commandLink class="jqm-navmenu-link ui-nodisc-icon ui-alt-icon ui-btn-left ui-btn ui-icon-arrow-l ui-btn-icon-notext" action="pm:toDo"/>
</h:form>
</pm:header>
<pm:content>
<h:form enctype="multipart/form-data">
<p:fileUpload value="#{fileUploadBean.file}" mode="simple" allowTypes="/(\.|\/)(xls|xlsx)$/" multiple="false" />
<p:commandButton value="Upload" action="#{fileUploadBean.uploadFile}" icon="ui-icon-arrow-u" ajax="false" />
</h:form>
</pm:content>
<pm:footer fixed="false" tapToggle="false">
<p style="text-align: center; font-size: x-small;"></p>
</pm:footer>
</pm:page>
</h:body>
<h:body rendered="#{!userBean.user.isLoggedIn}">
<pm:page>
<pm:header title="Sie sind nicht angemeldet!" swatch="a" />
<pm:content styleClass="jqm-content">
<h:form>
<p:commandLink value="zur Anmeldung" action="/index"/>
</h:form>
</pm:content>
<pm:footer fixed="false" tapToggle="false">
<p style="text-align: center; font-size: x-small;"></p>
</pm:footer>
</pm:page>
</h:body>
</html>
