If you're interested in functional programming, you might also want to checkout my second blog which i'm actively working on!!

Friday, November 27, 2009

SCALA: using higher order functions

The creators of scala did a hell of a job to design the core library with control abstractions. Each collection class uses the trait Iterable which implements an exists() method.

Let's take a look at how Iterator.scala implements this higher order function exists().

The big advantage is that it now becomes easy to define generic functions to handle certain collection types. Let's see how easy it becomes to write a method that checks if a collection of numbers contains a negative number

As you can see we don't have to write all the boiler plate code of iterating anymore. We just specify the function literal which checks our condition.
Let's test our code with an Array and List, both containing integers.


run:
numbers contains negative number = true
numbers2 contains negative number = false

Thursday, November 26, 2009

Scala: Tail recursion

Looking back at our Fibonnaci examples the Scala compiler offers one big performance boost when using recursion. The only condition is that you use tail recursion. What this basically means is that the last expression in your recursive method is a call to itself.

Below follows a refactored recursive implementation which performs almost as fast as the non-recursive implementation.

Scala Collection goodies

Scala offers several ways of accomplishing the same. Here we demonstrate 2 ways of calling a function for each object in a collection.



Wednesday, November 25, 2009

Fibonnaci in scala

The first implementation below is my own implementation which stores all calculated values
directly in the array and reuses those values to calculate following values.


Another implementation which heavily uses recursion is implemented using pattern matching. See wikipedia. But as you would expect this implementation has bad performance as we will prove. But nevertheless pattern matching opens up a lot of possibilities.




results in

fibonnaci processed 30 numbers in 16 miliseconds.
0 1 1 2 3 5 8 13 21 34 55 89 144 233 377 610 987 1597 2584 4181 6765 10946 17711 28657 46368 75025 121393 196418 317811 514229
fibonnaci2 processed 30 numbers in 47 miliseconds.
0 1 1 2 3 5 8 13 21 34 55 89 144 233 377 610 987 1597 2584 4181 6765 10946 17711 28657 46368 75025 121393 196418 317811 514229


In fact the first implementation can print 1000 numbers in almost the same amount of time.... The 2nd implementation however will become unresponsive from n > 50...

Lesson learned: Be carefull in how you use recursion.

Scala: the art of writing code consise

If you come from a java background you're bound to get rusty in programming imperative as opposed to functional. I'm actually familiar with both programming styles and it would be great to be able to use both mixed together.

Now let's take a look at a simple function which takes a list of numbers and returns the sum.

In java this might look like the snippet below:


Ok... i know what you're gonna say... Use the enhanced for loop...


Well... get ready for some SCALA versions of the same functionality

You can also use the placeholder syntax:

But SCALA promotes NOT using var's ...so let's try to even reduce this further:

Using placeholder syntax this becomes:


As you can see we managed to reduce the function to a body with 1 line of code...

Expect more SCALA examples to follow.

Scala: getting started

I'm reading up on scala and the time has come to start using it. The first thing i wanted to get working is the plugin for Eclipse... i tried it for several versions of Eclipse but the plugin was crappy. So next i tried installing Netbeans 6.7.1 and the Scala Netbeans plugin... this gave me also some headaches untill i ended up following the steps on Caoyuan's blog.

Now i'm playing around with the latest nightly build of Scala (2.8) and the latest plugin and they seem to be workable.

Monday, November 9, 2009

Advanced Javascript: part 8

UTIL.BASE

After playing around with the forEach method I noticed that sometimes it would be very usefull to be able to stop iterating over the array. So if the function argument returns false the iteration stops.


A good use case was my implementation of the DOM select function:

Advanced Javascript: part 7

UTIL.DOM: Creating your own html extension functions

It's convenient to work with some kind of html element proxy but the clone method does not work properly in IE. No need to worry though. You can still add convenience methods on original objects without cloning them. That's what javascript is all about... change runtime behaviour of objects.

So I wrote an extend function which takes an html element as parameter and dynamically adds behaviour.

Since we want to these extensions for free by default, we write our own get method for retrieving elements





