ZK and the clipboard

 

Sounds too simple and it is present at a lot of websites: Copy to clipboard
I never had the requirement to copy text from a website to the clipboard, like you get the git URL when you are on a GIT project website and click the little icon. Same if you hover over the sourcecode below, you will get a copy option.

github.com

No, it is not possible to use simple javascript because it cant access your clipboard and you have no other chance then using one of the flash movie based solutions, like zeroclipboard, maybe one of the most popular ones.
The usual question: How do I get this embeded into my ZK web application ?

Short Tutorial:

  • Download the latest tar from code.google.com
  • Download the latest jQuery from jquery.com
  • Create a simple ZK web application
  • Place the jquery and zeroclipboard files into your Web Pagesfolder

    required files

  • Modify the index.zul file
    <?xml version="1.0" encoding="UTF-8"?>
    <zk xmlns="http://www.zkoss.org/2005/zul">
    
        <window id="info" apply="controller.indexController">
           <script src="jquery-1.6.4.js" type="text/javascript" />
           <script type="text/javascript" src="ZeroClipboard.js"/>
    
            <div id="d_clip_container">
                <image src="/Clipboard.png" />
            </div>
    
            <textbox id= "txtClipText"   cols="50" readonly="true" value="Some string for the clipboard"/>
    
            <script>
    		var clip = null;
    
    		function $(id) { return document.getElementById(id); }
    
                    function init(divId,clipText) {
                        ZeroClipboard.setMoviePath("ZeroClipboard.swf");
                        var clip = new ZeroClipboard.Client();
    
                        clip.addEventListener('mouseOver', function (client) {
                            clip.setText(zk.Widget.$(jq("$txtClipText")).getValue() );
                            //clip.setText(clipText);
                        });
    
                        clip.addEventListener('complete', function (client, text) {
                            alert("Copied text to clipboard: \n\n" + text );
                        });
    
                        clip.glue(divId);
    		}
            </script>
            <textbox value="" cols="30"/>
        </window>
    </zk>
    

    Remarks:

    • Using clip.setText(zk.Widget.$(jq(“$txtClipText”)).getValue() ); you can access a ZK textbox on the same page
    • With clip.setText(clipText); you can pass a text from the controller
  • Create a controller class
    package controller;
    
    import org.zkoss.zk.ui.Component;
    import org.zkoss.zk.ui.util.Clients;
    import org.zkoss.zk.ui.util.GenericForwardComposer;
    import org.zkoss.zul.Div;
    import org.zkoss.zul.Image;
    
    public class indexController extends GenericForwardComposer {
    
        Div d_clip_container;
        Image imgClipboard;
    
        @Override
        public void doAfterCompose(Component comp) throws Exception {
            super.doAfterCompose(comp);
    
            String command = "init('" + d_clip_container.getUuid() + "','some Text from controller');";
            Clients.evalJavaScript(command);
    
        }
    
    }
    
  • Run the application

    Running web application

 

Remarks:

  • Thanks to my team to get this running 🙂
  • Most of it we learned by tinkering with the sample code from zeroclipboard.
  • I dont favor Flash solutions because we depend on Adobe’s policies and changes. While Flash 9 allow reading and writing the clipboard easily, they consider it as a security risk in Flash 10. And only the trickery above makes it work. We wont know what Adobe will do in future versions, the above solution might break.
Advertisements

2 thoughts on “ZK and the clipboard

  1. How you wire zk/sript variable var clip = new ZeroClipboard.Client(); in indexController to use function clip.setText(clipText);

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s