IT-eye

Just learned from a comment by Gary to my previous post JQuery becoming essential knowledge for web developers that jQuery is also going to be used in Oracle Apex to add AJAX functionality. Marc Lancaster has a bit more info in his blog: Oracle OpenWorld – done and dusted. Good new for Apex users. I wonder how easy it is to create REST/JSON services using Apex/plsql.

Recently i’ve blogged quite a bit about jQuery (Jquery howto: an accordion menu component, Creating charts using jQuery flot and some Grails, Using jQuery autocomplete with Grails and json). To say that i’m impressed is an understatement. It has completely changed my mind about the need for browser plugin technologies like Flex, Silverlight and JavaFX, although browser support for multimedia applications still has some catching up to do. jQuery makes AJAX pretty easy, Javascript extremely powerful, hides a lot of the browser differences, and has a large number of components.

JQuery was already used by a large number of websites and companies, but now Microsoft has announced that it’s going to include jQuery in Visual Studio. (Scott Hanselman has an example using jQuery with ASP.NET) Also, Nokia is including jQuery in all phones that use their WebKit based Web run-time. Here’s John Resigs blog entry about these announcements: jQuery, Microsoft, and Nokia. Also a bit more info on Ajaxian

Seems like jQuery is becoming essential knowledge for web developers.

Last year when Google released Gears with support for offline caching of web resources i doubted it’s usefulness. Why would i want to cache something that’s dynamically generated on the server? The file would probably be out of date by the time it was needed. However, this all changes in the Client Server 2.0 architecture.

When all User Interface files you download from the server are static, there’s no problem caching them offline. They will be up to date when you need them in the future, because they are static. All the dynamic parts are handled by the javascript code. if you combine this with a small offline set of data, stored in a database in the browser, suddenly you have a useful disconnected application model.

Ofcourse, this is not a new idea. Gmail and Google Reader have been offering this for some time already. But like many people, i had a hard time seeing that serverside generated user interfaces (html) aren’t really needed anymore. At all. No more jsp or jsf. (Unless you need search-engine indexable content). But when you let go of the idea that you need to dynamically generate anything at all on an application server, suddenly offline caching becomes a very interesting concept.

Client Server 2.0 is the next logical step that started with AJAX and RIA. It is Client Server but based on open standards: html, javascript, css and services. The client is completely responsible for creating the user interface. All dynamic parts are generated using javascript in the browser. Applications servers will serve static html, javascript, and css. But more importantly, they will host the services used by the javascript clients. So the main role of application servers in this model is to act as SOA containers.

The following image illustrates the position of Client Server 2.0 with respect to other application architectures. The eighties saw the move from terminal applications to client server applications, enabling users to take advantage of the increased power of their pc’s. The nineties saw the rise of html applications, taking advantage of open standards, enabling everybody to easily use applications everywhere. And now we’re again at a point where we can take full advantage of the power of the client workstation, but with the added benefit of using open standards, so everybody, anywhere can easily use them.

The following image illustrates the overall Client Server 2.0 architecture. You need a server that can host the static javascript, css and html files. Then you have a browser where the actual client is running. Javascript will be used to update the user interface as needed. And you have SOA containers that host the services used by the client application.

I’ve created some applications using the technology stack illustrated in the next image, and have been very impressed with the productivity you can achieve this way. JQuery hides most of the browser differences, and makes most javascript tasks very easy. There are also a lot of existing JQuery plugins available, from complex datagrids, to charting, to maps integration. Creating custom JQuery/javascript components is also a lot simpler than creating components that works partly on the server and partly on the client. Huge difference with for example JSF. And finally Grails is a very productive framework for creating RESTfull JSON services.

So, there you have it: Client Server 2.0 – Standards based browser applications, without a web-framework on an application server, talking to services hosted by SOA containers.

Some weeks ago i wrote a post suggesting the name client server 2.0 for browser applications which are completely generated in the browser using static javascript, html and css. No more html generation on an application server. I think this is the logical next step after RIA. Application server will turn into SOA containers, hosting all the services called by the javascript application. More info here: What is Client Server 2.0?.

Seems like Matthew Quinlan also thinks Client Server 2.0 is the right name for this architecture: How to Architect Next-Generation Web Applications.

