支持统一用户体验

注意:

StoreFront 仍是用于表示企业应用商店的名称,它将来自 Citrix Virtual Apps and Desktops 站点的应用程序和桌面聚合到一个易于用户使用的应用商店中。Citrix Receiver 技术现在包含在 Citrix Workspace 应用程序中。我们的产品和文档中正在实施此过渡。产品中的内容可能仍包含以前的名称,例如统一体验是指 Citrix Receiver。感谢您在此转换期间耐心等待。有关我们的新名称的更多详细信息,请参阅 https://www.citrix.com/about/citrix-product-guide/

StoreFront 支持统一用户体验。统一体验向所有 Web 和本机 Citrix Workspace 应用程序提供集中管理的 HTML5 用户体验。此体验支持自定义和精选应用程序组管理。

使用此版本的 StoreFront 创建的应用商店使用统一体验。

使用 StoreFront 管理控制台执行以下 Citrix Receiver for Web 相关任务:

  • 创建 Citrix Receiver for Web 站点。
  • 更改 Citrix Receiver for Web 站点体验。
  • 选择与应用商店关联的统一 Citrix Receiver for Web 站点。
  • 自定义 Receiver 外观。

使用 Javascript 和 CSS 自定义 Citrix Receiver for Web 页面

在多服务器部署中,请一次仅使用一台服务器以更改服务器组的配置。确保 Citrix StoreFront 管理控制台未在部署中的任何其他服务器上运行。完成后,请将对配置所做的更改传播到服务器组,以便更新部署中的其他服务器。

注意:

如果使用 XenApp 6.x,在启用了统一体验的情况下,不支持设置为通过流技术推送到客户端尽可能通过流技术进行推送,否则从服务器访问的应用程序。

创建 Citrix Receiver for Web Web 站点

每次创建应用商店时都会自动创建 Citrix Receiver for Web 站点。您还可以使用此过程创建其他 Receiver for Web 站点。

  1. 在 Windows“开始”屏幕或“应用程序”屏幕中,找到并单击 Citrix StoreFront 磁贴
  2. 在 Citrix StoreFront 管理控制台的左侧窗格中选择“应用商店”节点,然后在“操作”窗格中单击管理 Receiver for Web 站点 > 添加,并按照向导进行操作。

选择与应用商店关联的统一 Citrix Receiver for Web 站点

使用 StoreFront 创建新应用商店时,会自动创建 Citrix Receiver for Web 站点并将其与应用商店关联。Citrix Receiver for Web 站点使用统一体验。应用商店有多个 Receiver for Web 站点时,需要选择用户使用 Citrix Workspace 应用程序访问应用商店时显示哪个 Receiver for Web 站点。

  1. 在 Windows 开始屏幕或应用程序屏幕中,找到并单击 Citrix StoreFront 磁贴。
  2. 在 Citrix StoreFront 管理控制台的左侧窗格中选择应用商店节点,在中间窗格中选择一个应用商店,然后在操作窗格中单击配置统一体验。如果您未创建 Citrix Receiver for Web Web 站点,则将显示一条消息,其中包含指向“添加 Receiver for Web 站点”向导的链接。
  3. 选择用户访问此应用商店时 Citrix Workspace 应用程序客户端将显示的默认 Receiver for Web 站点。
  4. 单击确定

自定义 Citrix Receiver 外观

  1. 在 Windows 开始屏幕或“应用程序”屏幕中,找到并单击 Citrix StoreFront 磁贴。
  2. 在 Citrix StoreFront 管理控制台的左侧窗格中选择应用商店节点,然后在“操作”窗格中依次单击管理 Receiver for Web 站点配置
  3. 选择自定义外观并进行选择以自定义登录后 Web 站点的显示方式。

本地化后的图片

使用 Javascript 和 CSS 进一步自定义

注意:

在本部分中的示例中,将 Javascript 添加到 script.js 文件(例如在 C:\inetpub\wwwroot\Citrix\StoreWeb\custom 中),并将 CSS 添加到同一目录中的 style.css 文件。

在 Receiver for Web 的登录页面中添加静态标头

此处“静态”意味着固定的文本,例如欢迎消息或公司名称。有关更改的内容,例如新闻消息或服务器状态,请参阅在 Receiver for Web 的登录页面中添加动态标头

可以使用以下 javascript 行在四个位置添加静态文本:

$('.customAuthHeader').html("Example one - top of login screen");
$('.customAuthTop').html("Example two - above login box");
$('.customAuthBottom').html("Example three - below login box");
$('.customAuthFooter').html("Example four - bottom of login screen");

