知識ベース

サポート概要に戻る

ここまでは、アプリケーションの動作を実装する方法のみを説明してきましたが、どのように見えるかについては説明しませんでした。この章では、このトピックに焦点を当てます。

レイアウトの構造と基本

ワークフローと同様に、アプリケーションのレイアウトも XML で定義されます。レイアウトは、複数の画面の再利用可能なフレームを定義する と LayoutPage 、特定の 1 つの画面の詳細を設計するために使用される で構成され LayoutModel ます。さらに、複数のレイアウト要素に適用し、 PartTemplate 特定のレイアウト パーツを再利用可能にするように定義 Style できます。

これらの構造要素はすべて、個別のファイルで定義されます。もちろん、テキスト、ボタン、画像などのコンテンツで埋める必要があります。UI 要素の一覧を見て 、概要を把握できます。

「Choice」コンポーネントのレイアウトページには、ステータスバー、タイトル、および「LayoutModel」によって埋められるタグを使用した <ContentPlaceHolder> コンテンツセクションのみが含まれます。

<LayoutPage Name="DefaultMaster">
  <Part Template="STATUS_BAR" Weight="0.1"/>
  <Text Name="トピック" weight=".15" style="TitleStyle" content="果物を選ぶ"/>
  <Panel weight="0.75">
    <ContentPlaceHolder Name="Content"/>
  </Panel><
/LayoutPage>

"LayoutModel" は次のようになります。

<LayoutModel Name="ChoiceScreen" Page="DefaultMaster" Orientation="Vertical">
  <Content PlaceHolder="Content" Weight="1" Orientation="Horizontal"><
    Button Name="Apple" FocusOrder="0" Weight="0.5" Style="ImageButtonStyle">
      <Text Name="LEFT_TEXT" Style="FooterButtonTextStyle" Weight="1" MaxSize="30" Content="Apple"/><
      Events/>
    </Button><
    Button Name="梨" FocusOrder="1" Weight="0.5" Style="ImageButtonStyle">
      <Text Name="RIGHT_TEXT" Style="FooterButtonTextStyle" Weight="1" MaxSize="30" Content="梨"/>
      <Events/>
    </Button>
  </Content><
/LayoutModel>

「LayoutModel」は、ワークフローに接続する要素です。これは、ワークフローのステップを定義するときに行われます。 <step id="choose" descriptor="the user selects between two options" uitemplate="ChoiceScreen">上記のように、"LayoutModel" は、その外枠を取得するために参照 Page="DefaultMaster します。次に、"LayoutPage" から、using<Content PlaceHolder="Content"... .<ContentPlaceHolder Name="Content"/>   

サイズと向き

UI 要素の種類に応じて、さまざまな属性 を使用して 、ユーザー インターフェイスのスタイルを好みに合わせて設定できます。最初に確認する必要がある 2 つの属性は、UI の一般的な構造の設計に役立つため、 と orientationです weight 。

  • Weight 要素のサイズを 0 から 1 の範囲で定義します (1 は親要素のサイズの 100%) です。
  • Orientation は親要素に適用され、子要素が親要素内にあるhorizontal  か (隣り合っている) か vertical (互いに重なっているか) を判断します。

上記の「LayoutModel」では、要素に Content 向きがあるため Horizontal 、ボタンは隣り合って表示されます。それぞれが、要素でContent  使用可能なサイズの (つまり 50%) を使用します。 Weight="0.5" 一方、ボタン内のテキスト要素は、親要素 (ボタン) Weight="1"で使用可能なスペースを .

多くの場合、要素のサイズと向きを設定するときは、要素を利用する Panel と役立ちます。これらの要素は純粋に構造的な要素であり、親要素内の方向を簡単に変更したり、その空間を細分化したりするために使用できます。

ボタンとフォーカスの順序

ボタンを操作する場合、1 つの属性が特に重要です FocusOrder。この属性は、ハードウェア ボタンを使用してボタンをめくったときにフォーカスされる順序を定義します。また、どのボタンが事前に選択されるか、つまり のボタンも定義します FocusOrder="0"。レイアウトの各ボタンには、異なる FocusOrder. 一部のボタンが PartTemplate 内にあり、別のファイルにある場合でも、レイアウトの全体的な順序に合わせる必要があります。

ヒントとコツ: レイアウト のフォーカス順序は 0 から始まり、ギャップや重複のない連続している必要があります。そうでない場合、レイアウトを読み込もうとするとアプリケーションがクラッシュする可能性があります。開発中に突然アプリケーションがクラッシュした場合は、FocusOrderの確認がすぐに頭に浮かぶはずです。

