画面遷移を設計する

このシステム内で発生する画面遷移と、そのきっかけになるイベントを洗い出していきます。

メイン画面

No	イベント	遷移先	リクエスト	備考
1	初期表示	メイン画面	GET	システム初期表示
2	つぶやくボタン押下	メイン画面	POST	投稿時にエラーが発生した場合、エラーメッセージを表示して表示中のページを維持する。投稿に成功したら1ページ目に戻す。
3	前のページボタン押下	メイン画面	GET	前のページが無い場合、1ページ目に遷移する。
4	次のページボタン押下	メイン画面	GET	次のページが無い場合、最終ページに遷移する。
5	ねぎ登録ボタン押下	ねぎ登録画面	GET	-

通常は、前のページ/次のページが無い場合、ボタンをそのものを非活性にする、という設計にすることが多いと思いますが、今回は実装をシンプルにするためこのような設計としました。

ねぎ登録画面

No	イベント	遷移先	リクエスト	備考
1	初期表示	ねぎ登録画面	GET	-
2	登録ボタン押下	ねぎ登録画面	POST	登録時にエラーが発生した場合、エラーメッセージを表示する。
3	修正ボタン押下	ねぎ登録画面	POST	修正時にエラーが発生した場合、エラーメッセージを表示する。
4	削除ボタン押下	ねぎ登録画面	POST	削除時にエラーが発生した場合、エラーメッセージを表示する。
5	戻るボタン押下	メイン登録画面	GET	-

画面遷移を実装する

Controllerクラスを実装する

設計した画面遷移定義に基づいて、Controllerクラスを実装します。Controllerクラスは、リクエストに基づいて処理を行い、遷移先の画面を返します。多くの場合、実際の処理は次回以降作成していくServiceクラスで行い、ControllerクラスはServiceクラスの処理結果だけ受け取って、それによって遷移先の画面を返す、という構成(MVC+S)にすることが多いと思います。
クラスに@Controllerアノテーションを付与することで、そのクラスがControllerクラスであるとみなされます。

Controllerクラス

src/main/java/com/example/negitter/controller/NegitterController.java

@Controller
public class NegitterController {
    /**
     * 初期表示
     * 
     * @return メイン画面
     */
    @GetMapping("/")
    public String index() {
        return "negitter";
    }

    /**
     * ねぎ登録画面に遷移
     * 
     * @return ねぎ登録画面
     */
    @GetMapping("/register")
    public String register() {
        return "register";
    }

    /**
     * 前のページに遷移/次のページに遷移/ねぎ登録画面から戻る
     * 
     * @return メイン画面
     */
    @GetMapping("/negitter")
    public String negitter() {
        return "negitter";
    }

    /**
     * つぶやきを登録
     * 
     * @return メイン画面
     */
    @PostMapping("/negiit")
    public String negiit() {
        return "negitter";
    }

    /**
     * ねぎを登録
     * 
     * @return ねぎ登録画面
     */
    @PostMapping("/registerNegi")
    public String registerNegi() {
        return "register";
    }

    /**
     * ねぎを修正/削除
     * 
     * @return ねぎ登録画面
     */
    @PostMapping("/updateNegi")
    public String updateNegi() {
        return "register";
    }

}

ThymeleafテンプレートにPost/GetMappingへの紐付けを埋め込む

Thymeleafテンプレートに、Controllerクラスに定義したPost/GetMappingへの紐付けを埋め込みます。

メイン画面

src/main/resources/templates/negitter.html

(略)

-<a id="registerNegiBtn" class="btn btn-light" href="register.html">ねぎを登録</a>
+<a id="registerNegiBtn" class="btn btn-light" href="register.html" th:href="@{/register}">ねぎを登録</a>

(略)

-<a class="btn btn-light">前のページへ</a>
+<a class="btn btn-light" th:href="@{/negitter}">前のページへ</a>

(略)

-<a class="btn btn-light">次のページへ</a>
+<a class="btn btn-light" th:href="@{/negitter}">次のページへ</a>

(略)

-<form method="POST" action="#">
+<form method="POST" action="#" th:action="@{/negiit}">

(略)

ねぎ登録画面

src/main/resources/templates/register.html


(略)

-<a id="backToNegiitsBtn" class="btn btn-light" href="negitter.html">戻る</a>
+<a id="backToNegiitsBtn" class="btn btn-light" href="negitter.html" th:href="@{/negitter}">戻る</a>

(略)

-<form method="POST" action="#">
+<form method="POST" action="#" th:action="@{/registerNegi}">

(略)

-<form method="POST" action="#">
+<form method="POST" action="#" th:action="@{/updateNegi}">

(略)

動作確認

画面遷移の定義が実装できたら、ビルドして画面遷移できるかどうか確かめてみましょう。

APコンテナ停止

動作確認は、VSCode上で行います。APコンテナとポートが被っているので、APコンテナを停止します。

$ docker stop ap
ap

Tomcat起動

VSCodeの「実行とデバッグ」から、Tomcatを起動します。

ブラウザからhttp://localhost:8080/negitterにアクセスして、メイン画面が表示されたら成功です。

一通り画面遷移を試してみて、想定通りの遷移をするかどうか確認しておきましょう。

まとめ

今回は、Controllerクラスを仮組みして、画面遷移の確認まで行いました。
次回は、Serviceクラスを作って、実際にDBに登録したデータを取れるようにしていきます。

それではまた。

Spring bootで簡単なWebアプリを作ってみる(画面遷移作成)

画面遷移を設計する

メイン画面

ねぎ登録画面

画面遷移を実装する

Controllerクラスを実装する

ThymeleafテンプレートにPost/GetMappingへの紐付けを埋め込む

動作確認

APコンテナ停止

Tomcat起動

まとめ