要使文本更加明显,请将以下样式添加到 custom.css 中:

.customAuthHeader,
.customAuthFooter,
.customAuthTop,
.customAuthBottom
{
 font-size:16px;
 color:yellow;
 text-align: center;
}

这将显示以下结果:

static-text-example

要使用 HTML 格式,请将 4 行 javascript 替换为以下内容:

$('.customAuthHeader').html("<b>Example one</b> – top of login screen");
$('.customAuthTop').html("<div style='background:black'>Example two – above login box</div>");
$('.customAuthBottom').html("<i>Example three – below login box</i>");
$('.customAuthFooter').html("<img src='logo.png'>Example four – bottom of login screen");

注意:

第四个示例行在自定义目录中需要一个名为 logo.png 的图像。

在 Receiver for Web 的登录页面中添加动态标头

此处“动态”意味着每次都加载和显示某些内容,而非缓存。Web 浏览器通常在可能时缓存内容,但 Citrix Workspace 应用程序始终缓存 UI,并始终加载以前缓存的 UI。这意味着如果您将前面的示例用于服务状态等内容,则不会得到预期的效果。

相反,您需要进行 Ajax 调用以动态加载内容并将其插入页面。为此,您需要:

  1. 定义一个有用的实用程序函数,该函数从服务器上的 \customweb 目录中的页面获取内容,并将其添加到页面中。这相当于上面的 .html 示例,并且自定义页面可以包含文本或 HTML 代码段。请使用 \customweb 目录,因为该目录被复制到 StoreFront 服务器组中的所有服务器(就像 \custom 目录一样),但不会下载和缓存。

  2. 安排在合适的点调用此函数。过早调用该函数会导致 Citrix Workspace 应用程序中出现问题,因为脚本在配置完全加载之前运行。进行此类操作的好时机是 beforeDisplayHomeScreen(但如果您希望在登录页面上显示内容,然后改为使用 beforeLogin )。以下代码处理这两种情况,并且适用于 Web 客户端和本机客户端。

完整的脚本如下:

function setDynamicContent(txtFile, element) {
   CTXS.ExtensionAPI.proxyRequest({
      url: "customweb/"+txtFile,
      success: function(txt) {$(element).html(txt);}});
}

var fetchedContent=false;
function doFetchContent(callback)
{
  if(!fetchedContent) {
    fetchedContent = true;
    setDynamicContent("ReadMe.txt", "#customScrollTop");
  }
  callback();
}

CTXS.Extensions.beforeDisplayHomeScreen = doFetchContent;
CTXS.Extensions.beforeLogon = doFetchContent;

这将从 \customweb\readme.txt 加载内容,默认情况下包含一些不感兴趣的信息。添加您自己的文件 (status.txt) 并调整脚本以对其进行调用以获得更有用的结果。

在登录前或登录后显示点击浏览免责声明

以下示例已在 script.js 文件中作为示例提供,但需要取消注释。此代码有两个版本:第一个是在 Web 浏览器登录前完成的,第二个是在本机客户端的主 UI 之前完成的。如果您只想要登录后消息,请删除第一个函数。但是,自己使用预先登录消息不是一个好选择,因为登录流只能在 Web 浏览器上看到(而非在本机客户端上)。即使这样,当用户从 Citrix Gateway 访问时,登录流也会被隐藏。

var doneClickThrough = false;

// Before web login
CTXS.Extensions.beforeLogon = function (callback) {
  doneClickThrough = true;
  CTXS.ExtensionAPI.showMessage({
    messageTitle: "Welcome!",
    messageText: "Only for WWCo Employees",
    okButtonText: "Accept",
    okAction: callback
  });
};

// Before main screen (both web and native)
CTXS.Extensions.beforeDisplayHomeScreen = function (callback) {
  if (!doneClickThrough) {
    CTXS.ExtensionAPI.showMessage({
      messageTitle: "Welcome!",
      messageText: "Only for WWCo Employees",
      okButtonText: "Accept",
      okAction: callback
    });
  } else {
    callback();
  }
};

使点击浏览免责声明框更宽

用于 CTXS.ExtensionAPI.showMessage() 的消息框的样式是预先设置的。可以调整此样式使其更大,以便其他消息看起来正常。将以下示例函数添加到 script.js 中,以便在之后再次收缩样式。希望使用更大的框时,请调用 showLargeMessage() 而非 CTXS.ExtensionAPI.showMessage()

function mkLargeMessageExitFn(origfn)
{
  if(origfn) {
    return function() {
      origfn();
      window.setTimeout(function() {$('body').removeClass('largeMessage');},500);
    };
  }
}

