예
다음 예제에서는 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 모듈 유형
contexthub.browserinfo UI 모듈이 클라이언트 웹 브라우저 및 운영 체제에 대한 정보를 표시합니다. 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 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 모듈 유형
contexthub.location UI 모듈에 클라이언트의 경도와 위도가 표시됩니다. 모듈은 현재 위치를 변경하기 위해 클릭할 수 있는 Google 맵을 표시하는 팝오버를 제공합니다. 모듈은 contexthub.geolocation 저장소 후보를 기반으로 하는 geolocation이라는 ContextHub 저장소에서 정보를 가져옵니다.
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 모듈 유형
contexthub.screen-orientation UI 모듈이 클라이언트의 현재 화면 방향을 표시합니다. 모듈은 기본적으로 비활성화되어 있지만 방향을 선택할 수 있는 팝오버를 제공합니다. 모듈은 granite.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 모듈 유형
contexthub.tagcloud UI 모듈에 태그에 대한 정보가 표시됩니다. 도구 모음의 UI 모듈에 태그 수가 표시됩니다. 팝업에 새 태그를 추가하기 위한 tagcloud 및 texbox가 표시됩니다. 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 UI 모듈 유형
granite.profile ContextHub UI 모듈에 현재 사용자의 표시 이름이 표시됩니다. 팝업에 사용자의 로그인 이름이 표시되고 디스플레이 이름의 값을 변경할 수 있습니다. UI 모듈은 granite.profile 스토어 후보를 기반으로 하는 ContextHub 스토어 이름이 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"
}
