Modern Web Development with ninjaframework

by Takafumi Yoshida

Slide 1

Slide 1 text

Modern Web Development with ninjaframework 岡山Javaユーザ会/吉田貴文(@zephiransas)

Slide 2

Slide 2 text

#jjug_ccc or #ccc_r56

Slide 3

Slide 3 text

岡山Javaユーザ会について • 岡山で勉強会やハンズオンやってます • 基本、ゆるふわ • Javaに限らずフリーに喋れます • 講師（常に）探してます

Slide 4

Slide 4 text

第1回勉強会

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Java8ハンズオン@後楽園

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

• 吉田貴文(@zephiransas) • 岡山でRailsを使ったパッケージソフト開発に従事 • 元々はSIerでJavaやってました • 岡山Javaユーザ会を主催 • 岡山でJava（や諸々）の勉強会を主催or参加 • 勉強会カメラマン(Nikon D600)

Slide 9

Slide 9 text

よろしくお願いします

Slide 10

Slide 10 text

Modern Web Development with ninjaframework 岡山Javaユーザ会/吉田貴文(@zephiransas)

Slide 11

Slide 11 text

ninjaframeworkの特徴 • 100% Pure Java • Play1を諦めた、Seasar2難民、etc… • Railsライクなフルスタックフレームワーク • 既存の良いライブラリを組み合わせる • Servlet,JPA,Flyway,FreeMarker,Guice,Bean Validator…

Slide 12

Slide 12 text

アジェンダ • 単純なCRUDアプリ • DBを使うプロジェクトをScaffold • マイグレーションでテーブルを作成 • 一覧画面の作成 • 新規登録画面の作成 • 画面表示とデータ保存

Slide 13

Slide 13 text

Scaffold • mavenからscaffoldする • 実行するには • あとはお好みの方法でIDEに取り込み • mvn idea:idea、mvn eclipse:eclipse

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Scaffoldで作成されるフォルダ(1) • ・assets • cssやjavascript,imageなど • ・conf • Routes,メッセージリソースなど • ・controller • コントローラ

Slide 16

Slide 16 text

Scaffoldで作成されるフォルダ(2) • ・dao • データアクセス層。通常はEntityManagerをInject してDBとのデータ入出力を行う • ・db.migration • Flywayでマイグレーションする際のSQLを置く

Slide 17

Slide 17 text

Scaffoldで作成されるフォルダ(3) • ・models • JPAのEntityを置く • ・views • FreeMarkerで書かれたテンプレートを置く

Slide 18

Slide 18 text

Migration • Flywayを使用 • db.migrationフォルダにSQLファイルを作成 • V3__.sql,V4__.sql・・・と言った連番を付与 • mvn ninja:runで実行時、未実施のマイグレーションがあれば、自動で実行

Slide 19

Slide 19 text

V3__.sql

Slide 20

Slide 20 text

モデルの作成 • modelsパッケージに作成 • JPAのEntityとして作成

Slide 21

Slide 21 text

一覧画面 • Routesの設定 • Controllerの作成 • Daoの作成 • Viewの作成

Slide 22

Slide 22 text

Routesの設定 • conf/RoutesにURLを定義 http://localhost:8080/book にGETでアクセス時、 BookControllerのindexメソッドを実行

Slide 23

Slide 23 text

Controllerの作成(1) • controllersパッケージに作成 • 表示するビューはコントローラ名とメソッドから決定される • 明示的に指定することも可能メソッド実行後、ビューとして views/BookController/index.ftl.htmlを返す

Slide 24

Slide 24 text

Daoの作成 • JPAを使用 • 全件を取得するfindAllメソッドを実装する EntityManagerをInjectする

Slide 25

Slide 25 text

Controllerの作成(2) BookDaoをInjectする一覧データをRequestスコープにセット

Slide 26

Slide 26 text

Viewの作成 • views/BookController/index.ftl.htmlを作成 • テンプレートエンジンはFreeMarker Controllerでセットしたbooksの各要素を、”book”として取得各Entityの値を埋め込み

Slide 27

Slide 27 text

一覧画面

Slide 28

Slide 28 text

新規画面 Part.1 • 登録フォームを表示するまで • Dtoの作成 • Routesの設定 • Controllerの修正 • Viewの作成

Slide 29

Slide 29 text

Dtoの作成(1) • 画面の入力内容を保持するクラス • modelsパッケージに作成 • 実際にはdto(form?)パッケージとかのほうがいいかも？ • 必要に応じて、Validation用のAnnotationを付与 • Hibernate Validatorを使用 • JSR303(Bean Validation)のAnnotationが使えます

Slide 30

Slide 30 text

Dtoの作成(2) 必須入力チェックのAnnotationを付与

Slide 31

Slide 31 text

Routesの設定 GETで/book/newにアクセスした場合 POSTで/book/newにアクセスした場合

Slide 32

Slide 32 text

Controllerの修正(2) 初期化したDtoをセットして画面を表示する表示するテンプレートを明示的に指定

Slide 33

Slide 33 text

Viewの作成 submit先は/book/newにPOSTメソッドで dtoの値を設定 form.ftl.html

Slide 34

Slide 34 text

新規画面

Slide 35

Slide 35 text

新規画面 Part.2 • 登録フォームの内容をValidation • エラーがあれば、フォームに表示 • Routesの設定 • Daoの修正 • Controllerの修正 • Viewの作成

Slide 36

Slide 36 text

Routesの設定 • conf/RoutesにURLを定義 http://localhost:8080/book/new にPOSTでアクセス時、BookControllerのcreateメソッドを実行

Slide 37

Slide 37 text

Daoにメソッドを追加 • Bookを1件追加するaddメソッドを追加 @Transactionalアノテーションで、メソッド内にトランザクションを適用する引数のEntityをinsert

Slide 38

Slide 38 text

Controllerの作成(1) Validationを有効にするエラーメッセージをRequestスコープにセットエラーがあればtrueを返す

Slide 39

Slide 39 text

Controllerの作成(2) Dtoの値をBook Entityに詰め替え Daoを使ってInsert 一覧へRedirect

Slide 40

Slide 40 text

Viewの作成 • エラーメッセージを表示する Validation内容に応じたメッセージ

Slide 41

Slide 41 text

新規画面 Validationのエラーが表示される

Slide 42

Slide 42 text

まとめ • Scaffold • マイグレーション(Flyway) • Controllerの作り方、Viewの呼び方(ninja,Guice) • Daoの作り方(JPA, Guice) • DTOを使ったValidation(Hibernate Validation) • Viewの書き方(FreeMarker)

Slide 43

Slide 43 text

• 今日解説したコードは以下の • GitHubリポジトリにアップしています • https://github.com/zephiransas/ninja-ccc • http://goo.gl/qpAhqh

Slide 44

Slide 44 text

ありがとうございました