function showLargeMessage(details)
{
  $('body').addClass('largeMessage');
  details.cancelAction = mkLargeMessageExitFn(details.cancelAction);
  details.okAction = mkLargeMessageExitFn(details.okAction);
  CTXS.ExtensionAPI.showMessage(details);
};

显示大消息时,这会添加一个标记类。关闭框时,会在一小段延迟后删除此标记类(需要避免讨厌的“跳转”)。

添加一些 CSS 来根据此标记类的存在调整此框的大小。例如,在 custom\style.css 中尝试以下操作:

.largeTiles .largeMessage .messageBoxPopup
{
  width:800px;
}

然后,大型 UI 上显示 messageBoxPopup 并设置了 largeMessage 标志时,宽度为 800 像素。现有代码确保其居中显示。(在移动电话等小型 UI 上,默认消息框已为全宽)。

wide-disclaimer-box

要挤入更多文本,可以通过将以下内容添加到 custom\style.css 来减小字体大小,或者考虑添加可滚动浏览的内容

.largeTiles .largeMessage .messageBoxText
{
  font-size:10px;
}

使点击浏览免责声明框具有可滚动浏览的内容

调用 showMessage 时,可以传递某些 HTML,而非仅仅一个字符串,以添加样式。要执行此操作,请将以前对 showMessage 的任意示例调用中的 messageText 替换为以下内容:

    CTXS.ExtensionAPI.showMessage({
          messageTitle: "Welcome!",
          messageText: "&lt;div class='disclaimer'&gt;rhubarb rhubarb  rhubarb ... rhubarb rhubarb&lt;/div&gt;",
          okButtonText: "Accept",
          okAction: callback });

然后向 style.css 中添加以下内容:

.disclaimer {
    height: 200px;
    overflow-y: auto;
}

这将显示以下结果:

scrolling-text-example

向每个页面添加页脚

还有专门针对此的自定义区域。可以添加下面的 Javascript 行来设置其内容:

$('#customBottom').html("For ACME Employees Only");

定义 style.css 中的样式。设置 position:static 以确保滚动区域按预期工作。

#customBottom
{
 text-align:center;
 font-size:30px;
 position:static;
}

注意:

如果使用脚本动态调整此区域的大小,则必须调用 CTXS.ExtensionAPI.resize() 命令以让 Citrix Workspace 应用程序知道某些内容发生了变化。

当用户转到“应用程序”选项卡时,将文件夹视图设置为默认视图

为此,请监视“视图更改”事件。如果“store”(应用程序视图的内部名称)的视图发生变化,请导航到根文件夹。小心:

  • onViewChange 事件触发时,表示应用商店视图正在更改,视图尚未完成绘制。因此,如果您立即导航到该文件夹,应用商店视图的初始化代码只会撤消您的工作,因为它将在代码之后运行。为了避免这种情况,请添加 1 毫秒的延迟,以确保您的代码在当前堆栈展开后执行。

  • 包含单词“whitespace”的三行通过在其上放置一个大型自定义区域来确保初始的“所有应用程序”UI 脱屏绘制。这将停止“所有应用程序”视图在文件夹显示之前闪烁不定。

像往常一样向 script.js 中添加以下代码:

$('#customScrollTop').append('&lt;div class="whitespace"&gt;&lt;/div&gt;');

CTXS.Extensions.onViewChange = function(view) {
  if (view == "store") {
    $('.whitespace').height(5000);
    window.setTimeout(function() {
      CTXS.ExtensionAPI.navigateToFolder("/");
      $('.whitespace').height(0);
    }, 1);
  }
};

从同时出现在特色类别中的所有应用程序中隐藏应用程序

可以使用下面的代码来实现这一点。首先记住捆绑包中的每个应用程序,然后从“所有应用程序显示”列表中将其删除。

var bundleApps = [];

CTXS.Extensions.sortBundleAppList = function(apps,bundle, defaultfn) {
  for (var i = 0; i &lt; apps.length; i++) {
    bundleApps.push(apps[i]);
  }
  defaultfn();
};

CTXS.Extensions.filterAllAppsDisplay = function(allapps) {
  for (var i = 0; i &lt; allapps.length; i++) {
    if ($.inArray(allapps[i], bundleApps) != -1) {
       allapps.splice(i, 1);
       i--;
    }
  }
};

如果使用此自定义,最好将文本字符串“所有应用程序”更改为“其他应用程序”,以避免用户感到困惑。要执行此操作,请编辑自定义目录中的 strings.en.js 文件,然后为 AllAppsTitle 添加一个标记。例如,更改显示为黄色:

(function ($) {
  $.localization.customStringBundle("en", {
   <span style="background-color: yellow;">AllAppsTitle: "Other Apps",</span>
   Example1: "This is an example",
   Example2: "This is another example"
});
})(jQuery);

更改默认 UI 文本

如果您知道标签的名称,则可以更改 UI 中使用的任何文本。例如,要将 Google Chrome 上的 Receiver for Web 中使用的“安装”屏幕更改为“入门”,请按如下所示添加自定义字符串:

(function ($) {
  $.localization.customStringBundle("en", {
   <span style="background-color: yellow;">Install: "Get Started",</span>
   Example1: "This is an example",
   Example2: "This is another example"
});
})(jQuery);

get-started

要发现要更改的标签的名称,请执行以下操作:

  1. 在 StoreFront 服务器上,查看目录 C:\inetpub\wwwroot\citrix\StoreWeb\receiver\js\localization\en(假设您的应用商店名为“Store”)中的对象。
  2. 在记事本中打开文件 ctxs.strings_something.js
  3. 查找要更改的字符串。注意:请不要直接编辑此文件,而是像对“install”示例一样在 custom 目录中创建覆盖值。

更改特色类别的背景图像

重要:

请勿尝试覆盖服务器上的图像。这混淆了已下载图像的任何客户端,因为这些客户端不知道图像已经改变。这也使得升级变得难以执行或不可能执行。

可以将自己的图像添加到 \custom 目录,并添加 CSS 以对其进行引用。每个特色类别(内部称为“捆绑”)使用两个图像:

  • 第一个图像用作旋转木马中的磁贴。
  • 第二个图像用作详细信息页面上的标题后面的背景图像。此图像将拉伸以填充屏幕的宽度,并在底部边缘添加一个 blur。

可以为每个屏幕使用不同的图像。请考虑使用相同的图像,但在详细信息页面中将其背景高度加倍,以便仅显示图像的上半部分。由于图像在详细信息页面上拉伸,因此,请使用变形后看起来很不错的图像。

第一个捆绑包具有类“appBundle1”,第二个具有“appBundle2”,以此类推,直至“appBundle8”。以下示例使用图像“clouds.png”,您可以通过右键单击以下图像进行下载:

云

  1. 将图像保存在 \custom 目录中。图像需要大约 520 × 256 像素才能与其他像素保持一致(但根据需要缩放)。
  2. 将以下内容添加到 style.css 中:
.appBundle1 {
  background-image: url('clouds.png');
}

.bundleDetail.appBundle1 {
  background-image: url('clouds.png');
  background-size: 100% 200%;
}

这将显示以下结果:

特色图像旋转木马

特色图像详细信息

防止公司徽标看起来模糊不清

Receiver for Web 需要正确处理常规(“低 DPI”)屏幕和每平方英寸具有更高像素数的新高分辨率(“高 DPI”)屏幕。例如,Apple Retina 屏幕是非视网膜屏幕分辨率的两倍。在便携式计算机上,屏幕通常是 x1.5、x2 甚至 x3,其大小的“正常”像素数。由于 x2 是目前最常见的,并且差异最大,因此,Citrix Workspace 应用程序的大部分图像资源都以两种分辨率提供。正常屏幕上为 100 × 100 像素的图像,也有 200 × 200 像素的 x2 版本。

当您从 StoreFront 管理控制台上载徽标图像时,请确保其属于 x2 图像。换句话说,它们大约是常规屏幕上“空间”的宽度和高度的两倍。(在 x1 上载的图像不会放大到 x2。)常规屏幕上的“空间”为 170 × 40 像素,因此您上载的徽标图像应为 340 × 80 像素。

StoreFront 会创建徽标的副本并将其缩放到一半大小。此图像用于低 DPI 显示器。

有时,这会导致图像模糊,因为一半的图像细节已被丢弃。这是非常罕见的,因为徽标往往轮廓突出且简单。如果您的徽标遇到此问题,请使用以下解决方法:

  1. 创建两个版本的徽标,一个是 x1 大小,一个是 x2 大小,并将其保存在 \custom 目录中。
  2. 编辑 custom\style.css,以便其引用这两个不同的图像。这将显示如下所示的内容:
<span style="color: green;">/* The following section of the file is reserved for use by StoreFront. \*/</span>
<span style="color: green;">/\* CITRIX DISCLAIMER: START OF MANAGED SECTION. PLEASE DO NOT EDIT ANY STYLE IN THIS SECTION \*/</span>
<span style="color: green;">/\* CITRIX DISCLAIMER: END OF MANAGED SECTION. \*/</span>
<span style="color: green;">/\* You may add custom styles below this line. */</span>

