画面遷移の実現方法

Dashcombが提供しているメニュー、View、UI Componetを使って、パラメータ付きの画面遷移を簡単に実現できます。もちろん、パラメータなしの画面遷移はパラメータを設定しなければ、もっと簡単に実現できます。

準備

これから使う画面を二つ用意します。一つは遷移元の画面、もう一つは遷移先の画面です。
- 画面の作成はViewにご参照ください。

実現

遷移先画面のプロパティ領域を開きます。
「パラメータ」の横にある「+」アイコンを押します。

パラメータ名の初期値 keyName0 を key に変更します。
必要に応じて、「*」アイコンを押し、必須項目に指定することも可能です。
Labelコンポーネントをドラッグ＆ドロップして、パラメータ確認用ラベルを作成します。
そのプロパティ領域にある「ラベル文字」の初期値 label を key= {{currentPage.params.key}}に変更します。

遷移元画面のサブメニューを押して、遷移元画面を開きます。
Inputコンポーネントをドラッグ＆ドロップして、入力ボックスを作成します。
Inputのオブジェクト名 input1 を inputKey に変更します。

Buttonコンポーネントをドラッグ＆ドロップして、遷移用のボタンを作成します。
そのボタンを押して、ボタンのプロパティ領域を呼び出します。
「onClick」横のアイコンをクリックして、アクションエディタを呼び出します。
「アクション無し」を「メニューに移動」に変更します。
「メニュー」を押して、リストから遷移先のメニュー（画面）を選びます。
「パラメータ」の key 入力ボックスに {{inputKey.value}} を入力します。

「保存」ボタンを押すと、画面遷移機能の実現ができました。
確認するには、遷移元画面のInputに hoge を入力して、Buttonを押すと、遷移先画面に飛んで、確認用ラベル key= hoge を確認できます。

参照項目