Creating UI components using JQuery is surprisingly easy, especially when you’re used to JSF. Here’s a simple example that illustrates how to create a semantically correct annimated accordion menu. The result will look like the following image. When you click on a category the menu items below it will be displayed or hidden.

The html code to implement the menu is just a semantically correct unordered list of items and subitems like in the following example:

<div id="mainMenu">
      <ul>
        <li>Kandidaat
          <ul>
            <li>
              <a href="#" id="openInvoerKandidaatForm">Invoeren Kandidaat</a>
            </li>
            <li>
              <a href="#" id="openMutatieKandidaatForm">Mutatie Kandidaat</a>
            </li>
            <li>
              <a href="#" id="openReactieKandidaatForm">Reactie Kandidaat</a>
            </li>
            <li>
              <a href="#" id="openVervolgreactieKandidaatForm">Vervolgreactie Kandidaat</a>
            </li>
            <li>
              <a href="#" id="openVerwijderenKandidaatForm">Verwijderen Kandidaat</a>
            </li>
          </ul>
        </li>
        <li>Woning
          <ul>
            <li>
              <a href="#" id="openInvoerWoningForm">Invoeren Woningen</a>
            </li>
            <li>
              <a href="#" id="openAanbiedenWoningForm">Aanbieden Woning</a>
            </li>
          </ul>
        </li>
...
</ul></div>

