Tip:
Highlight text to annotate it
X
このレッスンでは、デバッガを使って ページのライフサイクルを確認します。
まず、Screen Actionを開いて、
画面の後ろで何が起きているのか 確認しましょう。
Contact Detailページへ遷移するとき、
何が起きているのかをここに簡単に描くと、
遷移するとき、
ユーザーがいて、
ページのリクエストがContactIDを
サーバーに送ります。
Preparationが実行されると、
データベースからContactが取得されて
この結果を画面のFormに結びつけ、
ユーザーにレスポンスを送り返します。
ユーザーがSaveボタンを押すと、
サーバーへのもう一つのリクエストの トリガーとなり、
Save Actionが実行されて
実際にはUpdateContact Entity Action が実行されます。
UpdateContactは
データベースにContact情報を再度送り、
このSave Actionの後
ユーザーにListページが再送されます。
このときListページのPreparationが 実行され、
データベースからContactsを 再度取得します。
これらのContactsをTable Recordsに 結びつけて
サーバ側の読み込みの間、一つずつ レコードを読み込みます。
すべての読み込みが終わると、
ユーザーのブラウザにレスポンスを 送り返します。
開発環境にブレークポイントを追加して
このライフサイクルを一つ一つ見ていきましょう。
ここに戻り、ブレークポイントを
Contacts画面のPreparationの Save Actionにセットします。
デバッガを起動し、
ブラウザに戻ると、
Joana Riveraのページで
このContactの情報を変更し、
Saveボタンを押します。
最初のブレークポイントで停止しました。
Contact DetailsページのSave Action にいるのがわかりますね。
Form Recordの変数を見てみましょう。
ユーザーが変更した情報がここにあります。
データベースに入れたい新しい情報です。
In Useタブに戻り、StartノードをStep Overして、
Form WidgetのRecordプロパティを使い、
変更したContact情報を保持し、
UpdateContact Actionを使ってデータベース に送ります。
Step Overして
情報をデータベースに送り、
Continueを押してユーザーを Contactsページに遷移させます。
Contactページに行くと、
ページのPreparationが実行されます。
Step Overして
データベースからContactsを取得します。
Contact Listを見てみましょう。
Phone Numberが209に戻り、
Continueを押すと、
これらのContactsをTable Recordsに 読み込みます。
さらにStep Overすると
Joanaの電話番号が209になりました。
Continueを押してブラウザに戻ると、 ページが表示されました。
以上でレッスンを終了いたします。