Note :. An updated version of this blog for StoreFront 2.5 is available here
StoreFront 2.0 was released with XenDesktop 7.0. It is time to revisit the issue of customization of the receiver for the Web and provide a comprehensive guide on how to do it for StoreFront 2.0.
As you have already known from my previous blogs (receiver Customization for Web and receiver Customizing for the Web in StoreFront 1.2), the receiver for the Web provides integrated support for customization through the contrib folder . This folder is located under the receiver for the website in the file system (default location is C: inetpub wwwroot sites Citrix StoreWeb contrib ) and contains up-customization hooks . It is recommended that all the customization and the media code are stored in this folder because the contents of this file will be kept when upgrading to future releases.
Please note that there is no guarantee that personalization will still work on the box through the upgrade release, especially when the user interface changes significantly. The good news is that if you followed my previous blogs to customize earlier Receiver for Web, they should work with StoreFront 2.0 with only minor adjustments.
CSS Customization
CSS customization can be used to easily change many aspects of the appearance of the site, including fonts, colors and images. A CSS file named custom.style.css is included in the contrib folder . This CSS file is referenced after the main CSS files of the site and therefore the CSS style definitions specified in this file override any similar definitions specified elsewhere. You can use Web development tools such as Firebug (for Firefox) or the development tools provided by Internet Explorer and Google Chrome to identify the CSS selectors (element types, classes or ID) you want to customize. Examples
Example 1 :. Rebranding the logon screen
First we will try to change the background image. As shown in the screenshot below, using Firebug, we recognize that the CSS selector for the background image is body .
We copy the new image file to the bottom moonlightsea.jpg contrib folder. Add the following CSS definition custom.style.css
body {background-image: url ( "moonlightsea.jpg"); } Reload the page and the new background image took effect as
Next, we will change the logo. We recognize that CSS selectors for the logo are # credentialupdate-logonimage and # logonbox-logoimage .
Copy the new logo image file worldcomplogo.png of to contrib folder. Add the CSS defined in custom.style.css
# credentialupdate-logonimage, # logonbox-logoimage {background-image: url ( "worldcomplogo.png"); } Reload the page and the new logo is displayed:
Finally, we will change the font color for the opening form of labels session. Using Firebug, we recognize that the CSS selector for the login form tags is .credentialform label and the font color is determined by CSS selectors .credentialform .error, .credentialform .WARNING, .credentialform .Information, .credentialform .inprogress, .credentialform. confirmation .credentialform .plain
Add the following CSS definitions custom.style.css :.
.credentialform .error, .WARNING .credentialform, .credentialform .Information, .credentialform .inprogress, .credentialform .confirmation, .credentialform .plain {color: yellow; } .credentialform label {font-weight: bold; } Reload the page and you can see the labels for the login form become bold yellow
Example 2 :. Customizing the home screen
First, we will replace the logo in the header area. We identify the CSS selector for the # header-logo logo.
Copy the new header logo image worldcomplogoheader.png in the contrib folder. Add the CSS defined in custom.style.css
# header-logo {background-image: url ( "worldcomplogoheader.png"); height: 28px; margin: 22px 0 0 8px; } Reload the page and logo in the header area is replaced:
Next we'll change the font color application names to make it more readable. We recognize that the CSS selector for the strong to the application names is .myapps-name
simply add the CSS defined in custom.style.css :.
.myapps-name {color: yellow; } Similarly, by adding the following CSS definitions custom.style.css change the font color for the username in the buttons in the header area and switcher
# # resources header header-user name {color: lightgreen; } button .switcher a {color: lightgreen; } is the resulting home screen:
customization Chain
custom string bundle files for all languages supported are included in the contrib folder, one for each language. For example, the string custom bundle file for English is custom.wrstrings.en.js. These are simple JavaScript files that define a set of name-value pairs. Strings defined in these files replace the built-in chains for the given language
Example 3 :. text customization for Logoff
By default, as shown in the screenshots below, the label for the link to log out is "log off". The message displayed after successful disconnection is "You have successfully logged out." And the label of the key to access the logon screen is "Log On."
If we want to customize the labels and text, we need to find the string IDs by searching the relevant channels in the high-ctxs.wrstrings.js English file bundle chain located in the scripts We find that in the string IDs are LogOff, YouAreLoggedOff LogOn and then we insert the following name-value pairs to custom.wrstrings.en.js..
LogOff: 'Sign Out 'YouAreLoggedOff "you have successfully signed Click the button below to log in again.' LogOn '. login'
Refresh the page and you can see the labels and texts have been modified
A similar process can be followed to modify existing channels found in the user interface. Channels can be changed to other languages by providing customization in the appropriate custom string file, for example, custom.wrstrings.fr.js for French.
JavaScript Customization
JavaScript customization can be used to inject extra content in the user interface and load other scripts, CSS and HTML fragments via Ajax. A JavaScript file named custom.script.js is included in the contrib folder and referenced by the HTML file for the receiver to the Web user interface. This custom JavaScript file is referenced after major site-wide JavaScript files so that all functions defined in the custom file function replacement with the same names defined elsewhere
Example 4 :. Adding a hyperlink to the footer area
Using Firebug, we recognize that the ID of the footer area is resource-footer #
We add the following JavaScript code to custom.script.js :.
$ (document) .ready (function () {var $ markup = $ ( ''); $ ( '# resources -footer ') .append ($ markup);});
CSS class _ctxstxt_ContactHelpDesk indicates the localization mechanism to find a string with ID ContactHelpDesk from the string bundle files and use it to this HTML element
.so we need to add the following name-value pair to custom.wrstrings.en.js
ContactHelpDesk: "Contact the Help Desk"
This chain must also be translated into all the languages supported and added to the packet matching custom language strings.
Furthermore, we need to add CSS rules in custom.style.css place the link in the location we like and display it in a font that is visible:
#-resources footer {height: 84px; } # help-link {padding-right: 30px; padding-bottom: 20px; float: right; } #-resources footer a {color: lightgreen; } #-resources footer a: hover {color: silver; text-decoration: underline; } The resulting screen looks like with the hyperlink in the lower right corner:
Example 5: Loading additional files IU
in this example, we load HTML files and extra CSS to achieve the same effect as in example 4. If you applied customization in example 4 in your site, you must undo the changes before following the instructions below.
First, create a new file named helpdesk.htm in the contrib folder with the following HTML fragment:
Then create another file named footer.css in the contrib folder with the following CSS definitions:
#-resources footer {height: 84px; } # help-link {padding-right: 30px; padding-bottom: 20px; float: right; } #-resources footer a {color: lightgreen; } #-resources footer a: hover {color: silver; text-decoration: underline; } Finally, add the following JavaScript to custom.script.js:
$ (document) .ready (function () {$ .ajax ({url: "contrib / footer. css' success: function (data) {$ ( '') appendTo ( "head") html (data) ;..}}); $ .ajax ({ url: "contrib / helpdesk.htm 'success: function (data) {$ (' #-resources footer ') append (data) ;.}});}); The first $. ajax call load the CSS footer.css . The second $. Ajax call loads the HTML fragment defined in helpdesk.htm to footer div . The resulting screen is exactly the same as that of Example 4.
Adding pre-Login and Post-Login Messages
Receiver for Web provides hooks for you to add custom pre-connection and / or post-login messages if you like. You can add these messages in the integrated style of message box or your own style
Example 6 :. Pre-Login and Post-Login Messages in a Box style message
To add a pre -login message insert the following JavaScript code custom.script.js
$ (document) .ready (function () {CTXS.Application.preLoginHook = function () {var = _dialogTitle
'; var _dialogBody = ' + '
'; var _dialogButton = '; var = _dialogTitle + dialogue + _dialogBody _dialogButton; $ var = messagePane CTXS.displayMessagePane (dialogue) .ctxsLocalize ()
$ var button = CTXS.button ($ messagePane find ( 'CustomButton.').) button.click $ (function () {CTXS.Events.publish (CTXS .Events.preLogin.done); return false;}) CtxsHandleEscapeKeyInDialog () ctxsPlaceFocusOnFirstElement () ctxsBindFocusWithin () ...};}); Then add the following strings to custom.wrstrings.en.js and versions translated string bundle files for supported languages:
Warning: 'Disclaimer 'DisclaimerStatement: "This site is for employees only Comp World' Continue '! Continue '
the CTXS.Application.preLoginHook is invoked by the receiver to the web at the time of execution before the user logs on. It displays the message box with localized content. A click handler is registered to the button that signals the receiver to the web should move to the next screen when clicked. This pre-login messages like:
To add a post-login message insert the following JavaScript code custom.script.js :
$ (document) .ready (function () {CTXS.Application.postLoginHook = function () {var = _dialogTitle
'; var _dialogBody =
'; var _dialogButton = '; var = _dialogTitle + dialogue + _dialogBody _dialogButton; $ var = messagePane CTXS.displayMessagePane ( dialogue) .ctxsLocalize ()
$ var button = CTXS.button ($ messagePane.find ( 'CustomButton.')); button.click $ (function () {CTXS.Events.publish (CTXS. Events.postLogin.done); return false;} ..) ctxsHandleEscapeKeyInDialog () ctxsPlaceFocusOnFirstElement () ctxsBindFocusWithin () ;.};}); Then add the following strings to custom.wrstrings.en js and translated versions for languages supported:
Announcement 'ad' AnnouncementContent: '. This site is intended for maintenance next Saturday 18h00-22h00 '
The post-login message looks like:
Example 7: pre-connection Login and post messages your own style
If you prefer more freedom to have your own fancy style to pre-connection and post-login message, you can build your own notes and attach them to # # prelogin window and glazing PostLogin DIV.
This is how you add pre-login message:
Add the following JavaScript code custom.script.js
$ (document). ready (function () {var markup = '; CTXS.Application.preLoginHook = function () {$ ( '# prelogin component'). append ($ (markup)). ctxsDisplayPane (). find ( 'a'). click (function () {CTXS .Events.publish (CTXS.Events.preLogin.done); return false;});};}); Then add CSS rules to custom.style.css
.custom component {text-align: center; White color; } .custom-component h3 {margin-top: 80px; font-size: 30px; } .custom component p {margin: 40px 0; font-size: 18px; } .custom-component has a component-.custom :, .custom active-shutter a: visited {font-size: 24px; color: tan; } .custom-component a: hover {text-decoration: underline; } We re-use the strings used in the previous example and the resulting pre-login messages like:
Add the following JavaScript code .script.js wont give you a post-login message with the same style of the pre-login message:
$ (document) .ready (function () {var = postLoginMarkup '; CTXS.Application.postLoginHook = function () {$ (' # PostLogin component '.) (.) .append ($ (postLoginMarkup)) ctxsDisplayPane find ( 'a') click (function (). {CTXS.Events.publish (CTXS.Events.postLogin.done); return false;});};} ); The post-connection messages like:
Adding server side code
Sometimes you may want to add additional features a receiver for the web in a way that requires the execution of server side code. You can write ASP.NET code to run on the server and load the result to the user interface using Ajax
Example 8 :. Client IP Address Display
For example, if you want to display IP address of the user's client after the user logs in, you can not get the JavaScript code information running in the browser. Instead, you must write an ASP.NET code to run on the server to know
You must first create an ASPX file GetClientIP.aspx with the following code to obtain the IP address of customer:.
<%@ Page Language="C#" %> <%=GetClientIP()%>
Then you need to add ajax custom.script.js code to load the data and display in the user interface:
$ (document ) .ready (function () {$ .ajax ({url: "contrib / GetClientIP.aspx 'success: function (data) {var $ markup = $ (' '+ data + '); markup.insertAfter $ (' # header-userinfo ');}});}); You also need CSS rules custom.style.css to show the client IP address well on the screen:
#clientip {color: lightgreen; float: left; margin-right: 25px; margin-top: 12px; position: relative; vertical-align: middle; } Here's the catch resulting screen:
Supporting a new language
You can add support for a new language recipient for Web. This involves adding a language pack to Receiver for Web and adding relevant language resources Authentication Service.
Added a language pack to Receiver for the Web
New language packs consist of a definition of culture script. file and a beam string script file for each language
definition of culture
format definition script culture file is:
(function ( $) {$ .globalization .availableCulture ( "", {name: "" englishName "" nativeName "" stringbundle "" customStringBundle: ""});}) (jQuery); for example, a culture of the Polish file looks like:
(function ($) {$ .globalization.availableCulture ( "ul", {name: "pl", englishName: "Polish" nativeName "interior", stringbundle "contrib / wrstrings.pl.js" customStringBundle "contrib / custom.wrstrings.pl.js"});}) (jQuery) ;. This should be saved as culture.pl.js
bundle Chain
The string bundle script file defines a set of pairs name -value. You can copy a string file existing set of scripts /
You must also create a custom string file for the new language, which custom.wrstrings. pl.js in this case. Put the translation of your override or new channels in this file.
Loading the language pack
After creating the language pack, you can add the following code custom.script. js
$ (document) .ready (function () {CTXS.Localization.getScript ( "contrib / culture.pl.js");}); This code loads the definition of culture and bundle chain script files.
Adding language resources to the authentication service
the user interface to the login form is provided by the authentication service StoreFront. The location of these channels requires the creation of 3 additional resource files. Continuing with the Polish aid (language code 's') as an example:
In Windows Explorer, open the folder C :. Inetpub wwwroot Citrix Authentication App_Data resources
- Copy ExplicitAuth.resx to ExplicitAuth.pl.resx
- Copy ExplicitCore.resx to ExplicitCore.pl.resx
- Copy ExplicitFormsCommon.resx to ExplicitFormsCommon.pl.resx
in all newly copied files, locate each element and translate the string in the
Setting the user interface elements for the new language
On a Polish system, the receiver of the shipment to the Web site in a browser should now display the user interface with all channels to appear in Polish. If all translated strings are more Polish than the top-lingual and are not positioned correctly, it is interesting to note that the language code ( 's' in this case) appears as a class name on the
tag, and can be used to create CSS definitions to set the necessary items. For example, the following CSS definition would be slightly larger connection box when using Polish, to accommodate longer strings: .pl # logonbox-LogonForm {width: 420px; }
0 Komentar