Widgetの登録チェック
O:さっきはおつかれさま！ ここももがんばろうね♪
P:ここも長いのかな？
O:ううん。画面をちょこっとやって、さっき作ったActionの流れを説明して終わりよ。操作手順も01〜03までしかないわ。
P:そっか、オリヴィアが生き生きしてるから、キツイのかと思っちゃった！
O:(完全にドS扱いね……)
01 「ScreenFlow」>「MainFlow」の「BookDetail」WebScreenをダブルクリックで開き、図のように画面下部にある【Save】の横に、【OK】を追加してください。
02 【OK】のプロパティを図のように変更します。
- Name:SaveCheckDate
- Label:"データの更新(非表示)"
- Method:Ajax Submit
- Destination:Save
- IsConfirmed:True
- Style:"display: none;"
O:これで、Button【データの更新(非表示)】は24で設定した「 ClickSaveCheckDate 」 Actionと連動したわ。
03 この時点でエラーは全て消えているので、【Publish】を押して、モジュールを更新してください。
- もし、Publishできなければ、配置や設定に漏れがあると思われます。図のようにServiceStudio画面左下「True Change」タブのエラーを確認して解消してください。
- 図を参考にエラーを直接ダブルクリックすることで、エラーの原因元までジャンプできます。（※画像は一例です。エラーは個人の操作・設定によって異なります。）
P:どうしても、エラーが解消できなかったらどうしたらいい？
O:うーん、すごく言いづらいんだけど、エラー表示の赤色が消えて、通常の緑色になるまで手順を戻すしかないわ。他には面倒だと思うけど、セーブせずに１度Service Studioを閉じて5-1からやり直すしかないわね。
P:それでも解決しなかったら？
O:操作そのものが間違ってるかもしれないわ。それは私の説明のせいかもしれないけど。
もし、どうしても上手くいかなかったら、どこでエラーが出たか、できるだけ詳細にコメントしてね。
P:コメントしてね！
O:とりあえず、Widgetの登録チェックの操作はこれで終了よ。
P:あと何するの？
O:ここからは「Save」Actionが実際にどのように動いてるか説明するわね。
―「Save」Actionの大まかな流れ―
- Web画面で【Save】をクリックすると、図のように①登録するデータのチェックを行い、問題無ければ自動で【SaveCheckDate】がクリックされます。
- この時、Actionの登録チェック09で作成した② 「IsConfirmed」の値がtrueに変更され、そして再度「Save」Actionが実行されます。
- リスタートしたフローはActionの登録チェック06で作成した③「If」による判定でTrueのフローに進みます。そこで新規登録または更新が行われ、それぞれの画面へ遷移する事ができるようになりました。
O:ここまでPublishせずに続けた人はお疲れさま。”書籍詳細画面に書籍レビューのリンク”に入る前に、ちゃんと休憩してね。
P:じゃあ、オリヴィア。休憩にペスカトーレ食べたい！
O:あ、最初の話ね。はいはい、ちょっと待ってね。
書籍詳細画面に書籍レビューのリンク
P:タイトルの「書籍詳細画面に書籍レビューのリンク」って、なあに？
O:0-2.操作を始める前に（データモデル）の画面遷移図には書籍詳細画面から書籍レビューに遷移してるの。
P:ホントだ。書籍レビュー登録入力画面と繋がってるね。
O:ここからは、書籍詳細画面の「BookDetail」から書籍レビュー登録入力画面の「ReviewDetail」へのリンクと、レビュー登録情報の一覧など、いくつかのWidgetを作っていくわ。
01 「ScreenFlow」>「MainFlow」の「BookDetail」WebScreenをダブルクリックで開き、図のようにToolBox内最上部「Container」を【Cancel】の下に置きます。
O:「Container」はウェブ画面のレイアウトを整理することができるわ。他のWidgetをドロップして、まとめて移動とかグループとして扱えるの。名前のとおり、入れ物と考えてね。
P:コンテナってすごい大きな入れ物な気がするね。
O:そうね、貨物輸送用の大きな箱の方がイメージ強いかも。
02 設置した「Container」をクリックして、図02のように“書籍レビュー”と入力してください。「Container」内に自動で「Text」ラベルが作成されます。
P:「Text」の入力ってどうするの？
O: 「Container」をクリックしたら、そのままキーボードで入力して大丈夫よ。「Text」はキーボードで文字を入力した瞬間、その時に選択した Widgetの周囲で「Text」が置ける場所（右側が多い。右側にスペースがなければ改行する）を判断して自動的に作成されるわ。例えば、すでに設置し てあるButtonを選択して文字入力した場合、Buttonの中にある文字じゃなくて、Buttonの右に「Text」が入力されるの。
P:文字を入力したら勝手に「Text」ができちゃうってこと？
O:そうね、場合によっては必要ないところに入ってしまうから、「Text」を使う時はちょっと気をつけてね。
03 「Text」をクリックすると、“Abc Text”と表示されます。表示された“Abc Text”をもう一度クリックすると、図のように上に２段増えます。次の説明のために、2番目の「Container」をクリックしてください。
P:この3段重ねってなあに？
O:選択したWidgetの構成を表示しているの。
一番下がWidget、2番目にそのWidgetが入っている「Container」、3番目がその「Container」を収める「MainContent」になるわ。
P:「MainContent」の中の「Container」の中の「Text」ってことなんだね。
04 「Container」を選択した後、図のように画面上部にある「Style」リスト＞「Heading2」を選択してください。
O:「Style」は名前のとおり外観を編集するの。「Style」内のリストから色や大きさ、背景色のセットを選ぶことができるわ。
P:セットでしか変えられないの？
O:自分で細かく設定するときは、eSpace上部中央の“CSS”（「Style」リストの右）と書かれた「StyleSeatEditor」を使って編集してね。
05 レビューを新規登録するリンクを作るので、図のように「書籍レビュー」Textの右にLink Widgetをドラッグ&ドロップして、"新規登録"と入力します。「MainFlow/ReviewDetail」でリンクを作成します。
- 「MainFlow/ReviewDetail」 へのリンクは、図のように「新規登録」LinkのプロパティのDestinationのドロップダウンメニューからSelect Destinationを選択し、「ScreenFlow」>「MainFlow」＞「BookDetail」を選んで、【OK】をクリックしてく ださい。
P:あれ、ちゃんとしたのに「Link」が赤くなったよ？
O:設定がまだ足りないの。ちゃんと次で説明するわ。
06 「Link」のプロパティを確認すると、「ReviewId」の欄が赤くなっているので、「Expression Editer」で"NullIdentifier()"と入力してください。「Expression Editer」の入力画面右下にある「Null」をクリックするだけで入力されます。
P:ねえねえ、なんでNullIdentifierなの？ 「ReviewId」いらないの？
O:「ReviewId」を参照しないことで、新規登録であることをEntityに示しているの。それに、レビューの新規登録だから、「ReviewId」はその時に作られるのよ。
P:そっか。「ReviewId」があったら更新になっちゃうもんね！
07 ToolBox内の「Table Records」を「新規登録」Linkのすぐ右に配置します。
O:「Table Records」は対象のEntityの一覧を表示するの。
08 ServiceStudio右上の「Data」＞「Entity」＞「Review」Entityを「TableRecord」にドロップします。
O:これで「Review」Entity内のAttributeを参照に「TableRecord」が構成さたわ。
P:「TableRecord」の名前も「ReviewTable」に代わってるね。
O:ドロップしたEntityの名前に合わせて変更されるの。
09 「ReviewTable」はまだ構成されただけで、対象の「Entity」と繋がっていません。「Review」Entityとデータを連動させるた め、「ReviewTable」のプロパティ「Source Record」からドロップダウンを開き「(New Aggregate 'GetReviewByBOOKID')」をクリックします。
P:これで「ReviewTable」が「Review」Entityとデータを連動したの？
O: そう。確認のため、ServiceStudio右上の「Interface」＞「MainFlow」＞ 「BookDetail」 ＞「Preparetion」をダブルクリックで開いて、「GetBookById」の下に「GetReviewsByBOOKID」があることを確認し てみて。
P:わかった！ でもこの「GetBookById」ってなに？
O:「GetBookById」は4章で「BookDetail」を作成したときに自動で作られたの。この「GetBookById」は「BookDetail」WebScreenの「ReviewTable」の上にある「BookForm」と連動しているわ。
―次の工程への前置き―
P:これで「書籍レビュー」の「新規登録」と「更新」の両方のリンクができたね！
O:だけど、このままだと新規で書籍を登録したときに、このリンクが見えちゃうの。
P:そっか！ 書籍データも無いのに「書籍レビュー」は作れないね！
O:書籍の「新規登録」のときは、このリンクを表示させないようにするの。
P:うん、わかった！ でも、どうするの？
O:ここは「BookDetail」WebScreen上部の「Title」を参考にしましょう。
「Title」左上のひし形のアクション「If」をダブルクリックしてみて。
P:入力画面に"GetBookById.List.Current.Book.Id = NullIdentifier()"って書いてるね。
O:これは、Book.Idの有無を確認して、新規登録なら"New Book"とTextを表示するの。更新だったら前画面の書籍一覧で選択した書籍名を表示するわ。
こんな風にWebScreenでの「If」は条件によって表示を変えることができるの。
P:これを応用するんだね！
10 画面右上の"＜＞"と表示されている「Show Widget Tree」をクリックします。
O:これは現在開いているWebScreenの構成を「Show Widget Tree」の「MainContent」の左にある三角のアイコンをクリックすることで、「MainContent」の構成を展開して確認できるわ。
11 「MainContent」を右クリック＞「Insert Widget」＞「If」をクリックして、「MainContent」に「If」を追加します。「If」の条件文は以下です。
GetBookById.List.Current.Book.Id = NullIdentifier()
P:あ、これ「Title」の「If」と同じだ！ Book.Idの有無で表示を変更するんだよね。
12 「Heading2」Container「Link」「ReviewTable」の３つをまとめて選択します。
選択方法としては以下の2種類のいずれかで複数選択できます。
- 「Heading2」 Containerをクリックし、SHIFTキーを押しながら「ReviewTable」をクリックします。
- または「Heading2」 Containerをクリックし、CTRLキーを押しながら「Link」「ReviewTable」をそれぞれをクリックします。
13 選択した３つを「If」の「False」にドラッグ&ドロップします。
O:うまくいかなかったら、選択した３つを右クリック＞Cutして、「False」に右クリック＞Pasteで移動させられるよ。
P:これで、書籍レビューのリンクおよび、5-1『書籍詳細画面』は終了だね！
O:ええ、おつかれさま。ゆっくり休んで、次に行きましょう。
<<前ページ：５.WidgetとAction | 次のページ：5-2．書籍レビュー画面 ＞＞