Skip to content

GWT and complex javascript overlays

I remember hearing about javascript overlays and the Google Web Toolkit at the 2008 Google I/O conference, so when I had a chance to use them for a complicated JSON dataset, I thought it would be a good fit.  I use JSON in a number of widgets around a client’s site, mostly because it is the easiest way to have a client be cross site compatible (using JSONP for server communication), the data ranges in size from 13K to 87K.

But as I looked for examples, I didn’t see a whole lot.  There is, of course, the canonical blog post about javascript overlays, but other than that, there’s not much out there.  I searched the gwt google group, but didn’t see anything about complex javascript overlays.

Perhaps I should define what I mean by complex javascript overlays.  I mean JSON objects that have embedded objects and arrays; something like this: var jsonData = [{"id":52,"display":{"desc":"TV","price":125},"store":[1,2,3,4,5]}, {"id":2,"display":{"desc":"VCR","price":25},"store":[1,2,5]}];

The key is to realize that just as you can return a string from a native method, like the canonical blog post does: public final native String getFirstName() /*-{ return this.FirstName; }-*/;, you can also return any other javascript object, including arrays (helpfully available as the JsArray class).  So, for the above JSON example, I have a Display class that looks like this:

package com.mooreds.complexoverlay.client;
import com.google.gwt.core.client.JavaScriptObject;

public class Display extends JavaScriptObject {
protected Display() {}
public final native String getDesc()/*-{ return this.desc;}-*/;
public final native int getPrice()/*-{ return this.price;}-*/;
}

Code for the array ("store") looks like this:

package com.mooreds.complexoverlay.client;

import com.google.gwt.core.client.JsArrayInteger;
public class StoreList extends JsArrayInteger{
protected StoreList() {}

}

Running code that shows you how to parse and display the entire json string is here (using GWT 1.6.4) is available in this tarball.  I haven't yet tried it, but I imagine that it would be pretty easy a JSONP call work in a similar manner to the HTML embedded JSON in this example.

Update June 29: Note that if you want to use any overlay types in collections, that JavaScriptObject, which you must inherit from, has final hashCode and equals methods.  The hashCode method "uses a monotonically increasing counter to assign a hash code to the underlying JavaScript object" and the equals method "returns true if the objects are JavaScript identical (triple-equals)".  Both of these may cause issues with collections such as maps.
[tags]gwt, javascript overlays, google web toolkit, is anyone still using technorati?[/tags]

Sending (and receiving) more than a file with Flex FileReference

The Flex FileReference object makes it very easy to send a file to the server.  I had a situation where I wanted to send some additional data and also get back server output.  This is possible, but not entirely intuitive, so I wanted to document this for others.  In the process of making this work, this post and this post were very helpful to me.

To send more than a file, you use a URLVariables object, like you normally would.  The key is to realize that you also have to set the URLRequest.method to URLRequestMethod.POST, otherwise these variables get lost.  (Makes sense–no one sends files via GET, but it was not obvious to me.)

var request:URLRequest = new URLRequest(url);
var variables:URLVariables = new URLVariables();
variables.docname = docName.text;
request.data = variables;
request.method = URLRequestMethod.POST;
try {
fileRef.upload(request);
} catch (error:Error) {
trace("Unable to upload file.");
}

To get any response from the server (like a success message or filename), you have to attach a listener to the DataEvent.UPLOAD_COMPLETE_DATA event, like so:

fileRef.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, onUploadCompleteData);

...
private function onUploadCompleteData (event : DataEvent) : void {
var myData = new String(event.data);
// do something with your serverside data...
}

[tags]flex,file upload[/tags]

GWT encryption options

I was looking for an encryption package for GWT.  A client had some mildly private information that they wanted to encrypt in transmission.  Now, of course, this is ultimately futile.  Anyone who wants to get at this information can, because we send the source code (however obfuscated) that decrypts the information to the client.  To borrow Corey Doctorow’s words, the attacker is also the recipient.  But, sometimes just making getting the information inconvenient is good enough.

I looked at a couple of encryption options.  There’s are a couple of nice javascript libraries that do encryption: Gibberish-AES and javascript.crypto.library, but they hav no GWT hooks (and javascript.crypto.library is released under the AGPL which has some unclear legal ramifications).

