JSF – Swipe events mit jQuery Mobile
Mit Hilfe der Javascript-Library jQuery und jQuery Mobile kann man auf JSF-Seiten Wischbewegungen auswerten. Um die Webseiten ohne iPad zu testen, kann man die Desktop-Version von Safari verwenden.
Im Head-Bereich der JSP-Datei werden die jQuery-Dateien eingebunden (ich habe die Dateien auf die gleiche Ebene wie die JSP-Seite gelegt):
<link rel="stylesheet" href="./jquery.mobile.css" /> <script src="./jquery.js"></script> <script src="./jquery.mobile.js"></script>
dann kommt der Seiten-Inhalt – dieser wird im body-Bereich der Datei angelegt:
<div id="page1" data-role="page" >
<h:outputText value="Page 1" />
</div>
<div id="page2" data-role="page" >
<h:outputText value="Page 2" />
<h:outputText value="#{bean.hello}" />
</div>
die beiden div-Elemente bekommen den Zusatz data-role=page. Damit erzeugt HTML5 mehrere Web-Seiten innerhalb einer einzigen JSP-Datei. Der Browser zeigt zunächst nur den Inhalt des ersten DIV-Element (mit Attribute page) an. Jetzt wird noch der Javascript-Code benötigt um auf den Event swipe zu reagieren:
$(function() {
$('body').bind('swiperight', function(e) {
alert('You swiped right!');
e.stopImmediatePropagation();
return false;
});
$('body').bind('swipeleft', function(e) {
alert('You swiped left!');
e.stopImmediatePropagation();
return false;
});
});
Jetzt muss man die Seite bei einer Wischbewegung wechseln. Dazu prüft man auf welcher Seite man gerade steht und wechselt auf die jeweils andere Seite:
var curPage = 1;
$(function() {
$('body').bind('swiperight', function(e) {
//alert('You swiped right!' + curPage);
if (curPage == 2) {
curPage = 1;
$.mobile.changePage("#page1", "slide", true, true);
}
e.stopImmediatePropagation();
return false;
});
$('body').bind('swipeleft', function(e) {
//alert('You swiped left!' + curPage);
if (curPage == 1) {
curPage = 2;
$.mobile.changePage("#page2", "slide", false, true);
}
e.stopImmediatePropagation();
return false;
});
});
hier noch einmal die gesamte Seite:
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<meta http-equiv="Cache-Control" content="no-cache">
<link rel="stylesheet" href="./jquery.mobile.css" />
<script src="./jquery.js"></script>
<script src="./jquery.mobile.js"></script>
<script LANGUAGE="JavaScript" TYPE="text/javascript">
var curPage = 1;
$(function() {
$('body').bind('swiperight', function(e) {
//alert('You swiped right!' + curPage);
if (curPage == 2) {
curPage = 1;
$.mobile.changePage("#page1", "slide", true, true);
}
e.stopImmediatePropagation();
return false;
});
$('body').bind('swipeleft', function(e) {
//alert('You swiped left!' + curPage);
if (curPage == 1) {
curPage = 2;
$.mobile.changePage("#page2", "slide", false, true);
}
e.stopImmediatePropagation();
return false;
});
});
</script>
</head>
<f:view>
<body>
<h:form id="content_form" enctype="multipart/form-data">
<div id="page1" data-role="page" >
<h:outputText value="Page 1" />
</div>
<div id="page2" data-role="page" >
<h:outputText value="Page 2" />
</div>
</h:form>
</body>
</f:view>
</html>
das ganze geht natürlich auch problemlos mit ASP.NET-Seiten.
Srccode's Blog 