사용자 정의 포함 탭
클라이언트 |
|||
---|---|---|---|
Windows |
Mac |
iPhone 및 iPad |
Android |
예 |
예 |
예 |
예 |
배포 |
|||
---|---|---|---|
온프레미스 |
Webex Messenger |
팀 메시징 모드 |
VDI용 Softphone |
예 |
예 |
예 |
예 |
사용자 정의 포함 탭은 클라이언트 인터페이스에 HTML 콘텐츠를 표시합니다. Cisco Jabber에 대한 사용자 정의 포함 탭 정의를 생성할 수 있습니다. 현재 클라이언트 테마로 작동하도록 프로그래밍 방식으로 사용자 정의 탭을 조정할 수도 있습니다.
참고 |
|
사용자 정의 포함 탭 정의
<jabber-plugin-config>
<browser-plugin>
<page refresh="" preload="" internal="">
<tooltip></tooltip>
<icon></icon>
<url></url>
</page>
</browser-plugin>
</jabber-plugin-config>
Windows용 Cisco Jabber는 Chromium Embedded 프레임워크를 사용하여 사용자 정의 포함 탭의 내용을 표시합니다.
Mac용 Cisco Jabber는 Safari WebKit 렌더링 엔진을 사용하여 포함 탭의 내용을 표시합니다.
다음 표에서는 사용자 정의 포함 탭 정의에 대한 매개 변수를 설명합니다.
매개변수 | 설명 | ||
---|---|---|---|
브라우저-플러그인 |
사용자 정의 포함 탭에 대한 모든 정의를 포함합니다. 이 값에는 모든 사용자 정의 탭 정의가 포함됩니다. |
||
page |
하나의 사용자 정의 포함 탭 정의를 포함합니다. |
||
새로 고침 |
콘텐츠가 새로 고쳐지는 시점을 제어합니다.
이 매개 변수는 선택 사항이며 페이지 요소의 속성입니다. |
||
preload |
콘텐츠가 로드되는 시기를 제어합니다.
이 매개 변수는 선택 사항이며 페이지 요소의 속성입니다. |
||
tooltip |
사용자 정의 포함 탭에 대한 호버 텍스트를 정의합니다. 이 값은 유니코드 문자의 문자열입니다. |
||
아이콘 |
탭에 대한 아이콘을 지정합니다. 다음과 같이 로컬 또는 호스팅된 아이콘을 지정할 수 있습니다.
다음과 같이 %JabberTheme% 변수를 사용하여 현재 Jabber 테마와 일치하도록 로컬 및 호스팅된 아이콘을 변경할 수도 있습니다. http://path/icon_name_%JabberTheme%.jpg Jabber 클라이언트는 아이콘을 요청할 때 %JabberTheme%를 해석합니다. 가능한 값은 다음과 같습니다.
URL에 %JabberTheme%를 포함하지 않으면 아이콘이 테마와 함께 변경되지 않습니다. 각 아이콘의 파일 이름에 테마 이름을 포함합니다. 사용자 정의 아이콘 다운로드가 실패하거나 선택한 테마에 대한 아이콘이 없는 경우 Jabber 클라이언트는 기본 이미지를 사용 합니다. .JPG, .PNG, and .GIF 형식을 포함하여 클라이언트 브라우저에서 렌더링할 수 있는 모든 아이콘을 사용할 수 있습니다. 이 매개변수는 선택사항입니다. 아이콘을 지정하지 않으면 클라이언트는 HTML 페이지에서 파비콘을 로드합니다. 사용할 수 있는 파비콘이 없는 경우 클라이언트는 기본 아이콘을 로드합니다. |
||
url |
포함 탭의 콘텐츠가 있는 URL을 지정합니다. 클라이언트는 브라우저 렌더링 엔진을 사용하여 포함 탭의 콘텐츠를 표시합니다. 이러한 이유로 브라우저에서 지원하는 모든 콘텐츠를 지정할 수 있습니다. Mac용 Cisco Jabber의 경우 URL 요소에 HTTP 또는 HTTPS가 포함되어야 합니다. 필수 매개 변수입니다.
예를 들어 |
||
internal |
웹 페이지가 네트워크의 내부 또는 외부 페이지인지 여부를 지정합니다.
|
사용자 정의 탭
사용자가 클라이언트 사용자 인터페이스를 통해 사용자 정의 포함 탭에 대한 탭 이름 및 URL을 지정하도록 허용할 수 있습니다. 사용자 정의 포함 탭에는 다른 매개 변수를 설정할 수 없습니다.
사용자가 자신의 탭을 사용자 정의하기 전에 AllowUserCustomTabs를 true로 설정합니다.
<Options>
<AllowUserCustomTabs>true</AllowUserCustomTabs>
</Options>
참고 |
AllowUserCustomTabs의 기본값은 true입니다. |
사용자 정의 아이콘
최적의 결과를 얻으려면 사용자 정의 아이콘이 다음 지침을 준수해야 합니다.
-
크기: 20 x 20 픽셀
-
투명한 배경
-
PNG 파일 형식
특정 테마와 일치하도록 다른 버전의 아이콘을 포함할 수 있습니다. 자세한 내용은 아이콘 매개 변수에 대한 설명을 참조하십시오.
사용자 정의 탭에서 채팅 및 통화
- XMPP: 또는 IM: 프로토콜 처리기를 사용하여 채팅을 시작합니다.
- 음성 및 영상 통화를 시작하려면 TEL: 프로토콜 처리기를 사용합니다.
UserID 토큰
url 매개 변수에 대한 값의 일부로 ${UserID} 토큰을 지정할 수 있습니다. 사용자가 로그인하면 클라이언트는 ${UserID} 토큰을 로그인한 사용자의 사용자 이름으로 대체합니다.
팁 |
쿼리 문자열에 ${UserID} 토큰을 지정할 수도 있습니다. 예를 들어, www.cisco.com/mywebapp.op?url=${UserID}. |
-
사용자 정의 포함 탭에서 다음을 지정합니다.
<url>www.cisco.com/${UserID}/profile</url>
-
Mary Smith가 로그인합니다. 그녀의 사용자 이름은 msmith입니다.
-
클라이언트는 다음과 같이 ${UserID} 토큰을 Mary의 사용자 이름으로 대체합니다.
<url>www.cisco.com/msmith/profile</url>
JavaScript 알림
사용자 정의 포함 탭에서 JavaScript 알림을 사용할 수 있습니다. Jabber는 JavaScript 알림에 대한 메서드를 제공합니다. 비동기 서버 통화 및 기타 사용자 정의 구현에 JavaScript 알림을 사용하는 방법을 설명하는 것은 이 설명서의 범위를 벗어납니다. 자세한 내용을 보려면 JavaScript 설명서를 참조하십시오.
중요사항 |
Apple은 WebView 개체를 교체했습니다. 이제 Windows와 Mac에서 다른 방법을 사용해야 합니다. 자세한 내용은 예제 JavaScript 섹션을 참조하십시오. |
알림 메서드
클라이언트에는 JavaScript 알림에 대한 이러한 메서드를 보여주는 인터페이스가 포함되어 있습니다.
-
SetNotificationBadge - JavaScript의 클라이언트에서 이 메서드를 호출합니다. 이 메서드는 다음 값을 가질 수 있는 문자열 값을 사용합니다.
-
비어 있음 - 값이 비어 있으면 기존 알림 배지를 제거합니다.
-
숫자 1 – 999
-
두 자리 영숫자 조합(예: A1)
-
-
onPageSelected() - 사용자가 사용자 정의 포함 탭을 선택하는 경우 클라이언트가이 메서드를 호출합니다.
-
onPageDeselected() -사용자가 다른 탭을 선택하면 클라이언트가 이 메서드를 호출합니다.
참고 |
IPhone 및 iPad용 Jabber에는 해당되지 않습니다. |
-
onHubResized() - 사용자가 클라이언트 허브 창의 크기를 조정하거나 이동하면 클라이언트가 이 메서드를 호출합니다.
-
onHubActivated() - 클라이언트 허브 창이 활성화되면 클라이언트가 이 메서드를 호출합니다.
-
onHubDeActivated() - 클라이언트 허브 창이 비활성화되면 클라이언트가 이 메서드를 호출합니다.
사용자 정의 탭에서 프레즌스 구독
다음 JavaScript 메서드를 사용하여 연락처의 프레즌스를 구독하고 클라이언트에서 프레즌스 업데이트를 받을 수 있습니다.
-
SubscribePresence() - 사용자의 IM 주소를 사용하여 이 메서드에 대한 문자열 값을 지정합니다.
-
OnPresenceStateChanged - 이 메서드를 사용하면 사용자가 연락처의 프레즌스에 있는 클라이언트에서 업데이트를 받을 수 있습니다. 다음 값 중 하나를 문자열로 지정할 수 있습니다.
-
IM 주소
-
기본 프레즌스(사용 가능, 자리 비움, 오프라인, 방해 사절)
-
리치 프레즌스(미팅 중, 통화 중 또는 사용자 정의 프레즌스 상태)
-
참고 |
|
사용자 정의 탭에서 로캘 정보 가져오기
다음 JavaScript 메서드를 사용하여 클라이언트에서 연락처의 현재 로캘 정보를 검색할 수 있습니다.
-
GetUserLocale() - 이 메서드를 사용하면 사용자가 클라이언트의 로캘 정보를 요청할 수 있습니다.
-
OnLocaleInfoAvailable - 이 메서드를 사용하면 사용자가 클라이언트에서 로캘 정보를 받을 수 있습니다. 클라이언트 로캘 정보를 포함하는 문자열 값을 사용할 수 있습니다.
참고 |
IPad 및 iPhone용 Jabber는 OnLocaleInfoAvailable만 지원합니다. |
클라이언트 테마와 일치하도록 사용자 정의 탭 조정
다음 JavaScript 메서드를 사용하여 현재 클라이언트 테마를 반환할 수 있습니다.
-
QueryCurrentTheme() - 이 메서드를 사용하면 현재 Jabber 테마를 가져올 수 있습니다.
-
OnThemeChanged(테마)-이 메서드는 테마가 Jabber에서 변경될 때 수동으로 새 테마를 받습니다.
다음은 테마에 사용할 수 있는 값입니다.
-
기본값 - 기본 Jabber 테마
-
다크 - Jabber "다크" 테마
-
뚜렷 - Jabber "고대비" 테마
-
고대비 - Windows 고대비 테마
Windows용 Jabber의 JavaScript 예
이 예는 JavaScript를 사용하여 1 ~ 999의 숫자를 입력하기 위한 양식을 표시하는 HTML 페이지를 보여줍니다.
<html>
<head>
<script type="text/javascript">
function OnPresenceStateChanged(jid, basicPresence, localizedPresence)
{
var cell = document.getElementById(jid);
cell.innerText = basicPresence.concat(", ",localizedPresence);
}
function GetUserLocale()
{
window.external.GetUserLocale();
}
function SubscribePresence()
{
window.external.SubscribePresence('johndoe@example.com');
}
function OnLocaleInfoAvailable(currentLocale)
{
var cell = document.getElementById("JabberLocale");
cell.innerText = currentLocale;
}
function onHubActivated()
{
var cell = document.getElementById("hubActive");
cell.innerText = "TRUE";
}
function onHubDeActivated()
{
var cell = document.getElementById("hubActive");
cell.innerText = "FALSE";
}
function onHubResized()
{
alert("Hub Resized or Moved");
}
function OnLoadMethods()
{
SubscribePresence();
GetUserLocale();
}
</script>
</head>
<body onload="OnLoadMethods()">
<table>
<tr>
<td>John Doe</td>
<td id="johndoe@example.com">unknown</td>
</tr>
</table>
<table>
<tr>
<td>Jabber Locale: </td>
<td id="JabberLocale">Null</td>
</tr>
<tr>
<td>Hub Activated: </td>
<td id="hubActive">---</td>
</tr>
</table>
</body>
</html>
이 예제 JavaScript 양식을 테스트하려면 이전 예제를 HTML 페이지에 복사한 다음 해당 페이지를 사용자 정의 포함 탭으로 지정합니다.
Mac용 Jabber의 JavaScript 예
Apple은 이전 Jabber 릴리스에서 사용했던 NSWebView를 더 이상 사용하지 않습니다. 대체 WKWebView는 window.external
을 지원하지 않습니다. Mac에서 포함된 사용자 지정 탭의 경우 window.external
을 window.webkit.messageHandlers
로 바꿉니다.
다음은 새 메서드의 예입니다.
<html>
<h3>
Jabber MAC
</h3>
<div style="padding: 10px;">
<label title="" id="themestring"></label>
<button onclick="QueryCurrentThemeAction()">QueryCurrentTheme Action</button>
<button onclick="SetNotificationBadgeAction()">SetNotificationBadge Action</button>
<button onclick="GetUserLocaleAction()">GetUserLocale Action</button>
<label title="" id="UserLocal"></label>
<button onclick="SubscribePresenceAction()">SubscribePresence Action</button>
<label title="" id="Presence"></label>
</div>
<script>
function OnThemeChanged(themeString) {
var themeLabel = document.getElementById('themestring')
themeLabel.innerHTML = themeString
}
function OnLocaleInfoAvailable(userLocal) {
var localUserLabel = document.getElementById('UserLocal');
localUserLabel.innerHTML = userLocal;
}
function QueryCurrentThemeAction() {
var themeDiv = document.getElementById('MyTheme');
themeDiv.style.backgroundColor = 'green';
window.webkit.messageHandlers.QueryCurrentTheme.postMessage(null);
}
function SetNotificationBadgeAction() {
window.webkit.messageHandlers.SetNotificationBadge.postMessage(40);
}
function GetUserLocaleAction() {
window.webkit.messageHandlers.GetUserLocale.postMessage(null);
}
function SubscribePresenceAction() {
window.webkit.messageHandlers.SubscribePresence.postMessage('quxie@hz.jabberqa.cisco.com');
}
function OnPresenceStateChanged(contactUri, presenceState, localizedPresenceString) {
var Label = document.getElementById('Presence');
Label.innerHTML = contactUri + presenceState + localizedPresenceString;
}
</script>
</html>
사용자 정의 탭에 통화 이벤트 표시
다음 JavaScript 기능을 사용하여 사용자 정의 탭에 통화 이벤트를 표시할 수 있습니다.
OnTelephonyConversationStateChanged - 전화 통신 서비스의 API를 사용하면 클라이언트에서 사용자 정의 포함 탭에 통화 이벤트를 표시할 수 있습니다. 사용자 정의 탭은 OnTelephonyConversationStateChanged JavaScript 기능을 구현할 수 있습니다. 클라이언트는 전화 통신 대화 상태가 변경될 때마다 이 기능을 호출합니다. 이 함수는 클라이언트에서 통화 이벤트를 가져오기 위해 구문 분석하는 JSON 문자열을 허용합니다.
다음 코드 조각은 통화 이벤트를 보관하는 JSON을 보여줍니다.
{
"conversationId": string,
"acceptanceState": "Pending" | "Accepted| | "Rejected",
"state": "Started" | "Ending" | "Ended",
"callType": "Missed" | "Placed" | "Received" | "Passive" | "Unknown",
"remoteParticipants": [{participant1}, {participant2}, …, {participantN}],
"localParticipant": {
}
}
JSON의 각 참가자 개체에는 다음과 같은 특성이 있을 수 있습니다.
{
"voiceMediaDisplayName": "<displayName>",
"voiceMediaNumber": "<phoneNumber>",
"translatedNumber": "<phoneNumber>",
"voiceMediaPhoneType": "Business" | "Home" | "Mobile" | "Other" | "Unknown",
"voiceMediaState": "Active" | "Inactive" | "Pending" | "Passive" | "Unknown",
}
다음은 사용자 정의 포함 탭에서 이 기능을 구현하는 예입니다. 이 예제에서는state 및 acceptanceState 특성에 대한 값을 가져와서 사용자 정의 탭에 표시합니다.
function OnTelephonyConversationStateChanged(json) {
console.log("OnTelephonyConversationStateChanged");
try {
var conversation = JSON.parse(json);
console.log("conversation id=" + conversation.conversationId);
console.log("conversation state=" + conversation.state);
console.log("conversation acceptanceState=" + conversation.acceptanceState);
console.log("conversation callType=" + conversation.callType);
}
catch(e) {
console.log("cannot parse conversation:" + e.message);
}
}
다음은 가능한 모든 필드에 대해 이 기능을 구현하는 예입니다.
function OnTelephonyConversationStateChanged(json) {
console.log("OnTelephonyConversationStateChanged");
try {
var conversation = JSON.parse(json);
console.log("conversation state=" + conversation.state);
console.log("conversation acceptanceState=" + conversation.acceptanceState);
console.log("conversation callType=" + conversation.callType);
for (var i=0; i<conversation.remoteParticipants.length; i++) {
console.log("conversation remoteParticipants[" + i + "]=");
console.log("voiceMediaDisplayName=" + conversation.remoteParticipants[i].voiceMediaDisplayName);
console.log("voiceMediaNumber=" + conversation.remoteParticipants[i].voiceMediaNumber);
console.log("translatedNumber=" + conversation.remoteParticipants[i].translatedNumber);
console.log("voiceMediaPhoneType=" + conversation.remoteParticipants[i].voiceMediaPhoneType);
console.log("voiceMediaState=" + conversation.remoteParticipants[i].voiceMediaState);
}
console.log("conversation localParticipant=");
console.log(" voiceMediaDisplayName=" + conversation.localParticipant.voiceMediaDisplayName);
console.log(" voiceMediaNumber=" + conversation.localParticipant.voiceMediaNumber);
console.log(" translatedNumber=" + conversation.localParticipant.translatedNumber);
console.log(" voiceMediaPhoneType=" + conversation.localParticipant.voiceMediaPhoneType);
console.log(" voiceMediaState=" + conversation.localParticipant.voiceMediaState);
}
catch(e) {
console.log("cannot parse conversation:" + e.message);
}
}
사용자 정의 포함 탭 예
<?xml version="1.0" encoding="utf-8"?>
<config version="1.0">
<Client>
<jabber-plugin-config>
<browser-plugin>
<page refresh ="true" preload="true">
<tooltip>Cisco</tooltip>
<icon>https://www.cisco.com/web/fw/i/logo.gif</icon>
<url>https://www.cisco.com</url>
</page>
</browser-plugin>
</jabber-plugin-config>
</Client>
</config>