Citrix Receiver高级技术指南

1、Citrix Receiver高级技术指南Tweet about this session with hashtag # SYN321 and #citrixsynergyOverview & Value PropositionUnder the hoodCustomization Deep DiveWhere to find out moreAgendaeXperience 1st?We asked admins what they wantedeXperience 1st?New, slick, trendy UIWe asked admins what they wantedeXperi

2、ence 1st?New, slick, trendy UIClean, logical UI.We asked admins what they wantedeXperience 1st?New, slick, trendy UILet me put my name on itClean, logical UI.We asked admins what they wantedeXperience 1st?New, slick, trendy UILet me put my name on itClean, logical UI.The UX must work on mobiledevice

3、sWe asked admins what they wantedeXperience 1st?New, slick, trendy UILet me put my name on itClean, logical UI.The UX must work on mobiledevicesand desktopWe asked admins what they wantedeXperience 1st?New, slick, trendy UILet me put my name on itLet me control when changes get introducedto my users

4、myClean, logical UI.The UX must work on mobiledevicesand desktopmeWe asked admins what they wantedeXperience 1st?New, slick, trendy UILet me put my name on itLet me control when changes get introducedto my usersmyClean, logical UI.The UX must work on mobiledevicesand desktopLet me add meWe asked adm

5、ins what they wantedanalyticsuser feedbackapprovalshelp desk infocompliance noticeseXperience 1st?New, slick, trendy UILet me put my name on itLet me control when changes get introducedto my usersmyClean, logical UI.The UX must work on mobiledevicesand desktopLet me add stuffmeWe asked admins what t

6、hey wantedSimplified Navigation, Familiar ExperienceFeatured App GroupsSimplifies application selectionand Traditional Folder ViewRestored functionalityCorporate brandingCustomized logos, colorsConsistency Across PlatformsConsistent look and feel for all devicesCommon app selection aesthetic across

7、form factorsCreate branding once and deploy everywhereCentrally managed store brand experience logos, colors, etcAdmins dictate changes to store look & feelDecouple Receivers from end user app selection experienceCustomer-paced UI changesMobileTabletLaptop/DesktopCustomizationsMultiple options, depe

8、nding how deep you need to goTypeMethodExamplesLevel 0: No customizationsOut-of-the-boxStandard Citrix look and feelLevel 1: Basic presentation customizationStoreFront Admin ConsoleColors, logos, links, featured apps groupsLevel 2: Advanced presentation and designCSS customizationSimple HTML/JSWelco

9、me messages, watermarks, Level 3: Control over flow and functionJavaScript APIsDynamic content,Geo-based app filteringUnboxing X1Out the boxThree tab layoutFavourites, Desktops, Apps(based on config)Powerful UISearch, folders, details3 screen sizesMulti-platformCitrix BrandedAdd your brandAdmin tool

10、 supportLogo & colorsApplies to all devicesUpdates are downloaded in background, and seen on next launchAdd colourAdmin tool supportLogo & colorsApplies to all devicesUpdates are downloaded in background, and seen on next launchAdd “featured categories”Admin tool supportDefine by name, category or k

11、eywordApplies to all devicesUpdates to apps or categories are seen on next refreshDiving into codeWeve tried to make anything possibleApplies to all devicesUse our recommended extension points to stay compatible, and device agnostic.The rest is up to youDiving into codeWeve tried to make anything po

12、ssibleApplies to all devicesUse our recommended extension points to stay compatible, and device agnostic.Custom ContentCustom ContentThe rest is up to youDiving into codeWeve tried to make anything possibleApplies to all devicesUse our recommended extension points to stay compatible, and device agno

13、stic.Custom ContentCustom Style, filtering and sortingCustom ContentTabButton?Message BoxesThe rest is up to youArchitectureNetScaler Gateway (Optional)X1 Architecture (Web)BrowserStoreFrontNetScaler Gateway (Optional)Web UI (Static)JSON MethodsNetScaler Gateway (Optional)X1 Architecture (Web)Web UI

14、 (Static)JSON MethodsBrowserStoreFront.css.js.htmlNetScaler Gateway (Optional)NetScaler Gateway (Optional)X1 Architecture (Web)Web UI (Static)JSON MethodsBrowserStoreFront.css.js.htmlNetScaler Gateway (Optional)NetScaler Gateway (Optional)X1 Architecture (Web)Web UI (Static)JSON MethodsBrowserStoreF

15、ront.css.js.htmllist of appsapp iconsNetScaler Gateway (Optional)NetScaler Gateway (Optional)X1 Architecture (Web)Web UI (Static)JSON MethodsBrowserStoreFront.css.js.htmllist of appsapp iconsNetScaler Gateway (Optional)NetScaler Gateway (Optional)X1 Architecture (Web)Web UI (Static)JSON MethodsBrows

16、erStoreFront.css.js.htmllist of appsapp iconsHDXHTML5HDXorNetScaler Gateway (Optional)NetScaler Gateway (Optional)X1 Architecture (Desktop)FTUAuthHDXXML MethodsDiscovery & AccountsLegacyUIShortcutsClientStoreFrontCommsNetScaler Gateway (Optional)NetScaler Gateway (Optional)X1 Architecture (Desktop)F