A JQuery components is basically just a javascript file that you include in your html page. Inside the javascript file i defined a function called accordion which can be applied to html tags ($.fn.accordion). The accordion function adds a click event handler for every list item which has child list items (this.find(“li:has(ul)”). The event handler toggles (hides and displays) the child unordered list whenever the user clicks on the parent list item. I’ve also added a slow parameter, which annimates the hiding and displaying.

The accordion menu also adds an event handler to all child list items, to prevent the click event from bubling up to the parent list item, otherwise the menu items would also be hidden and displayed when selecting a child list item.

(function($){
  $.fn.accordion = function(){
    this.find("li:has(ul)").click(function(){
      $(this).children().toggle("slow");
    });
    this.find("li ul li").click(function(event){
      event.stopPropagation();
    });
  }
})(jQuery);

To add our jquery component to an html page we need to include the jquery javascript file, our component javascript file, and some javascript which will initialize all the javascript extensions to our page after it is loaded (app.js).

<script src="js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="js/jquery.ako.accordion.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>

To turn the unordered list into an accordion menu we need to apply the component to the list after the page has been loaded:

$(document).ready(function(){
    $("#mainMenu ul").accordion();
});

That’s it. Mind you, this is a stateless accordion menu, so whenever the user reloads the page the menu is drawn in it’s initial state, so in this state it works best with single page html applications. You could make the menu stateful by adding some ajax calls to the component to save the state to the server.

JaValid 1.1 has been released and can be downloaded from here (for detailed information see: http://www.javalid.org).

What is JaValid?

JaValid is an annotation-based validation framework, which allows you to annotate your Java objects to introduce validation. JaValid can be used in any type of Java application (standalone application, web application etc). The framework currently provides full integration with the Spring Framework, Java Server Faces, Facelets, and any database. The framework can be extended easily, by means of extensions, and allows you to add your own validation constraints in addition to the ones shipping with the framework.

The most important things added/changed to the 1.1 release are:

* Extensions, you can add your own extension to JaValid now. This allows you to add any type of validation needed (e.g. webservices)
* Database extension. This is a new extension and allows you to check constraints in the database (e.g. check if a name already exists)
* Added optional JavalidValidationCallbackHandler when calling validateObject(), which allows you to customize validation before/after validation.
* Added plural annotations. All existing and new annotations have a plural form now (e.g. @MinLengths (values={@MinLenght(..),@MinLength})
* Added @DateCheck annotation
* JSF validator tag now also supports field validation ()

Any feedback on the new release is welcome, enjoy!

This week i attented the preview presentation evening at Amis in Nieuwegein.
At this evening they gave some of the dutch presentators the chance to ‘practice’ their presentations and use the input for next week in San Francisco.

A nice line up :

1. Peter Ebell & Lucas Jellema, AMIS – Did We Spoil the End User? Building Personalization into JavaServer Faces Technology-Based Applications
2. Roel Hartman, Logica – Developing a Real-World Logistic Application with Oracle Application Express (S301752)
3. Gerwin Hendriksen, AMIS – Jumping The GAPP

1. Ronald van Luttikhuizen en Lonneke Dikmans, Approach Alliance – BEA AquaLogic Versus Oracle Fusion Middleware Shootout (S3011214)
2. Douwe Pieter van den Bos, Caesar Groep B.V. Technology Manager – Designer2APEX: Migrate Your Forms UIs to Oracle Application Express (S300520)
3. Frits Hoogland, Interaccess – Automatic Storage Management (S300533)

1. John Copier, IT-Eye – ESB Central: Applying SOA to Master Data Management in the Dutch Public Sector (S300534)
2. Steven Davelaar, Oracle Consulting, Nederland – Oracle JHeadstart R11: Unprecedented Productivity in Developing Best-Practice Fusion Web Applications
3. Marco Gralike, AMIS – Real-World Experience with Oracle XML Database 11g: An Oracle ACE’s Perspective

After a good diner (as usual) i attended the second presentation of Ronald and Lonneke.
They gave a good overview of the different products available in both the Oracle and BEA stack and they compaired the available features in both.
Too bad they didn’t had the time to show the usecase. They will show it in San Francisco, so go watch it!

The last presentation was the one of Steven.
I don’t have any experience with the jHeadstart product..but i was impressed about the features he showed us. Really slicky interface too. For the demo he used a forms application and converted it to ADF/jHeadstart metadata.
From here you can generate the real ADF application. Steven used one of the latest builds (internal) of Jdeveloper with supported integration for the WebLogic server. Running the application will deploy a normal EAR-file to the WebLogic server and run it from there, instead of running it inside the embedded oc4j.
Maybe we can expect something about this next week too.

Well..we’ve seen some nice presentations..and i wish the presentators good luck next week in America.
Don’t forget to attend the presentation of my collegau John Copier (ESB Central: Applying SOA to Master Data Management in the Dutch Public Sector).

Last Monday (8 September) Oracle released a new version of Oracle VM with version number 2.1.2. With this new version Oracle introduced some new features, namely High Availability and P2V (Physical to Virtual). Since we were looking to upgrade our virtual environment, I thought this was a good opportunity to test this new version, currently we use VM-ware Server.

I’ve set up an Oracle VM Manager and an Oracle VM server, the simple two server setup. I’ve downloaded some templates, Oracle Enterprise Linux, from the Oracle website and we where up and running in no time. For our company it is important that we can easily migrate the VM-Ware environment to Oracle VM, so we tested the function to import a VM-ware image. We imported two VM-wares, one Windows and one Linux machine through FTP from the VM-Ware server. The Linux machine was easy to bring up. I’ve altered the ‘menu.lst’ and the ‘fstab’, rebooted the machine and it was running like a charm. The Windows machine was a pain in the ass. After some searching on the web I found out that I needed to mount the image, change some drivers (HAL.DLL), boot it again and hoping it will start. I haven’t got into that yet.

As mentioned above, Oracle provided P2V, this is a welcome new feature. We decided to test this on our back-up web server, which is running on SLES 10. I booted the machine with the Oracle VM Server CD, gave the boot option: linux=p2v and followed the menu. In short, you will setup an web service from where the Oracle VM Server can connect to. After I set this up, I started the import in the Oracle VM Manager. On the VM Server an image is created, with the same size as the disk you selected. After a while the import was done, I had to change the root disk in the grub menu and that was it. This all works very easy. In my opinion Oracle have done a good job, making this featured available. This makes it very easy to virtualize your environment.

I Haven’t tested the high availability option yet, this is because I setup a single Oracle VM Server. After reading the documentation, it looks like it works the same as RAC, minimizing the down time when a server crashes. For example, when a VM Server crashes the guest systems are moved to an other available VM Server and the guest systems are restarted. When a VM Server is stopped or rebooted from the VM Manager, the guest machines are moved to a VM Server, without having to reboot (Live Migration). Only requirement is that the HA option is selected on the server and the server pool in the Oracle VM Manager. All these actions are managed by the pool master.

Overall impression of Oracle VM is good, it is easy to manage, easy to implement and above all easy to migrate your Linux machines from either physical or VM-Ware to Oracle VM. One thing I’m missing is the ability to shrink the image file. Further, one thing that concerns me is that it seems that the pool master in a Server Pool is the single point of failure, or that you can’t move the master function from one server to an other. But beside this I think that VM-Ware has finely some competition. Oracle VM places it self next to VM-Ware Infrastructure with almost the same functions at a much lower cost. Hopefully Oracle will keep up the good work.

This week i run into the problem of communicating with a service which uses soap 1.2.
The customer configurated a new test-environment and also did a upgrade of the services.
Too bad the new services used soap 1.2 and my bpel processes didn’t like the soap fault returning from it.
The normal tests in which the service just returns a valid soap body went ok. The body/header structure from soap 1.1 and soap 1.2 haven’t changed.
After testing the fault-situations i wasn’t able to receive the soap fault so i could catch it and design the errorhandling mechanisme.
The response i get in the audit-trial is :

"exception on JaxRpc invoke: ; nested exception is:
 dynamic invocation error: javax.xml.soap.SOAPException: Error parsing envelope: most likely due to an invalid SOAP message.; nested exception is:
 dynamic invocation error: javax.xml.soap.SOAPException: Error parsing envelope: most likely due to an invalid SOAP message."

Since the bpel works when the service doesn’t return a soap-fault, i would except something was wrong with the fault-part of the soap-message.

Testing the service in soapui gave me good response so i could atleast see the structure of the fault response. I noticed the structure of the fault-part with his elements was different from what i excepted it to be.

Soap fault from bpel :

<env :Envelope xmlns:env="http://schemas.xmlsoap.org/soap/envelope/">
   <env :Header/>
   </env><env :Body>
      </env><env :Fault>
         <faultcode>env:Server</faultcode>
         <faultstring>com.oracle.bpel.client.delivery.ReceiveTimeOutException: Waiting for response has timed out. The conversation id is null. Please check the process instance for detail.</faultstring>
         <faultactor />
      </env>

See the namespace in the Envelope tag, “http://schemas.xmlsoap.org/soap/envelope/”.

Soap fault from the service :

<soap :Envelope xmlns:soap="http://www.w3.org/2003/05/soap-envelope" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
   </soap><soap :Body>
      </soap><soap :Fault>
         </soap><soap :Code>
            </soap><soap :Value>StUF_Fout</soap>

         <soap :Reason>
            </soap><soap :Text xml:lang="en">Er heeft zich in de StUF-communicatie een time-out voorgedaan</soap>

         <soap :Node>http://bz01as33:84/StUFXML.DDS.ONTW/WebServiceStUFXMLVraag.asmx</soap>
         <detail>
            < !—and the fault payload will come inhere 
         </detail>

See the namespace in the Envelope tag, “http://www.w3.org/2003/05/soap-envelope”.

Both namespaces are different. The namespace “http://schemas.xmlsoap.org/soap/envelope/” (http://schemas.xmlsoap.org/soap/envelope/) is soap 1.1 and uses the next for the fault-part.

<xs :complexType name="Fault" final="extension">
−
	</xs><xs :annotation>
</xs><xs :documentation>
	    Fault reporting structure
	  </xs>

−
	<xs :sequence>
<xs :element name="faultcode" type="xs:QName"/>
<xs :element name="faultstring" type="xs:string"/>
<xs :element name="faultactor" type="xs:anyURI" minOccurs="0"/>
<xs :element name="detail" type="tns:detail" minOccurs="0"/>
</xs>

The namespace “http://www.w3.org/2003/05/soap-envelope” (http://www.w3.org/2003/05/soap-envelope) is soap 1.2 and uses the next for the fault-part:

<xs :complexType name="Fault" final="extension">
−
	</xs><xs :annotation>
</xs><xs :documentation>
	    Fault reporting structure
	  </xs>

−
	<xs :sequence>
<xs :element name="Code" type="tns:faultcode"/>
<xs :element name="Reason" type="tns:faultreason"/>
<xs :element name="Node" type="xs:anyURI" minOccurs="0"/>
<xs :element name="Role" type="xs:anyURI" minOccurs="0"/>
<xs :element name="Detail" type="tns:detail" minOccurs="0"/>
</xs>

After googling a bit i couldn’t find a lot info about it, besides this blog.
Difference is, i don’t receive the version mismatch error.

The be able to work around this problem the customer installed a new version of the service with both the soap1.1 and soap1.2 bindings.