Code Snippet: ZK controller reading URL parameter

How to pass parameters as part of the URL like http://….?name=Smith&first=John ?

ZUL page

<pre><?xml version="1.0" encoding="UTF-8"?>
<zk xmlns="http://www.zkoss.org/2005/zul">
    <window id="index" apply="controller.indexController" >
        <label value="Parameter 1:"/>
        <label id="lblPar1" />
        <label value=" - Parameter 2:"/>
        <label id="lblPar2" />
    </window>
</zk>

Controller

package controller;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Label;

public class indexController extends GenericForwardComposer {

    private Label lblPar1;
    private Label lblPar2;

    @Override
    public void doAfterCompose(Component comp) throws Exception {
        super.doAfterCompose(comp);

        if (Executions.getCurrent().getParameter("parameter1") != null) {
            String par = Executions.getCurrent().getParameter("parameter1");
            lblPar1.setValue(par);
        } else {
            lblPar1.setValue("null");
        }
        if (Executions.getCurrent().getParameter("parameter2") != null) {
            String par = Executions.getCurrent().getParameter("parameter2");
            lblPar2.setValue(par);
        } else {
            lblPar2.setValue("null");
        }
    }
}

SVH20121203001

Advertisements

ZK goes EC2 (Part 3)

The third part of the tutorial where I improve a few things. I will not walk through the complete code but highlight a few important points and give you the complete sourcecode at the end.

To recap, my requirements:

  • I want to allow users in my company to start and stop instances on their own without them login to AWS console.
  • Only specific instances are available to them.
  • Avoid using elastic IP’s (you pay for them if they are not assigned)
  • Make it configurable

The improvements in this version:

  • Remove the hardcoded access keys and place them encrypted in a properties file.
  • Only instances that are not protected can be started or stopped.
  • Update DynDNS entries from the application
  • Some cosmetic cleanup of the control panel

Continue reading

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.

ZK goes EC2 (Part 2)

Part 1 of this tutorial we concluded with an web application that displays all our instances and their status. In this part we will add some more features to control our instances.

Prerequisites:

  • The project and environment from part 1

Tutorial (complete sourcecode at the end):

  • Display the region endpoints and allow to select different one
    We hardcoded our endpoint in the first version, if you run instances across the globe in the various AWS datacentres (US, Ireland, Singapore, Tokyo) we need to switch the endpoint easily.
    Lets add one more listbox, that we hide in a ZK popup (we could use a combo listbox, but for the sake of playing with all the available ZK components I use the popup). Same concept add a listbox in the zul and a EC2 region list and a list model with customer renderer in our controller. Continue reading

ZK goes EC2 (Part 1)

Certainly not a big deal to deploy a ZK web application to a Amazon EC2 instance, but I needed a simple application that allows my team to start/stop our EC2 instance that we use for testing and demo without logging into the AWS account or using the Firefox plugin (both giving too many rights and are too complex for some business users).
I created this app to give my users (tester and trainer) a chance to start the servers without logging into AWS. I share this because the are no samples in the SDK file that cover the EC2 instances in detail.

In part 1 of this tutorial we will create a ZK application that displays the status of our instances in a list.

In part 2 we will add the start-stop instance function, in part 3 we tinker with IP addresses and DynDNS domains and in part 4 we let our web application time scheduled (EJB Timer) control the instances automatically.

Pre-Requirements:

Tutorial Part 1:

ZK and d3.js

One of the important questions to me: Can I embed d3.js in my ZK zul pages and talk to the visualization ? Embedding is fairly simple, using the html tag you can embed any native html content and scripts. There is certainly a limitation to scripts, as the final rendered html page will contain both the zk javascript and our script, hoping there is no interference. As sample it is not possible to mix ZK with ExtJS, but JQuery is not a problem.

Task 1: Most simple zk application (Draw circle)

ZK ‘Client-Server’ Communication Sample Part 2

In the first part (link) we made a javascript embedded into our zul page send data to the controller with the magic zau.send() function. The reverse can be done too, call a javascript on the zul page from the controller.

Lets continue with the sample from part 1: