「実践トレーニング④ ステップの作成」について、手順を解説します。
この章のポイント:
- ステップのレイアウト作成
- 入力変数の作成
- ボタンの作成
- トリガの作成
関連記事:
手順
アイコンウィジェットの配置
登録ステップを開き、ツールメニューよりアイコンのウィジェットを挿入し、画像の通り配置する
右上、在庫の詳細を入力するエリアの作成
まずは右上のエリアを作成します。
- ツールバーのテキストよりテキストを挿入し、画面右のウィジェットタブで文言やフォントサイズを変更して配置する
- ツールバーの入力よりテキストを挿入し、データソースの変数を作成・フォントサイズを変更して配置する
・作成する変数:2個
・変数名:「アイテム」「場所」
Tips:ウィジェットの位置を揃えたい場合は、ctrlもしくはshiftを押しながらウィジェットを選択>画面右の位置を揃えるメニューよりワンクリックで揃えられます。 - ツールバーのボタンよりボタンを挿入し、ボタン名を「クリア」、色、境界の半径(丸みを帯びたデザインへの変更)を48に変更して配置する
※ボタンのトリガは本記事の最後に設定します。
右下、数を入力するエリアの作成
続いて右下のエリアを作成します。
- ツールバーのテキストよりテキストを挿入し、画面右のウィジェットタブで文言やフォントサイズを変更して配置する
- ツールバーの入力より数値を挿入し、データソースの変数を作成・フォントサイズを変更して配置する
・作成する変数:3個
・変数名:「削除数量」「追加数量」「移動数量」 - ツールバーの入力よりテキストを挿入し、データソースの変数「移動先」を作成して配置する
- クリアボタンの作成同様、ツールバーのボタンよりボタンを挿入し、ボタン名・色・境界の半径(丸みを帯びたデザインへの変更)を変更したボタンを3つ(削除・追加・移動)配置する
※ボタンのトリガは実践トレーニング⑧で設定します。
クリアボタンのトリガ設定
クリアボタンを選択し、画面右のウィジェットタブよりトリガ横「+」をクリックし、
新規アクションを追加してボタンが押されたときに全ての変数がクリアされるトリガを設定する
Tips:アクションは右のごみ箱マーク横のアイコンをクリックするとコピーが可能です。
開発者モードでの動作確認
最後に開発者モードで、設定したトリガが問題なく動作するかを確認します。
- 画面右上のテストをクリックし、開発者モードを立ち上げる
※別ウィンドウで開きます。 - アプリを開始し、クリアボタンのトリガが問題なく動作するかを確認する
次へ進む:実践トレーニング⑤ テーブルの作成