ここまでは、アプリケーションの動作を実装する方法についてだけ説明し、見た目をどうするかについては説明しませんでした。この章では、このトピックに焦点を当てます。
レイアウトの構成と基本
ワークフローと同様に、アプリケーションのレイアウトも XML で定義されます。レイアウトは、複数の画面に対して再利用可能なフレームを定義するLayoutPageと
、特定の画面の仕様を設計するために使用されるLayoutModelで
構成されます。さらに、複数のレイアウト要素に適用するStyleと
、特定のレイアウト部分を再利用可能にするPartTemplateを
定義することができます。
これらの構造要素はすべて、別々のファイルで定義されています。もちろん、それらはテキスト、ボタン、画像などのコンテンツで満たされなければなりません。概要を知るために、UI要素のリストを見てください。
Choice "コンポーネントのレイアウト・ページには、ステータス・バーとタイトル、そして<ContentPlaceHolder>
タグを使ったコンテンツ・セクションが含まれています。
<LayoutPage Name="DefaultMaster">
<Part Template="STATUS_BAR" Weight="0.1"/>
<Text Name="Topic" Weight=".15" Style="TitleStyle" Content="Pick a fruit"/>
<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="Pear" FocusOrder="1" Weight="0.5" Style="ImageButtonStyle">
<Text Name="RIGHT_TEXT" Style="FooterButtonTextStyle" Weight="1" MaxSize="30" Content="Pear"/>
<Events/>
</Button>
</Content>
</LayoutModel>
"LayoutModel "はワークフローと接続する要素である。これはワークフローのステップを定義する際に行われます:<step id="choose" descriptor="the user selects between two options" uitemplate="ChoiceScreen">.
上にあるように、"LayoutModel "はPage="DefaultMaster
"を参照し、外枠を取得します。LayoutPage "から<ContentPlaceHolder Name="Content"/>を
参照し、<Content PlaceHolder="Content"
...を使います。
サイズと方向
UI要素のタイプに応じて、ユーザー・インターフェースを好みのスタイルにするために様々な属性を使用することができます。最初に見るべき2つの属性は、weightと
orientationで
、UIの一般的な構造を設計するのに役立ちます。
Weightは
要素のサイズを0から1の間で定義します。1は親要素のサイズの100%です。Orientation
は親要素に適用され、子要素が親要素内で水平
(隣り合う)か垂直
(上に重なる)かを決定します。
上の "LayoutModel "では、Content
要素は横向き
なので、ボタンは隣り合って表示されます。それぞれのボタンは、Content
要素で利用可能なサイズのWeight="0.5"
(つまり 50%) を使用します。一方、ボタンの中にあるテキスト要素は、親要素(ボタン)のWeight="1
"のスペースをフルに使います。
要素のサイズや向きを設定する際、Panel
要素を利用すると便利なことがよくあります。これらの要素は純粋に構造的なもので、親要素内の向きを簡単に変更したり、スペースを細分化したりするために使用できます。
ボタンとフォーカスの順番
ボタンを扱う場合、ある属性が特に重要です: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
アクションを使う方法があります。
マッピング
マッピングによって、値または変数を UI 要素の属性に恒久的に関連付けることができます。変数をマッピングすると、変数の値が変更されるたびにUI要素の属性が自動的に変更されます。
<step ...>
<states>...</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 アクション
レイアウトを動的に変更するもう1つのオプションは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アクションを
使わなければならないケースもあります:
マッピング内のJavaScriptは一度しか実行されないので、JSを使用する必要があり、ステップのライフサイクル中に値が変更された場合は、ui_update
アクションを使用してUIを手動で更新する必要があります。
📌課題
ここまでは、2つのテキストの選択肢から選んできた。今度は画像をミックスに加えたい:
- ボタンに画像UI要素を追加します。
- 以下の画像をワークフローリソースに追加します(アドバンスエディター内から)。
- リソースリストから画像を画像タグの
contentattributeに
ドラッグ&ドロップするだけです。
ダウンロードコンポーネント(事前課題)
ヘルプ&リソース
2項目の画像をダウンロードする。
ソリューション
以下に模範的な解決策を示す:
<Button Name="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="Pear" 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="Pear"/>
<Events/>
</Button>
ダウンロード・コンポーネント(事後課題)
次のレッスンでは、コンポーネントを再利用できるように設定可能にする方法を学ぶ。