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>
태그 사이에 Analytics JavaScript 코드를 배치했습니다.listType
다른 모양을 구성할 속성입니다(아래 참조).list
항목.다음 예제에서는 c를 구성합니다ontexthub.base
의 정보를 표시하는 UI 모듈 contexthub.에뮬레이터 저장. 다음 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 모듈은 클라이언트 웹 브라우저 및 운영 체제에 대한 정보를 표시합니다. 상기 정보는 상기 surferinfo store로부터 상기 정보를 획득한다 contexthub.surferinfo 스토어 후보입니다.
UI 모듈의 소스 코드는 /libs/granite/contexthub/components/modules/browserinfo
. 하지만 contexthub.browserinfo
extends 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
스토어 후보입니다.
이 모듈은 저장소에서 날짜 및 시간을 변경할 수 있는 팝업 양식을 제공합니다.
의 소스 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 저장소에서 정보를 가져옵니다 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 스토어 후보입니다.
UI 모듈의 소스는 /libs/granite/contexthub/components/modules/screen-orientation
.
의 인스턴스 contexthub.screen-orientation
UI 모듈에는 세부 사항 구성에 대한 값이 필요하지 않습니다. 다음 JSON 텍스트는 모듈의 기본 구성을 나타냅니다. 다음 사항에 유의하십시오. clickable
property false
기본적으로 제공됩니다. 설정할 기본 구성을 재정의하는 경우 clickable
to 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 모듈은 를 기반으로 하는 tagcloud라는 ContextHub 저장소에서 정보를 가져옵니다 contexthub.tagcloud
스토어 후보입니다.
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"
}