支持统一用户体验
注意：
StoreFront 仍是用于表示企业应用商店的名称，它将来自 Citrix Virtual Apps and Desktops 站点的应用程序和桌面聚合到一个易于用户使用的应用商店中。Citrix Receiver 技术现在包含在 Citrix Workspace 应用程序中。我们的产品和文档中正在实施此过渡。产品中的内容可能仍包含以前的名称，例如统一体验是指 Citrix Receiver。感谢您在此转换期间耐心等待。有关我们新名称的详细信息，请参阅 https://www.citrix.com/products/。
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 站点。
- 在 Windows“开始”屏幕或“应用程序”屏幕中，找到并单击 Citrix StoreFront 磁贴。
- 在 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 站点。
- 在 Windows 的开始屏幕或应用程序屏幕中，找到并单击 Citrix StoreFront 磁贴。
- 在 Citrix StoreFront 管理控制台的左侧窗格中选择应用商店节点，在中间窗格中选择一个应用商店，然后在操作窗格中单击配置统一体验。如果您未创建 Citrix Receiver for Web Web 站点，则将显示一条消息，其中包含指向“添加 Receiver for Web 站点”向导的链接。
- 选择用户访问此应用商店时 Citrix Workspace 应用程序客户端将显示的默认 Receiver for Web 站点。
- 单击确定。
自定义 Citrix Receiver 外观
- 在 Windows 开始屏幕或“应用程序”屏幕中，找到并单击 Citrix StoreFront 磁贴。
- 在 Citrix StoreFront 管理控制台的左侧窗格中选择应用商店节点，然后在“操作”窗格中依次单击管理 Receiver for Web 站点和配置。
- 选择自定义外观并进行选择以自定义登录后 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");
<!--NeedCopy-->
要使文本更加明显，请将以下样式添加到 custom.css 中：
.customAuthHeader,
.customAuthFooter,
.customAuthTop,
.customAuthBottom
{
font-size:16px;
color:yellow;
text-align: center;
}
<!--NeedCopy-->
这将显示以下结果：
要使用 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");
<!--NeedCopy-->
注意：
第四个示例行在自定义目录中需要一个名为 logo.png 的图像。
在 Receiver for Web 的登录页面中添加动态标头
此处“动态”意味着每次都加载和显示某些内容，而非缓存。Web 浏览器通常在可能时缓存内容，但 Citrix Workspace 应用程序始终缓存 UI，并始终加载以前缓存的 UI。这意味着如果您将前面的示例用于服务状态等内容，则不会得到预期的效果。
相反，您需要进行 Ajax 调用以动态加载内容并将其插入页面。为此，您需要：
-
定义一个有用的实用程序函数，该函数从服务器上的 \customweb 目录中的页面获取内容，并将其添加到页面中。这相当于上面的 .html 示例，并且自定义页面可以包含文本或 HTML 代码段。请使用 \customweb 目录，因为该目录被复制到 StoreFront 服务器组中的所有服务器（就像 \custom 目录一样），但不会下载和缓存。
-
安排在合适的点调用此函数。过早调用该函数会导致 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;
<!--NeedCopy-->
这将从 \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();
}
};
<!--NeedCopy-->
使点击浏览免责声明框更宽
用于 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);
};
<!--NeedCopy-->
显示大消息时，这会添加一个标记类。关闭框时，会在一小段延迟后删除此标记类（需要避免讨厌的“跳转”）。
添加一些 CSS 来根据此标记类的存在调整此框的大小。例如，在 custom\style.css 中尝试以下操作：
.largeTiles .largeMessage .messageBoxPopup
{
width:800px;
}
<!--NeedCopy-->
然后，大型 UI 上显示 messageBoxPopup 并设置了 largeMessage 标志时，宽度为 800 像素。现有代码确保其居中显示。（在移动电话等小型 UI 上，默认消息框已为全宽）。
要挤入更多文本，可以通过将以下内容添加到 custom\style.css 来减小字体大小，或者考虑添加可滚动浏览的内容。
.largeTiles .largeMessage .messageBoxText
{
font-size:10px;
}
<!--NeedCopy-->
使点击浏览免责声明框具有可滚动浏览的内容
调用 showMessage 时，可以传递某些 HTML，而非仅仅一个字符串，以添加样式。要执行此操作，请将以前对 showMessage 的任意示例调用中的 messageText 替换为以下内容：
CTXS.ExtensionAPI.showMessage({
messageTitle: "Welcome!",
messageText: "<div class='disclaimer'>rhubarb rhubarb rhubarb ... rhubarb rhubarb</div>",
okButtonText: "Accept",
okAction: callback });
<!--NeedCopy-->
然后向 style.css 中添加以下内容：
.disclaimer {
height: 200px;
overflow-y: auto;
}
<!--NeedCopy-->
这将显示以下结果：
向每个页面添加页脚
还有专门针对此的自定义区域。可以添加下面的 Javascript 行来设置其内容：
$('#customBottom').html("For ACME Employees Only");
<!--NeedCopy-->
定义 style.css 中的样式。设置 position:static 以确保滚动区域按预期工作。
#customBottom
{
text-align:center;
font-size:30px;
position:static;
}
<!--NeedCopy-->
注意：
如果使用脚本动态调整此区域的大小，则必须调用 CTXS.ExtensionAPI.resize() 命令以让 Citrix Workspace 应用程序知道某些内容发生了变化。
当用户转到“应用程序”选项卡时，将文件夹视图设置为默认视图
为此，请监视“视图更改”事件。如果“store”（应用程序视图的内部名称）的视图发生变化，请导航到根文件夹。小心：
-
当 onViewChange 事件触发时，表示应用商店视图正在更改，视图尚未完成绘制。因此，如果您立即导航到该文件夹，应用商店视图的初始化代码只会撤消您的工作，因为它将在代码之后运行。为了避免这种情况，请添加 1 毫秒的延迟，以确保您的代码在当前堆栈展开后执行。
-
包含单词“whitespace”的三行通过在其上放置一个大型自定义区域来确保初始的“所有应用程序”UI 脱屏绘制。这将停止“所有应用程序”视图在文件夹显示之前闪烁不定。
像往常一样向 script.js 中添加以下代码：
$('#customScrollTop').append('<div class="whitespace"></div>');
CTXS.Extensions.onViewChange = function(view) {
if (view == "store") {
$('.whitespace').height(5000);
window.setTimeout(function() {
CTXS.ExtensionAPI.navigateToFolder("/");
$('.whitespace').height(0);
}, 1);
}
};
<!--NeedCopy-->
从同时出现在特色类别中的所有应用程序中隐藏应用程序
可以使用下面的代码来实现这一点。首先记住捆绑包中的每个应用程序，然后从“所有应用程序显示”列表中将其删除。
var bundleApps = [];
CTXS.Extensions.sortBundleAppList = function(apps,bundle, defaultfn) {
for (var i = 0; i < apps.length; i++) {
bundleApps.push(apps[i]);
}
defaultfn();
};
CTXS.Extensions.filterAllAppsDisplay = function(allapps) {
for (var i = 0; i < allapps.length; i++) {
if ($.inArray(allapps[i], bundleApps) != -1) {
allapps.splice(i, 1);
i--;
}
}
};
<!--NeedCopy-->
如果使用此自定义，最好将文本字符串“所有应用程序”更改为“其他应用程序”，以避免用户感到困惑。要执行此操作，请编辑自定义目录中的 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);
<!--NeedCopy-->
更改默认 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);
<!--NeedCopy-->
要发现要更改的标签的名称，请执行以下操作：
- 在 StoreFront 服务器上，查看目录 C:\inetpub\wwwroot\citrix\StoreWeb\receiver\js\localization\en（假设您的应用商店名为“Store”）中的对象。
- 在记事本中打开文件 ctxs.strings_something.js。
- 查找要更改的字符串。注意：请不要直接编辑此文件，而是像对“install”示例一样在 custom 目录中创建覆盖值。
更改特色类别的背景图像
重要：
请勿尝试覆盖服务器上的图像。这混淆了已下载图像的任何客户端，因为这些客户端不知道图像已经改变。这也使得升级变得难以执行或不可能执行。
可以将自己的图像添加到 \custom 目录，并添加 CSS 以对其进行引用。每个特色类别（内部称为“捆绑”）使用两个图像：
- 第一个图像用作旋转木马中的磁贴。
- 第二个图像用作详细信息页面上的标题后面的背景图像。此图像将拉伸以填充屏幕的宽度，并在底部边缘添加一个 blur。
可以为每个屏幕使用不同的图像。请考虑使用相同的图像，但在详细信息页面中将其背景高度加倍，以便仅显示图像的上半部分。由于图像在详细信息页面上拉伸，因此，请使用变形后看起来很不错的图像。
第一个捆绑包具有类“appBundle1”，第二个具有“appBundle2”，以此类推，直至“appBundle8”。以下示例使用图像“clouds.png”，您可以通过右键单击以下图像进行下载：
- 将图像保存在 \custom 目录中。图像需要大约 520 × 256 像素才能与其他像素保持一致（但根据需要缩放）。
- 将以下内容添加到 style.css 中：
.appBundle1 {
background-image: url('clouds.png');
}
.bundleDetail.appBundle1 {
background-image: url('clouds.png');
background-size: 100% 200%;
}
<!--NeedCopy-->
这将显示以下结果：
防止公司徽标看起来模糊不清
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 显示器。
有时，这会导致图像模糊，因为一半的图像细节已被丢弃。这是非常罕见的，因为徽标往往轮廓突出且简单。如果您的徽标遇到此问题，请使用以下解决方法：
- 创建两个版本的徽标，一个是 x1 大小，一个是 x2 大小，并将其保存在 \custom 目录中。
- 编辑 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;
}
<!--NeedCopy-->
注意：
- 确保这些自定义样式不在“托管部分”内部。否则，这些样式会被覆盖，或者会混淆 StoreFront 管理控制台。
- 两种样式都指定相同的背景大小。这是因为大小是以“逻辑”单位指定的，对于 x2 图像，背景大小是实际徽标宽度和高度的一半。
设置背景图像
注意：
统一体验专为简单的白色背景而设计。背景图像往往会分散注意力。如果添加背景图像，请尝试使用轻便的图像。如有必要，请调整任何字体，以便其继续针对此图像工作。
示例 1：对上载的图像的 CSS 引用
按如下所示更改 custom.css：
.storeViewSection {
background: url('images/background.jpg') no-repeat center center fixed;
background-size: cover;
}
<!--NeedCopy-->
注意：
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;
}
<!--NeedCopy-->
这将显示以下结果：
查找代码中的错误
有几种方法可以进行调试。请务必先尝试浏览器。这比 Citrix Workspace 应用程序中的调试自定义要容易得多。可以在页面 URL 中的 ? 或 # 之后添加以下参数，并且可以将多个参数连在一起。例如：
http://storefront.wwco.net/Citrix/StoreWeb/#-tr-nocustom
<!--NeedCopy-->
-errors — 通常情况下，我们尝试抑制代码中可能出现的任何错误，但您可以改为将其突出显示。出现错误时，此参数会显示一个警报框。
-debug — 此参数禁用自定义代码的任何异常处理。此参数对现代浏览器中内置的开发工具非常有用（如 Google Chrome 或 Internet Explorer 中的 F12），并且在您自己调试异常时非常有用。
-nocustom — 此参数禁用您的脚本和 CSS 自定义。如果 Citrix Workspace 应用程序无法运行，并且您希望了解该应用程序是否是由于您引入的错误所致，则此参数非常有用。
-tr — 此参数提供在单独的浏览器选项卡中跟踪 Citrix Workspace 应用程序 UI 代码，包括通过调用 CTXS.ExtensionAPI.trace() 添加的任何跟踪。
统一用户体验
此部分介绍统一体验的功能和外观。
卡布局
应用商店中的应用程序以“卡片”的布局显示。您可以展开每个卡片下面的面板以显示更多详细信息和操作。
注意：
统一体验不允许您使用拖放功能来重新排列应用程序。
主页
主页将显示收藏夹。
收藏夹
单击或轻按星形可收藏某个项目：
搜索
搜索所有应用程序、桌面和类别：
设置
从下拉菜单中访问设置：
该菜单显示取自 Active Directory 显示名称的用户名。如果显示名称留空（我们不建议如此操作），则将显示域和帐户名称。使用该菜单可打开“设置”页面、检查 Citrix Workspace 应用程序版本或注销。
设置分别允许您恢复任何已断开连接的会话、断开所有当前会话以及注销。以卡片或列表布局显示设置页面：
连接。恢复任何已断开连接的会话。
断开连接。断开当前所有会话的连接并注销。
激活 Citrix Receiver。下载用于将此应用商店添加到本地 Citrix Workspace 应用程序的文件。
更改 Citrix Receiver。此时将打开一个用于检查本地 Citrix Workspace 应用程序的页面。此页面还允许用户在以下操作之间切换：使用本地安装的 Citrix Workspace 应用程序启动资源，或在 HTML5 浏览器中启动资源。