Eclipse を使った Webアプリケーション を開発の入門として、 HelloWorld アプリ の作成をしてみます。 良く作られる MVC (Model-View-Control) のカタチとして最低限のものを作ってみます。
目次
概要
今回作成する Webアプリケーション は単純に画面に "Hello World !" を表示させるだけです。 ただ、これから作る Webアプリケーション のひな形になれるよう、 MVC のカタチをとってみます。
MVC とは アプリケーションの作り方で、 Model、View、Control の 3機能 に分割してアプリケーションを作る作り方です。 今回の Java (Apache + Tomcat) であれば Model は JavaBeans (Javaクラス)、 View は JSP、Control は サーブレット になります。
プロジェクトの作成
Webアプリケーションプロジェクトの骨組みを作ります。
-
[File]-[New]-[Dynamic Web Project] を選択。
-
Project name に任意の名前を入力。
-
[New Runtime] を押下。
（Eclipse インストール後の初回起動の場合ターゲットランタイムの設定が必要です。一度設定されているようであればこの手順はスキップ。）
-
インストールした Tomcat のバージョン、[Create a new local server]を選択して [Next] を押下。
-
Tomcat を インストールしたディレクトリ（CATALINA_HOME）を指定して [Finish] を押下。
（デフォルトインストール先の場合 "C:\Program Files\Apache Software Foundation\Tomcat 8.0"）
-
[Next] を押下。
-
デフォルト設定のまま [Next] を押下。
-
[Generate web.xml deployment descriptor] を選択して [Finish] を押下。
（web.xml は Webアプリケーション構成を記述するファイルです。）
実装
実装では Servlet、JavaBeans、JSP の 3ファイル を作成します。
Servlet (Controller)
-
新規作成したプロジェクト [WebApplication1] を右クリック、[New]-[Servlet] を選択。
-
追加するサーブレットの設定をして [Finish] を選択。
- Projcet
- WebApplication1 (追加先プロジェクト名を選択)
- Sorce folder
- \WebApplication1\src (プロジェクト配下の src を指定)
- Java package
- sample.controllers (いわゆる名前空間の指定)
- Class name
- HelloWorldController (クラス名を指定)
- Superclass
- javax.servlet.http.HttpServlet (必ず HttpServlet を継承)
-
以下のコードをコピー&ペースト。
package sample.controllers; import java.io.IOException; 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 sample.models.HelloWorldModel; /** * Servlet implementation class HelloWorldController */ @WebServlet("/HelloWorld") public class HelloWorldController extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public HelloWorldController() { super(); } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // Modelの生成 HelloWorldModel model = new HelloWorldModel(); model.setMessage("Hello World !"); // ViewへModelデータを渡す準備 request.setAttribute("model", model); // Viewを表示 this.getServletContext() .getRequestDispatcher("/WEB-INF/sample/views/HelloWorldView.jsp") .forward(request, response); } }
L14: このサーブレットを呼び出すときのURLを指定します。ここで指定した値は "http://サーバー名/プロジェクト名/○○" の "○○" に相当する部分になります。
L34: JSPへデータを渡す準備をします。第1引数で指定した文字列を使ってJSP側でデータを取り出します。
L37～L39: JSPへ処理を転送させます。 JAVAではフォワードと呼ぶそうです。
JavaBeans (Model)
-
新規作成したプロジェクト [WebApplication1] を右クリック、[New]-[Class] を選択。
-
追加するクラスの設定をして [Finish] を選択。
- Sorce folder
- \WebApplication1\src (プロジェクト配下の src を指定)
- Package
- sample.models (いわゆる名前空間の指定)
- Name
- HelloWorldModel (クラス名を指定)
-
以下のコードをコピー&ペースト。
package sample.models; public class HelloWorldModel { private String message = ""; public void setMessage(String value){ this.message = value; } public String getMessage(){ return this.message; } }
JSP (View)
-
新規作成したプロジェクト [WebApplication1] を右クリック、[New]-[JSP File] を選択。
-
追加するJSPの設定をして [Finish] を選択。
- Enter or select the parent folder
- WebApplication1/WebContent/WEB-INF/sample/views (JSP配置先を選択)
- File name
- HelloWorldView.jsp (任意のファイル名)
-
以下のコードをコピー&ペースト。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>HelloWorldサンプル</title> </head> <body> <p>${requestScope["model"].message }</p> </body> </html>
L9: サーブレットでセットされたデータを取り出します。単純に ${model.message} といった記載もできます。
実行
実行環境準備
-
[Servers]タブへ移動。
-
追加されている [Tomcat v8.0 Server at localhost] を右クリック、[Add and Remove] を選択。
-
[Add All] を選択してすべてのプロジェクトを実行できるよう設定、[Finish] を選択。
テスト実行
-
[Run]ボタン を押下。
-
内部ブラウザを起動。
-
"http://localhost:8080/WebApplication1/HelloWorld" へアクセス。
