はじめに
こんばんわ、きりです。
本記事はNablarchを使ってみようのサブ記事として作成しております。
前回はサーブレットの作成を行い、ブラウザからのHttpアクセスに対して、Javaのプログラムを実行することに成功しました。
今回はサーブレットとJSPファイルを使って画面の表示を行ってみようと思います。
本記事以外のコンテンツはこちらから閲覧可能です。
なるべく、初心者目線で作成するつもりですが、分かりづらい部分ありましたら、コメント頂きたいです。
動作環境
| 種類 | バージョン |
|---|---|
| OS | Windows 11 Professional 21H2 |
| Eclipse | 2022 Full Edition |
※Eclipseのダウンロードについては、こちらの記事をご確認ください。
前提
本記事はサーブレットの作成の記事で作成したプロジェクトを編集します。
JSPの作成
プロジェクト名を右クリック > 新規 > JSPファイル をクリックします
作成場所とファイル名を指定して完了ボタンをクリックします。
今回はwebappフォルダの直下にHello.jspというファイル名で作成します。
JSPの変更
JSPを以下のように変更します。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
// Servletのデータ受け取り
request.setCharacterEncoding("UTF8");
String strMessage = (String) request.getAttribute("message");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>
<%=strMessage%>
</p>
</body>
</html>
<%
// Servletのデータ受け取り
request.setCharacterEncoding("UTF8");
String strMessage = (String) request.getAttribute("message");
%>
の部分で、Javaソース内でセットした変数の値をstrMessageに代入しています。
今回はJavaソース内でmessageという属性に値が設定された想定でのコードです（Java側のコードは後ほど）
<body>
<p>
<%=strMessage%>
</p>
</body>
こちらのソースでHTMLのコードに変数strMessageの値を埋め込んでいます。
サーブレットの変更
JSPの実装に合わせて、java側のコードも編集します。
JSP側ではmessageの属性が作成され値が設定されていることを期待しているため、以下のようにdoGetメソッドを編集します。
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 呼び出し元Jspからデータ受け取り
request.setCharacterEncoding("UTF8");
// 呼び出し先Jspに渡すデータセット
request.setAttribute("message", "HelloWorld");
// Hello.jsp にページ遷移
RequestDispatcher dispatch = request.getRequestDispatcher("Hello.jsp");
dispatch.forward(request, response);
}
doGetのメソッドの引数にはHttpServletRequest型の変数とHttpServletResponse型の変数の2つが存在します。
requestはクライアントからのリクエスト情報が格納されています、responseにはクライアントへ返却するための値を設定します。
JSPを利用する場合は、フォーワードという仕組みを利用して画面表示を行います。
getRequestDispatcherにより、Hello.jspリソースのDispatcherを取得し、forwardメソッドにより処理を転送します。
転送時に引数として渡す、requestオブジェクトにmessage属性をセットしておくことで,jsp側で参照が行えるようになります。
Getパラメータの取得
サーブレット側でGETパラメータを取得する場合はrequestオブジェクトのgetParameterメソッドを指定します。
引数としてパラメータのキーを指定します。getParameterMapメソッドで一括でパラメータを取得することもできます。
以下のようにサーブレットのコードを変更してみます。
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String name = request.getParameter("name");
// 呼び出し元Jspからデータ受け取り
request.setCharacterEncoding("UTF8");
// 呼び出し先Jspに渡すデータセット
if (name != null) {
request.setAttribute("message", "Hello," + name);
} else {
request.setAttribute("message", "Hello");
}
// Hello.jsp にページ遷移
RequestDispatcher dispatch = request.getRequestDispatcher("Hello.jsp");
dispatch.forward(request, response);
}
nameパラメータのた値を取得し、値がセットされている場合とされていない（null)場合で条件分岐し、セットされている場合は画面に表示するように変更しました。
ブラウザからパラメータをセットしてENTERします。
以下の画像の通り指定したnameが表示されました。
フォワードの応用
jspを利用する場合は上記のようにgetRequestDispatcherにJSPファイルのパスを指定しました。
getRequestDispatcherの引数には別のサーブレットを指定することもできるため、ひとつ実験してみます。
まずは、GoodbyeServletという新たなサーブレットクラスを作成します（作成方法はこちらをご確認ください)。
作成したGoodbyteServlet.javaのdoGetメソッドを一部変更します。
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.getWriter().append("Goodbye");
}
画面にGoodbyeと表示します。
続いて、HelloServlet.javaのdoGetメソッドも変更します。
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String name = request.getParameter("name");
// 呼び出し元Jspからデータ受け取り
request.setCharacterEncoding("UTF8");
// 呼び出し先Jspに渡すデータセット
if (name != null) {
request.setAttribute("message", "Hello," + name);
}
// Hello.jsp にページ遷移
RequestDispatcher dispatch;
if (name != null) {
dispatch = request.getRequestDispatcher("Hello.jsp");
} else {
dispatch = request.getRequestDispatcher("GoodbyeServlet");
}
dispatch.forward(request, response);
}
if (name != null) {
dispatch = request.getRequestDispatcher("Hello.jsp");
} else {
dispatch = request.getRequestDispatcher("GoodbyeServlet");
}
上記の処理によりパラメータにnameが指定されていなかった場合ないGoodbyeServletへフォワードするように変更しました。
以下、動作確認結果です。
nameを指定しなかったのでさよならといわれてしまいました。
インクルードを使ったヘッダーの表示
インクルードはJSPファイルの中に別のJSPを埋め込む仕組むです。
例えば、複数の画面(jsp）において、共通のヘッダーやフッターを表示したい場合に利用します。
利用方法は以下のようなincludeディレクティブをJSPファイルの表示したい箇所に記載するだけです。
<%@include file = "ファイルのパス" %>
試してみましょう。
まずはHeader.jspというファイルを新規で作成します（作成方法はこちら)。
次にHeader.jspファイルを以下のように書き換えます。
<%@ page contentType="text/html; charset=UTF-8" %>
ヘッダー情報の表示
<hr style="text-align: left; margin-left: 0px; height:2; background-color:'red'; width:150"></hr>
Hello.jsp側も変更します。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
// Servletのデータ受け取り
request.setCharacterEncoding("UTF8");
String strMessage = (String) request.getAttribute("message");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ハロー</title>
</head>
<body>
<%@include file= "Header.jsp" %>
<p>
<%=strMessage%>
</p>
</body>
</html>
bodyタグ内に以下を追記してます。
<%@include file= "Header.jsp" %>
動作確認してみます。
画面に「ヘッダー情報の表示」という項目が追加されました。
※nameパラメータを渡さないとgoodbyeが表示されるので注意
最後に
今回はJSPファイルを使った基本的な画面表示の方法について整理しました。
次回は、ボタンやインプットなどをフォーム追加とサーブレット側での入力内容の取得する方法について、整理する予定です。
他の記事についてはこちらから御覧ください。