PrimeFaces Extensions 0.6.1 released

We are glad to announce a new maintenance release of the PrimeFaces Extensions 0.6.1. The main focus was on fixing critical issues. The next release will be also a maintenance release with some improvements / new features for existing components. Our resource optimizer plugin will be upgraded as well. After that you can expect more from this project because I will finish the writing of the "PrimeFaces Cookbook" and we plan to add new components again.

Some quick links to dive into PrimeFaces Extensions:
Getting Started
Showcase Mojarra
Showcase MyFaces

Have fun!

"Copy to Clipboard" feature in web

Sometimes we need a "Copy to Clipboard" feature to copy some content from an input field or textarea into the OS clipboard. How to implement this feature in JavaScript? There are a lot of articles with this topic in the web. They say - there is only one way to do this cross-browser. This way is Flash. You can read this article or this one and see that a special Flash object is required. A general problem is that installing Flash in browser breaks the paradigm of plain web applications. There is no guarantee that a next Flash update will not break the "Copy to Clipboard" functionality. Also be aware of security restriction by Adobe Flash Player - it doesn’t work at local computer at all.

What is an alternative way? After reading some posts I came to the thought to select the text to be copied automatically and show a tooltip with a little help. The next example demonstrates this idea in JSF with PrimeFaces components. Assume, you have a button "Copy to Clipboard" and an input field with a link (URL) to be copied. Click on the button should call an JavaScript function, say copyInputToClipboard(). As tooltip I will use pe:tooltip from the PrimeFaces Extensions project. The tooltip has showEvent="false" and doesn't get shown by any event. We will show it programmatically by calling widget's method show().

...

<p:commandButton icon="ui-icon ui-icon-copy" type="button"
 value="Copy to Clipboard"
 title="Copy to Clipboard"
 onclick="copyInputToClipboard('#{cc.clientId}:textUrl','widget_#{cc.clientId.replaceAll('-|:','_')}_tip')"/>

...

<p:inputText id="textUrl" value="#{...}" maxlength="2047" autocomplete="off"/>

<pe:tooltip for="textUrl" widgetVar="widget_#{cc.clientId.replaceAll('-|:','_')}_tip"
     value="Press Ctrl+C to copy this link into the clipboard"
     myPosition="top center" atPosition="bottom center" showEvent="false" hideEvent="blur"/>

...

All components are placed within a composite component. This is why I used cc.clientId. The function copyInputToClipboard() expects two parameters: clientId of the input field and the widget variable of the tooltip. In Internet Explorer we can use the object window.clipboardData to achieve the desired functionality. Just call window.clipboardData.setData('text', inputValue) with some input value and the task is done. In other browsers, the best approach would be to select the input text on button click and to show a tooltip with text "Press Ctrl+C to copy this link into the clipboard".

function copyInputToClipboard(inputId, widgetVarTip) {
    if (window.clipboardData && clipboardData.setData) {
        // IE
        var inputValue = $(PrimeFaces.escapeClientId(inputId)).val();
        window.clipboardData.setData('text', inputValue);
    } else {
        // other browsers
        var el = $(PrimeFaces.escapeClientId(inputId));
        el.focus();
        el.select();
        if (widgetVarTip && window[widgetVarTip]) {
            window[widgetVarTip].hide();
            window[widgetVarTip].show();
        }
    }
}

Note that tooltip disappears on blur. The picture demonstrates my implementation.

I hope you have enjoyed this small excursion into the "Copy to Clipboard" feature.

PrimeFaces Extensions 0.6.0 released

We are proud to announce the new release of the PrimeFaces Extensions 0.6.0. It is built on top of PrimeFaces 3.4.1. Please see releases notes.

Main subjects and key features in this release:

• A lot of bugxifes and improvements / new features in Tooltip, MasterDetail, CKEditor, CodeMirror, InputNumber, AjaxExceptionHandler, ImportConstants, TriStateCheckbox, TriStateManyCheckbox.
• New component Waypoint which makes a solid base for modern UI patterns that depend on a user's scroll position on a page.
• New component Switch, regular component to counterparts c:choose, c:when, c:otherwise.
• BlockPanel was renamed to Spotlight. Spotlight allows you to restrict input to a particular element by masking all other page content.
• AjaxStatus and Paginator components were removed. PrimeFaces core has the same functionality now.
• More utilities, like a new EL function to escape jQuery selectors in facelets.
• Layout component was reimplemented. Layout options are created by model now. You can combine several options in Java like you would build a Tree by Tree nodes. By this way, all possible options are supported. This is only a first step, we didn't add some features like updatable nested (child) layouts. Also state management only works for direct layout panes at the moment due to some issues in current native jQuery Layout plugin (will be fixed soon).
• Timeline component was reimplemented and improved. This is the fastest Timeline implementation in the world :-) with native JavaScript code in its core parts (without jQuery)! There are a lot of features and about 25 use cases. We have implemented 5. Ask us if you have any questions. Here a screenshot yet (click to enlarge).

This release is available in the Maven central repo as usually.