簡(jiǎn)介

響應式Web設計是一種創(chuàng )建Web應用程序的新方法。一旦采用響應式Web設計創(chuàng )建出應用程序，那么該Web應用程序將能輕而易舉地運行于包括移動(dòng)和手持設備在內的任意設備之上。Twitter公司開(kāi)源了他們的Twitter Bootstrap框架，該框架支持響應式Web設計（Responsive Web Design，簡(jiǎn)稱(chēng)RWD）。Kickstrap是Twitter Bootstrap的一個(gè)變種。我將在本博文中演示，如何創(chuàng )建一個(gè)基于Spring MVC的應用，該應用采用jquery-tmpl創(chuàng )建了基于RWD的JSON。

我們將要涉及的用例（use case）是一個(gè)簡(jiǎn)單的航班訂票系統。在該系統中給定始發(fā)地、目的地、始發(fā)和到達日期，將返回所有航班。當選定某一航班后，將在目標位置列出所有的交易。

著(zhù)急的人可以先到 @ Github上獲得代碼和步驟。

響應式Web設計

有三個(gè)關(guān)鍵的技術(shù)特性，是響應式Web設計的核心：

靈活的基于網(wǎng)格的布局：在移動(dòng)設備上查看頁(yè)面時(shí)，如果設備的朝向從橫向改為豎向時(shí)，頁(yè)面布局會(huì )自動(dòng)地調整并在新布局中展開(kāi)內容進(jìn)行顯示，這就是靈活的基于網(wǎng)格的布局。在Twitter Bootstrap中，可以使用如下的CSS標簽（tag）來(lái)實(shí)現：

<div class="row-fluid"><!-- put some HTML stuff --></div>

靈活的圖像：動(dòng)態(tài)調整圖像的尺寸

媒介查詢(xún)：這個(gè)是CSS3的特性，該特性可以通過(guò)查詢(xún)媒介設備將適當的CSS返回給瀏覽器。使用到的HTML標簽如下例所示：

<!-- for iPad, this is how the media query looks like -->
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Spring MVC和Twitter Bootstrap

整體的數據流如下圖所示。（圖丟了?。?！）

使用Spring MVC和Twitter Bootstrap進(jìn)行響應式Web設計

在這個(gè)例子中，我們采用Twitter Bootstrap和JQuery-tmpl創(chuàng )建了一個(gè)單頁(yè)Web站點(diǎn)。在前端，數據是用以下的方式提交的：

$('#searchResults').click(function(){
var origin =  $("#origin option:selected").val();
var destination = $("#destination option:selected").val();
var startDate= $("#startDate").val();
var endDate = $("#endDate").val();

$.get("resources/datatemplates/flightList.html", function (template){
$.get("/air/searchResultsJson?leavingFrom=" + origin + "&goingTo=" + destination + "&startDate=" + startDate + "&endDate=" + endDate, function (data){
$("#dataRegion").html("");
$.tmpl(template, data).appendTo("#dataRegion");
});
});
return false;
}

這里執行了JQuery，獲得了以JSon對象形式存儲的航班列表。

JQuery-tmpl插件用來(lái)綁定flightList.html，從而實(shí)現單頁(yè)面Web站點(diǎn)設計。flightList.html文件內容如下所示：

<tr>
<td>${startTime}</td>
<td>${startAirport}</td>
<td>${endTime}</td>
<td><a href="#" onclick="return getDetails('${endAirport}')">${endAirport}</a></td>
</tr>

在 Spring MVC側，需要添加Maven依賴(lài)并調用相關(guān)方法，可從該 鏈接獲得更詳細的講解。

控制器（controller）的代碼如下所示：

@RequestMapping(value = "searchResultsJson", method = RequestMethod.GET)
public @ResponseBody
List searchResultsJson(@RequestParam String leavingFrom,
@RequestParam String goingTo, @RequestParam String startDate,
@RequestParam String endDate) {
Form form = new Form();

form.setOrigin(leavingFrom);
form.setDestination(goingTo);
form.setStartDate(startDate);
form.setReturnDate(endDate);

return locationService.selectFlights(form);
}

上面的例子中， @ResponseBody用于將JSon響應返回到客戶(hù)端。