You can now clear the container in 1 statement:

var myContainer = DOM.get("some-id");
myContainer.clear();

Adding an event handler or event listener using our own method allows us to add behaviour later on easily. An example is shown below:

It also becomes very easy to style elements using CSS.

Advanced Javascript: part 6

UTIL.DOM


The main goal of the DOM library is to provide convenience methods to create DOM elements.

To achieve default styling the library generates classNames out-of-the-box when no className is provided through the config constructor object. Also, all properties will be copied over to the html element.

So instead of writing code like this:



var cell = document.createElement("td");
cell.className = "td"; //default className is set to tagName
cell.width = "100px";


you can write a one liner now:


var cell = DOM.td({"width": "100px"});


Even simpler...

when you provide a string as constructor we assume it's innerHTML so

var cell = document.createElement("td");
cell.className = "td"; //default className is set to tagName
cell.innerHTML = "cell value";


becomes


var cell = DOM.td("cell value");

Advanced Javascript: part 5

UTIL.BASE

Advanced Javascript: part 4

UTIL.LOGGING

A simple interface that allows developers to log messages of type
  • info
  • warning
  • error

Advanced Javascript: part 3

UTIL.IO

When creating fast webpages you're bound to do partial updates of your page sooner or later. So instead of completely generating full html tables server side, you might want to consider fetching your data in JSON format when certain events happen.

Anyway, the snippet below allows you to do just so.














Now to make an asynchronous request becomes very simple.

IO.AsyncRequest(
"GET",
"http://www.mytabledata.nl",
callbackmethod,
this,
null);

Advanced Javascript: part 2

A common mistake (?) often seen is people declaring like a zillion GLOBAL variables in their scripts. That might not cause any problems when relying on only 1 script in your page but it will become a problem for sure when you include scripts from colleagues which contain variables with the same name.

RULE 1: always use namespaces in your scripts

Of course i followed this rule as the image below shows.

Advanced Javascript: part 1

I've been spending a lot of time researching and experimenting with advanced and well-performing javascript.

I managed to increase performance on some webpage containing a html table containing 1400 rows of data (build with javascript) by 500%. This was achieved through abstracting functionality, reducing complexity and using JSON as dataformat.

Inspired by this great result i'm in the middle of writing my own JS library in a use-case driven fashion leaving out all the fancy bits of traditional libraries.

At this moment I created 4 domains which form the base for creating widgets:
  • base -> generic functions
  • dom -> enables fast creation of DOM elements using default standards
  • io -> making (xml)-httprequests
  • logging -> easy way of visualize logging onto your webpage without using annoying alerts

Wednesday, October 28, 2009

server side script for generating JSON with Cocoon

I've been making use of JSON a lot lately since it's fast and convenient to make partial updates on your webpage. I wrote me some reusable flowscript to generate the necessary JSON data.

If you put this script inside your flow folder you can easily generate a JSON string.

A sample is listed below.


My relevant sitemap snippets:


jsonlibtest.jx looks like:


The result looks like

Tuesday, September 29, 2009

Bespin, an open extensible web-based framework for code editing

I would not like to withold this promising new project from Mozilla labs.

These guys are creating an awesome platform for developer collaboration.. just take a look at following links:

https://bespin.mozilla.com/
http://labs.mozilla.com/bespin/

Geolocation supported by latest version of browsers


If you installed the latest update of your preferred browser you might see a new small blue button in google maps. This button only appears if your browser supports geolocation. This functionality basically enables the browser to ask it's "location provider" for an approximate location. This location is determined based on
"WIFI access point", "IP-address", "GPS" or a combination.

Of course I updated my browser immediately (Firefox 3.5.3) and did a test. Without GSP available to my browser, it still gives a pretty good estimate of my location (+- few 100 metres).

Thursday, September 17, 2009

Getting the most out of Enums

Below an enum I created for some project...

Shoot and give comments !!



