Category: Rich Internet Apps

Nice List of Data Visualization Tools

Theresa Neil over at InsiderRIA has a nice post about 28 data visualization tools. You could google these yourself, but she's actually put together a bunch of screen shots and collected them all in one place.

If we're honest about it, these aren't really "data visualization" tools. They're some decent graphing and charting libraries. Data visualization is more than just pretty pictures. Providing the user with direct manipulations and other interactions is also a key ingredient to making the data understandable to system users. As such, these 28 tools only provide one piece of the puzzle.

GWT 2.0 RC1 Released

gwtWell, GWT 2.0 RC1 (yes!) is out. I was going to wait for a while with some of my new projects until switching them over to GWT 2.0, but given the pace of the GWT 2.0 project, I may just switch them over now rather than going through a painful migration.

I'm especially eager to use UiBinder to do declarative UI creation. Just specify how your interface should look in XML:
Continue reading »

Topics: ,

Released: QxWT-0.8.2-RC1 – GWT Wrapper for qooxdoo

I used to scratch my head at the name for the JavaScript library qooxdoo. That's until I ran into the developers of the library at an Ajax Experience event in Boston a few years ago and they pronounced it "Kucks Du" as in "Was kucks du" or German for "what are you looking at?" :-) Beyond the basics, qooxdoo is a mature collection of JavaScript widgets, despite the authors' conservative versioning policy (they're still only at 0.8.3).

It's taken them long enough, but they've finally released a wrapper for GWT, named QxWT. Best of all, they have a commercial-friendly open source license. If you're put off by GXT and it's license, you owe yourself a look.

Topics: ,

GWT 2 Milestone 2

gwtIt's been out a few weeks, but I thought I'd point out that's it's been pushed. Mostly some changes to the LayoutPanel.

Topics:

The Difference Between a Compiler and a Compressor

closure
With the release of Google's Closure Tools comes the perennial misunderstanding of what a compiler is. When we have a compiler that takes in C or C++ code (pick your poison) and produces machine code for a particular chip, it's clear that the output is not the same as the input. But when you have a JavaScript to JavaScript compiler that' supposed to make the resulting code more "efficient," it may be tempting to think of it as something just like a compressor, like Packer.
Continue reading »

Better JavaScript Development with Google Closure Tools

closure
Google has release Closure Tools, the set of tools they used to write applications such as Gmail. What is it? It consists of three parts:

  1. A compiler which is a "JavaScript optimizer that compiles web apps down into compact, high-performance JavaScript code. The compiler removes dead code, then rewrites and minimizes what's left so that it will run fast on browsers' JavaScript engines. The compiler also checks syntax, variable references, and types, and warns about other common JavaScript pitfalls. These checks and optimizations help you write apps that are less buggy and easier to maintain. You can use the compiler with Closure Inspector, a Firebug extension that makes debugging the obfuscated code almost as easy as debugging the human-readable source."

    So it compiles JavaScript into JavaScript and makes it behave more like a statically typed language.

  2. A library which contains both widgets and datastructures and algorithms. Sort of the standard library that JavaScript was always missing.
  3. A templating system you can use to assemble a user interface.

Since this system has been in use at Google to develop real applications over a long period of time, I expect it to be a fairly robust system. In many ways it solves some of the same problems that GWT is trying to solve, but in a different way.

I'll see if I can kick the tires over the weekend and post about it next week. So many cool tools and frameworks, so little time...

Griffon and a PureMVC Plugin: Some Initial Thoughts

puremvc-icongroffon

I finally have some small amount of spare time to start working on my Griffon PureMVC plugin. One of the first things to think about is where to we make the marriage between the two frameworks?

Griffon has Models, Views and Controllers, as does PureMVC (actually, it has Commands, Mediators and Proxies, which essentially perform the tasks under MVC). My initial thought is that Griffon's MVC triads really perform the tasks of a complex view, and PureMVC wires these complex views together via it's message bus. So, my thinking is to wrap each MVC triad into a Mediator, with the Mediator mostly talking to the Griffon controller and perhaps the Griffon model.

I'll make some more posts here as my thinking and experimenting evolves.

Topics: , ,

GWT 2.0: Cool Beans on In Browser Development Mode

gwt

I have a short list of things that I don't like about GWT. They are:

  1. You have to use a special browser to debug in Java. That browser doesn't always behave the way IE or Firefox or Safari does. And you need OS specific distributions which can make it a little tricky to share a project between developers with different OS platforms.
  2. GWT apps download as a massive hunk of code. There's no way to dynamically load code as you need it.
  3. Building UI's dynamically, through a sort of XUL mechanism is a pain in the ass for non-standard components. Just talk to the Vaadin folks about the hoops they had to jump through.
  4. The annoying dependency on SWT for tests.

So, what does 2.0 promise? To resolve these four things, and a few more. Check out the GWT 2.0 Milestone 1 release announcement:

In-Browser Development Mode: Prior to 2.0, GWT hosted mode provided a special-purpose "hosted browser" to debug your GWT code. In 2.0, the web page being debugged is viewed within a regular-old browser. Development mode is supported through the use of a native-code plugin for each browser. In other words, you can use development mode directly from Safari, Firefox, IE, and Chrome.

Code Splitting: Developer-guided code splitting allows you to chunk your GWT code into multiple fragments for faster startup. Imagine having to download a whole movie before being able to watch it. Well, that's what you have to do with most Ajax apps these days -- download the whole thing before using it. With code splitting, you can arrange
to load just the minimum script needed to get the application running and the user interacting, while the rest of the app is downloaded as needed.

Declarative User Interface: GWT's UiBinder now allows you to create user interfaces mostly declaratively. Previously, widgets had to be created and assembled programmatically, requiring lots of code. Now, you can use XML to declare your UI, making the code more readable, easier to maintain, and faster to develop. The Mail sample has been updated to use the new declarative UI.

Bundling of resources (ClientBundle): GWT has shipped with ImageBundles since GWT v1.4, giving developers automatic spriting of images. ClientBundle generalizes this technique, bringing the power of combining and optimizing resources into one download to things like text files, CSS, and XML. This means fewer network round trips, which in turn can decrease application latency -- especially on mobile applications.

Using HtmlUnit for running GWT tests: GWT 2.0 no longer uses SWT or the old mozilla code (on linux) to run GWT tests. Instead, it uses HtmlUnit as the built-in browser. HtmlUnit is 100% Java. This means there is a single GWT distribution for linux, mac, and windows, and debugging GWT Tests in development mode can be done entirely in a Java debugger.

Looks like Xmas has come early. I've been working with the browser plugin for a little bit and it is just a joy to use. One down side, of course, is that Intellij 9.0 will be out of date re: GWT the day it is released. ;-)

Topics:

Flex Widget for Graphing Elections and Debt

This movie requires Flash Player 9


We've been building a lot of mapping/GIS data visualization applications over the last few months, mostly using flex with various back end services (ArcGIS, google and yahoo maps, open source mapping frameworks.) One of the more fun little projects was putting together this flex widget for displaying maps and graphical data together on a timeline. It's meant to be distributable so that anyone with a blog can display it. We put it together using presidential election data and national debt, not because we thought the correlation was particularly significant, but because the data was available going back a long time. The widget is pretty flexible; it can go against a local data source or a web service, and we can easily modify it to show different kinds of data. We'll be coming out with a few more of these over the next few months, hopefully with some more 3D maps, drill down on geographic level, as well as more charting and other visualizations. If you'd like to use this one, or have ideas for other data sets and visualizations you'd like to see, let us know.


3D Data Visualization in Adobe Air

This movie requires Flash Player 9


As part of our ongoing development in the air traffic logistics and weather forecasting space, we developed a three-dimensional prototype for tracking flight path data and meteorological readings using Flex, Papervision 3D and PureMVC.

The framework is configured for using multiple APIs for mapping services from Yahoo and Google, as well as receiving live data streams from different sources. A number of custom controls were developed and integrated into the application, including altitude and rotation controls. The application can be re-used for any three dimensional map-based visualization such as weather patterns, demographic, political or economic data.

Accessing the Icon for a Button Programmatically in Flex 3

flex_logo

The other day, I was trying to get the icon for a button in flex programmatically for a FlexUnit test. The code I was testing set the icon of a button using setStyle('icon', ICON). I attempted the obvious button.getStyle('icon') in the test, but was surprised that this always returned null.

A little bit of digging revealed that the I needed to go through the style declaration for the button. When changing my test to assert on button.styleDeclaration.getStyle('icon'), I was able to successfully access the icon.

I found this a bit non-intuitive, but fortunately it only involved some investigation and minimal code changes.

Topics:

Launched: Vu360 PDF Annotation and Markup Application

Please install Flash to see this video player!

Vu360, the latest Pathfinder product, was launched by our client the Blue Book of Construction earlier last month.

It’s an Internet-tethered desktop application that enables easy viewing, markup and takeoff of PDF and TIFF documents for the architecture, engineering and construction industry. Some of the features include:
Continue reading »

Making Vaadin, PureMVC and Grails Work Together

On seeing that someone had developed a Grails Plugin for Vaadin (the former ITMill Toolkit, based on GWT as a front end technology), I immediately grabbed it and started exploring. One of the first things I do when developing things that look like GUI's is apply PureMVC to it. It's sort of like a big MVC switchboard that lets you hook together the smaller MVC's of whatever framework you're using. Overkill for really simple applications. Crucial for big ones.

Building a PureMVC app was pretty quick, but I ran into a small problem. Since PureMVC Multicore uses a Multiton pattern (essentially a map of Singletons), when Grails recompiles and restarts on code changes, the application barfs with a "Facade already constructed" runtime error. The solution is simple. In your subclassed org.puremvc.java.multicore.patterns.facade.Facade, change the following:

  public static ApplicationFacade getInstance() {
    if (instance == null) {
      instance = new ApplicationFacade(CORE)
    }
    return instance
  }

to this:

  public static ApplicationFacade getInstance() {
    if (instance == null) {
      // nuke the multiton so we can do the grails recompile
      if (ApplicationFacade.hasCore(CORE)) {
        ApplicationFacade.removeCore(CORE)
      }
      instance = new ApplicationFacade(CORE)
    }
    return instance
  }

And voila, your app now recompiles and runs without a hitch, just like a Grails app should. (CORE is a string constant to name your core.)

Related Services: Java Application Development, Custom Software Development

Javascript debugging and testing in the wild (Prototype bug when using array.flatten in IE)

I had to dig into a production issue the other day that presented itself like this:
There was a piece of javascript code that iterated over some dom elements, gathered ids into 2 arrays, ran a validation check, and then flattened the arrays to add them to the url.

On firefox, opera, and chrome this was working correctly, and had been tested by the developers, but on IE 7 it isn't working, and the problem wasn't detected until it made it out to production. (Which raises a point about testing in IE during QA, which I'll get to in a sec).

I started my investigation doing what I'd call "poor man's debugging", putting some alerts in, breaking up the code a bit to make it easier to inspect, etc. Normally I don't do this when testing in Firefox, because I have Firebug, but in IE I always seem to start with the basics to get my bearings, then quickly move to a more pragmatic approach.

Then I started using firebug-lite, confirming that I can see the info I need, and I reverted my changes to the code so that I could verify that I hadn't introduced any issues.
Continue reading »

A First Impression of Flash Catalyst

Flash CatalystSpent some time playing around with Flash Catalyst, which was released by Adobe as a public Beta yesterday. I downloaded it today and got started on some of the tutorials Adobe labs has put up.
My impressions:
It's pretty neat stuff. I could see myself prototyping with it, although Keynote and Acrobat are my tools of choice at the moment.
From my limited time working with it, Catalyst's main function is to make it very easy to take Photoshop or Illustrator compositions and turn them into fully (front end) functional interfaces, complete with animations, transitions, fades, buttons states etc. One of the tutorials had me import artwork of a scrollbar, in 4 layers. Creating an actual scrollbar and hooking it up to a canvas was as easy as selecting the individual layers and telling catalyst which part of the scroll bar it was (up button, down button, track and thumb). It;s also super easy to connect user actions to specific screens (or states, as Catalyst calls them).
Continue reading »

Launch: Pathfinder Newsletter

    Get a monthly update on best practices for delivering successful software.

    Subscribe via email


    Subscribe via RSS      RSS icon

Topics

Search

WordPress

Comments about this site: info@pathf.com