Place any window to the center of the screen

Placing the component in the center of the visible are of the screen. This helps to place the component to

the center of the screen as we scroll the page content. It supports following browsers IE 6, IE 7, FireFox, Netscape

Below function, get the page horizontal/vertical scrolling offsets of the page.

getPageScrolling = function ()

{

    var scrollX = 0;

    var scrollY = 0;

    if (document.documentElement &&

            typeof document.documentElement.scrollLeft === "number")

    {   // IE compliant.  IE compliant must be before DOM compliant since IE

        // always returns 0 for the DOM compliant access. IE's hack always

        // returns the correct value.

        scrollX = document.documentElement.scrollLeft;

        scrollY = document.documentElement.scrollTop;

    }

    else if (typeof window.pageYOffset === "number")

    {   // Netscape compliant.

        scrollX = window.pageXOffset;

        scrollY = window.pageYOffset;

    }

    else if (document.body && typeof document.body.scrollLeft === "number")

    {   // DOM compliant. IE will always return 0 in this case.

        scrollX = document.body.scrollLeft;

        scrollY = document.body.scrollTop;

    }

    return { scrollX: scrollX, scrollY: scrollY };

};

Get the viewport width/height of the screen.  This returns the width/height of the visible area of the browser.

getViewportSize = function ()

{
    var width = 0;
    var height = 0;
    if (document.documentElement &&
        typeof document.documentElement.clientWidth === "number")
    {
        width = document.documentElement.clientWidth;
        height = document.documentElement.clientHeight;
    }
    else if (document.body && typeof document.body.clientWidth === "number")
    {
        width = document.body.clientWidth;
        height = document.body.clientHeight;
    }
    else if (typeof window.innerWidth === "number")
    {
        width = window.innerWidth - 18;
        height = window.innerHeight - 18;
    }
    return { width: width, height: height };
};

Function that is used to continuously update the component so that it is always centered in the current viewport.

/**

 * @param component Reference to the DOM element that represents the component

 *        "window" that is being centered.

 * @return  Centering function for component window - creates a closure around the

 *          DOM element that should be centered in the viewport.

 */

getUpdateFn = function (component) {
    return function () {
        // Calculate the Height/Width of the component
        var componentSize = getcomponentSize(component);
        // Calculate the Viewport Height/Width
        var viewportSize = getViewportSize();

        // Calculate the Page Scrolling
        var pageScroll = getPageScrolling();

        // Calculate the coordinates to center component
        var pageX =
            pageScroll.scrollX + ((viewportSize.width - componentSize.width) / 2);
        var pageY =
            pageScroll.scrollY + ((viewportSize.height - componentSize.height) / 2);

        // Update component Window coordinates
        component.style.top = pageY + "px";
        component.style.left = pageX + "px";
    };
};

Get the width/height of the specified component, that needs to placed to the center of the screen.  This returns the current width/height needed to display the specified component.

/**

 * @param component  The component to calculate the width/height of

 * @return  The width/height of the specified component

 */

getcomponentSize = function (component)

{
    return { width: component.offsetWidth, height: component.offsetHeight };
};

JSF with JavaScript

Could define a composition component for as below to support the javascript in JSF and use them in normal xhtml / jsf pages.
So we would have the flexibility of rendering and not rendering the Javascript in the pages with the JSF life-cycle.
Javascript.xhtml (below, replace "[" with "<")

[ui-composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:c="http://java.sun.com/jstl/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"]

    [c:choose]
      [c:when test="#{not empty path}"]

    [script type="text/javascriptt"                    
      srcc="#{facesContext.externalContext.requestContextPath}
           #{path}"]
    [/script]
       [/c:when]
       [c:0therwise]
          [script type="text/javascript"]
              [ui:insert /]
          [/script]
       [/c:otherwise]
   [/c:ch00se]

[/ui:composition]

In JSF/xhtml page, we could render javascript functions as below.
[h:form]
[yournameSpace:javascriptt]
   Function hello(){ alert(‘hello…’); }
[/yournamespace:javascript]

[yournameSpace:javascript rendered=”#{condition}”]
   Function hello1(){ alert(‘hello…’); }
[/yournamespace:javascript]
[/h:form]

So we have the flexibility to render/ not-render/ re-Render by AJAX.
Handling data between the JSF & Javascript will be easy