ブラウザでindex.htmlをアクセスすると、
サーバーは外枠のタグとjavascriptのリンクとcssのリンクを記述したhtmlを送出し、
それを受け取ったブラウザはタグを表示しjavascriptとcssを要求し受け取って
そのjavascriptにしたがって画面名取得ＡＰＩを呼び出し
表示する画面の名前としてログイン画面を受け取る。
それに従ってログイン画面が表示される。
そのあと、
ログインＩＤとパスワードを入力してログインボタンをクリックされると
ログインＩＤとパスワードの値を取得しそれを持って認証ＡＰＩを呼び出す
バックエンドは評価しエラーならばエラーステータスとエラーメッセージを返す
ブラウザはエラーが返ってきたら、受け取ったエラーメッセージをログイン画面に表示
バックエンドが評価しOKならばセッション情報にユーザー権限などを記憶し
成功ステータスと次期画面名を返す。
ブラウザは成功ステータスを受け取ったら次画面名に沿ってその画面を表示
今のところログインの成功後はダッシュボード画面に固定で
ひとまずログアウトボタンだけの画面を表示する
ログアウトボタンがクリックされると
ログアウトAＰＩを呼び出し、バックエンドでログアウト処理をして
次画面名としてログイン画面が返ってくるので
それにしたがってログイン画面を表示する。
このような流れを実現するために
画面ブロック表示ロジック、部品表示ロジック
起動時イベント、各APIレスポンスイベント、ログインボタンクリックイベント、
ログアウトボタンクリックイベント
などを実装した。
これで、ログイン画面とダッシュボード画面を繰り返し表示できるようになった。
ここまでバックエンド主導のSAPフレームワークを意識しながら
自分でルールを決めながら進めたのでかなり時間が掛かり辛かったが
なかなか楽しい作業でもあった。
次からはダッシュボードの画面周りを実装していくことになる。
進めた途端にルールを大きく変更することになるかもしれないが
楽しみながらやっていこう。