public enum DataType{

String(
"java.lang.String",
"String",
Operator.EQUALS,
Operator.CONTAINS,
Operator.IS_EMPTY,
Operator.IS_NULL,
Operator.IN
) {
public Object newInstance(Object value) {
String object = null;
if (value == null) {
return object;
}
try {
object = java.lang.String.valueOf(value.toString());
} catch (Exception e) { }
return object;
}
},
Integer(
"java.lang.Integer",
"Integer",
Operator.EQUALS,
Operator.IS_NULL,
Operator.GT,
Operator.GTE,
Operator.LT,
Operator.LTE,
Operator.BETWEEN
) {
public Object newInstance(Object value) {
Integer object = null;
if (value == null) {
return object;
}
try {
object = java.lang.Integer.valueOf(value.toString());
} catch (Exception e) { }
return object;
}
},
Long(
"java.lang.Long",
"Long"
) {

public Object newInstance(Object value) {
Long object = null;
if (value == null) {
return object;
}
try {
object = java.lang.Long.valueOf(value.toString());
} catch (Exception e) { }
return object;
}
},
Double(
"java.lang.Double",
"Double",
Operator.EQUALS,
Operator.IS_NULL,
Operator.GT,
Operator.GTE,
Operator.LT,
Operator.LTE,
Operator.BETWEEN
) {
public Object newInstance(Object value) {
Double object = null;
if (value == null) {
return object;
}
try {
object = java.lang.Double.valueOf(value.toString());
} catch (Exception e) { }
return object;
}
},
Date(
"java.util.Date",
"Date"
) {
public Object newInstance(Object value) {
Long time = null;
Date object = null;
if (value == null) {
return object;
}
try {
time = java.lang.Long.valueOf(value.toString());
object = new Date(time);
} catch (Exception e) { }
return object;
}
},
Character(
"java.lang.Character",
"Character"
) {
public Object newInstance(Object value) {
Character object = null;
if (value == null) {
return object;
}
try {
String stringvalue = value.toString();
if (stringvalue.length() == 1 ) {
object = new Character(stringvalue.charAt(0));
}
} catch (Exception e) { }
return object;
}
},
BigDecimal(
"java.math.BigDecimal",
"BigDecimal"
) {
public Object newInstance(Object value) {
BigDecimal object = null;
if (value == null) {
return object;
}
try {
Double doubleValue = java.lang.Double.valueOf(value.toString());
object = java.math.BigDecimal.valueOf(doubleValue);
} catch (Exception e) { }
return object;
}
},
Boolean(
"java.lang.Boolean",
"Boolean"
) {
public Object newInstance(Object value) {
Boolean object = null;
if (value == null) {
return object;
}
try {
object = java.lang.Boolean.valueOf(value.toString());
} catch (Exception e) { }
return object;
}
};

private String fullName;
private String shortName;
private List validOperators;

DataType(String fullName, String shortName, Operator...operators) {
this.fullName = fullName;
this.shortName = shortName;
validOperators = new ArrayList();
for (Operator operator : operators) {
validOperators.add(operator);
}
}

public String getFullName() {
return this.fullName;
}

public String getShortName() {
return this.shortName;
}

public List getValidOperators() {
return this.validOperators;
}

public abstract Object newInstance(Object value);

public String toString() {
return this.shortName;
}

}

Thursday, June 25, 2009

debugging with maven2 jetty plugin

Here a method I found which works (just for my own record).

Step 1
Go to the Run/External Tools/External Tools ..." menu item on the "Run" menu bar. Select "Program" and click the "New" button. On the "Main" tab, fill in the "Location:" as the full path to your "mvn" executable. For the "Working Directory:" select the workspace that matches your webapp. For "Arguments:" add jetty:run.

Move to the "Environment" tab and click the "New" button to add a new variable named MAVEN_OPTS with the value:

-Xdebug -Xnoagent -Djava.compiler=NONE -Xrunjdwp:transport=dt_socket,address=4000,server=y,suspend=y

If you supply suspend=n instead of suspend=y you can start immediately without running the debugger and launch the debugger at anytime you really wish to debug.

Step 2

