Remote JavaScript debugging with Chrome Developer Tools

I have been using Chrome Developer Tools (CDT) for the past couple of weeks to build a JavaScript debugger. Though you can debug JavaScript in Chrome browser itself, my requirement was such that I needed a debugger that runs outside Chrome and debugs pages running in Chrome. I found that Chrome Developer Tools provides a JavaScript debugger plugin for Eclipse. CDT has exposed Java APIs, if you want to build the debugger yourself. It also has exposed JavaScript APIs for its debugger.

So I first evaluated Eclipse plugin that CDT provides. Before I get to that plugin, here are some useful links about CDT –
Continue reading “Remote JavaScript debugging with Chrome Developer Tools”

Using Java Objects in JavaScript in Eclipse SWT Browser Control

I have been developing Eclipse plugins for more than four years now. I have implemented many features in the ColdFusion Builder, which is an Eclipse based IDE. Eclipse SDK provides a SWT Browser control which can be used within Eclipse plugin to display HTML files. Eclipse does not include any browser, but it uses the system browser- on Windows it is Internet Explorer and on Macintosh it is Safari. I have used this control mainly to display static HTML content or open a URL on a remote server, e.g. for executing ColdFusion Builder extensions written in CFML.

Recently I have been doing a lot of mobile application dev elopement, and saw how easy it was to invoke Java objects from JavaScript in Android. I have blogged about this in one of my posts, Creating Android Applications with HTML User Interface. This got me thinking that it would be nice if SWT Browser control would also provide some way to pass Java Objects to JavaScript. Turned out that it is possible.

Continue reading “Using Java Objects in JavaScript in Eclipse SWT Browser Control”

Dynamic loading of JavaScript files

I am working on a JavaScript framework that uses JQueryMobile. The framework can be used for both mobile and non-mobile sites. You can set the page for mobile by calling, for example, enableMobile method. So the framework does not load JS files for JQueryMobile up front. It does so only when enableMobile method is called.

First I tried to include JS file for JQueryMobile using document.write method –

document.write("<script src='' type='text/javascript'><\/script>\n");

However this did not work – the page was not converted to JQueryMobile page, i.e. CSS styles of JQM were not applied to the page. Instead I got following error –
Continue reading “Dynamic loading of JavaScript files”

JavaScript Graphics Libraries

Last year I was evaluating options for JavaScript graphics libraries for ColdFusion Builder ORM extension. The extension lets you select tables from a datasource and displays it in a browser window. You can them configure relationships, table fields, data types etc and generate CFC code. Here is the screen shot of that extension.

I evaluated SVG and Canvas for graphics/drawing in this extension. However Canvas was not supported in Internet Explorer at that time. SVG was supported on all desktop browsers, but Android browser at that time did support SVG (Android version was 2.2 then) . Since this application was meant to be used on desktop, I decided to go with SVG. Fortunately I came across a very good SVG JavaScript library, RaphaelJS, which made drawing and manipulating shapes in the web page a lot easier. I used JQuery + RaphaelJS together in my application. I used these two libraries for my another extension to monitor CF server memory.
Continue reading “JavaScript Graphics Libraries”

OOP in JavaScript: Class in various Avatars

I have done more JavaScript programming in the last couple of months than I have ever done before, and I have started liking it. I had used JavaScript before, but only for simple use cases like form field validations, alerts or taking simple input. Recently I have been looking at ways to do Object Oriented Programming (OOP) using JavaScript, and what struck me initially odd about it was different forms a function can take and different ways in which you can use them.

Functions can be treated as Class in JavaScript. They can have member variables and methods. I have seen many different ways in which this can be coded
Continue reading “OOP in JavaScript: Class in various Avatars”

Simple Drag&Drop with JavaScript, JQuery

I am working on an application that requires Drag & Drop functionality in a web page with images. First I thought I would implement this using JQuery UI, because I had used it earlier and it makes DnD very easy. But then I thought it may not be too difficult to implement it myself. As it turned out, it is not really very difficult. Here is a simple demo of that implementation.

There are two Divs in this demo, one containing image thumbnails and the other is a drop target for images. Drag and drop image thumbnails on the target Div. The original image would be added to the Div.You can then move images within this Div. If you drag and drop it anywhere outside the div, the drop operation is cancelled and image is removed.
Continue reading “Simple Drag&Drop with JavaScript, JQuery”