17、TUNative EnvironmentAuthHDXWeb Kit ContainerWeb UI (Static)JSON MethodsXML MethodsDiscovery & AccountsOffline CacheLegacyUIShortcutsClientStoreFrontCommsNetScaler Gateway (Optional)NetScaler Gateway (Optional)X1 Architecture (Mobile)FTUAuthHDXXML MethodsDiscovery & AccountsLegacyUIMDM/MDXClientStore

18、Front / XenMobileCommsNetScaler Gateway (Optional)NetScaler Gateway (Optional)X1 Architecture (Mobile)FTUNative EnvironmentAuthHDXWeb Kit ContainerWeb UI (Static)JSON MethodsXML MethodsDiscovery & AccountsOffline CacheLegacyUIMDM/MDXClientStoreFront / XenMobileCommsNetScaler Gateway (Optional)NetSca

19、ler Gateway (Optional)Powerful model for extensions Web, Desktop, MobileNetScaler Gateway (Optional)NetScaler Gateway (Optional)Powerful model for extensions Web Kit Container(Your) Static UI(Your) Dynamic ServicesOffline CacheWeb, Desktop, MobileNetScaler Gateway (Optional)CustomizationCustomizatio

20、nExtensible StylesCustomizationCustom AreasExtensible StylesCustomizationWeb AuthLaunchAddRemoveUpdate UILoad AppsProcessAppsWeb StartNative StartCustom AreasExtensible StylesCustomizationWeb AuthLaunchAddRemoveUpdate UILoad AppsProcessAppsWeb StartNative StartCustom AreasExtensible StylesHooksCusto

21、mizationWeb AuthLaunchAddRemoveUpdate UILoad AppsProcessAppsWeb StartNative StartCustom AreasAutomation APIsExtensible StylesHooksBrandingExtensible StylesAdmin Console Demo Simple Logos / ColorsBranded pageDEMOWhat actually got produced?/* CITRIX DISCLAIMER: START OF MANAGED SECTION. PLEASE DO NOT

22、EDIT ANY STYLE IN THIS SECTION */.logo-container background-image: url(WCOO_logo_white.png); background-size: 100px 50px;.theme-header-bgcolor background-color: #32A9C3;.theme-highlight-color color: #32A9C3;/* CITRIX DISCLAIMER: END OF MANAGED SECTION. */Extensible StylesStyling the web logon page n

23、ot in admin console yet .logon-spacer.with-logo background-image: url(loginLogo.png); background-size: 150px 75px;Style file, images and script live in:C:inetpubwwwrootCitrixStoreNameWebcustomThis entire directory is copied to every native client and stored for offline access.(Not intended for dynam

24、ic content)Extensible StylesCSS for simple and robust customizationLogo classes.logo-container.logon-spacer.with-logoStyle Classes.theme-header-bgcolor.theme-header-color.theme-highlight-color.dialog-button.dialog-button.default Extensible StylesCSS for simple and robust customization Marker Classes

25、.small (phone).large (tablet / desktop).highdpi (Using x2 images).web-browser (a real browser).myapps-view (favourites view).desktops-view (desktops view).store-view (apps view).search-view (search results visible).appinfo-view (app details visible)Use in combination with styles to make them context

26、ualLogo classes.logo-container.logon-spacer.with-logoStyle Classes.theme-header-bgcolor.theme-header-color.theme-highlight-color.dialog-button.dialog-button.default Extensible StylesUsing marker classesMaking something shown/hidden by CSS.something any: any; /* whatever style(s) you want */ display:

27、 none;.myapps-view .something display: block; Custom areas are empty bits of UI#customTop (Use for custom headers / toolbars, etc)#customBottom (Use for custom footers)#customScrollTop (The main area for customization. Top of scrollable region)#customInfo (Add custom content to an app details view)#

28、customInfoTop (Add raw custom content to an details info view)These areas are all empty by default. Whilst it is possible to populate them in CSS, generally this is done by script.$(#customTop).html(“Welcome”);You can use standard web technologies (such as CSS) to style this.myclass color:red; font-

29、size: 18px; Custom AreasCustom Areas (block color) in CSSSelectively shownContent (script)DEMOIntroducing ScriptMaking it more interesting CTXS.Extension CTXS.Extensions.onLaunch = CTXS.ExtensionAPI CTXS.ExtensionAPI.showMessage()Hook APIsAutomation APIsEmployee Only Popup in JSSStyling in CSSDEMOGo

30、ing DeeperKeynote demo customizationsDEMOApprovalsWorkFlowBuild in support for pending, approved and rejected statesCan add Q&A UI and store in subscription storeBack-end StoreFront Extension APIs & utility to read/react to app status.See X1 BlogsSecured Web ServicesBuilt in support for AJAX calls from web UI (all devices)Build in microVPN for AJAX calls through NetScaler gatewayBack-end StoreFront Extension to expose user auth details to your servicesSee X1 Blogs soonPackaged ExtensionsA