Then, pull up the "Run/Debug/Debug ..." menu item and select "Remote Java Application" and click the "New" button. Fill in the dialog by selecting your webapp project for the "Project:" field, and ensure you are using the same port number as you specified in the address= property above.

Now all you need to do is to Run/External Tools and select the name of the maven tool setup you created in step 1 to start the plugin and then Run/Debug and select the name of the debug setup you setup in step2.

From instructions provided by Rolf Strijdhorst on the Maven mailing list

Stopping Jetty

In order to stop the jetty server the "Allow termination of remote VM" should be checked in debug dialog in Step 2. When you have the jetty server running and the debugger connected you can switch to the debug perspective. In the debug view, right click on the Java HotSpot(TM) Client VM[localhost:4000] and chose terminate. This will stop the debugger and the jetty server.

Wednesday, June 24, 2009

youtubeapp

Today I was listening to music on youtube and I suddenly got the idea to build an app that
would enable users to add a playlist just like Itunes. Guess what...

http://www.youtubeapp.com

It already exists ;-) It really looks web2.0 and since I've installed ORB on my desktop I can open this application through the Wii. So next time I'll be listening my favourite songs on television.

Robby

Tuesday, June 23, 2009

Bug in Google Chrome

I was trying to view a xml file in Chrome today after updating to the most recent version and to my surprise it did not render the xml properly like is the case in most other browsers. I hope this bug will be fixed soon.

Thursday, June 18, 2009

Internationalization with GWT

I ran into a exception yesterday saying "no resource found for key xxx". I double checked my properties file but the key/value was there. Scanning the gwt forum for the same issue resulted in 3 hits but no answer to my problem.

My properties file looked like:

user=User
home=Home
...

Apparently you need to leave spaces between the key, = and value so when i changed the snippet above to

user = User
home = Home

everything worked.

Cheers,
Robby

Wednesday, June 17, 2009

Google AppEngine and GWT

I finally started exploring google app engine. I'm planning on giving a knowledge session later this year as part of my goals for this year. I only spent a few days experimenting and with no prior knowledge I'm quite satisfied with my progress. Uptill now i created a new app engine project using JDO for persistence. I hope JPA does not turn out to be a better choice in the end.

Anyway, i was able to create a userform widget (composite) which enabled me to add a new user and another usersform widget which presented all users. It took me a while to understand how the Async interface worked since the return type can only be 'void'. Luckily a quick look at the AsyncCallback.java reveiled how it all works.

Below some screenshots of how it works:
































Another thing which takes getting used to is page navigation with GWT. You only have one html page representing your EntryPoint. So what you basically do is dynamically adding and removing your widgets in the pagecontainer.

Next weeks I will write more about my findings.

Cheers,
Robby

Wednesday, June 10, 2009

Video DownloadHelper

Yesterday i installed a really nice plugin for firefox which enables me to download movies from all kinds of websites like Youtube. It also automatically converts the movie into MPEG4. Now if I find a movie worthwile to watch in good quality, i just download it first and can watch it later on. Even without an internet connection ;-)

https://addons.mozilla.org/nl/firefox/addon/3006

Thursday, June 4, 2009

cocoon 2.2 block handling all file reading

I've seen many cocoon apps where they use properties in the sitemap to for instance dynamically construct the "src" attribute of a generator or reader. I also did not want to pollute my sitemap with multilevel selectors to get the job done. Well, there are more elegant ways to accomplish this. I used a combination of
  • the cocoon spring configurator
  • sitemap
  • flowscript
  • springbean
Screenshots below should make clear how i setup a (shared) block for ally upcoming publications to handle file reading.

Configure a bean with all knowledge about the repository containing images, xml, ...

Bean configuration:
















Java Bean snippet:


















Sitemap snippet:

























Flowscript snippet:
(which calls my javabean)



















So what basically happens is that the sitemap delegates the construction of the src attribute to a flowscript function. This flowscript call's my javabean based on the parameters it receives from the sitemap. Then another pipeline is invoked which
- generates the xml file in case of calling the xml pipeline
OR
- reads the file from disk

Cheers,
Robby Pelssers

escaping html with xslt

