Webプログラミング入門④　JSPの画面遷移

2023.04.10

今回は説明を始める前に、前回の課題の答え合わせをしましょう。
前回は知らん、という方は下のほうに今回の区切りの線を入れておくのでそこから読んでください。

それでは、前回の課題では以下の問題だったと思います。
「Java課題で設定された①：JPrint-Subject1」という文字列をJSPの次の行に追加する.。
条件は「Java課題で設定された①：」はJSPで表示、「JPrint-Subject1」はJavaのプログラムから連携する。

まず、問題で「Java課題で設定された①：」はJSPで、「JPrint-Subject1」はJavaのプログラムからと指定されているので、今回修正が必要なファイルは「JPrint.jsp」と「JPrintTest.java」ということがわかります。あとはそれぞれプログラムを見ていきます。まずはJSPから。

<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE HTML>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<p>Hello JSP</p>
		<p>Javaで設定された内容：${JContent}</p>
		<p>Java課題で設定された①：${JContent2}</p>
	</body>
</html>

JSPでは「Javaで設定された内容・・・」の行の後ろに文言を入れたいので、次の行に<p>タグで追加します。この時の注意ですが、${}の中身がJContentとなってしまうと、1個目の内容と同じものが表示されてしまうので注意しましょう。これでJSP側の修正は完了です。次にJava行きます。

import java.io.IOException;

import jakarta.servlet.ServletContext;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

public class JPrintTest extends HttpServlet {

	/**
	 * デフォルトコンストラクタ
	 */
	public JPrintTest() {
	}

	/**
	 * Http通信のGet用メソッド
	 * 
	 * @param request Httpリクエスト
	 * @param response Httpレスポンス
	 * @throws ServletException サーブレット例外
	 * @throws IOException 入出力例外
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		request.setAttribute("JContent", "Hellow JPrint");
		request.setAttribute("JContent2", "JPrint-Subject1");
		ServletContext sc = getServletContext();
		sc.getRequestDispatcher("/WEB-INF/JPrint.jsp").forward(request, response);
	}
}

次のJavaでは、JSPに連携する値”JPrint-Subject1”をJSPで設定した名前”JContent2”で設定するだけです。これで答え合わせとなります。簡単過ぎたかもしれませんが、どうでしたでしょうか。

前置きが長くなりましたが、それでは、JSPの画面から別のJSPの画面への画面遷移について説明していきます。

今回は説明が長くなりそうなので、最後のほうで説明します。取り敢えず、どんどんつくっていくところから。いつも通り動的Webプロジェクト「JspTransitionProject」を作成してください。

次にクラスを作成しますが、今回は2つのクラスを作成します。
JSPファイル1ファイルにつき、1つのクラスという役割をさせるため、2つ作成が必要となります。
クラス名は「JTran1」、「JTran2」としましょう。それぞれ、以下のようにソースを書きましょう。

JTran1.javaクラスから

import java.io.IOException;

import jakarta.servlet.ServletContext;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

public class JTran1 extends HttpServlet {

	/**
	 * デフォルトコンストラクタ
	 */
	public void name() {
	}

	/**
	 * Http通信のGet用メソッド
	 * 
	 * @param request Httpリクエスト
	 * @param response Httpレスポンス
	 * @throws ServletException サーブレット例外
	 * @throws IOException 入出力例外
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		ServletContext sc = getServletContext();
		sc.getRequestDispatcher("/WEB-INF/JTran1.jsp").forward(request, response);
	}
}

JTran2.java

import java.io.IOException;

import jakarta.servlet.ServletContext;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

public class JTran2 extends HttpServlet {

	/**
	 * デフォルトコンストラクタ
	 */
	public void name() {
	}

