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)

d3.js getting started

I love visualization of data. It is fantastic what and how you can visualize data and make it accessible and understandable. Specifically I like tree, radial trees and graphs . While the tools some years back were rather restricted to thick clients and Flash applications, we can transport great visualizations with the means of a simple (recent) browser.I recommend this book ‘Beautiful Visualization’ by Julie Steele, Noah Iliinsky (link)

For a while I worked wth prefuse and flare (2 nice but more or less defunc projects), now I start to implement some real life applications with d3.js (link). The features are awesome but the documentation is still rather short, the API doc is complete, but not much hello world stuff to get started with, other than dissecting some of the sample in the download.

What do we need to get started ?

  • A browser and a web server (for Linux users: there is one build in your machine, just start python -m SimpleHTTPServer 8888 and the current path becomes ‘server’)
  • Download d3.js (comes with plenty of samples, some of them will NOT run when you open the html files as file, use the webserver instead!)
  • Text editor (Kate, vi,..)

What is the most simple visualization sourcecode ?

  • Create a html file and place the d3.js in the same or lib folder.
  • Lets draw a circle (I took this from one of the get-started blogs by Christophe Viau, link)
    <!DOCTYPE html>
    <html>
      <head>
        <title>Hello, data!</title>
        <script type="text/javascript" src="lib/d3.js"></script>
      </head>
      <body>
    
        <div id="viz"></div>
    
        <script type="text/javascript">
    
        var sampleSVG = d3.select("#viz")
            .append("svg:svg")
            .attr("width", 100)
            .attr("height", 100);
    
        sampleSVG.append("svg:circle")
            .style("stroke", "black")
            .style("fill", "white")
            .attr("r", 40)
            .attr("cx", 50)
            .attr("cy", 50)
    
        </script>
    
      </body>
    </html>
    
  • Open the browser

    Most simple d3.js sample

I hope I find the time to share more with you once I get the grip on this tool.

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:

ZK ‘zau.send()’ Sample

When using the ZK framework out-of-the-box, there is not much need to rely on any other communication methods than using the regular controller methods, except you want to pass client-side data that you can’t catch otherwise, eg. from javascripts. Here the most simple sample to talk from a zul page to a controller and passing data. You find the relevant ZK info/reference here, but I still miss a short and crisp sample.

Requirements:

  • Any Netbeans IDE beyond version 6.0 (with Glassfish or Tomcat installed)
  • ZK plugin to create ZK web app

Continue reading

MULE ESB Config Snippet: Most Simple Flow

For the first sample I create, I show all the details, subsequently I will only quote the configuration file.

  1. Create a new Mule Project
    (without sample code)

    New Mule Project

  2. Create a new configuration
    (add only standard I/O)

    New Configuration

    New Configuration

  3. This is an empty configuration file. You will always start from here.
    <?xml version="1.0" encoding="UTF-8"?>
    <mule xmlns="http://www.mulesoft.org/schema/mule/core"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xmlns:stdio="http://www.mulesoft.org/schema/mule/stdio"
    
          xsi:schemaLocation="
              http://www.mulesoft.org/schema/mule/core http://www.mulesoft.org/schema/mule/core/3.1/mule.xsd
              http://www.mulesoft.org/schema/mule/stdio http://www.mulesoft.org/schema/mule/stdio/3.1/mule-stdio.xsd">
    
    </mule
    

    This does basically nothing.

  4. The most basic concept you need to understand:
    • A flow describes the sequence of activities that happen to a piece of information (message)
    • You define one or more connectors
    • A message comes from somewhere (inbound-endpoint)
    • You do something to it (or not)
    • The message goes somewhere (outbound-endpoint)
  5. The most simple flow I could think of: You enter a value at the console and you get it back at the console !
    Refer to the stdio document for parameters.

    <?xml version="1.0" encoding="UTF-8"?>
    <mule xmlns="http://www.mulesoft.org/schema/mule/core"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xmlns:stdio="http://www.mulesoft.org/schema/mule/stdio"
    
          xsi:schemaLocation="
              http://www.mulesoft.org/schema/mule/core http://www.mulesoft.org/schema/mule/core/3.1/mule.xsd
              http://www.mulesoft.org/schema/mule/stdio http://www.mulesoft.org/schema/mule/stdio/3.1/mule-stdio.xsd">
    
    	<stdio:connector name="stdioConnector" messageDelayTime="1000" promptMessage="IN: " outputMessage="OUT:  "  />
    
    	<flow name="SimpleFlow">
    		<stdio:inbound-endpoint system="IN"  exchange-pattern="one-way" connector-ref="stdioConnector"/>
    		<stdio:outbound-endpoint system="OUT" exchange-pattern="one-way" connector-ref="stdioConnector"/>
    	</flow>
    </mule>
    

     

  6. Run (better Debug) the configuraion. Run as Mule Server
    If you debug, you can terminate the Mule server from eclipse, if you run you wont be able to stop the server (due to some plugin bug I guess)

    Run Mule Server

    Mule Server Running

