Archives for March, 2012

29 Mar 2012
4

Lessons learned when working with Javascript Binding Expressions in CSJS

Hi everyone. Here’s a quick note on something i struggled with yesterday, but managed to resolve with the help of Tommy Valand and Paul Withers. Thank you gents :).

 

I find myself working more and more with Client Side Javascript to make use of Dojo, but still need access to Scoped Variables and Server-Side Objects. A typical way of running or accessing Server-Side objects is by using Javascript Binding Expressions in your CSJS Editor. Below are 2 examples of Javascript Binding Expressions:

  • “#{javascript:getComponent(‘ControlID’).getValue();}”
  • “#{javascript:viewScope.VariableName}”

 

PROBLEM 1

As a best practice I store all my functions in Script Libraries, and not directly in XPages. The advantages of this are:

  1. All your code and logic are stored centrally in a Script Library.
  2. If you need to modify any of your Script Libraries, you don’t need to re-build your Notes Database

So the problem I faced here is that my Javascript Expressions were not evaluating. They were returning null values even though I know for a fact that my expressions are correctly set.

Understanding Why

The reason my expressions weren’t evaluating is because they can only work in a XPage, Custom Control or Theme Design Element, and not a Script Library or external JS File.

Workaround

The solution to this is to run these Expressions inside the XPage or Custom Control where you have your function, and then pass the result of your expressions to the Javascript Function that exists in your Script Library.

I myself am not too crazy about this because now there’s more code that I have to maintain inside my XPages vs Script Library, but it’s not the end of the world.

 

PROBLEM 2

So now I placed my Javascript Binding Expressions in one of my XPages, within the onComplete Event of a button. They were no longer returning null values, but instead returning Empty String Values.

A Quick Scenario: A User creates a new document, and when clicking on the button, I have SSJS code that populates fields and Scoped Variables, and performs a partial refresh. The idea is that my code in the OnComplete event grabs the new values populated and uses Dojo to manipulate the page.

Understanding Why

The reason why my expressions were now returning Empty String Values is because the functions within the Javascript Expressions are rendered on Load of the XPage.

i.e. “#{javascript:viewScope.VariableName}” was rendered when the page was created, not when the button was clicked. The Scoped Variable was empty at that stage of the Page Loading.

Workaround

There  is a simple way around this, and it’s called a Remote Service. This is a Custom Control that ships with the XPages Extension Library. I’ve created a Video Tutorial that explains how this Service Works. In Short, a Remote Service allows you to call SSJS Functions within Client-Side Javascript, as well as passing parameters and getting a handle result.

Click Here to view the Tutorial on how to use Remote Services in your XPages.

 

I trust you found this Blog Post useful. I always appreciate feedback or better alternatives if you have any.

Until next time.

Cheers,

John.

15 Mar 2012
2

Use YSlow to measure your Site’s performance and more

Hi Everyone.  Here’s a quick post that I’m sure will make all the difference in your Web Dev Life.

There is a Browser plug-in called YSlow. You can install it on Firefox, Chrome, Safari, Opera and more. I’m going to use the Firefox plug-in for this example.

NOTE: For Firefox, you need to install Firebug to use this plug-in, as it’s an extension to Firebug.

Once you’ve installed the Firebug and YSlow plug-in, and restarted your Browser, do the following:

1. Open your Website. In my example I’m using my XPages Showcase for this example.

2. Push F12 on your keyboard. This will open the Firebug Window at the bottom of the Browser.

3. Click on the YSlow Tab. You’ll see an introduction Page, and a button at the bottom that says “Run Test”. This takes about 2-5 seconds to run.

 

 

4. Once completed, YSlow returns a set of results. You’ll get an overall Grade with a Performance score. (Please don’t judge me for getting a C. YSlow’s moaning at me for not optimizing CSS and JS files,  but there’s a reason for that…)

5. If you take a look at the 3rd Red Arrow on the Image, you’ll see it’s pointing to the Ruleset List. This is pretty awesome, because you can set the rules and benchmark for how your site should be measured. There is a YSlow Add-On called Web Metrics Framework, which is a ruleset that measures your Website according to Google’s Standards.

6. If you go into each of the sections that’s returned….e.g. Content…..you’ll get a second set of Tabs that Score you according to individual operations….See image below.

 

 

7. YSlow also comes with quite a bit of useful Hints, Tips and supporting documentation.

This add-on is easy to navigate, and very very useful. I hope it helps. Thanks Yahoo.

 

Cheers for now.

John