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 を継承)
-
以下のコードをコピー&ペースト。
1234567891011121314151617181920212223242526272829303132333435363738394041package
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 (クラス名を指定)
-
以下のコードをコピー&ペースト。
12345678910111213package
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 (任意のファイル名)
-
以下のコードをコピー&ペースト。
1234567891011<%@ 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] を選択。
テスト実行
最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね!」または 「Twitter の フォロー」 お願いします!!