DB2 calling a stored procedure in a loop

Hi there folks, it has been a while, my apologies. I recently started some database work on SQL Server and DB2. I had some difficulties with DB2 since I have very few experience with it. I tried to execute a stored procedure in a loop. I managed to do it on SQL Server using a cursor but the lack of documentation for DB2 exacerbates the problem. I hope to help the internet with some code examples, feel free to use them.

SQL Server:
DB2:

Combo breaker: Cordova + JQM + Windows8

This blog post is about issues you probably come across while you're creating a Windows 8.1(not phone) hybrid app with Cordova. First of all let me set some context variables. I use Cordova 3.4, jQuery Mobile 1.4.0, jQuery 2.0.2 and i'm creating a Windows 8.1 app for a desktop or tablet environment. I've already created the app for Android 2.3 or higher, and iOS 6 or higher.

I'll try to explain the whole process step by step. If you have any questions feel free to reply.

1. Update Cordova and its plugins
If you want to support Windows 8 you have to update to the newest version of Cordova. You can simply update Cordova using the following commands:

> npm update -g cordova

Or if you want a specific version:

> npm update -g cordova@3.4.0

Update the plugins after you've updated Cordova. Just re-add the plugins and they will be updated to the newest version. For more information please visit the Cordova manual.

2. Add Windows 8 platform

Add the Windows 8 platform to your Cordova project. Use the following command:

> cordova add platform windows8

3. Try building your project
Use the Visual Studio Command prompt(VS2012 x64 Cross Tools Command Prompt) to build a Windows 8 platform. This is needed because Cordova uses Visual Studio's build tools to create your Windows 8 app.

> cordova build windows8

4. Try running your App
Open your solution in Visual Studio after you've build with Cordova. Try to run your App on your Local Machine. You might get some JavaScript errors but that depends on whether or not you've added a platform to an existing project. In my case, I've already created an App with thousands of lines of JavaScript. That JavaScript needs to be compatible with the new Internet Explorer and WinJS environment. You probaly run into some issues, this is what I ran into:

Usage of unsafe HTML elements and attributes.

HTML thats get injected into your page needs to be filtered by the toStaticHTML method. This method sanitizes your HTML and strips all unsafe elements and attributes. The list of unsafe elements and attributes can be found here. Does this mean that you can't inject an image element with a source attribute? No it doesn't, you can add it but you can't inject strings with unsanitized HTML. You should add HTML elements with unsafe elements in the following way:

/* Old way */
h1Element.prepend("<img src='someUrl.png' />");
/* New way */
var img = document.createElement("img");
img.className = "icon";
img.src = "someUrl.png"
h1Element.prepend(img);

Invalid use of dynamic content using jQuery Mobile.
One of the most difficult problems is the dynamic content issue that is caused by jQuery Mobile. jQuery Mobile uses AJAX navigation to switch between pages, this means that the content of the new page is injected in the old page. Therefore you don't have to add all JavaScript references to all pages. This works great, however it causes the following issue in Windows 8:

Unhandled exception at line 5472, column 5 in ms-appx://<app identifier>/www/js/jquery/jquery-2.0.2.js

0x800c001c - JavaScript runtime error: Unable to add dynamic content. A script attempted to inject dynamic content, or elements previously modified dynamically, that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content, or explicitly create elements and attributes with a method such as createElement.  For more information, see http://go.microsoft.com/fwlink/?LinkID=247104.

If there is a handler for this exception, the program may be safely continued.

The exception is thrown on the appendChild of jQuery. appendChild adds the HTML from the new page to the old page. However, the new page contains, in my case, some unsafe HTML. I use for attributes on label elements. This causes the error because the for attribute is considered unsafe. I haven't found a solid fix yet and therefore I present my workaround.

You can add unsafe HTML in WinJS but you have to wrap the call in a MSApp.execUnsafeLocalFunction. This will prevent WinJS from throwing an error when unsafe HTML gets added to the DOM. Unfortunately appendChild isn't the only place that throws errors when jQuery Mobile switches between pages that contain unsafe HTML. You should wrap the domManip function in a execUnsafeLocalFunction. Look at the following code:

// Check if the userAgent is Microsoft Internet Explorer
// This doesn't work in Internet Explorer but only in Windows 8 (Metro) apps.
if (/MSIE/.test(navigator.userAgent)) {
    // Cache the old domManip function.
    jQuery.fn.oldDomManIp = jQuery.fn.domManip;
    // Override the domManip function with a call to the cached domManip function wrapped in a MSapp.execUnsafeLocalFunction call.
    jQuery.fn.domManip = function (args, callback, allowIntersection) {
        var that = this;
        return MSApp.execUnsafeLocalFunction(function () {
            return that.oldDomManIp(args, callback, allowIntersection);
        });
    };
}

Invalid objects XML Document.
My App which handles large amounts of business data uses SOAP to communicate with the back-end. The XML response from the back-end is without any conversion used a data source in the App. The XML gets stored in a so called reader object which can extract the rows and columns from the XML, this worked fine until Windows 8 came around the corner.