	/**
	 * Http通信のGet用メソッド
	 * 
	 * @param request Httpリクエスト
	 * @param response Httpレスポンス
	 * @throws ServletException サーブレット例外
	 * @throws IOException 入出力例外
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		ServletContext sc = getServletContext();
		sc.getRequestDispatcher("/WEB-INF/JTran2.jsp").forward(request, response);
	}
}

記載している内容はほぼ同じで、違っている箇所は遷移先のJSPの名前のみです。
JTran1.jspを表示するか、JTran2.jspを表示するかとなります。
それでは、続いて対応する2つのjspを作成・コードの記載をしていきましょう。

JTran1.jsp

<%@ page contentType="text/html; charset=UTF-8"%>

<DOCTYPE HTML>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>
	<p>JTran1の画面です</p>
	<a href="http://localhost:8080/JspTransitionProject/JTran2">JTran2画面へ</a>
</body>
</html>

JTran2.jsp

<%@ page contentType="text/html; charset=UTF-8"%>

<DOCTYPE HTML>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>
	<p>JTran2の画面です</p>
	<a href="http://localhost:8080/JspTransitionProject/JTran1">JTran1画面へ</a>
</body>
</html>

JTran1のJSPなら「JTran1の画面です」、JTran2なら「JTran2の画面です」と表示し、各ページに遷移させるためのリンクを表示させるようにしています。
続いてweb.xmlを書いていきましょう。

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="https://jakarta.ee/xml/ns/jakartaee" xmlns:web="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_5_0.xsd" id="WebApp_ID" version="5.0">
  <display-name>JspTransitionProject</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.jsp</welcome-file>
    <welcome-file>default.htm</welcome-file>
  </welcome-file-list>
  <servlet>
 	<servlet-name>tran1</servlet-name>
 	<servlet-class>JTran1</servlet-class>
 </servlet>
 <servlet-mapping>
 	<servlet-name>tran1</servlet-name>
 	<url-pattern>/JTran1</url-pattern>
 </servlet-mapping>
 <servlet>
 	<servlet-name>tran2</servlet-name>
 	<servlet-class>JTran2</servlet-class>
 </servlet>
 <servlet-mapping>
 	<servlet-name>tran2</servlet-name>
 	<url-pattern>/JTran2</url-pattern>
 </servlet-mapping>
</web-app>

今回は2つの画面があるため、「/JTran1」のURLの場合JTran1.java、[/JTran2」のURLに接続された場合JTran2.javaが読み込まれるようにweb.xmlに2つ分の記載（<servlet>、<servlet-mapping>）をしています。

それでは、ここまで書けたらいつも通り実行していきましょう。
今回は2つクラスがありますが、JTran1.javaから実行してください。

このような画面が表示されたら取り敢えずの起動は成功です。
次に今回の課題である画面遷移について確認していきましょう。
“JTran2画面へ”のリンクを押下してください。

分かりにくいですが、無事画面表示が変わり、”JTran2の画面です”と表示され、URLを見てもJTran2に変わっています。これでJSP間の画面遷移が成功したこととなります。

それでは、少し解説します。珍しく図を作成したのでこちらで説明します。

まず最初にサーバが起動するとブラウザから「・・・/JTran1」のリクエストが飛びます。
リクエストが飛ぶと、web.xmlでそのurlの場合どのjavaクラスを呼びに行くか確認し、次に対象のJavaファイル「JTran1.java」を呼びに行きます。その後、Javaの処理で「JTran1.jsp」を表示するという処理が記載されているため、ブラウザにJTran1.jspを返しての画面が表示されるという仕組みです。
※右側の三角形の部分についての説明となっています。

さらに今度は、JTran1の画面で”JTran2画面へ”のリンクを押下した際の動きについてです。
この際も同様の「・・・/JTran2」のリクエストが飛んで、対応するJavaファイル「JTran2.java」が呼び出され、その処理の結果「JTran2.jsp」が表示されるというような流れとなっています。
このように図に書いてみると結構シンプルかもしれませんね。
※下の三角形の部分についてのせつめいです。

今回はここまで。次回はJSPの画面からJavaへのデータの受け渡しについて勉強しましょう。
前回：Webプログラミング入門③　JSP-Javaの連携
次回：Webプログラミング入門⑤　JSPの画面からJavaへのデータの受け渡し

コメント

タイトルとURLをコピーしました