Ok... suppose you get some xml from a customer which looks like:
<footnote>
<![CDATA[T<sup>j</sup> >= 25]]>
</footnote>

You could easily use the attribute disable-output-escaping if you only needed to put the value between a <td>. But what if you needed to transform it into something like

<td>
<a href="#footnote-1">T<sup>j</sup> >= 25</a>
</td>

In this case your last stylesheet can't have a matching template like the one below since that would mean getting rid of the anchor tag.
<xsl:template match="td">
<xsl:value-of select="." disable-output-escaping="yes"/>
</xsl:template>

So when you KNOW what part of the xml can contain html tags, you can surround that data with a meta tag which you will use in the final transformation before serializing to xhtml.

So let's transform the above snippet to:

<footnote>
<nxp:escape>T<sup>j</sup> >= 25</nxp:escape>
</footnote>

<xsl:template match="footnote">
<td>
<a href="#footnote-{position()}"><xsl:apply-templates select=./node()/></a>
</td>
</xsl:template>


<xsl:template match="@*|node()">
<xsl:copy>
<xsl:apply-templates select="@*"/>
<xsl:apply-templates/>
</xsl:copy>
</xsl:template>

So now we get

<td>
<a href="#footnote-1">
<nxp:escape>T<sup>j</sup> >= 25</nxp:escape>
</a>
</td>

In our last stylesheet we only need to to the following:

<xsl:template match="nxp:escape">
<xsl:value-of select="." disable-output-escaping="yes"/>
</xsl:template>

<xsl:template match="@*|node()">
<xsl:copy>
<xsl:apply-templates select="@*"/>
<xsl:apply-templates/>
</xsl:copy>
</xsl:template>

Cheers,
Robby

cocoon 2.2 experience

I had to rewrite a cocoon application from scratch over the last few days because the xml schema used for their productinformation was completely redesigned on my advice.

This meant i could not reuse the existing transformations. This was an exciting challenge so I've spent many hours (about 70) to get the job done. The first thing I did was creating a cocoon block that transformed the original (messy) xml file to validate the new schema. Next in line I created a cocoon block which will be responsible for reading all files from their repository (unix filesystem).

I'm pleased with the end-result so here comes a first screenshot.

I also am going to share the lessons learned from this huge cocoon annex xslt job among which:
- how handling escaping html (cdata) in a smart easy way.
- pitfalls encountered
- how creating nice popup panels
- ...

























Cheers,
Robby Pelssers

Tuesday, June 2, 2009

problem with characterencoding of nonbreaking spaces

This weekend I ran into the issue that internet explorer did not render non-breaking-spaces (&#160;) correctly, while firefox did.

Explicitly setting the charset header solved it ;-)

<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>

Thursday, May 28, 2009

M2Eclipse plugin

The Maven2 plugin for eclipse is quite a relief for non-maven guru's. One cool feature is the Dependenc Graph which calculates all your project dependencies and plots them in a nice Graph. If you ever wondered how much dependencies a typical Cocoon2.2 block has, here you go ;-)

Problem setting M2_REPO variable in Eclipse Ganymede 3.4.2

I just installed the latest version of Eclipse and M2Eclipse pluging from Sonatype and apparently you get an out-of-the-box M2_REPO variable which you can't modify.

So Eclipse gave me warnings that my project was missing the required libraries. The issue was luckily easily resolved by copying the settings.xml from my Maven installation to C:\Documents and Settings\arobpel\.m2

Wednesday, May 27, 2009

Saxon isssue: java.lang.IllegalArgumentException: Unknown type of result: class > javax.xml.transform.dom.DOMResult

I created a cocoon2-2 block last week and everything seemed to work just fine using "mvn jetty:run". However, when deploying the complete war on tomcat I got following stacktrace:

java.lang.IllegalArgumentException: Unknown type of result: class javax.xml.transform.dom.DOMResult net.sf.saxon.event.SerializerFactory.getReceiver(SerializerFactory.java:154)

Googling around a bit I found out I needed to rename the saxon-8.7.jar to zsaxon-8.7.jar so this jar will be loaded last.

