自定义嵌入式选项卡
|
Clients |
|||
|---|---|---|---|
|
Windows |
Mac |
iPhone 和 iPad |
Android |
|
是 |
是 |
是 |
是 |
|
部署 |
|||
|---|---|---|---|
|
场内 |
Webex Messenger |
组消息模式 |
VDI 软件电话 |
|
是 |
是 |
是 |
是 |
自定义嵌入式选项卡在客户端界面中显示 HTML 内容。 您可以为 Cisco Jabber 创建自定义嵌入式选项卡定义。 现在，您可以通过编程方式将自定义选项卡调整为使用当前的客户端主题。
 注 |
|
自定义嵌入式选项卡定义
<jabber-plugin-config>
<browser-plugin>
<page refresh="" preload="" internal="">
<tooltip></tooltip>
<icon></icon>
<url></url>
</page>
</browser-plugin>
</jabber-plugin-config>Cisco Jabber Windows 版本使用 Chromium 嵌入式框架在自定义嵌入式选项卡上显示内容。
Cisco Jabber Mac 版本使用 Safari WebKit 渲染引擎来显示嵌入式选项卡的内容。
下表说明了用于自定义嵌入式选项卡定义的参数：
| 参数 | 说明 | ||
|---|---|---|---|
|
browser-plugin |
包含自定义嵌入式选项卡的所有定义。 该值包括所有自定义选项卡定义。 |
||
|
page |
包含一个自定义嵌入式选项卡定义。 |
||
|
refresh |
控制何时刷新内容。
此参数是可选的，并且是页面元素的属性。 |
||
|
preload |
控制何时加载内容。
此参数是可选的，并且是页面元素的属性。 |
||
|
tooltip |
定义自定义嵌入式选项卡的悬停文本。 该值为 Unicode 字符串。 |
||
|
图标 |
指定选项卡的图标。 您可以按如下方式指定本地或托管图标：
您还可以使用 %JabberTheme% 变量更改本地图标和托管图标，以匹配当前的 Jabber主 题，如下所示：http://path/icon_name_%JabberTheme%.jpg 当请求图标时，Jabber 客户端会解释 %JabberTheme%。 可能的值包括：
如果 URL 中不包含 %JabberTheme%，则图标不会随主题一起更改。 在文件名中包含每个图标的主题名称。 如果下载自定义图标失败或者您没有所选主题的图标，Jabber 客户端将使用默认图像。 您可以使用客户端浏览器可以渲染的任何图标，包括 .JPG、.PNG 和 .GIF 格式。 此参数是可选的。 如果您未指定图标，客户端会从 HTML 页面加载首选图标。 如果没有可用的 favicon，客户端会加载默认图标。 |
||
|
url |
指定嵌入式选项卡内容所在的 URL。 客户端使用浏览器渲染引擎来显示嵌入式选项卡的内容。 因此，您可指定浏览器支持的任何内容。 对于 Cisco Jabber Mac 版本，URL 元素必须包含 HTTP 或 HTTPS。 此参数为必选。
例如，假设您将 |
||
|
机构内部 |
指定您的网页是网络的内部页面还是外部页面。
|
用户自定义选项卡
您可以允许用户通过客户端用户界面指定自定义嵌入式选项卡的选项卡名称和 URL。 用户无法为自定义嵌入式选项卡设置其他参数。
将 AllowUserCustomTabs 设置为 true，然后用户才能自定义其选项卡：
<Options>
<AllowUserCustomTabs>true</AllowUserCustomTabs>
</Options>注 |
AllowUserCustomTabs 的默认值为 true。 |
自定义图标
为取得最佳效果，您的自定义图标应该符合以下原则：
-
尺寸：20 x 20 像素
-
透明背景
-
PNG 文件格式
您可以包含不同版本的图标，以匹配特定的主题。 有关详细信息，请参阅 icon 参数的说明。
从自定义选项卡聊天和呼叫
- 使用 XMPP: 或 IM: 协议处理程序启动聊天。
- 使用 TEL: 协议处理程序启动音频和视频呼叫。
用户 ID 令牌
您可以指定 ${UserID} 令牌作为 url 参数值的一部分。 用户登录时，客户端会将 ${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()—当用户选择另一个选项卡时，客户端会调用此方法。
注 |
不适用于 Jabber iPhone 和 iPad 版本 |
-
onHubResized()—当用户调整客户端中央窗口大小或移动窗口时，客户端会调用此方法。
-
onHubActivated()—客户端中央窗口激活后，客户端会调用此方法。
-
onHubDeActivated()—客户端中央窗口停用后，客户端会调用此方法。
订阅自定义选项卡中的在线状态
您可以使用这些 JavaScript 方法订阅联系人的在线状态，并从客户端接收在线状态更新：
-
SubscribePresence()—使用用户的 IM 地址为此方法指定字符串值。
-
OnPresenceStateChanged—此方法使用户能够基于联系人的在线状态从客户端接收更新。 您可以指定以下值之一作为字符串：
-
IM 地址
-
基本在线状态（有空、离开、离线、免打扰）
-
多样的在线状态（会议中、呼叫中或自定义在线状态）
-
注 |
|
在自定义选项卡中获取区域设置信息
您可以使用这些 JavaScript 方法从客户端检索联系人的当前区域设置信息：
-
GetUserLocale()—此方法使用户能够从客户端请求区域设置信息。
-
OnLocaleInfoAvailable—此方法使用户能够从客户端接收区域设置信息。 您可以使用包含客户端区域设置信息的字符串值。
注 |
Jabber iPad 和 iPhone 版本仅支持 OnLocaleInfoAvailable。 |
调整自定义选项卡以匹配客户端主题
您可以使用这些 JavaScript 方法返回当前客户端主题：
-
QueryCurrentTheme()—您可以通过此方法获取当前的 Jabber 主题。
-
OnThemeChanged(theme)—当 Jabber 中的主题更改时，此方法将被动接收新主题。
主题的可能值包括：
-
默认值—默认的 Jabber 主题
-
深色—Jabber“深色”主题
-
独特—Jabber“高对比度”主题
-
高对比度—Windows 高对比度主题
Cisco Jabber Windows 版本的 JavaScript 示例
此示例显示了一个 HTML 页面，该页面使用 JavaScript 来显示可输入数字 1–999 的表单：
<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 页面中，然后将此页面指定为自定义嵌入式选项卡。
Jabber Mac 版本的 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>
反馈