前回作成したBMIデータをJsonとして返却するWeb-APIを利用して、
BMIを測定するWEBアプリを作成してみよう。
実行例
ブラウザにフォームが表示される。
身長と体重を入力してsendボタンを押すと結果と画像が表示される。
作例
1.エクリプスから新規作成->動的WebプロジェクトよりBMI_WEBAPPを作成する。
2.前回同様gson-2.8.1.jarファイルをWEB-INF/libフォルダに配置する。
3.新規クラスでmodelパッケージ内にBMIクラスを以下のように作成する。
package model;
import java.io.Serializable;
public class BMI implements Serializable{
private double height;
private double weight;
private double bmi;
private String imgPath;
public BMI() {}
public double getHeight() {
return height;
}
public void setHeight(double height) {
this.height = height;
}
public double getWeight() {
return weight;
}
public void setWeight(double weight) {
this.weight = weight;
}
public double getBmi() {
return bmi;
}
public void setBmi(double bmi) {
this.bmi = bmi;
}
public String getImgPath() {
return imgPath;
}
public void setImgPath(String imgPath) {
this.imgPath = imgPath;
}
}4.新規サーブレットからcontrollerパッケージ内にMainクラスを以下のように作成する。
package controller;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
import com.google.gson.stream.JsonReader;
import model.BMI;
@WebServlet("/Main")
public class Main extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//ビューへフォーワード。
RequestDispatcher rd=request.getRequestDispatcher("/WEB-INF/view/main.jsp");
rd.forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//フォームからの送信パラメータを取得
String height=request.getParameter("height");
String weight=request.getParameter("weight");
//WebAPIへ接続するURLの作成
URL url=new URL("http://localhost:8080/BMI_API/GetData?height="+height+"&weight="+weight);
//urlを元にHttpコネクション生成
HttpURLConnection con=(HttpURLConnection)url.openConnection();
//通信方法はGET
con.setRequestMethod("GET");
//レスポンスの本文取得
InputStream is=con.getInputStream();
InputStreamReader isr=new InputStreamReader(is,"UTF-8");
JsonReader jr=new JsonReader(isr);
//Gsonオブジェクト生成
Gson gson=new Gson();
//jsonからBMIクラスのインスタンスに変換
BMI bmi=gson.fromJson(jr, BMI.class);
//リクエストスコープにインスタンスを詰める
request.setAttribute("bmi", bmi);
//doGetを呼び出してviewにフォワード
doGet(request, response);
}
}
5.ビューを作成しよう。/WEB-INF/フォルダの直下にviewフォルダを作成し、その中に新規jspでmain.jspを以下のように作成する。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="model.BMI" %>
<%
BMI bmi=(BMI)request.getAttribute("bmi");
String height=bmi==null? "":bmi.getHeight()+"";
String weight=bmi==null? "":bmi.getWeight()+"";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>BMI測定アプリ</title>
</head>
<body>
<form action="/BMI_WEBAPP/Main" method="post">
Height:<input type="number" name="height" step="0.1" min="0.0" placeholder="Enter Height(cm)" value="<%=height %>"><br>
Weight:<input type="number" name="weight" step="0.1" min="0.0" placeholder="Enter Weight(kg)" value="<%=weight %>"><br>
<button type="submit">Send</button>
</form>
<%if(bmi !=null){ %>
<p>
Height:<%=bmi.getHeight() %><br>
Weight:<%=bmi.getWeight() %><br>
BMI:<%=bmi.getBmi() %>
</p>
<img src="<%=bmi.getImgPath() %>" width="100">
<%} %>
</body>
</html>完成
ウェブアプリケーションとして実行し、ブラウザから
とリクエストを投げてみよう。最初に示した実行例のようになれば成功だ。
コメント