レスポンシブなユーザーインターフェイスを作成する
⟩
⟩
⟩
⟩
⟩ Create a responsive user interface

レスポンシブなユーザーインターフェイスを作成する

異なるサイズのビューポートに合わせて調整された複数のレイアウトのある
FactoryTalk Optix アプリケーション
 を開発します。
  1. さまざまなアプリケーション レイアウトの画面タイプを作成します。「画面」を参照してください。
    ヒント: まず、小、中、大など、さまざまなビューポート用に 3 つのレイアウトを開発します。詳しくは、「レスポンシブデザインの画面サイズとブレークポイント - Windows アプリ | Microsoft Learn」をご覧ください。
  2. ウィンドウの幅 (および高さ) を読み取り、ブレークポイントに基づいて値を出力する NetLogic を作成します。
    たとえば、ウィンドウ幅を読み取り、
    小
    、
    中
    、
    大
     の列挙値を返す NetLogic を作成します。
    ランタイムに、NetLogic は、ウィンドウのサイズを変更し、ブレークポイント値を超えたときに値を返します。
  3. NetLogic によって出力された値を、画面タイプをターゲットとするダイナミックリンクに変換するキー値コンバータを使用してパネルローダーを作成します。
    ランタイムに、パネルローダーはウィンドウ幅に基づいて特定の画面タイプを表示します。ウィンドウのサイズを変更し、ブレークポイントの値を超えると、アプリケーションのレイアウトが変更され、さまざまなビューポート サイズに合わせて調整されます。
  4. (オプション) サポートされている Web ブラウザでレスポンシブ アプリケーションを実行するには:
    1. Web プレゼンテーションエンジンを追加します。「プレゼンテーションエンジンを構成する」を参照してください。
    2. Web ブラウザ ウィンドウでプロジェクトをストレッチします。
      [プロジェクトビュー]
       で
      [MainWindow (type)]
       を右クリックします。
      • [プロパティ]
         で、
        [全画面]
         と
        [エイリアス]
        {セッション}
        [セッション]
        [UI セッション]
        [Web セッション]
         の間にダイナミックリンクを作成します。
        ダイナミックリンクの詳細については、「ダイナミックリンクを作成する」を参照してください。
        プロジェクトが Web ブラウザで実行されている場合、
        [{Session}/IsWeb]
         エイリアスは
        [真]
         に解決されます。詳細については、「さまざまなプレゼンテーションエンジンのプロファイル オブジェクト」を参照してください。
        ランタイムに、ネイティブのプレゼンテーションエンジンはウィンドウ化されたアプリケーションを表示し、Web プレゼンテーションエンジンは Web ブラウザ ウィンドウの幅に基づいて特定の画面タイプを表示します。
      • [プロパティ]
         で、
        [全画面]
         を
        [真]
         に設定します。
        ランタイムに、ネイティブのプレゼンテーションエンジンは全画面アプリケーションを表示し、Web プレゼンテーションエンジンは Web ブラウザ ウィンドウの幅に基づいて特定の画面タイプを表示します。
    Web ブラウザのサイズを変更し、ブレークポイントの値を超えると、アプリケーションのレイアウトが変更され、さまざまなビューポート サイズに合わせて調整されます。
ご質問やご意見
このドキュメントに関するご質問やご意見は、こちらまでお寄せください。 こちらからご意見をお寄せください。
Normal