Creating a ZK Groovy Console

SECURITY WARNING: Please take note of the warning at the end of the tutorial !
UPDATE 2011-07-08: A good article on the security concern I recommend http://www.jroller.com/melix/entry/customizing_groovy_compilation_process

We use the Groovy Script Engine to run small Groovy scripts to prepare incoming interface messages for further processing. Here I share with you how to embed the engine into a ZK page. Very basic, though it shows you the concept and it is wasy to expand to your needs.

ZK Groovy Console

Continue reading

Update DynDNS hosts with Java and HttpComponents

I was looking for a way to update the DynDNS hosts pointing to my EC2 instances that run only on demand (controlled by an web application). Yes, there are apps and tools to let the server itself update his DynDNS hosts, but I want to do it from a central application. The DynDNS API description you find here, unfortunately there are no samples. But if you familiar with REST calls, shouldn’t be a big issue. For those who to get running quick, here the key code. To experiment, just create a simple Java application with Netbeans (or any other IDE), download the HttpComponents from Apache and add the library files to your project.

Libraries

commons-codec-1.4.jar
commons-logging-1.1.1.jar
httpclient-4.1.1.jar
httpclient-cache-4.1.1.jar
httpcore-4.1.jar
httpmime-4.1.1.jar

Sourcecode to update an IP address

void updateDynDNS() {
...
// replace with your own data !
String hostName = "whateveryourdomainnameis.selfip.org";
String hostIP = "1.2.3.5";
String userName = "user";
String userPassword = "password";
int responseCode;

try {

// Encode username and password
BASE64Encoder enc = new sun.misc.BASE64Encoder();
String userpassword = userName + ":" + userPassword;
String encodedAuthorization = enc.encode(userpassword.getBytes());

// Connect to DynDNS
URL url = new URL("http://members.dyndns.org/nic/update?hostname=" + hostName + "&myip=" + hostIP);
HttpURLConnection connection = (HttpURLConnection) url.openConnection();
connection.setRequestMethod("GET");
connection.setRequestProperty("User-Agent", "Demo DynDNS Updater");
connection.setRequestProperty("Authorization", "Basic " + encodedAuthorization);

// Execute GET
responseCode = connection.getResponseCode();
System.out.println(responseCode + ":" + connection.getResponseMessage());

// Print feedback
String line;
InputStreamReader in = new InputStreamReader((InputStream) connection.getContent());
BufferedReader buff = new BufferedReader(in);
do {
line = buff.readLine();
System.out.println(line);
} while (line != null);

connection.disconnect();

} catch (Exception ex) {
Logger.getLogger(Main.class.getName()).log(Level.SEVERE, null, ex);
}

}
...

Up to you to embed into your application and do proper exception handling.

In a separate tutorial I will describe the basics of an EC2 controlling application using the AWS SDK for Java.