.logo-container {
    background-image: url('mylogo_x1.png');
    background-size: 169px 21px;
}

.highdpi .logo-container {
    background-image: url('mylogo_x2.png');
    background-size: 169px 21px;
}

注意:

  • 确保这些自定义样式不在“托管部分”内部。否则,这些样式会被覆盖,或者会混淆 StoreFront 管理控制台。
  • 两种样式都指定相同的背景大小。这是因为大小是以“逻辑”单位指定的,对于 x2 图像,背景大小是实际徽标宽度和高度的一半。

设置背景图像

注意:

统一体验专为简单的白色背景而设计。背景图像往往会分散注意力。如果添加背景图像,请尝试使用轻便的图像。如有必要,请调整任何字体,以便其继续针对此图像工作。

示例 1:对上载的图像的 CSS 引用

按如下所示更改 custom.css:

.storeViewSection {
   background: url('images/background.jpg') no-repeat center center fixed;
   background-size: cover;
}

注意:

background-size:cover; 语句在某些较旧的浏览器中不起作用。

示例 2:对现有图像的 CSS 引用进行调整

按如下所示更改 custom.css:

.storeViewSection {
   background: url('../media/bg_bubbles.jpg') no-repeat center center fixed;
    background-size: cover;
    color: white;
}

// Tweak fonts
.smallTiles .storeapp .storeapp-name,
.largeTiles .storeapp .storeapp-name {
    color: white;
}

// Tweak bundle area so it doesn't clash as badly
.largeTiles .applicationBundleContainer {
    background-color: rgba(255, 255, 255, 0.4);
    margin-top: 0;
    padding-top: 25px;
}

.smallTiles .applicationBundleContainer {
    background-color: rgba(255, 255, 255, 0.4);
    margin-top: 0;
    padding-top: 14px;
}

这将显示以下结果:

背景图像

查找代码中的错误

有几种方法可以进行调试。请务必先尝试浏览器。这比 Citrix Workspace 应用程序中的调试自定义要容易得多。可以在页面 URL 中的 ? 或 # 之后添加以下参数,并且可以将多个参数连在一起。例如:

http://storefront.wwco.net/Citrix/StoreWeb/#-tr-nocustom

-errors — 通常情况下,我们尝试抑制代码中可能出现的任何错误,但您可以改为将其突出显示。出现错误时,此参数会显示一个警报框。

-debug — 此参数禁用自定义代码的任何异常处理。此参数对现代浏览器中内置的开发工具非常有用(如 Google Chrome 或 Internet Explorer 中的 F12),并且在您自己调试异常时非常有用。

-nocustom — 此参数禁用您的脚本和 CSS 自定义。如果 Citrix Workspace 应用程序无法运行,并且您希望了解该应用程序是否是由于您引入的错误所致,则此参数非常有用。

-tr — 此参数提供在单独的浏览器选项卡中跟踪 Citrix Workspace 应用程序 UI 代码,包括通过调用 CTXS.ExtensionAPI.trace() 添加的任何跟踪。

统一用户体验

此部分介绍统一体验的功能和外观。

卡布局

应用商店中的应用程序以“卡片”的布局显示。您可以展开每个卡片下面的面板以显示更多详细信息和操作。

主页

主页将显示收藏夹。

统一的 UI 主页

收藏夹

单击或轻按星形可收藏某个项目:

星形图标

搜索

搜索所有应用程序、桌面和类别:

星形图标

Settings(设置)

从下拉菜单中访问设置:

设置图标

该菜单显示取自 Active Directory 显示名称的用户名。如果显示名称留空(我们不建议如此操作),则将显示域和帐户名称。使用该菜单可打开“设置”页面、检查 Citrix Workspace 应用程序版本或注销。

统一的 UI 设置

设置分别允许您恢复任何已断开连接的会话、断开所有当前会话以及注销。以卡片或列表布局显示设置页面:

卡片-列表图标

连接。恢复任何已断开连接的会话。

断开连接。断开当前所有会话的连接并注销。

激活 Citrix Receiver。下载用于将此应用商店添加到本地 Citrix Workspace 应用程序的文件。

更改 Citrix Receiver。此时将打开一个用于检查本地 Citrix Workspace 应用程序的页面。此页面还允许用户在以下操作之间切换:使用本地安装的 Citrix Workspace 应用程序启动资源,或在 HTML5 浏览器中启动资源。