Explanation:
The problem happens because the saxon.jar contains API classes related to DOM Level 2. The xml-apis.jar contains API for DOM Level 3. Cocoon 2.1.8 was shipped with xerces 2.7.1 and xalan 2.7.0. Both needs DOM Level 3. Hence if in the classpath the saxon.jar is first, we get DOM Level 2 related classes and you got the problem as you showed up.



After upgrading to maven3 the above workaround did not work anymore so I advise you to use below approach and add a systemproperty to the maven-surefire-plugin

Tuesday, May 12, 2009

Creating Scalable Vector Graphics with Apache Cocoon

I've done some projects in the past where we created Scalable Vector Graphics. The nice thing about SVG is that you can scale the images without any quality loss. Back then, the only way to render SVG in the browser was by installing a plugin from Adobe. Now most browsers are able to render them without any plugins.

So how do you get started? This little tutorial assumes you have some basic Cocoon knowledge

Create a SVG template with the SVG editor of your choice.
Some suggestions:Replace the hardcoded values which should become parameters like this: ${logotext}











Below you will find some relevant sitemap.xmap snippets which i configured to create a dynamic image.















If we take a quick look at line 138, you see that when we invoke the url wich matches "generate/logo", the template "ciber/templates/logo.jx.xml" is read, the ${} values are replaced by their corresponding values if present and the svg-template is serialized to jpeg.

We only need some way to fill that missing ${logotext} parameter. Cocoon offers flowscript to the rescue. Flowscript is plain javascript in which you can write the controller which takes care of building the model which will be passed on to the view. (Model-View-Controller).

Our controller will use a sitemap parameter to fill in the missing ${logotext}. In line 132, you see a match pattern "logo/*" where * is our first and only {1} parameter which we pass on to the flowscript function "createLogo" on line 134.

Let's take a quick look at our flowscript (logo.js)






When you invoke following URL:
"http://localhost:8888/cocoonDemo/logo/Creating SVG with Cocoon" the sitemap matches this on line 132. It call's the function createLogo() and passes it the sitemap parameter 'logotext' with value 'Creating SVG with Cocoon'.

On lines 2 and 3 we build a javascript object 'data' with a variable named logotext and pass it the value of the sitemap-parameter with the same name. On line 5 our controller tells cocoon to render a page by invoking the match pattern "generate/logo" and pass it our constructed model 'data'.

Now the sitemap matches line 138, but this time it does have a model containing a value for 'logotext'. Let's take a look at the end result.






This demo shows you the most basic (simple) case to create dynamic SVG. More difficult use cases are when you read in your data from a database or XML files and use this data in transformations to construct SVG.

Cheers,
Robby

Monday, May 11, 2009

Apache Cocoon 3: sitemap support for xml validation

I just checked out the still in alpha-1 phase Cocoon3 from trunk. One thing that immediately catched my eye when browsing the cocoon-3 sample block is the support for validation which I kinda missed in previous versions.

It's a matter of adding a transformer of type "schema" in your sitemap.

<map:transform type="schema" src="sax-pipeline/simple.xsd" />


Cool stuff !!
Robby

Friday, May 8, 2009

Calculating rowspan for cellmerging

Ok... Here is a small demo that shows you a way how to calculate the rowspan.

contacts.xml will be the starting point for this exercise.




















In a first step we do a little xml to xhtml conversion in order to view our data in a table.

contacts2html.xslt:





















The result is the following:










Now suppose we want to merge cell's in the city column.

mergecells.xslt snippet:












The final output looks like this:











This demo shows you it's quite easy to calculate the rowspan using the 'deep-equal' function recursively.

Cheers,
Robby

Thursday, May 7, 2009

comparing nodes with XSLT

Sometimes you want to compare xml nodes for equality. In case of equality you want let's say consequent rows to be spanned. Xpath provides a nice function for this use case:

http://www.w3.org/TR/xpath-functions/#func-deep-equal

Below you will find a testcase (input, xslt and output).

Input.xml













XSLT
















Output.xml