授業第9回 jQuery MobileとJSPを連動
準備
Safariをインストールしておく。
1、jQuery Mobile + JSPの書き方
以下のようなテーブルをjQueryMobileで一覧表示させてみます。
表示にはjQuery mobileのlistを使います。
w2k=# select * from jq_items; id | name | price | stock | img -------+----------------+-------+-------+-------- i1001 | SoftBank d0201 | 23000 | 100 | m1.jpg i1002 | docomo k3030 | 45000 | 100 | m2.jpg i1003 | kddi g5100 | 32000 | 100 | m3.jpg i1004 | apple iPhone | 65000 | 100 | m4.jpg i1005 | kddi is08 | 55000 | 100 | m5.jpg (5 rows)
例１
<%@ page contentType="text/html; charset=UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</head>
<body>
<sql:setDataSource dataSource="jdbc/hanrin" />
<fmt:requestEncoding value="UTF-8"/>
<fmt:setLocale value="ja_JP" />
<sql:query sql="select * from jq_items;" var="rs" />
<div data-role="page" id="p1">
<div data-role="header">
<h1>商品一覧ページ</h1>
</div>
<div data-role="content">
<ol data-role="listview" data-inset="true">
<c:forEach var="i" items="${rs.rows}">
<li>
<h3>ID=${i.id}</h3>
<p>商品名=${i.name}</p>
<p>価格=<fmt:formatNumber type="currency" value="${i.price}" /></p>
<p>在庫=${i.stock}個</p>
</li>
</c:forEach>
</ol>
</div>
<div data-role="footer">
<h6>©Hanrin Keisin</h6>
</div>
</div>
</body>
</html>
問題１
上のアプリケーションを、
作りなさい。Postgresqlのテーブルは「商品一覧」のようなものがあれば、それを使っても良い。
ない場合は、jq_itemsという名前のテーブルを作り、使用すること。
次は、IDの部分と詳細の部分を別ページに分割して表示してみましょう。
リストに番号を付けるには、<ul>の代わりに<ol>を使う。
data-inset="true" を入れると、画面いっぱいにならない。
リストにリンクボタンを付けるには、<li>の中に<a>タグを使ってリンクを書けば、勝手にその形になってくれる。
ページは<c:forEach>で商品IDごとに作っている。
ボタンにdata-rel="back"と書くだけで、バックボタンが表示される。
（<a data-rel="back" data-role="button">戻る</a>）
例２
<%@ page contentType="text/html; charset=UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</head>
<body>
<sql:setDataSource dataSource="jdbc/hanrin" />
<fmt:requestEncoding value="UTF-8"/>
<fmt:setLocale value="ja_JP" />
<sql:query sql="select * from jq_items;" var="rs" />
<div data-role="page" id="p1">
<div data-role="header">
<h1>商品一覧ページ（クリックで詳細表示）</h1>
</div>
<div data-role="content">
<ol data-role="listview" data-inset="true">
<c:forEach var="i" items="${rs.rows}">
<li>
<a href="#p${i.id}"><h3>商品ID=${i.id}</h3></a>
</li>
</c:forEach>
</ol>
</div>
<div data-role="footer">
<h6>©Hanrin Keisin</h6>
</div>
</div>
<c:forEach var="j" items="${rs.rows}">
<div data-role="page" id="p${j.id}">
<div data-role="header">
<h1>商品詳細ページ</h1>
</div>
<div data-role="content">
<p>商品名=${j.name}</p>
<p>価格=<fmt:formatNumber type="currency" value="${j.price}" /></p>
<p>在庫=${j.stock}個</p>
</div>
<div data-role="footer">
<a data-rel="back" data-role="button">戻る</a>
<h6>©Hanrin Keisin</h6>
</div>
</div>
</c:forEach>
</body>
</html>
問題２
上のアプリケーションを、
作りなさい。
リンクのアイコンを「前進」に変えなさい
こちらを見て、作ってください