However, there is a project from about two years ago that does Triple DES encryption and is written in pure GWT.  It’s even called gwt-crypto.  Unfortunately, it hasn’t been maintained recently.  I was able to download the files, apply a fix (for issue #1) and move some files around in such a way that it works.

Here’s how you use it:

on the server:
TripleDesCipher cipher = new TripleDesCipher();
cipher.setKey(Constants.GWT_DES_KEY);
try {
enc = cipher.encrypt(String.valueOf(value));
} catch (DataLengthException e1) {
e1.printStackTrace();
} catch (IllegalStateException e1) {
e1.printStackTrace();
} catch (InvalidCipherTextException e1) {
e1.printStackTrace();
}

On the client, make sure you inherit the module:
<inherits name='com.googlecode.gwt.crypto.Crypto'/>
Then:

TripleDesCipher cipher = new TripleDesCipher();
cipher.setKey(Constants.GWT_DES_KEY);
String dec ="";
try {
dec = cipher.decrypt(enc);
} catch (DataLengthException e) {
e.printStackTrace();
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (InvalidCipherTextException e) {
e.printStackTrace();
}

I just use a constant DES key, which is not all that secure.  I’m sure you could do something more secure like hashing the request time, filename and some other secret key, but you need to make sure that both the server and the client agree on the key, otherwise you’ll not be able to decrypt the info.

Update 6/13: I got permission from the project owner to update the google project, so I’ve done that.  You can download the new gwt-crypto jar there.

The modified gwt-crypto jar file is here.  I’m hoping the administrator will let me at least check in the changes I’ve made so that it works on GWT 1.5.3 (can’t speak for GWT 1.6).

[tags]gwt,tripledes encryption,hiding in plain sight[/tags]

Best Consulting Sales Pitch Ever

I heard this at a presentation about Mule (an enterprise service bus) at BJUG tonight.  The presenter, Rich Remington, at the end of the talk, put up a slide detailing a contest.  Anyone who emailed him with a use case that Mule might be able to help with won a chance at a free lunch and 1-2 hours of free consulting about the use case. You have to email him within 48 hours of the talk.
What a great idea!  Not only does he get to pick a use case that Mule can help with, he also gets a chance to pitch his services, and show his value to the client.  And he gets a list of possible clients–people who know about something about Mule and think they might have a problem Mule can solve.

The contest winner gets more than a free lunch out of it too–the chance to pick an expert’s brain for free for a couple of hours can be worth quite a bit.

Win-win, for sure.  What a great idea for anyone consulting in a specialized field!

[tags]mule,rsi[/tags]

Body Shop Basics

Here is a great writeup on the basics of working for a consulting company (“body shops”).  These companies hire talent and then farm them out to other companies who have needs–either cost control needs or specific skill sets, or both.  This article talks you through some of the hoops around this process, what you can expect, and how to choose a consulting company to work for.
Scott also gives good reasons why people might want to be consultants, rather than employees:

A consultant is more free than a regular employee to circulate within his professional community and to take more jobs in more challenging environments. He can also get more relevant training. There’s no room in the consulting industry for wasting time — training must be good, and it must be for a good reason.

Some of the advice is a bit out of date (I doubt that “web development” would be considered a “new skill” anymore), but Computer Aid is apparently still around and the entire article is generally sound.  I’ve worked for a consulting company or two in my professional life, both as an salaried employee and as a hourly contractor.  I wish I’d read his advice then.

[tags]ask the headhunter[/tags]

CleanPrint Installed on my blog

About six months ago, I met with some friends who I’d worked with in the past, at Format Dynamics.  They gave me a bit of software to install on my blog, and I installed it and forgot about it. But it is worth mentioning.
It is a wordpress plugin that interfaces with CleanPrint, which is a pretty cool piece of software (I’ve written about it in the past.)  Installation is as easy as typical WP plugin installation.  You can try it out by going to any individual wordpress page and looking for the ‘Print Blog’ button:

I printed my notes from the BDNT meetup, just as an example; you can download the PDF here: June 2009 New Tech Meetup Notes.pdf.  (PDF created using the excellent PDF995 adware.)

The other option for pretty printing, of course, is to create your own print.css.  I believe that the plan is to eventually be able to display ads on the printouts, with some revenue sharing agreement.

[tags]wordpress plugins,pretty printing,shout out[/tags]

Flex textareas, newlines and posting to a unix server

I was working on a flex app and wanted to post the contents of a flex textarea to a php script on a unix server, among other fields.  This is easy to do with the URLRequest.  The php script on the server then parsed the form fields.  In particular, it split the textarea’s contents on the newline.

When I first tried this, the php script only found one record, no matter how big the textarea content.  After haivng the php script write the content to a file, it was clear why.  The flex app was sending the textarea with Windows line endings.  I’ve never experienced this particular issue before.  I tested a plain old HTML form, and somewhere the newlines are converted from Windows to unix (for more than you ever wanted to know about the humble newline, consider wikipedia.)

Regardless, the answer was to make sure that wordwrap was set to false, and run a regular expression on the content of the textarea before sending it.  From the comments on this blog post:

loremTEXT2 = loremTEXT.replace(/[\r\n]+/g, “\n”);

[tags]the humble newline, flex, textarea[/tags]

June 2009 New Tech Overview

I just attended the Boulder Denver New Tech Meetup (the one in Boulder) and it was fun and enlightening as always.  The presenters were:

First, after the networking over beer and snacks, we all went into the auditorium.  We started off with some crazy Ted video, while everyone chatted.  This was the first event I’ve been at with a twitterstream.  Robert Reich did some administrative stuff, including a plea for money.  Apparently, the new tech meetup requires about 1300 dollars a month to keep going–mostly for food and drink–and sponsorship has dried up.  Then there was an opportunity for job announcements.  There were 4-5; most were for php programmers, though I did hear one for a Django programmer.  We did not do ‘looking for work’ announcements–is that ominous?

Events were announced after the job announcements petered out.  Andrew Hyde announced that Startup Weekend Boulder is this weekend. The Boulder Small Business Development Center (who knew there was one?) is having a workshop June 3rd about ‘access to capital’.  There’s an Ignite Boulder coming up in July.  I’m sure I missed one or two announcements.  Then we were on to the presentations. Apparently, if you launch at the New Tech Meetup, you have the option of going ‘under the microscope’.  I think this means that you crowdsource some of your business ideas to the New Tech Meetup; Robert mentioned that it also included some other services, including 30 minutes with one of the Foundry Group founders.

LocalBunny apparently launched last month and chose to go ‘under the microscope’, and had an open board meeting tonight.  They have a service that allows users to ask questions on facebook, sms (soon) and twitter, and get answers from companies.  They used to have some kind of consumer play, but after a month of market feedback, have decided to focus on providing ‘white label’ social media integration to businesses.  The use case is, I ask a question of the Boulder Theater via my facebook status.  This goes to the Local Bunny servers, which attempt to answer it in an automated fashion, via whatever avenue you asked the question.  If the answer is not available, it is passed on to the company in question, and you are notified of that.  My take is that this could be very useful, but it will be hard for me as a user to know how to contact the appropriate company.  In addition, one of the selling points is that the answer to the question may be broadcast on your facebook status (again, depending on how you ask the question)–I’m not a fan of that.  And the idea of automated answers seems like a hard sell; I did miss the initial launch and perhaps that demoed this crucial piece.

Next up was Ken Zolot, who was a TechStars mentor.  He’s an MIT professor, interested in the ecology of entrepeneurship, and specializes in taking products from ‘tech push to market pull’.  He mentioned that ta key peice of the ecology for startups is mentors, and not famous ones.  Real local mentors who engage with you and help you through your mistakes.  Specialized mentors who have rolodexes, specialties in team dynamics and/or market connection expertise can be especially helpful.  And Ken doesn’t have a blog!

Then there was a presentation from a representative of the Singapore government IT department, aka IDA (I did not catch his name).  He had some difficulties with his presentation, but he called off some great statistics about Singapore.  It has 4.5 million people in an area smaller than the San Francisco Bay.  Singapore has a national infrastructure plan: Intelligent Nation 2015.  They are really good at building infrastructure–they’ve already saturated the entire country with wifi (7500 hotspots) and will have 1GB fiber everywhere by 2012.  (They are also replicating the infrastructure throughout Asia.)  His presentation wasn’t all that focused, but he was evangelizing Singapore as a hub for tech development, especially for companies that need fat pipes (video, etc).  He did tell a funny story about an investigation into a GPS driven bus location system, so that you could know exactly when the next bus will come.  He said the proposal was considered, but not funded when further research showed that the buses ran every three minutes anyway!  (Shades of the NASA pen urban legend and Nextbus!)  He didn’t really address concerns about the government choosing winners (versus the marketplace); I guess with the US financial crisis and China’s rise, the marketplace is out of favor a bit.  He did say that the government doesn’t want to run, say, a fiber optic network, so it hands over operations to private concerns; however, the government still apparently has a say in the pricing.  All in all, it is pretty impressive that the meetup can draw a foreign representative.

Then Matt from Clixo presented.  They are a boutique search engine marketing and conversion firm in Denver.  He condensed a one hour presentation into 5 minutes.  Matt gave a great example of improving the conversion for a software company.  Their focus is on lead generation and basic SEO–they primarily aim at taking companies that have awful websits and making them better by researching and focusing on target audience and measureable outcomes.  I think Matt might have missed his aim a bit–I can’t imagine anyone at the BDNT not taking conversion seriously.  I talked to one of his coworkers afterwards and pointed them to GWO, which I thought might complement their current offerings nicely.

The iVolunteer folks did something different with their five minutes.  They talked about 30 seconds about the concept–networked apps on the phone and elsewhere that make it easy for you to volunteer–and then asked for help from the crowd.  Apparently, all the good domain names with anything resembling ‘volunteer’ in them are gone; these folks wanted help with a new name.  They wrote down a bunch.  Interesting use of a lot of intellectual firepower.  And by interesting, I mean I’m not sure if it was wise or not.

Last up was Lijit.  After a quick overview of what Lijit does (combines a bunch of sources of online information into one profile; allows you to search on them via a javascript widget; they also run their own ad network), the presenters (Micah and Grace) gave an overview of Lijit’s new, pre-alpha tool that allows you to measure online influence.  Influence, according to Lijit, consists of three things.  Audience, trust and expertise.  Return visitors and discovery based visitors are proxies for audience.  Relationship number and strength is a proxy for trust, and Lijit searches are a proxy for expertise.  He showed a demo of ‘influence’, which Lijit condenses down into one number.  Currently, it is done at a large granularity, but the plan is to have it get finer and finer.  This seems like a great idea, especially if you are Lijit and want to sell ads, until you realize that influence is a very fluid thing.  I might be an influence on GWT to some folks, (friends that are evaluating it).  I would not be to others.  My parents consider me influential regarding computers; my IT friends don’t.  I guess where Lijit loses me is that they don’t appear to treat ‘audience’ with enough respect–the type of reader is at least as important as my content.  Again, this was all based on a 5 minute presentation of a pre-alpha project, so I’m sure it has room to grow.  Lijit certainly has the data to make it interesting.

And that was all of the June 2009 Boulder Denver New Tech Meetup, Boulder edition.  As always, it was a great networking scene, lots of energy and excitement, and good laughs.  I will say that the twitterstream made things more interesting; there were at least two funny comments that got everyone laughing up on the screen.  I think it would be interesting as a presenter to see the stream (it was behind them) and hae a chance to interact more.

Update June 5, 10:37 am: Via the the CO Startup Tracking Twitter feed, I found that RockyRadar has a nice write up of the June BDNTM.  I’ve written about them before, glad to see they’re still going strong.
[tags]bdnt[/tags]

The Drupal Experience

AKA, my time with the blue droplet.  I recently built a website for a client.  I initially recommended wordpress, as I often do but the client suggested the website would grow into an application.  You can certainly do webapps with wordpress, but it seemed worthwhile to look at alternatives.  Drupal 6 seemed to fit the bill:

  • flexible
  • lots of documentation (always important in any evaluation)
  • great community
  • tons of additional functionality (called plugins)
  • customizable UI
  • multiple languages supported

So, the site is launching soon and I thought I’d jot down my thoughts.  Keep in mind that I’m very much a drupal newbie.

The good:

  • I was astonished at the plethora of modules.  In fact, just about everything we needed to do functionally was done; it was a matter of getting the right modules installed and configured.  I don’t think I wrote a single line of code, though I did do plenty of code reading.
  • The look and feel were very customizable.  I ended up using a large number of blocks (isolated chunks of content that you can control and place).  The ‘clean’ theme was pretty easy to customize via CSS.  The Web Developer add on for Firefox was invaluable for this process–just hitting ‘control-shift-C’ and mousing over a component let me know what selector to use.
  • WYSIWYG support was pretty good, including image uploading (as a separate module), control of which of the TinyMCE buttons to display, and a dropdown to surround text with custom css class names.  I ended up using the HTML Purifier to scrub input from admin users.
  • The webform module allows non technical users to create complicated forms quite easily.  I didn’t really push this module, but it appears to have support for multi page wizards and other complex stuff.  But just using it for validation of required fields saved a lot of effort.
  • Drupal6 has a robust upgrade mechanism.  At least, it sure seems like it–I have upgraded modules and the core functionality a few times and haven’t had any issues.

My issues:

  • We started off on a medium strength server, and were not caching much, and performance was a big issue.  There are a number of resources out there, and some research is worth your while.  Drupal is a big, complicated system, and like all big complicated systems, tuning is a continual process.  Luckily, there’s a fair bit of built in caching that can be enabled with a checkbox.
  • Deploying from one server to another is an issue.  I talked to a friend who does a lot of Drupal development and he mentioned it was a real thorn in the side of drupal.  There’s just not that much available supporting the ability to move code from staging to production and content the other way.  To be fair, this is an issue for most CMSes, and there are some project (deploy is one of them) attacking this issue.  I don’t know of any open source CMSes that solve this problem entirely.
  • The SEO components seemed pretty good, but I was surprised that they weren’t bundled with the base Drupal installation.  You have to install a module to enable meta tags.  And another one for page titles.  Page titles!  (I looked at but was quickly overwhelmed by installation profiles, which might obviate some of the module installation.  There didn’t seem to be much support for Drupal 6 profiles.)
  • The complexity of Drupal, which allows it to do so much, means that there’s a lot to learn.  It can be a bit overwhelming at times.

The long and short of it:
If you’re looking to build a web application (not just a site), have some php expertise and some time to get up to speed, and need a lot of functionality, Drupal is worth looking at.

[tags]cms, php cms, drupal, blue droplets keep falling on my head[/tags]