テキストの書式設定

スマートグラスに表示されるテキストをタグで .html フォーマットすることができます。書式設定は、コード内で新しいテキストを作成するときに、UI テンプレート、レイアウト ファイル、またはコンポーネントに追加できます。

<Text Name="LEFT_TEXT" Style="FooterButtonTextStyle" Weight="1" MaxSize="30" Content="<h1>Red Apples taste the best</h1> green apples<br>are not so <sub>tasty</sub>"/>

書式設定の結果は、割り当てられているレイアウトコンポーネントや特定のコンポーネントの設定によって異なる場合があります。

詳細については、「ワークフローエンジンリファレンス」セクションの「テキストの書式設定 」を参照してください 。

レイアウトの変更

ユーザーに表示される内容が静的であることはめったにありません。通常、ユーザー操作によって UI も変更されます。もちろん、テキストフィールドの内容が変更されるたびに新しいレイアウトとステップを作成することは望ましくありません。UI を動的に調整するには、ワークフローでの作成 <mapping> 方法とアクションの使用 ui_update 方法の 2 つがあります。

マッピング

マッピングを使用すると、値または変数を UI 要素の属性に永続的に関連付けることができます。変数をマップすると、変数の値が変更されるたびに UI 要素の属性が自動的に変更されます。

           <ステップ...>
             <状態>...</states>
             <mapping>
                 <ui_element name="LEFT_TEXT">
                     <param name="content">#{left_option}</param>
                     <param name="text_color">#{option_color}</param><
                 /ui_element>
             </mapping><
         /step>

上記の例は、マッピングが step タグの子として追加されていることを示しています。ここには、レイアウトの UI 要素を参照する ui_element タグをいくつでも追加できます。この場合 name="LEFT_TEXT、ボタンのテキストは最初のオプションを表します。ワークフローで変数 #{left_option} が変更されるたびに、UI のそのボタンに別のテキストが表示されます。

ui_updateアクション

レイアウトを動的に変更する別のオプションは、アクションです  ui_update。このアクションは、レイアウトを 1 回だけ変更します。

<ui_update id="change_left_button_text"><widget_params>
   
      <ui_element name="LEFT_TEXT"><
         param name="content">#{left_option}</param>
         <param name="text_color">#{option_color}</param>
      </ui_element>
   </widget_params>
</ui_update>

ほとんどのユースケースでは、このアクションを使用する代わりに、マッピングを設定することをお勧めします。ただし、マッピングが機能せず、アクションを使用する ui_update必要があるユースケースが 1 つあります。

マッピング内の JavaScript は一度しか実行されないため、JS を使用する必要があり、ステップのライフサイクル中に値が変更された場合は、アクションを使用して ui_update UI を手動で更新する必要があります。

📌割り当て

ここまでは、2つのテキストオプションから選択しました。次に、ミックスに画像を追加します。

  •  ボタンに画像 UI 要素 を追加します。
  • 以下の画像をワークフローリソースに追加します(詳細エディター内から)。
  • リソースリストから画像タグの属性に content画像をドラッグ&ドロップするだけです。

 コンポーネントのダウンロード(事前割り当て)

ヘルプ& リソース

2 項目の画像をダウンロードします。

解決

以下は、例示的な解決策です。

    <ボタン名="Apple" FocusOrder="0" Weight="0.5" Style="ImageButtonStyle">
      <Image Name="LEFT_IMAGE" Weight="0.8" Margin="0,0,0,0" Content="§{apple.jpg}§" ScaleType="CenterCrop"/>
      <Text Name="LEFT_TEXT" Style="FooterButtonTextStyle" Weight=".2" MaxSize="30" Content="Apple"/>
      <Events/>
    </Button>
    <Button Name="梨" FocusOrder="1" Weight="0.5" Style="ImageButtonStyle">
      <Image Name="RIGHT_IMAGE" Weight="0.8" Margin="0,0,0,0" Content="§{pear.jpg}§" ScaleType="CenterCrop"/>
      <Text Name="RIGHT_TEXT" Style="FooterButtonTextStyle" Weight=".2" MaxSize="30" Content="梨"/>
      <イベント/>
    </ボタン>

 コンポーネントのダウンロード(課題後)

次のレッスンでは、コンポーネントを再利用可能にするために構成可能にする方法を学習 します。