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.

Image may be NSFW.
Clik here to view.

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
  Image may be NSFW.
  Clik here to view.

  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
  Image may be NSFW.
  Clik here to view.

  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.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.