製品識別ポップアップの構築
このセクションでは、製品 ID 用のポップアップをもう 1 つ追加します。
1. Identification ビューで、別の「ポップアップ」ウィジェットをキャンバスに追加し、次のプロパティを設定します。
◦ 「クラス」 - 「full-page-popup」と入力します。
◦ 「幅 (px、%、vh、em)」 - 「100%」と入力します。
◦ 「高さ (px、%、vh、em)」 - 「100%」と入力します。
◦ 「表示」 - チェックボックスをオンにします。
◦ 「Studio ID」 - 「productIdentifiedPopup」と入力します。
2. プロジェクトツリーで scan-1 をクリックして、そのプロパティを表示します。「値の取得」イベントをプロジェクトツリーの landingPagePopup にドラッグアンドドロップします。「イベントハンドラを選択」ウィンドウで「ポップアップを表示」を選択し、「バインド」をクリックします。
3. 次に、「グリッドレイアウト」ウィジェットを新しい「ポップアップ」ウィジェットに追加して、レイアウトをさらに構造化します。
4. 「グリッドレイアウト」ウィジェットが選択されている状態で、「詳細」枠の「行の高さを均等に分配」チェックボックスをオンにします。
5. (「詳細」枠の「グリッドの操作」で) 「行を追加」を 2 回クリックして、グリッドにさらに 2 行追加します。
6. 1 行目は空のままにします。
7. 2 行目を選択し、次の操作を行います。
◦ 「フレックス方向」を「列」に設定します。
◦ 「コンテンツを両端揃え」を「中央」に設定します。
◦ 「アイテムを整列」を「中央」に設定します。
◦ 「ラベル」ウィジェットを追加し、以下のプロパティを設定します。
▪ 「テキスト」 - 「Product identified」と入力します。
▪ 「クラス」 - 「simple-label title-label」と入力します。
▪ 「Studio ID」 - 「productIdentifiedLabel」と入力します。
◦ 2 番目の「ラベル」ウィジェットを追加し、以下のプロパティを設定します。
▪ 「テキスト」 - 「***」と入力します。
▪ 「クラス」 - 「simple-label sub-title-label」と入力します。
▪ 「Studio ID」 - 「productIDLabel」と入力します。
◦ プロジェクトツリーで scan-1 をクリックして、そのプロパティを表示します。「スキャンされた値」プロパティを、プロジェクトツリーの productIDLabel にドラッグアンドドロップします。「バインディングターゲットを選択」ウィンドウで「テキスト」を選択して、「バインド」をクリックします。
8. 3 行目を選択し、次の手順を実行します。
◦ 「フレックス方向」を「行」に設定します。
◦ 「コンテンツを両端揃え」を「中央」に設定します。
◦ 「アイテムを整列」を「終了」に設定します。
◦ 「パディング (例 10px 10px 20px 10px)」を「20px」に設定します。
9. 次に、3 行目に「ボタン」ウィジェットを追加し、次のプロパティを更新します。
◦ 「テキスト」 - 「Show the product」と入力します。
◦ 「クラス」 - 「long-button--green」と入力します。
◦ 「Studio ID」 - 「showProductButton」と入力します。
10. 新規ボタンの「クリック」イベントを Visualization ビューにドラッグアンドドロップします。「イベントハンドラを選択」ウィンドウで「移動」を選択し、「バインド」をクリックします。
11. 次に、エクスペリエンスを再起動するフローを構築します。