システム開発現場の道具箱

株式会社モノクレアが運営するIT技術系のブログです。システム開発の現場で役に立つ情報を掲載しています。

JavaEEで軽快にWEBアプリ開発

SIToolkit for Application Development(SIT-AD)はJava EE 7 Webアプリケーションを開発するためのMavenアーキタイプを提供しています。 ミドルウェアや各種開発ツールのインストール・セットアップを自動で行うため、すぐにWebアプリケーションの開発を始めることが出来ます。

ここではその中のjavaee7-web-tipsアーキタイプを使用し、プロジェクトの作成からDBスキーマを変更してWebアプリケーションに取り込むまでの手順を紹介します。 手順のおおまかな流れは以下の通りです。

  • 実行環境の準備
  • プロジェクトの作成
  • DBスキーマの変更
  • テストスクリプトの変更
  • ソースコードの変更

実行環境の準備

SIT-ADを使用するには以下のソフトウェアが必要です。

  • JDK 1.8.x
  • Firefox
  • Microsoft Excel / Libre Office (.xlsxファイルを編集できるソフトウェア)

また、以下のソフトウェアのいずれかが必要です。

  • Eclipse 3.5.x以上
  • NetBeans 8.x以上

セットアップの手順はコチラを参照してください。

クイックスタート(プロジェクトの作成->ビルド)

以下のSIT-ADのクイックスタートに従い、プロジェクトの作成とビルドを行ってください。 使用するjavaee7-web-tipsアーキタイプのバージョンは0.12です。

クイックスタートの中ではこれらの処理が行われています。

  • プロジェクトの作成
  • DBサーバーの起動
  • DBにテーブルを作成
  • DBからJPAエンティティクラスの生成
  • APサーバーの起動、Webアプリケーションの実行
  • Webアプリケーションの自動テスト

Webアプリケーションの操作

クイックスタートで「00_build-all」を実行したのと同様の操作(以降は"Mavenコマンド"と表記します)で「10_derby-run」、「20_was-liberty-run」を実行します。(*2) ブラウザでhttp://localhost:8080にアクセスし、ログイン、ユーザー情報の検索、登録ができることを確認します。

*2 注意 Eclipseでは「myproject_00_build-all:clean verify」の様に前後にプロジェクト名とMavenゴールが含まれますが、これらを除いたものを選択するようにしてください。

DBスキーマの変更->アプリケーションに取り込み

SIT-ADでは、DBマイグレーションを1回のMavenコマンドで実行できます。 DBマイグレーションを実行すると以下の処理が行われます。

  • DDLスクリプトをDBに対して実行
  • DBスキーマからJPAエンティティを生成

以降では例として、user_entityテーブルに生年月日(birth_date)カラムを追加し、画面上で入力・表示できるようにします。

変更前の状態の確認

IDEでDBに接続し、user_entityテーブルにbirth_dateカラムが無いことを確認します。

DB接続情報

Property Name
Database myproject-db
Host localhost
Port 1527
URL jdbc:derby://localhost:1527/myproject-db
Username app
Password password

IDEでBaseUserEntity.javaを開き、birthDateフィールドが無いことを確認します。

myproject
  - target/generated-sources/hibernate-tools
    - a.b.c.myroject.domain.user
      - BaseUseEntity.java

DBマイグレーションの実行

以下のDDLスクリプトをファイルに保存します。

DDLスクリプト

ALTER TABLE user_entity ADD birth_date DATE;

スクリプトファイル

  • ファイル名 : V2__add_user_birth_date.sql
  • 配置先 : myproject/tools/flyway/migration

Mavenコマンド「01_db-migrate」を実行します。

IDEでDBに接続し、user_entityテーブルにbirth_dateカラムが作成されていることを確認します。 IDEでBaseUserEntity.javaを開き、birthDateフィールドが作成されていることを確認します。

テストスクリプトの変更

テストスクリプトを開き、「生年月日」に値を入力するテストステップを追加します。

myproject/myproject/testscript/
  - IntegrationTest.xlsx

No.16の行が追加するステップです。

No 項目 操作 ロケーター ケース_001
14 ユーザー名 input firstName:text ユーザー
15 性別 choose gender:radio 男性
16 生年月日 input birthDate:text 1955/02/24

テストステップを追加したらIntegrationTest.xlsxを保存して閉じます。

テストスクリプトの実行

Mavenコマンド「30_it」を実行します。 以下のエラーが発生しテストが失敗します。

予期しないエラーが発生しました ロケーター(=birthDate:text)で指定される要素は画面上で見つかりませんでした。ロケーターが誤っているか、操作のタイミングが早い可能性があります。

ソースコードの変更

DBスキーマの変更を画面に取り込みます。 以下の3つのxhtmlファイルを変更します。

myproject/src/main/webapp
  pages/management
    - user-input.xhtml
    - user-list.xhtml

user-input.xhtmlの変更

「性別」ラジオボタンの下に「生年月日」テキストボックスを追加します。

<cmp:SelectOneRadio id="gender" label="性別" value="#{userInputController.entity.gender}" selectItems="#{userInputController.性別}" />
<!-- add ↓ -->
<cmp:inputText id="birthDate" label="生年月日" value="#{userInputController.entity.birthDate}" >
  <f:convertDateTime pattern="yyyy/MM/dd" for="value"/>
</cmp:inputText>
<!-- add ↑ -->

user-list.xhtmlの変更

「性別」列の横に「生年月日」列を追加します。

      <h:column>
        <f:facet name="header">
          <h:commandLink action="#{userListController.sort('gender')}" value="性別">
            <f:ajax render="@form" />
          </h:commandLink>
        </f:facet>
        <h:outputText id="user-gender" value="#{u.genderCd}" styleClass="user-gender ">
        </h:outputText>
      </h:column>

<!-- add ↓ -->
      <h:column>
        <f:facet name="header">
          <h:commandLink action="#{userListController.sort('birthDate')}" value="生年月日">
            <f:ajax render="@form" />
          </h:commandLink>
        </f:facet>
        <h:outputText id="user-birthDate" value="#{u.birthDate}" styleClass="user-birthDate ">
           <f:convertDateTime pattern="yyyy/MM/dd"/>
        </h:outputText>
      </h:column>
<!-- add ↑ -->

Mavenコマンド「30_it」を実行し、テストが正常終了することを確認します。

ブラウザでもhttp://localhost:8080/pages/management/user-input.xhtmlhttp://localhost:8080/pages/management/user-list.xhtmlにアクセスし、「生年月日」が追加されていることを確認します。