The XML documents become invalid after a certain amount of time. You can't do anything about it, even caching the requests or documents them self don't solve the problem, it only delays the problem. All calls to a XML document that has become invalid throw an "Invalid calling object" error.

One solution to this problem is converting your XML document to JavaScript Objects. This may hurt your performance but the lifetime of JavaScript objects is in your hand and not in Microsoft's.

5. Test App
You have to test your App if you want to upload it to the Windows Store. This test can be done after you've created the app package. A package can be created by: right-clicking on your project > Store > Create App Packages. After the package is created Windows will prompt you with  a dialog to start the Windows App Certification Kit. Run all tests and see if the test fails. Don't interact with your system while the kit is running its tests. It may influence the test results, yes I tried it :) And grab a cup of coffee because it takes several minutes...

My App failed because the encoding of the JavaScript and CSS files were incorrect. They need to be UTF-8 encoded. I searched the web for a simple PowerShell script to encode the files correctly, and modified the script to be recursive and look for CSS and JavaScript files.

Make sure that you run the PowerShell script in the platform\windows8 folder. It will screw up your project if you run it in the project folder. Here is the script:

Get-ChildItem .\* -include *.js,*.css -Recurse | ForEach-Object {
    $content = $_ | Get-Content
    Set-Content -PassThru $_.Fullname $content -Encoding UTF8 -Force
}

6. Deploy the App
With the build comes a PowerShell script to deploy your App locally. Note that this script installs the certificate that is selected in the appxmanifest. This can be a security risk, since you probably don't store your key in a (Software) vault. The PowerShell script can be found in the AppPackages folder in the Visual Studio's project folder.

I haven't deployed my App to the Windows Store yet. I'll add a description to this blogpost when I have.

References:

Cordova command line interface:
http://cordova.apache.org/docs/en/edge/guide_cli_index.md.html#The%20Command-Line%20Interface
Windows 8 unsafe HTML:
http://msdn.microsoft.com/en-us/library/windows/apps/hh465388.aspx
Stackoverflow:
http://stackoverflow.com/questions/1681568/change-files-encoding-recursively-on-windows

TypeScript will you marry me?

Building web front-ends with HTML, CSS and JavaScript is a piece of cake for the common web developer. However when the applications get richer and bigger, like for instance a HTML 5 canvas game or an hybrid mobile app it gets tougher. I personally find it hard to organize and structure my JavaScript. Object orientated programming is really a struggle with JavaScript, isn't it?

No it isn't! You know why? Because there is TypeScript. What is TypeScript? According to typescriptlang.org:

"TypeScript is a language for application-scale JavaScript development.
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
Any browser. Any host. Any OS. Open Source."

I use it for almost every big JavaScript project. It helps me with type issues, organizing code and maintainability. You should really give it a try!

Android JQuery Mobile listview scroll performance

You might have read my recent flame on Google for not updating their Android stock browser. The flame was partially written because of the terrible scroll performance on JQuery Mobile listviews. Luckily for me, I recently managed to boost the listviews scroll performance for hybrid Android apps.

Ill give you some context. As a Software Developer, I have been creating a Phonegap/Cordova app. This app is a front-end for modeldriven applications. These applications are mainly build to view and edit business data, such as ERP, HRM, etc. Note that the app mainly consists out of grids and forms. Here's a screenshot.

Listview performance is very important for me. You can imagine that my app has to handle large amounts of data. Paging my data partially fixes that problem. However the combination of iScroll with a JQM listview and the Android stock browser ruins it completely. Scrolling through the listview becomes completely laggy and buggy.

I hear you thinking, cut the crap and show us the fix. All right, all right here is the fix:

#listview li {
    -webkit-transform : translateZ(0); 
    -o-transform : translateZ(0); 
    -moz-transform : translateZ(0); 
    transform : translateZ(0); 
}

Wait what? A CSS fix? Yeah CSS is your solution. This fix works because HTML5 and CSS3 is very poorly supported and implemented in the Android stock browser. But how does this fix a thing? Let me elaborate. iScroll sets the following CSS on the scroll div:

element.style {
    -webkit-transition-property: -webkit-transform;
    -webkit-transform-origin-x: 0px;
    -webkit-transform-origin-y: 0px;
    -webkit-transition-duration: 0ms;
    -webkit-transform: translate(0px, -2631px) scale(1) translateZ(0px);
}

Note that the web-transform is set to a very large area. Webkit will try to use hardware acceleration to enhance the scrolling performance. However this ruins more then it fixes.

Useful links:
Orginal lead for solving the problem:
http://stackoverflow.com/questions/9006278/jquery-mobile-listview-is-too-slow-with-iscroll
JSfiddle POC:
http://jsfiddle.net/SuY7f/1/
More background information:
http://stackoverflow.com/questions/12228053/what-does-usetransform-and-usetransition-options-from-iscroll-do
http://cubiq.org/you-shall-not-flicker

