Unterstützung der einheitlichen Benutzeroberfläche
Hinweis:
“StoreFront” wird weiter für den Unternehmensappstore verwendet, der Anwendungen und Desktops von Citrix Virtual Apps and Desktops-Sites in einem einzigen benutzerfreundlichen Store für Benutzer zusammenfasst. Die Citrix Receiver-Technologie ist jetzt in der Citrix Workspace-App enthalten. Die Umsetzung dieser Umstellung in unseren Produkten und Dokumentationen ist ein andauernder Prozess. Produktinhalte können noch den alten Namen enthalten, z. B. verweist die einheitliche Benutzeroberfläche auf “Citrix Receiver”. Wir danken Ihnen für Ihre Geduld während dieser Umstellung. Weitere Informationen zu unseren neuen Namen finden Sie unter https://www.citrix.com/products/.
StoreFront unterstützt die einheitliche Benutzeroberfläche. In einer Umgebung mit der einheitlichen Benutzeroberfläche erhalten alle Web- und systemeigenen Citrix Workspace-Apps eine zentral verwaltete HTML5-Benutzeroberfläche. Dies ermöglicht die Anpassung und das Verwalten von App-Gruppen mit Highlights.
Stores, die mit dieser Version von StoreFront erstellt wurden, verwenden die einheitliche Benutzeroberfläche.
Verwenden Sie die StoreFront-Verwaltungskonsole zur Ausführung folgender Aufgaben für Citrix Receiver für Web:
- Erstellen einer Citrix Receiver für Web-Site.
- Ändern der Benutzeroberfläche der Citrix Receiver für Web-Site.
- Auswählen einer Citrix Receiver für Web-Site mit einheitlicher Benutzeroberfläche zur Zuweisung zum Store.
- Anpassen der Receiver-Darstellung
Verwenden Sie Javascript und CSS, um Citrix Receiver für Web-Sites anzupassen.
Verwenden Sie in einer Multiserverbereitstellung jeweils nur einen Server, um Änderungen an der Konfiguration der Servergruppe vorzunehmen. Stellen Sie sicher, dass die Citrix StoreFront-Verwaltungskonsole nicht auf den anderen Servern der Bereitstellung ausgeführt wird. Zum Abschluss übertragen Sie die Konfigurationsänderungen auf die Servergruppe, sodass die anderen Server der Bereitstellung aktualisiert werden.
Hinweis:
Mit XenApp 6.x werden Anwendungen mit der Einstellung Stream zum Client oder Streaming (falls möglich), sonst Zugriff von einem Server nicht unterstützt, wenn die einheitliche Benutzeroberfläche aktiviert ist.
Erstellen einer Citrix Receiver für Web-Website
Eine Citrix Receiver für Web-Site wird automatisch mit jedem neuen Store erstellt. Sie können mit diesem Verfahren auch zusätzliche Receiver für Web-Sites erstellen.
- Suchen Sie auf dem Windows-Startbildschirm oder dem Apps-Bildschirm die Citrix StoreFront-Kachel und klicken Sie darauf.
- Wählen Sie im linken Bereich der Citrix StoreFront-Verwaltungskonsole den Knoten “Stores”, klicken Sie im Bereich “Aktionen” auf Receiver für Web-Sites verwalten > Hinzufügen und folgen Sie den Anweisungen im Assistenten.
Auswählen einer Citrix Receiver für Web-Site mit einheitlicher Benutzeroberfläche zur Zuweisung zum Store
Bei der Erstellung eines neuen Stores mit StoreFront wird automatisch eine Citrix Receiver für Web-Site erstellt und dem Store zugewiesen. Citrix Receiver für Web-Sites verwenden die einheitliche Benutzeroberfläche. Wenn ein Store über mehrere Receiver für Web-Sites verfügt, müssen Sie diejenige auswählen, die angezeigt werden soll, wenn die Benutzer mit der Citrix Workspace-App auf den Store zugreifen.
- Suchen Sie auf dem Windows-Startbildschirm oder dem Apps-Bildschirm die Citrix StoreFront-Kachel und klicken Sie darauf.
- Wählen Sie im linken Bereich der Citrix StoreFront-Verwaltungskonsole den Knoten Stores und im mittleren Bereich den Store aus und wählen Sie dann im Bereich Aktionen die Option Einheitliche Benutzeroberfläche konfigurieren. Wenn Sie keine Citrix Receiver für Web-Site erstellt haben, wird eine entsprechende Meldung mit einem Link zum Assistenten zum Hinzufügen einer solchen Site angezeigt.
- Wählen Sie die Standardwebsite für Receiver für Web, die von Citrix Workspace-App-Clients angezeigt werden soll, wenn die Benutzer auf den Store zugreifen.
- Klicken Sie auf OK.
Anpassen der Citrix Receiver-Darstellung
- Suchen Sie auf dem Windows-Startbildschirm oder dem Apps-Bildschirm die Citrix StoreFront-Kachel und klicken Sie darauf.
- Wählen Sie im linken Bereich der Citrix StoreFront-Verwaltungskonsole den Knoten Stores, klicken Sie im Bereich “Aktionen” auf Receiver für Web-Sites verwalten und klicken Sie auf Konfigurieren.
- Wählen Sie Benutzeroberfläche anpassen und legen Sie fest, wie die Website nach der Anmeldung angezeigt werden soll.
Weitere Konfiguration mit Javascript und CSS
Hinweis:
Fügen Sie in den Beispielen in diesem Abschnitt Javascript der Datei script.js hinzu (z. B. in C:\inetpub\wwwroot\Citrix\StoreWeb\custom) und fügen Sie CSS der Datei style.css im selben Verzeichnis hinzu.
Hinzufügen einer statischen Kopfzeile zur Anmeldeseite in Receiver für Web
“Statisch” bedeutet in diesem Zusammenhang einen feststehenden Text, etwa eine Begrüßung oder ein Firmenname. Änderungen wie Nachrichten oder einen Serverstatus finden Sie unter Hinzufügen einer dynamischen Kopfzeile zur Anmeldeseite in Receiver für Web.
Sie können statischen Text mit den folgenden Javascript-Zeilen an vier Positionen hinzufügen:
$('.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-->
Um den Text hervorzuheben, fügen Sie custom.css den folgenden Stil hinzu:
.customAuthHeader,
.customAuthFooter,
.customAuthTop,
.customAuthBottom
{
font-size:16px;
color:yellow;
text-align: center;
}
<!--NeedCopy-->
Dies ergibt folgendes Ergebnis:
Zur Verwendung einer HTML-Formatierung ersetzen Sie die 4 Javascript-Zeilen durch Folgendes:
$('.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-->
Hinweis:
Die vierte Zeile in dem Beispiel sucht das Bild logo.png im benutzerdefinierten Verzeichnis.
Hinzufügen einer dynamischen Kopfzeile zur Anmeldeseite in Receiver für Web
“Dynamisch” bedeutet in diesem Zusammenhang, dass Inhalte nicht zwischengespeichert, sondern jedes Mal geladen und angezeigt werden. In Webbrowsern werden Inhalte oft zwischengespeichert, die Citrix Workspace-App speichert jedoch immer die Benutzeroberfläche und lädt diese. Wenn Sie das Beispiel oben also für einen Dienststatus oder Ähnliches verwenden, erhalten Sie nicht das gewünschte Ergebnis.
Stattdessen ist ein Ajax-Aufruf zum dynamischen Laden und Einfügen des Inhalts erforderlich. Gehen Sie hierzu folgendermaßen vor:
-
Definieren Sie eine Hilfsprogrammfunktion, die den Inhalt von einer Seite im Verzeichnis \customweb auf dem Server abruft und der Seite hinzufügt. Dies entspricht den obigen HTML-Beispielen und die benutzerdefinierte Seite kann Text oder einen HTML-Ausschnitt enthalten. Verwenden Sie das Verzeichnis customweb, da es auf alle Server in einer StoreFront-Servergruppe kopiert wird (genau wie \custom). Es wird jedoch nicht heruntergeladen und zwischengespeichert.
-
Programmieren Sie den Aufruf dieser Funktion zu einem geeigneten Zeitpunkt. Ein zu früher Aufruf führt zu Problemen in der Citrix Workspace-App, da das Skript ausgeführt wird, bevor die Konfiguration vollständig geladen ist. Ein guter Zeitpunkt ist beforeDisplayHomeScreen, sollen jedoch Inhalte auf der Anmeldeseite angezeigt werden, verwenden Sie stattdessen beforeLogin. Der folgende Code ist für beide Fälle geeignet und kann für Web- und native Clients verwendet werden.
Vollständiges Skript:
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-->
Dadurch werden Inhalte aus customwebreadme.txt geladen, die immer einige uninteressante Informationen enthält. Fügen Sie Ihre eigene Datei (status.txt) hinzu und passen Sie das Skript entsprechend an, um das gewünschte Ergebnis zu erzielen.
Anzeigen einer Durchklick-Meldung vor oder nach der Anmeldung
Das folgende Beispiel ist bereits in der Datei script.js als Beispiel enthalten, muss jedoch auskommentiert werden. Es gibt zwei Codeversionen: Die erste für die Anzeige vor der Anmeldung für Webbrowser und die zweite für die Anzeige vor Aufrufen der Hauptbenutzeroberfläche für native Clients. Wenn Sie nur eine Meldung nach der Anmeldung wünschen, löschen Sie die erste Funktion. Die alleinige Verwendung einer Meldung vor Anmeldung ist keine gute Wahl, da der Anmeldefluss nur in Webbrowsern (und nicht in nativen Clients) angezeigt wird. Außerdem wird der Anmeldefluss verborgen, wenn Benutzer über Citrix Gateway zugreifen.
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-->
Verbreitern des Meldungsfelds
Das Meldungsfeld für CTXS.ExtensionAPI.showMessage() ist vorformatiert. Sie können es verbreitern, sodass es sich auch für andere Meldungen eignet. Fügen Sie script.js die folgende Beispielfunktion hinzu, um das Feld anschließend erneut zu verkleinern. Rufen Sie showLargeMessage() anstelle von CTXS.ExtensionAPI.showMessage() auf, wenn Sie ein größeres Feld wünschen.
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-->
Dadurch wird eine Markerklasse hinzugefügt, wenn das größere Feld angezeigt wird. Wenn das Feld geschlossen ist, wird die Markerklasse nach einer kurzen Verzögerung (zum Vermeiden eines Ruckelns) entfernt.
Fügen Sie CSS hinzu, um die Feldgröße basierend auf dem Vorhandensein der Markerklasse anzupassen. Beispiel in custom\style.css:
.largeTiles .largeMessage .messageBoxPopup
{
width:800px;
}
<!--NeedCopy-->
Wenn dann messageBoxPopup auf einer großen Benutzeroberfläche angezeigt wird und das largeMessage-Flag gesetzt ist, ist das Feld 800 Pixel breit. Vorhandener Code stellt sicher, dass es zentriert ist. (Auf einer kleinen Benutzeroberfläche, etwa einem Mobiltelefon, hat das Standardmeldungsfeld bereits die volle Breite.)
Um noch mehr Text einzufügen, können Sie die Schriftgröße durch folgende Angabe in customstyle.css reduzieren. Alternativ können Sie scrollbare Inhalte hinzufügen.
.largeTiles .largeMessage .messageBoxText
{
font-size:10px;
}
<!--NeedCopy-->
Durchklick-Meldungsfeld scrollbar konfigurieren
Wenn Sie showMessage aufrufen, können Sie anstelle der reinen Zeichenfolge HTML übergeben, um einen Stil zu verwenden. Ersetzen Sie hierzu messageText für showMessage durch Folgendes:
CTXS.ExtensionAPI.showMessage({
messageTitle: "Welcome!",
messageText: "<div class='disclaimer'>rhubarb rhubarb rhubarb ... rhubarb rhubarb</div>",
okButtonText: "Accept",
okAction: callback });
<!--NeedCopy-->
Fügen Sie dann style.css Folgendes hinzu:
.disclaimer {
height: 200px;
overflow-y: auto;
}
<!--NeedCopy-->
Dies ergibt folgendes Ergebnis:
Hinzufügen einer Fußzeile zu jeder Seite
Hierfür gibt es einen weiteren benutzerdefinierbaren Bereich. Sie können dessen Inhalt über folgende JavaScript-Zeile festlegen:
$('#customBottom').html("For ACME Employees Only");
<!--NeedCopy-->
Definieren Sie den Stil in style.css. Legen Sie position:static fest, um sicherzustellen, dass der Scrollbereich wie gewünscht funktioniert.
#customBottom
{
text-align:center;
font-size:30px;
position:static;
}
<!--NeedCopy-->
Hinweis:
Wenn Sie die Größe dieses Bereichs per Skript dynamisch ändern, müssen Sie den Befehl CTXS.ExtensionAPI.resize() aufrufen, damit die Citrix Workspace-App erfährt, dass sich etwas geändert hat.
Festlegen der Ordneransicht auf Registerkarte “Apps” als Standard
Überwachen Sie dazu das Ereignis “view change”. Wenn sich die Ansicht zu “store” (interner Name der Apps-Ansicht) ändert, navigieren Sie zum Stammordner. Achten Sie auf Folgendes:
-
Wird das Ereignis OnViewChange ausgelöst (= Store-Ansicht ändert sich), ist die Anzeige noch nicht abgeschlossen. Wenn Sie sofort zum Ordner navigieren, macht der Initialisierungscode für die Store-Ansicht Ihre Arbeit rückgängig, da er nach Ihrem Code ausgeführt wird. Um dies zu vermeiden, fügen Sie eine Verzögerung von 1 ms hinzu, damit Ihr Code nach dem aktuellen Stack ausgeführt wird.
-
Die drei Zeilen mit dem Wort “whitespace” sorgen dafür, dass die anfängliche Benutzeroberfläche von “All Apps” durch Überlagerung mit einem großen benutzerdefinierten Bereich bildschirmextern aufgebaut wird. Dadurch wird verhindert, dass die Alle-Apps-Ansicht flimmert, bevor die Ordner angezeigt werden.
Fügen Sie script.js folgenden Code hinzu:
$('#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-->
Verbergen von Highlight-Apps aus der Anzeige aller Apps
Sie können folgenden Code verwenden, um dies zu erreichen. Beginnen Sie mit dem Speichern jeder App in einem Paket und entfernen Sie diese dann aus der Liste “All Apps display”.
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-->
Wenn Sie diese Anpassung vornehmen, sollten Sie die Textzeichenfolge “Alle Apps” in “Andere Apps” ändern, damit Sie die Benutzer nicht verwirren. Bearbeiten Sie hierfür die Datei strings.en.js im benutzerdefinierten Verzeichnis und fügen Sie dann ein Tag für AllAppsTitle hinzu. Beispiel (Änderungen in Gelb):
(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-->
Ändern des standardmäßigen UI-Texts
Sie können jeglichen Text der Benutzeroberfläche ändern, wenn Sie dessen Bezeichnung kennen. Um beispielsweise den Installationsbildschirm in Receiver für Web für Google Chrome in “Get Started” zu ändern, fügen Sie eine benutzerdefinierte Zeichenfolge wie folgt hinzu:
(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-->
Ermitteln der Textbezeichnung für eine Änderung:
- Öffnen Sie auf dem StoreFront-Server das Verzeichnis C:\inetpub\wwwroot\citrix\StoreWeb\receiver\js\localization\en (im Beispiel wird als Name für den Store “Store” verwendet).
- Öffnen Sie die Datei ctxs.strings_something.js im Editor.
- Suchen Sie die Zeichenfolge, die Sie ändern möchten. Hinweis: Anstatt diese Datei direkt zu bearbeiten, erstellen Sie Außerkraftsetzungswerte im benutzerdefinierten Verzeichnis wie im “install”-Beispiel.
Ändern der Hintergrundbilder für Highlight-Kategorien
Wichtig:
Überschreiben Sie nicht die Bilder auf dem Server. Dies führt zu Verwirrung, wenn bereits Bilder heruntergeladen wurden, da dort nichts von der Änderung bekannt ist. Außerdem werden Upgrades erschwert oder unmöglich gemacht.
Sie können eigene Bilder im Verzeichnis \custom einfügen und per CSS referenzieren. Jede Kategorie (= intern “bundles”) hat zwei Bilder:
- Das erste Bild wird als Kachel im Karussell verwendet.
- Das zweite Bild wird als Hintergrundbild für die Kopfzeile auf der Detailseite verwendet. Dieses Bild wird gestreckt, damit es die Bildschirmbreite abdeckt, am unteren Rand wird ein Schleier hinzugefügt.
Sie können für jeden Bildschirm verschiedene Bilder verwenden. Sie können auch das gleiche Bild verwenden, jedoch die Hintergrundhöhe auf der Detailseite verdoppeln, sodass nur die obere Bildhälfte angezeigt wird. Da das Bild auf der Detailseite gestreckt wird, sollten Sie ein Bild verwenden, das auch bei Verformung gut aussieht.
Das erste Paket hat die Klasse “appBundle1”, das zweite “appBundle2” und so weiter bis zu “appBundle8”. Im folgenden Beispiel wird das Bild “clouds.png” verwendet (Sie können es mit einem rechten Maustaste auf das folgende Bild herunterladen):
- Speichern Sie das Bild im Verzeichnis \custom. Das Bild muss etwa 520 × 256 Pixel groß sein, um den anderen zu entsprechen (es wird nach Bedarf skaliert).
- Fügen Sie style.css Folgendes hinzu:
.appBundle1 {
background-image: url('clouds.png');
}
.bundleDetail.appBundle1 {
background-image: url('clouds.png');
background-size: 100% 200%;
}
<!--NeedCopy-->
Dies ergibt folgendes Ergebnis:
Verhindern, dass ein Firmenlogo unscharf wirkt
Receiver für Web muss sowohl normale Bildschirme (“low DPI”) als auch neuere, hochauflösende (“high DPI”) korrekt verarbeiten. Bei Apple Retina-Bildschirmen ist die Auflösung beispielsweise doppelt so hoch wie bei normalen Bildschirmen. Auf Laptops haben Bildschirme in der Regel das 1,5-, 2- oder sogar 3-Fache der “normalen” Pixelgröße. Da zweifach bei weitem am häufigsten ist und den größten Unterschied ausmacht, liegen die meisten Bilder der Citrix Workspace-App in zwei Größen vor. Ein Bild mit 100 × 100 Pixeln für den normalen Bildschirm liegt auch in 200 × 200 Pixeln vor.
Wenn Sie Logobilder von der StoreFront-Verwaltungskonsole hochladen, stellen Sie sicher, dass es sich um die Bilder mit der zweifachen Größe handelt. Anders gesagt: Sie sind ungefähr doppelt so groß wie die Breite und Höhe des Platzes (“space”) auf einem normalen Bildschirm. (Bilder mit einfacher Auflösung werden nicht auf zweifache Auflösung vergrößert.) Der Platz auf einem normalen Bildschirm beträgt 170 × 40 Pixel, daher sollte ein von Ihnen hochgeladenes Logobild etwa 340 × 80 Pixel haben.
StoreFront erstellt eine Kopie des Logos und skaliert es auf die Hälfte der Größe. Dieses Bild wird auf Bildschirmen mit niedriger Auflösung verwendet.
Gelegentlich kann dies zu einer Unschärfe führen, da die Hälfte der Bilddetails gelöscht wurde. Dies ist selten, da Logos in der Regel plakativ und einfach sind. Wenn Ihr Logo unscharf wirkt, verwenden Sie folgenden Workaround:
- Erstellen Sie zwei Versionen Ihres Logos, eine in der einfachen und eine in der zweifachen Größe, und speichern Sie sie im Verzeichnis \custom.
- Bearbeiten Sie customstyle.css so, dass sie auf die beiden Bilder verweist. Beispiel:
<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-->
Hinweis:
- Stellen Sie sicher, dass die benutzerdefinierten Stile nicht im Abschnitt “managed” sind. Andernfalls werden sie überschrieben, oder führen zu Problemen auf der StoreFront-Verwaltungskonsole.
- Beide Stile geben die gleiche Hintergrundgröße an. Dies liegt daran, dass die Größe in logischen Einheiten angegeben wird, und die Hintergrundgröße für das Zweifach-Bild die Hälfte der Breite und Höhe des tatsächlichen Logos beträgt.
Festlegen eines Hintergrundbilds
Hinweis:
Die einheitliche Benutzeroberfläche ist auf einen einfachen weißen Hintergrund ausgelegt. Hintergrundbilder wirken gerne ablenkend. Wenn Sie ein Hintergrundbild verwenden, sollte dieses hell und unkompliziert sein. Passen Sie ggf. Schriftarten so an, dass sie vor dem Bild sichtbar sind.
Beispiel 1: CSS-Verweis auf hochgeladenes Bild
Ändern Sie die Datei custom.css wie folgt:
.storeViewSection {
background: url('images/background.jpg') no-repeat center center fixed;
background-size: cover;
}
<!--NeedCopy-->
Hinweis:
Die Anweisung background-size:cover; funktioniert bei einigen älteren Browsern nicht.
Beispiel 2: CSS-Verweis auf vorhandenes Bild mit Modifizierungen
Ändern Sie die Datei custom.css wie folgt:
.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-->
Dies ergibt folgendes Ergebnis:
Suchen von Fehlern im eigenen Code
Es gibt mehrere Möglichkeiten zum Debuggen. Versuchen Sie es immer zuerst mit einem Browser. Das ist viel einfacher als das Debuggen von Anpassungen in der Citrix Workspace-App. Sie können die folgenden Argumente nach dem ? bzw. # in der Seiten-URL hinzufügen. Sie können außerdem mehrere verketten. Beispiel:
http://storefront.wwco.net/Citrix/StoreWeb/#-tr-nocustom
<!--NeedCopy-->
-errors — Normalerweise versuchen wir, Fehler im Code zu unterdrücken, Sie können sie stattdessen aber anzeigen lassen. Dieses Argument zeigt ein Warnfeld an, wenn ein Fehler auftritt.
-debug: Dieses Argument deaktiviert die Ausnahmebehandlung für benutzerdefinierten Code. Es ist nützlich bei den in modernen Browsern integrierten Entwicklungstools (z. B. F12 in Google Chrome oder Internet Explorer) und wenn Sie Ausnahmen selbst debuggen.
-nocustom: Dieses Argument deaktiviert Ihre Skript- und CSS-Anpassungen. Dies ist nützlich, wenn die Citrix Workspace-App nicht funktioniert und Sie herausfinden möchten, ob dies auf einen von Ihnen eingeführten Fehler zurückzuführen ist.
-tr: Dieses Argument bietet die Ablaufverfolgung für den UI-Code der Citrix Workspace-App in einer separaten Browserregisterkarte, einschließlich einer evtl. von Ihnen über CTXS.ExtensionAPI.trace() hinzugefügten Ablaufverfolgung.
Einheitliche Benutzeroberfläche
In diesem Abschnitt werden die Features und das Erscheinungsbild der einheitlichen Benutzeroberfläche beschrieben.
Kartenlayout
Apps im Store werden im “Kartenlayout” dargestellt. Sie können den Bereich unter jeder Karte erweitern, um weitere Details und Aktionen anzuzeigen.
Hinweis:
In der einheitlichen Benutzeroberfläche können Sie Anwendungen nicht per Drag & Drop neu anzuordnen.
Pos1
Die Homepage zeigt die Favoriten.
Favoriten
Klicken oder tippen Sie auf den Stern, um ein Element zu einem Favoriten zu machen:
Suchen
Alle Apps, Desktops und Kategorien durchsuchen:
Einstellungen
Der Zugriff auf die Einstellungen erfolgt über das Dropdownmenü:
Das Menü zeigt den Benutzernamen, der vom Active Directory-Anzeigenamen stammt. Wenn der Anzeigename leer ist (nicht empfohlen), werden die Domäne und der Kontoname angezeigt. Verwenden Sie das Menü, um die Einstellungen zu öffnen, die Version der Citrix Workspace-App zu überprüfen oder sich abzumelden.
In den Einstellungen können Sie alle getrennten Sitzungen fortsetzen und alle aktuellen Sitzungen trennen und sich abmelden. Zeigen Sie die Einstellungen im Karten- oder Listenlayout an:
Verbinden. Setzt getrennte Sitzungen fort.
Trennen. Trennt aller aktuellen Sitzungen und meldet Sie ab.
Citrix Receiver aktivieren. Lädt eine Datei herunter, die diesen Store der lokalen Citrix Workspace-App hinzufügt.
Citrix Receiver ändern. Öffnet eine Seite, die nach einer lokalen Citrix Workspace-App sucht. So können Benutzer zwischen dem Starten von Ressourcen mit der lokal installierten Citrix Workspace-App und dem Starten der Ressourcen in einem HTML5-Browser wechseln.