Raphael.js: Get Value Of A Text Node

When using the Raphael.js library for SVG manipulation, setting the text of a text element is as easy as

var paper = Raphael(10, 50, 320, 200);
var textEl = paper.text("My Text", 0, 0); // create a new element

// and later if we want to update the text
textEl.attr('text', 'My New Text');

However, getting the current text in this node is not as straight forward. The library dictates you should do something similar to var currentText = textEl.attr('text');, but logging that to the console outputs an Object and not a String. I’ve searched the net for months for the answer to this, and the solution I finally came up with today, after inspecting the DOM and seeing the elements being returned, is as simple as

var currentText = textEl[0].attr['text'];

The reason it needs to be this way is because the library treats the text node as a “Set” of two text elements instead of a simple HTML Element with inner text. I hope I’ve helped someone today. Happy JS Development, y’all.

Wishlist: Windows 8 Desktop Modes

I’ve been using the Windows 8 Developer Preview for a little over two weeks now, and I’m pretty pleased with it overall. I’ve managed to load up Netbeans, WAMP Server, Opera and several other niceties that I use on a daily basis and everything is chugging alone nicely without complaint. The only thing about Windows 8 that is a bit awkward is launching applications whiles in the Windows 7 Environment.

Something I Would Love To Do In Java

Java is a pretty cool language, and I think it is good for teaching the basics about programming. The following is just something I look forward to doing in future versions of Java if Object literals are added.

Here is how u define a rectangle in JavaFX using Java at the moment

Rectangle rect = new Rectangle();
   rect.setFill(Color.RED);
   rect.setWidth(200);
   rect.setHeight(100);
   rect.setX(20.0f);
   rect.setY(20.0f);

Here is how I would love to be able to define it,

Rectangle rect = new Rectangle({
   fill: Color.RED,
   width: 200,
   height: 100,
   x: 20.0f,
   y: 20.0f
});

I believe I have been spoiled by my usage of Javascript, and I could use other VM languages, but I think this is just fun to look at. This inherently has issues, because there would need to be to be a lot of Type Casting in order to get the variables out or to set them accordingly, because the Map passed as the argument would need to be defined as HashMap<String, Object> to ensure any value could be passed. The implementation of the Rectangle class would then need to internally map these properties to the right variables somehow.

With Collection Literals in Java 8 onwards, this all will be possible, but the other issue would be if the various UI Classes like Rectangle would be refactored to make the above code possible. I highly doubt it personally, but nothing is impossible.

I will certainly play around with this a bit later. Feel free to share your own ideas in the comments below.

Oracle Did Not Get The Memo About Annoying Users

Oracle recently release Netbeans 7.1 Beta and JavaFX 2.0 and made them available for download from javafx.com. I managed to get the download for Netbeans 7.1 Beta last night without fuss and completed the installation, also without fuss. I expected the JavaFX SDK to be bundled, but it was not.

Trying to download the SDK has become an exercise in futility as I’m presented with Login screens, failed login attempts, password resets and lastly server error pages. Switching browsers from Opera to IE gave me more than an error page and at least enabled me to access my Oracle accounts to reset my password, but the download for the JavaFX 2.0 still gives me an error message at the time of writing.

Whiles struggling with all this, I took time to read the introduction to FXML development for JavaFX 2.0 and compared it to Javascript /XAML development for the Win 8 applications and realized a vast similarities. It would be interesting to see which is the dominant application platform a year from now.

Oracle need to understand that if they want people (developers) to adopt a product they need to make it available without hassle, and then provide compelling services on their website where people can choose to register to be a part of. Even Microsoft are giving away downloads of the Win 8 OS without the need for an account. Oracle need to step up and move away from bureaucratic thinking and get with the programme.

Enough ranting, going back to try the download again.

Java and the Windows 8 Metroverse

After watching and re-watching the Windows 8 keynote, I kicked off a download (still in progress, damn u 512Kbps) to get the 32bit ISO so I can try out the software for myself. During this time of waiting and dreaming of what to build to test the platform, I’ve been considering our beloved Java, particularly JavaSE and where it fits in with the bold re-imagining of Windows.

Apache Pivot Needs A GUI Designer (IDE)

I’ve been looking and reading around the Apache Pivot project in the past 48 hours and an I must say, without having written a single line of code, I’m totally impressed with the direction of the project. I have a few gripes with certain API calls but that aside the project direction puts it at par with (or quite close to) Adobe Flex and Microsoft Silverlight developments.

Reading around through the documentation, I realised the use of BXML (Bean XML) was quite extensive and could be even more extensive if the application was large and this brought to mind the potential of having a designer tool akin to Adobe’s Flash Builder or Dreamweaver to help generate the BXML Content and make the developer’s work a bit easier. Such as designer might be a tad easier to construct than even a pure Java Swing Designer (e.g. Netbeans’ Matisse) but I’m no expert there, just that in my mind, the logic for the outputted code seems simpler – do correct me if I’m wrong.

