製品一覧画面と詳細画面を作る(基礎トレ2.1)
(前回の続き)
前回はほとんど説明だけで終わってしまいましたが、これから初歩的な業務用アプリケーションの設計に入ります。
このレッスンでは、入力フォームを設計し、入力したデータがサーバーに格納され、常に編集できる状態に持っていくまでの学習をします。
まず最初に製品一覧画面を作成します。
ということなので、まずはHTMLページをドラッグアンドドロップで作成します。
はい。作成完了。3秒で作れます!
次に、画面内のメニューバーを設計する。
メニューバーは1度設計すると全ページに反映されます。
ドラッグアンドドロップするだけなので猛烈に簡単です。
次に画面の設計を一気にやってしまう。
(コードレス開発のためほとんどプログラムは書かない)
製品一覧の設計。
爆速で開発する!!
そしてさらにもう一つ製品詳細(ProductDetail)画面を生成する
なんか過去の復習みたいな感じで大量に設計しまくってる。
いまやっているのは製品編集画面のIF文。
なんでIF文書いているのかというと、このページは製品詳細(ProductDetail)画面というやつで、工場で新しく製造した製品と、過去に製造した製品の編集画面の両方の表示機能を持たせた画面なので、製品一覧画面から「新製品登録ボタン」を押してこのページに飛んだ時には、新製品の登録画面を表示させ、製品一覧画面の製品名のリンクボタンからこのページに飛んだ場合には、そのボタンを押した当該製品の編集画面へ遷移する必要があるからIF文を使って分岐させているのです。
それを同一ページで対応させるためのIF(条件分岐)だということです。
という訳でその条件文はこちら
”ProductId = NullIdentifier()”
やばい。超簡単。
この条件文は
ProductId = ・・・・・・製品ナンバーが
NullIdentifier()・・・・ないとき
つまり、「製品ナンバーがないとき」というのが条件式です。製品ナンバーが存在しないときとは新製品のときであり、ということは新製品のときが真のときです。
よって、製品ナンバーが存在するとき、それは既存製品のときが偽のときだということです。その場合は、既存製品の編集画面を表示させる必要があります。
流石に何度もやりましたので、慣れました。超簡単です。
画面の上が真のとき、下が偽のとき
条件式で指定したとおり、製品ナンバーが存在しないときこの画面を開くと上段の「新製品」が表示される。
そして、製品一覧画面で製品ナンバーのリンクをクリックすると下段のようにMacBookなど既存の製品名が表示されることになる。
そして製品の情報画面にはFormを使う。
Formのディレクトリ(データ番地)の選択には「GetProductById.List.Current」を使う。
これはもう丸暗記する。
”GetProductById.List.Current”の意味は
GetProductById.(製品データベース)
List.(一覧表)
Current(当該データ)
となる。
よって、”GetProductById.List.Current“は、製品データベース一覧の当該データを取得するという意味を日本語において保持している。
少なくともOutSystemsはそう解釈している。
ここの設計は日本人エンジニアが一番嫌がる場所だと思います。
だって、全部英語で一番分かりにくいのはこの番地選択の部分だからです。
(トレーニングは続きます)