Scripting X1

Scripting X1 -

We finished the last blog with a quick script sample. Script scares people - after all the real programming is, and in fact, you can do some very advanced things - but the basics are fairly simple, and I'll be some cookie cutter examples to give, as we go

to reiterate. the example from the last time we have added an "assumption" dialog at the beginning of the X1

Here was the code that we used.

 CTXS.Extensions.postInitialize =  function  (callback) {CTXS.ExtensionAPI.showMessage ({Message:   Message "Welcome!":  "Only for WWCo employees" , okButtonText:  "Accept" , okAction: callback}); }; 

Let us go through a line through this line

First we define the extension functions .. There are 32 of them (in the Tech Preview, at least) and represents all points where X1 is about to do something where we what to do probably a customer or 3 ^rd party it wants to pause, or something else. This happens very early on, is before signing up, but after the basic system up and running.

How many such hook this is a function that a "call back" argument. This is what is to happen next, if the custom code is finished - this could be a fundamental extension

 CTXS.Extensions.postInitialize =  function  (callback) {alert ( "Hello world" ); Recall (); }; 

This says that once the initialization completed show an alert box (base message box) and then the callback function continue processing call

to show the second part of the original adjustment. a somewhat nicer message box. CTXS.ExtensionAPI.showMessage is the second set of APIs we provide. There are 11 of them (in the Tech Preview) and X1 do all cause something. Along with these, you can use regular JavaScript or add 3rd party libraries or extensions. If we missed something - please give feedback

There is a complete documentation of these APIs !. I hold up after the tech preview of the of, before we create formal documentation, as I want to emphasize that we are looking for feedback and want to tweak as necessary before the general release, this blog series is to serve as a to these APIs peeking early. This blog will focus on a few examples -. With a more complete list in the next blog

For a second example, I wanted the custom regions, we return to the user interface in an early blog created. These were just a simple colored bar. With script we can do more, of course!

These custom fields determined to enable 3 ^{rd party content. As a reminder, there are three}

#customTop	An area in the upper head region, which is currently under the top bar and toolbar.
#customBottom	An area in the footer region. (Can you observe that this overlap in the tech preview with the copyright notice. This element move in the future)
#customScrollTop	area on the top of the scroll area on the page. This is to be the main area in terms, whether in the context of a general page, or should be part of a new custom page.

Returning to our worked example we used style to color these three areas. Now let some script Add to put in some HTML content.

Before we start a script I would add introducing JQuery. JQuery is an extension of the very commonly used JavaScript language. We use strong X1 in, and while you do not need to use it [at all] I'm going to use it in my example because it leads to readable code Neater and more.

Try this (in the script.js)

 ( function  ($) {$ ( "# customScrollTop" ) html ( "
 Welcome to X1 
.");}) (jQuery); 

Now the first and last lines of this jQuery are boilerplate. You can ignore this and this should be the first and the last line of your script.js class generally. It scopes simply everything you do, and ensures that nothing you define conflicts with the code written elsewhere -. And it also makes JQuery as '$' operator available

The meat of this sandwich is the middle line. This tells the element with the ID 'customScrollTop' found and put the HTML content ...

Notice how this mimics the CSS format. This is intentional. The content that is we set up a mini-site. In this case, a block (div) with the text "Hello World". We have also assigned a CSS class to our block, we can change the style / format / hide them under control of the code or style. I would recommend that you add your CSS classes (wwco- in this example) a company name Citrix avoid conflicts with classes, was used in X1, or that we add in the future.

to go with this script, let's add some CSS (and while we are adding, erasing the previous content of the style.css rid to obtain the colored bar). Leave the car generates section to Logo Tank and subject-header-bgcolor, and add a portion of the new 'Hello World' to format text. the following section of the file for the use of storefront

  / * reserved: 
 
  When finished, the style.css file should look like this is. * /   / * CITRIX DISCLAIMER: START managed SECTION. Edit NO ART IN THIS SECTION * /   .theme header bgcolor  { background-color   # 32A9C3 ; }  .Logo container  { background-image   url ( 'WWCO_logo_white.png') ;  background-size   112px 29px ; }  / * CITRIX DISCLAIMER: END OF MANAGED SECTION. * / * Add   / custom styles below this line. * /   .wwco-mine  { ad   none ; }  .myapps view .wwco-mine  { font-size   60px ;  text-align   center ;  ad   block ; } 

A canned version of this page is here:

http://samples.citrixcloud.net/x1/6-Welcome/receiver.html?-db

Let's talk through what we have done

1. in the script we some content in a container added with a class' wwco-mine "
2. in the CSS we say a statement that this should be usually hidden
3. added in the CSS we have a statement to say that, if it will be shown in the "myapps" (favorites), and with a particular font size and different style.

This is a fairly standard pattern. Create hiding something, and then type the exceptions, if it is to be displayed. the exceptions can and his style in code. Try you, the following (on script.js)

 $ ( ". Wwco-mine" ). In ( "click"   function  () {$ ( this ) fadeOut () ;.}); 

says (with typical terseness JQuery) find with CCS class the element 'wwco mine'. Pay attention to the "click" event on this, and if it happens to run some code. This code hides the element that was clicked

you can have a look here .:

http://samples.citrixcloud.net/x1/7- Fade / receiver.html? db

Incidentally, if you hard to follow it to find the various edits, you can, we can see the files on this page (or any of the preceding) have changed by opening the 'script.js " or "style.css" pages in a browser. For example:

http://samples.citrixcloud.net/x1/7-Fade/custom/script.js

http: / /samples.citrixcloud.net/x1/7- fade / custom / style.css

I'm going to end this blog here, and the next will, in a few days with a full list of all APIs and a description as they follow to use. Then I would like to focus on some applications and begin to explain pay how to make the adjustments.

blogs in this series

• Welcome to receiver X1
• providing and branding receiver X1
• X1 adaptation: deeper with CSS
• Scripting X1
• receiver X1 APIs
• X1 skin for NetScaler Gateway
• X1 DIY approvals
• Old receiver is dead. Long live New receiver.

Tweet