Keywords:
iScroll, jQuery Mobile, JQM, slow, performance, webkit, webkit-transform, hardware acceleration, Android

Google update your Android stock browser!

Wow, just wow... That Android stock browser really sucks. Why? Let me tell you why.

First of all, we are talking about Google. Google's main browser is Chrome, why on earth do we need another browser? Like we're having Internet Explorer, Safari, Chrome, Firefox and some other minor browsers and Google thinks its a good idea to introduce another crappy browser? Thanks that's another test situation for me!

Secondly, the stock browser doesn't update automatically. Neither does Google actively push updates for the stock browser. So we're talking about a significant amount of smartphones and tablets with a really old stock browser that doesn't update. This is a major problem for hybrid mobile developers.

Let me clarify this further, its very important that browsers keep up with the Html5 standard. Html5 is introduced with a lot of new and fancy features that are extremely useful for hybrid mobile apps, such as: Local Storage, Semantics and Forms and CSS3. All these features are not or very buggy supported by the Android stock browser, all because of no or slow updates.
http://www.w3schools.com/html/html5_intro.asp

Look at this graph, you can see that the Android stock browser got updates from June 2011(Android 2.3) till January 2012(Android 4.0), and then it just stopped. The Android stock browser is dead in the water from January 2012 till this day. Google says it has been replaced with Chrome but Chrome is not available in hybrid apps, we're stuck with the old stock browser.

Google would make the life of developers a lot easier when they stop using the stock browser and make Chrome available for hybrid apps. Unfortunately this won't fix everything, Google build up and enormous amount of smartphone/tablets users that use a legacy browser. It will take several years before we can drop the support for that kind of devices.

Thanks Google you've created the new IE 6 and almost eliminated hybrid apps.

jQuery deferred

Hello fokes, it has been a while but finally here's another blog post :)

It all started with a project change in my company. I was cut of my standard Windows Forms (C# .NET) project and was put on a JavaScript jQuery mobile project. This scared the hell out of me because i'm a total n00b in JavaScript much less jQuery mobile. After refreshing my memory and digging up my old, ancient, JavaScript skills I started to work with JavaScript. After a while I had to program asynchronous operations to improve the usability of our mobile application.

The syntax and working of asynchronous operations in jQuery seemed a little bit strange to me. And that's why i like to dedicate a blog post to it. Lets start with a little bit of context. We develop our mobile application with TypeScript, and therefore work object orientated. The JavaScript below may seem strange to you, probably because its generated by the TypeScript compiler.

Lets say we a class Test. And that class has a method that may cost a lot of time to execute. You probably want that method to execute asynchronous. In order to do that you have to create a jQuery deferred. A deferred object has the ability to register multiple callbacks. A callback is a function that gets invoked when something is for instance done executing or failed. The longRunningAsyncOperation method in my example executes a task that lasts for 1000ms. The setTimeout performs the given function asynchronous and therefore immediately returns a deferred.promise(). The promise is a jQuery object that contains multiple callback options, such as fail, done, progress. When calling the longRunningAsyncOperation function we get the opportunity to register to the multiple callbacks of the promise. In my example i register to the done event.

Infragistics UltraSplitter

For my work, as a Graphical User Interface(GUI) developer, I had to replace the Windows Forms SplitContainer for the Infragistics UltraSplitter. Since there is limited documentation about the UltraSplitter I decided to dedicate a blog post about how to implement a UltraSplitter in Windows Forms.

First of all, before replacing the SplitContainer you have to figure out how it works. Luckily for you Microsoft has extensive documentation about the SplitContainer. See for instance MSDN.

SplitContainer

The SplitContainer is one control which seems to be a collection of four different controls. The SplitContainer itself acts like a container Panel with three controls in it. A left panel, the splitter(blue arrow) and a right panel. However note that it is one control.

I started the replacement with an impact analyse. I figured out that the SplitContainer had a lot of coded dependencies. Lots of functionality was programmed to work with the SplitContainer. Therefore I was forced to build a replica of the SplitContainer, who acts just like how the Windows Forms SplitContainers acts.

UltraSplitter

I started with a sample project to make a proof of concept. In the sample project I made a container panel(the blue panel) and added another panel(Panel1) to it. A very important detail is the docking style of first panel(Panel1). Since I wanted the UltraSplitter to be orientated vertically I docked the first panel left. The second control is the UltraSplitter, also docked left and the third control that is added is another panel (Panel 2). Note that the last panel has to be fully docked.

Voila we have made a mock SplitContainer using the UltraSplitter of Infragistics. Note that there are a couple of functional changes between the SplitContainer and the UltraSplitter. When you resize the entire SplitContainer, the panels keep their relative width or height. They auto-size relatively to the SplitContainer. This is different in the UltraSplitter implementation, the panels don't autosize because they are different controls and are only connected through docking properties.

Here is the code:
*Note that this code is part of a greater project. Therefore it contains prefixes and additional functionality which may seem superfluous for you.

Keywords:
Infragistics, splitter, SplitContainer, UltraSplitter, example, docking, c#, .NET SplitContainer