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
action	Clipboard action: 'copy' or 'cut'.Default is copy.
binding	An EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
id	Unique identifier of the component in a namingContainer.Default is generated.
onerror	Client-side callback when the copy/cut action fails.
onsuccess	Client-side callback when the copy/cut action succeeds.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
target	Search expression for the element whose content is copied/cut.
text	Text to copy when no target is specified.Default is PrimeFaces Rocks!.
trigger	Search expression for the element that triggers the clipboard action.
widgetVar	Name of the client side widget.