ContextHub には、ソリューションで使用できるいくつかのサンプル UI モジュールが用意されています。 次の情報が提供されます。
ContextHub への UI モジュールの追加について詳しくは、 UI モジュールの追加. UI モジュールの開発について詳しくは、 ContextHub UI モジュールタイプの作成.
contexthub.base UI モジュールタイプは、他のすべての UI モジュールタイプのベースタイプです。 したがって、ストアデータをレンダリングするための汎用機能を提供します。
次の機能を使用できます。
ソースコードは /libs/granite/contexthub/code/ui/container/js/ContextHub.UI.BaseModuleRenderer.js
にあります。
JSON 形式の JavaScript オブジェクトを使用して、contexthub.base UI モジュールを設定します。 UI モジュールの機能を設定するには、次のいずれかのプロパティを含めます。
true
、全画面モードを許可しない場合は false
を使用します。<p>
タグを使用します。listType
プロパティを使用します(以下を参照)。list
項目を含めないでください。次の例では、contexthub.emulators ストアからの情報を表示するように contexthub.base
UI モジュールを設定しています。template
項目は、storeMapping
項目が作成するキーを使用することによって、このストアからデータを取得する方法を示しています。
{
"icon": "coral-Icon--move",
"title": "Screen Resolution",
"storeMapping": {
"emulator": "emulators"
},
"template": "<p>{{{ i18n \"Resolution\"}}}</p><p>{{{emulator.currentDevice.width}}} x {{{emulator.currentDevice.height}}}</p>"
}
contexthub.browserinfo
UI モジュールは、クライアント Web ブラウザーとオペレーティングシステムに関する情報を表示します。情報は、contexthub.surferinfo ストア候補をベースとする surferinfo ストアから取得されます。
この UI モジュールのソースコードは /libs/granite/contexthub/components/modules/browserinfo
にあります。contexthub.browserinfo
は contexthub.base
UI モジュールを拡張したものですが、追加の関数を上書きまたは提供しません。この実装は、ブラウザー情報をレンダリングするためのデフォルトの設定を提供します。
contexthub.browserinfo UI モジュールのインスタンスには、詳細設定用の値は必要ありません。 次の JSON テキストは、モジュールのデフォルトの設定を表しています。
{
"icon":"coral-Icon--globe",
"title":"Browser/OS Information",
"storeMapping":{"surferinfo":"surferinfo"},
"template":"<p>{{surferinfo.browser.family}} {{surferinfo.browser.version}}</p><p>{{surferinfo.os.name}} {{surferinfo.os.version}}</p>"
}
contexthub.datetime
UI モジュールは、contexthub.datetime
ストア候補をベースとする、datetime という名前のストアに格納されている日時を表示します。
このモジュールは、ストア内の日時を変更できるポップオーバーフォームを提供します。
contexthub.datetime
UI モジュールのソースは /libs/granite/contexthub/components/modules/datetime
にあります。
contexthub.datetime UI モジュールのインスタンスには、詳細設定用の値は必要ありません。 次の JSON テキストは、モジュールのデフォルトの設定を表しています。
{
"icon":"coral-Icon--clock",
"title":"DATE&TIME",
"clickable":true,
"storeMapping":{"d":"datetime"},
"template":"<p class=\"contexthub-module-line1\">{{i18n \"Date&Time\"}}</p><p class=\"contexthub-module-line2\">{{d.formatted.locale.date}} {{d.formatted.locale.time}}</p>",
"popoverTemplate":"<div class=\"datetime center\"><div class=\"coral-DatePicker-calendar\" data-init=\"datepicker\"><input class=\"coral-Textfield\" type=\"datetime\" value=\"{{d.formatted.iso}}\"><button class=\"coral-Button coral-Button--secondary coral-Button--square\" title=\"{{i18n \"Datetime picker\"}}\"><i class=\"coral-Icon coral-Icon--calendar coral-Icon--sizeS\"></i></button></div></div>"
}
contexthub.location
UI モジュールは、クライアントの緯度と経度を表示します。このモジュールは、クリックして現在の位置を変更できるGoogleマップを表示するポップオーバーを提供します。 このモジュールは、 contexthub.geolocation ストア候補。
UI モジュールのソースは /etc/cloudsettings/default/contexthub/geolocation
にあります。
contexthub.location UI モジュールのインスタンスには、詳細設定用の値は必要ありません。 次の JSON テキストは、モジュールのデフォルトの設定を表しています。
{
"icon":"coral-Icon--compass",
"title":"Location",
"clickable":true,
"editable":{"key":"/geolocation","disabled":[],"hidden":["/geolocation/generatedThumbnail","/geolocation/city","/geolocation/country"]},
"fullscreen":true,
"storeMapping":{"g":"geolocation"},
"template":"<p>{{i18n \"Location\"}}</p><p>{{g.address.postalCode}} {{g.address.city}}{{#if g.address.city}}{{#if g.address.region}},{{/if}}{{/if}} {{g.address.region}}</p>",
"list":[
{"title":"Basel, Switzerland",
"data":{"longitude":7.58929,"latitude":47.554746,"city":"Basel","country":"Switzerland"}},
{"title":"Melbourne, Australia",
"data":{"longitude":144.96328,"latitude":-37.814107,"city":"Melbourne","country":"Australia"}},
{"title":"Beijing, China",
"data":{"longitude":116.407526,"latitude":39.90403,"city":"Beijing","country":"China"}},
{"title":"New York, NY, USA",
"data":{"longitude":-74.005973,"latitude":40.714353,"city":"New York","country":"United States"}},
{"title":"Paris, France",
"data":{"longitude":2.352222,"latitude":48.856614,"city":"Paris","country":"France"}},
{"title":"Rio de Janeiro, Brazil",
"data":{"longitude":-43.20071,"latitude":-22.913395,"city":"Rio","country":"Brazil"}},
{"title":"San Jose, CA, USA",
"data":{"longitude":-121.894955,"latitude":37.339386,"city":"San Jose","country":"United States"}},
{"title":"Tokyo, Japan",
"data":{"longitude":139.691706,"latitude":35.689487,"city":"Shinjuku","country":"Japan"}}
],
"listType":"checkmark"
}
contexthub.screen-orientation
UI モジュールは、クライアントの現在の画面の向きを表示します。デフォルトでは無効になっていますが、このモジュールは向きを選択できるポップオーバーを提供します。このモジュールは、granite.emulators ストア候補をベースとする、emulators という名前の ContextHub ストアから情報を取得します。
UI モジュールのソースは /libs/granite/contexthub/components/modules/screen-orientation
にあります。
contexthub.screen-orientation
UI モジュールのインスタンスには、詳細設定用の値は必要ありません。次の JSON テキストは、モジュールのデフォルトの設定を表しています。clickable
プロパティは、デフォルトでは false
です。デフォルトの設定を上書きして clickable
を true
に設定した場合、このモジュールをクリックするとポップアップが表示され、向きを選択できます。
{
"icon":"coral-Icon--rotateRight",
"title":"Screen Orientation",
"clickable":false,
"storeMapping":{"emulator":"emulators"},
"template":"<p>{{{ i18n \"Screen Orientation\" }}}</p><p>{{{ emulator.currentDevice.orientation }}}",
"listReference":"/emulators/orientations",
"listType":"checkmark"
}
contexthub.tagcloud
UI モジュールは、タグに関する情報を表示します。ツールバーの UI モジュールにはタグの数が表示されます。 ポップアップに、新しいタグを追加するためのタグクラウドとテキストボックスが表示されます。 この UI モジュールは、contexthub.tagcloud
ストア候補をベースとする、tagcloud という名前の ContextHub ストアから情報を取得します。
UI モジュールのソースは /libs/granite/contexthub/components/modules/tagcloud
にあります。
contexthub.tagcloud
UI モジュールのインスタンスには、詳細設定用の値は必要ありません。次の JSON テキストは、モジュールのデフォルトの設定を表しています。
{
"icon":"coral-Icon--tag",
"title":"TagCloud",
"clickable":true,
"storeMapping":{"t":"tagcloud"},
"maxTags":20,
"template":"<p class=\"contexthub-module-line1\">{{i18n \"TagCloud\"}}</p><p class=\"contexthub-module-line2\">{{stats.total}} {{i18n \"Tags\"}}</p>",
"popoverTemplate":"<div class=\"contexthub-popover-content center\"><p class=\"stats\">{{stats.total}} {{i18n \"Tags\"}} | {{stats.hits}} {{i18n \"Hits\"}} | {{i18n \"Last tag\"}}: {{#if stats.recent}}{{stats.recent}}{{else}}{{i18n \"Unknown\"}}{{/if}}</p><p class=\"tagcloud\">{{#each tags}}<span class=\"tag{{this.weight}}\">{{this.name}}</span> {{/each}}</p><div class=\"coral-InputGroup\"><input type=\"text\" class=\"coral-InputGroup-input coral-Textfield tag-name\" placeholder=\"{{i18n \"Add a namespace:my/tag\"}}\" pattern=\"^[A-Za-z0-9_\\-]+(:[A-Za-z0-9_\\-\\/]+)?$\" title=\"{{i18n \"namespace:my/tag\"}}\"><span class=\"coral-InputGroup-button\"><button class=\"coral-Button coral-Button--secondary coral-Button--square contexthub-new-tag\" type=\"button\" title=\"{{i18n \"increment\"}}\"><i class=\"coral-Icon coral-Icon--sizeS coral-Icon--add\"></i></button></span></div></div>"
}
granite.profile
ContextHub UI モジュールは、現在のユーザーの表示名を表示します。ポップアップにはユーザーのログイン名が表示され、表示名の値を変更できます。 この UI モジュールは、 granite.profile ストア候補。
この UI モジュールのソースは /libs/granite/contexthub/components/modules/profile
にあります。
granite.profile
UI モジュールのインスタンスには、詳細設定用の値は必要ありません。次の JSON テキストは、モジュールのデフォルトの設定を表しています。
{
"icon":"coral-Icon--user",
"title":"Profile",
"clickable":true,
"editable":{
"key":"/profile",
"disabled":["/profile/authorizableId"],
"hidden":["/profile/avatar","/profile/path"]},
"storeMapping":{"p":"profile"},
"template":"<p class=\"contexthub-module-line1\">{{i18n \"Persona\"}}</p><p class=\"contexthub-module-line2\">{{p.displayName}}</p>",
"listType":"checkmark"
}