With regards to the IDE for this project, I believe there are two options:

1. Building one from Scratch using Java and use Apache Pivot as the UI library (the developers might fancy this)
2. Build one on top of the Netbeans or Eclipse platform either from scratch or as extension, similar to what was done for JavaFX Script in late 2009

In any case, a good UI designer will help spur users onto adoption, if the demos alone are not enough (they certainly got me interested).

I plan on potentially picking up Apache Pivot one of these days if a client project gives me the opportunity because currently I dabble in more PHP/JS than anything Java, but I see great potential in the project and I think Oracle might either need to take a leaf from their book perhaps in Java 9, if client side Java development is still vibrant then.

UPDATE: Tom Parker has posted a nice link in the comments below to some work which has already been done to get Pivot running in the context of Netbeans. Do check it out.

Chrome 14 Beta’s Inspector Takes A Play From Opera’s Dragonfly

With the current pace of development in the various Browser camps, it is no surprise that the developers tend to run out of original ideas moving at such a fast pace. The result is that the browser makers begin to look to each other for potential features to include in their own Google Chrome 14 Beta just took a play from Opera’s Dragonfly with a new settings dialog.

Node.js on Windows: Who Needs NPM?

So last night via DZone I get word that Node.js had released a Windows version of the popular Javascript based server environment around the 14th of July. Checking from their site, version 0.5.2 was out, being the second currently unstable release for Windows at the moment. I could not hold back my excitement as I do not run Linux, and we use Node.js extensively in my workplace. I just had to try it.

Setting It Up

So in a matter of minutes, the 9.8MB “node.exe” download was on my system, and without even reading any blogs or instructions, I just knew I had to  setup my Windows CMD Environment variables to point to this executable so I could use it from any folder I wished.

And just like a typical Ghanaian who does not read instructions, I jumped straight at the opportunity to run our socket server we were using in the project. That is when all hell broke loose, at least for a few minutes.

The culprit? Missing packages and libraries. I half expected that, just wanted to try without them for the fun of it.

So the next step, find and download the needed libraries. What are they? Just two actually,

1. Node MySQL Native
2. Socket.io

Easy peasy, so how do you download them for use by Node on Windows? In Linux I would setup NPM (Node Package Manager) and easily execute a call like

npm install mysql

to get a mysql package from the online repo. But I don’t have NPM on Windows, because apparently the current  version does not support child_process.spawn. That’s a bummer. So how do you do get it run.

The Steps

1. Download the required package directly from the github repo in .zip format
2. Place it in the same folder as the node.exe executable
3. Unpackage the archive and rename the contained folder it as it would have been named if it were to be downloaded via npm. In the case of the mysql package, I renamed the folder from “felixge-node-mysql-6a40e53″ to simply “mysql”.
4. That’s all

Who needs NPM on Windows. Here are the packages downloaded

Btw, I had issues when trying to install socket.io. Apparently, our company is running version 0.6.2 and the current version from the repo is 0.7.7 which depends on three extra packages in order to run. I had to revert and download the 0.6.2 package in order for things to work.

Happy Node Development y’all!

HTML5 Form Validation Quirks: Opera, Chrome And Firefox

I decided to implement an HTML5 Form validation for one project I was working on recently, and came across several interesting quirks with the implementation across Opera 11.11, Chrome 12 Beta and Firefox 4.0.1.

First off, the basic thing I realized needed to do was check if validation worked at all, so I created my form, slapped on a few “required” attributes on some fields and fired of the form submission. Here is the basic form below along with the HTML and CSS references so we know what we are working with

Avoid JQuery.post() or JQuery.get() If Possible. Use JQuery.ajax() instead

Over the past few several months, work has been crazy developing a JS intensive application for one of our clients. It been going great and I’ve finally found a need to use Node.js and Websockets after reading so many good things about them.

During development as Team Lead on the project, I’ve taken the opportunity from time to time to review the code being written for various parts of the application, especially when things break. I noticed that most often when some feature broke, it was usually because of some AJAX call that failed to load something. Upon inspection, I would find that $.post() or $.get() is being used to make the AJAX calls. I would usually fix the code by using $.ajax() instead, and the “error” callback to determine what is failing in the response from the server.

I noticed most often that $.post() or $.get() was used because it was more convenient to code, however, I believe its usage is too trusting of the response of the server, which for many reasons could fail to return the right response. $.ajax() may be more verbose to type, but I feel is a better option because you can explicitly handle the error condition if the response should not be as expected.

If you would want to use $.post() and $.get() for syntactical brevity, then I would recommend you setup your global JQuery AJAX options before hand, to handle the error conditions, but I believe that is not the best option in all cases, because sometimes you need to have fine grained control of error handling.

So to conclude, I recommend, staying away from $.post() or $.get() when doing heavy duty AJAX communication in which error handling should be priority, and using $.ajax() instead.

I would be glad to hear other experiences and whether or not this view is supported by the larger web application development community.