PrimeFaces Extensions Showcase

Clipboard

Clipboard is used to copy/cut text to the OS clipboard without the need for Flash.

Clipboard can have the text="PrimeFaces Rocks!" set specifically or it can be pointed at a text component using target="".

Clipboard can be used in menu options too...just right click the background to show the Context Menu.

Copy
Cut

Right click me to view the menu options!

Source

XHTML page
Managed bean


<h:panelGrid columns="4">
        <h:outputText value="Copy"/>
        <p:inputText id="txtCopy" value="#{clipboardController.copyInput}"/>
        <p:commandButton id="btnCopy" value="Copy" icon="pi pi-copy"/>
        <pe:clipboard id="clipCopy" trigger="btnCopy" action="copy" target="txtCopy">
            <p:ajax event="success" listener="#{clipboardController.successListener}"/>
            <p:ajax event="error" listener="#{clipboardController.errorListener}"/>
        </pe:clipboard>

        <h:outputText value="Cut"/>
        <p:inputText id="txtCut" value="#{clipboardController.cutInput}"/>
        <p:commandButton id="btnCut" value="Cut" icon="pi pi-clipboard"/>
        <pe:clipboard id="clipCut" trigger="btnCut" action="cut" target="txtCut">
            <p:ajax event="success" listener="#{clipboardController.successListener}"/>
            <p:ajax event="error" listener="#{clipboardController.errorListener}"/>
        </pe:clipboard>
    </h:panelGrid>

    <h:panelGroup layout="block" style="text-align:left;margin:10px;">
        <p:commandButton id="btnAjaxCopy" value="Ajax Copy" icon="pi pi-copy" onclick="return false;"/>
        <pe:clipboard id="clipAjax" trigger="btnAjaxCopy" action="copy" text="#{clipboardController.lineBreaks}">
            <p:ajax event="success" listener="#{clipboardController.successListener}"/>
            <p:ajax event="error" listener="#{clipboardController.errorListener}"/>
        </pe:clipboard>

        <p:button id="btnNonAjax" value="Non-Ajax Copy" icon="pi pi-copy" href="#"/>
        <pe:clipboard id="clipNonAjax" trigger="btnNonAjax" action="copy" text="PrimeFaces Clipboard Rocks Without Ajax!"
                      onsuccess="alert('Action: ' + this.action + ' Text:' + this.text);"
                      onerror="alert('Action: ' + this.action + ' FAILED!');"/>
    </h:panelGroup>

    <h:panelGroup layout="block" style="text-align:left;margin:10px;">
        <h:outputText id="lblRightClick">Right click me to view the menu options!</h:outputText>

        <p:contextMenu>
            <p:menuitem id="mnuCopy" value="Copy" url="javascript:void(0);" icon="pi pi-copy"/>
        </p:contextMenu>

        <pe:clipboard id="clipContextCopy" trigger="mnuCopy" action="copy" text="#{clipboardController.copyInput}">
            <p:ajax event="success" listener="#{clipboardController.successListener}"/>
            <p:ajax event="error" listener="#{clipboardController.errorListener}"/>
        </pe:clipboard>
    </h:panelGroup>


@Named
@ViewScoped
public class ClipboardController implements Serializable {

    private static final long serialVersionUID = 20120224L;

    private String copyInput = "Test Copy!";
    private String cutInput = "Cut Me!";
    private String lineBreaks = "PrimeFaces Clipboard\nRocks Ajax!";

    public void successListener(final ClipboardSuccessEvent successEvent) {
        final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Success",
                    "Component id: " + successEvent.getComponent().getId() + " Action: " + successEvent.getAction()
                                + " Text: " + successEvent.getText());
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

    public void errorListener(final ClipboardErrorEvent errorEvent) {
        final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_ERROR, "Error",
                    "Component id: " + errorEvent.getComponent().getId() + " Action: " + errorEvent.getAction());
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

    public String getCopyInput() {
        return copyInput;
    }

    public void setCopyInput(final String copyInput) {
        this.copyInput = copyInput;
    }

    public String getCutInput() {
        return cutInput;
    }

    public void setCutInput(final String cutInput) {
        this.cutInput = cutInput;
    }

    public String getLineBreaks() {
        return lineBreaks;
    }

    public void setLineBreaks(final String lineBreaks) {
        this.lineBreaks = lineBreaks;
    }
}

Use Cases

Documentation pe:clipboard

Attributes (move mouse over the names to see data types)

Name	Description
id	Unique identifier of the component in a namingContainer.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	An el expression referring to a server side UIComponent instance in a backing bean.
widgetVar	Name of the client side widget.
action	Action whether to 'copy' or 'cut'. Default is 'copy'.
trigger	The trigger to execute the action. Typically, a button.
target	The target component to copy/cut the text from.
text	If you don't use target you can set text to the value you want copied/cut. Default is 'PrimeFaces Rocks!' if you forget to set it.
onsuccess	Javascript handler to execute if text is successfully copied/cut.
onerror	Javascript handler to execute when text fails to copy/cut to clipboard.

Events (move mouse over the names to see classes)

Name	Description
success	fires when the clipboard sucessfully copies/cuts
error	fires when the clipboard fails to copy/cut