... .  .    .       .joeberkovitz.com

UrlKit 0.92 now available with IE7, Safari support

I’ve posted a new download of UrlKit version 0.92 to the UrlKit project on Google Code. (Note that 0.91 was formerly mentioned here, but a distribution script error was discovered to have omitted a few files.) It has some nice new features, some based on user feedback:

• Uses deep linking approach from Flex 3 to support all major browsers including IE7 and Safari
• Code for UrlKit apps in Flex 2 and Flex 3 is now identical
• New navigate() method allows apps to internally change state by directly specifying a new URL fragment
• New enabled property of FlexBrowserManagerAdapter optionally delays UrlKit startup until application is fully initialized

Happy Holidays!

10 Comments

Using Flex 3’s Deep Linking Features in Flex 2

If you don’t already know, Flex 3’s deep linking support is a tremendous boon to the RIA developer, insulating our lot from having to worry about the whole sorry, shoddy business of communicating little strings between our application and the fragment chunk of the browser’s location URL. Applications that have some notion of navigational state benefit greatly from using this feature: their state (as embodied in such a URL) becomes automatically hooked up to the Back/Forward buttons, becomes bookmarkable, and of course becomes exchangeable via the usual Web means with any other user of the same application.

For those of us who have real products that need to be released on a schedule independent of Adobe’s corporate whims, however, Flex 3 isn’t necessarily a good option. Where does that leave the would-be deep linker? One of the few options for Flex 2 users has been the UrlKit library written by Todd Rein and yours truly, which provides deep-linking support in Flex 2. (In Flex 3, UrlKit uses the built-in deep linking mechanism.) Unfortunately, in Flex 2 the deep linking support in UrlKit is not equally good for all browsers. UrlKit supports FireFox, IE6 and Safari pretty well, but I’ve never had the time to catch up with IE7, and the prospects of my keeping up with the dirty little world of browser compatibility have been — and remain — dim. In contrast, Adobe is a big company with lots of smart QA people and a business motive to toil in the compatibility trenches.

Now, something not generally known is that the Flex 3 deep linking support is derived directly from the UrlKit code (and, yes, they had the authors’ permission!). As such, it has virtually no dependencies on the rest of Flex 3 — not surprising, since Todd and I built it for Flex 2. So it occurred to me recently that it should be possible to port the Flex 3 BrowserManager class and accompanying Javascript back into Flex 2, where it would probably simply compile and work out of the box. And the good news is: it does! (Actually that is a slight lie: I did have to comment out a single line of code, and add a one-line magic incantation to my application startup. But that’s not too bad.)

This means that Flex 2 developers (and UrlKit itself) can now take advantage of the Flex 3 BrowserManager subsystem in its entirety. Furthermore, I am aiming to provide a new revision of UrlKit shortly that incorporates this approach for its Flex 2 deep-linking support.

I cannot legally redistribute the slightly modified Flex 3 source that works in Flex 2, but here’s how to do it yourself:

• create a new Flex Library project based on the Flex 2.0.1 SDK
• copy the following files into it from the Flex 3 SDK source:
  mx/core/Version.as (note: this is included by the other files, but not compiled itself)
  mx/events/BrowserChangeEvent.as
  mx/managers/IBrowserManager.as
  mx/managers/BrowserManager.as
  mx/managers/BrowserManagerImpl.as
• comment out the line in BrowserManagerImpl.init() which sets the historyManagementEnabled flag — this does not exist in Flex 2.
• compile the above files (excluding Version.as) into a SWC
• in your Flex 2 application, drop in an HTML template generated by Flex Builder 3 for a Flex 3 deep-linking app. This template will include a history/ subdirectory with JavaScript and CSS files in it, and the HTML page loading the app will refer to those files.
• Add the following line to your application startup, prior to calling BrowserManager.getInstance()

  Singleton.registerClass("mx.managers::IBrowserManager",
      Class(getDefinitionByName("mx.managers::BrowserManagerImpl")));
  

I have some more testing to do, but a development version of UrlKit that I just compiled with this approach seems to work well at first blush.

Happy linking!

3 Comments

StandingWave: Live Musical Audio Synthesis in AS3

I’ve been working on a funky new homebrew software project called StandingWave: a musical audio processing engine built entirely in Flash. My goal in doing this is to explore a world of online interactive music applications in which audio is not merely played back, but generated on the fly — performed, in fact — from an underlying representation of musical events. Such applications might range from a traditional music notation editor to game-like music composition environments to… knows?

Computer music performance is hardly something new, of course. But embedding the capability in Flash, at this point in the world, can make musical applications accessible on the web and amenable to community use in a way that’s never been possible before. Think about what applications like Buzzword and Google Spreadsheets are doing for traditional “productivity apps”.

I’ve started with the audio engine because it’s an interesting technical challenge, although I’m working on some of the other pieces concurrently. I’ve put up an initial crude example that demonstrates sample-based waveform synthesis. This toy application can play back single notes, a chromatic scale and a sample MIDI file at various transpositions, tempos and volumes, and all of this is accomplished by actually synthesizing digital audio signals on the fly, starting from a set of recorded guitar samples and applying gain envelopes, frequency shifting and mixing. Musically, it’s hardly exciting, but it’s a start on the capabilities needed to concretely deliver music in the Flash Player with no external add-ons, and without leaning on the crappy, highly variable MIDI playback delivered by the browser’s native OS.

There’s no waveform audio output API in Flash, so how is this done? Read on…

[Continued…]

10 Comments

Going to (and speaking at) Flex Camp Boston

Developer Brian Rinaldi is organizing a nice, cheap, fun, local event called Flex Camp Boston at Bentley College just outside of Boston. With a single track of speakers, limited enrollment, and targeting an intermediate/advanced audience, it should be a nice intimate event and a great way to exchange information with other Flex practitioners. Tim Walling and I will be speaking there about the AIR prototype of Allurent Desktop Connection that we worked on a couple of months ago. Not only am I happy to be going to a pleasingly small mini-conference, but the travel time there will be pleasingly short for me and other Bostonians. Waltham is considerably closer than Chicago, Seattle, Atlanta or Milan. Besides, it’s $10 — how can you not go? Case closed.

No Comments

MAX 2007 in Barcelona: Talk Materials Online

I just got back tonight from a very pleasant 4 day stay in Barcelona, where I spoke at the MAX Europe conference. I’ll be posting soon on some of the touristic and cultural aspects of Barcelona (with several observations on the Barcelona Metro’s user interface); this is just a quick note to let attendees and other interested parties know that the materials from my talks are available.

The sessions I gave this time were:

• The Euro-edition of an interactive panel on Flex Best Practices featuring myself, Steven Webster, Sascha Wolter and Dirk Eismann. This one was considerably less formal than the American version and had a lot more give and take; I feel I was able to apply some good lessons and feedback from the first one. I don’t have notes on the panel, since I was moderating it — you just had to be there!
• A presentation called Practical Patterns in Flex, which I adapted from Jim Echmalian’s talk at 360Flex earlier this year. This features a brand new take on the Model-View-Controller-Service architecture, and highlights the use of specific design patterns to remedy problems of encapsulating responsibility, dealing with asynchronous operations, and gaining access to the “right” controller without using messy singletons. I put together a working sample application in source code form that accompanies the talk.
• Another talk entitled Continuous Integration for Flex with Ant and FlexUnit, originally assembled by Daniel Rinehart for MAX North America.

I don’t have a lot of news about the conference that’s any different from my earlier observations on MAX North America. The food was better at MAX Europe (when there was some), and the sessions were smaller which made them more intimate. However, as a number of speakers noticed, people ask many fewer questions during the session in Europe — but more of them come up afterwards to talk.

Like the Chicago MAX, this conference was situated in a part of town where there are basically no amenities or activities besides hotels and the conference center. And unlike Chicago, there was a distinctly seedy feeling to the neighborhood once outside the immediate neighborhood of the conference. But… it was really easy to get into town on the Metro and see the sights. Barcelona is a truly wonderful city: more on that later!

3 Comments

UrlKit 0.70 with various fixes and Flex 3 Support on Google Code

I’ve finally moved UrlKit over to Google Code, in the course of which I applied a number of contributed bug fixes (thanks to Tom Ortega and Cyprian Kowalczyk for their help with IE and Opera). It now lives on its very own UrlKit Google Project Page complete with bug database, wiki, browseable SVN repository, and everything that an open source project ought to have. I also did a bunch of work on build scripts to make it much easier to build, test and cut new distributions.

Apart from these fixes, the other main work that took place in 0.70 was the introduction of support for the new Flex 3 deep linking features provided by BrowserManager. Basically, the Flex 3 framework takes care of all the browser-dependent Javascript history support for UrlKit, which is great because I absolutely hate working on that part of it! In this scenario, UrlKit provides the URL parsing/generation logic on top of the basic, unadorned deep linking support you get with Flex 3.

I ran into a bug with Flex 3, unsurprisingly since it’s in Beta — the BrowserManager interface appears not to work in a key case (although I think it used to). This bug is logged as SDK-12955 if you care about such things — and you should, since you can boost the likelihood of it getting fixed by voting on this bug!

By the way, this is the first time I’ve used Google Code personally, and I must say it’s a breeze. And I feel so much better about the project, knowing that people consuming open source projects expect the kind of features that Google Code and Sourceforge offer as a minimum. I wish it had been around when I first hosted the project (Sourceforge was there, of course, but I’m glad I was lazy, I mean I’m glad I waited.)

5 Comments

Adobe MAX 2007: Highlights, Shout-outs, Brags

I spent a good part of the last week in the Chicago area, attending and speaking at Adobe’s MAX conference along with my colleague Daniel Rinehart. It was a great show this year, with a lot of excitement surrounding the new technologies and concepts on display, particularly AIR, Adobe’s new desktop application technology that blends the capabilities of Flash, HTML and PDF.

A lot of great stuff was shown at the conference, and many folks have blogged the details well (Daniel for one) so I won’t bore with another repeat of it all. There were a number of highlights, including Thermo (code name for a forthcoming design tool aimed at Flex UIs that has some powerful capabilities for designers, allowing them to seamlessly move from comps to a “real” app in small, simple steps of refinement). I was also impressed by the move towards breaking out VOIP/collaboration capabilities (like those found in Adobe Connect) into separate Flex components that could be deployed in any application. I think Adobe is moving in a smart way to make their stuff more open and more invention-friendly so that developers can use their technologies as a springboard, not a black box.

Of course, I have to give big props to my friends and former colleagues at Virtual Ubiquity, the creators of the Flex-based word processor Buzzword. At MAX it was announced that their company was acquired by Adobe, and little wonder. Buzzword is going to rock Word, OpenOffice and Writely/Google Docs, and what better vehicle to propel Adobe into the online-productivity-app world?

This show was particularly exciting for me because Adobe Chief Architect Kevin Lynch demoed my company Allurent’s “Desktop Connection” for Anthropologie as part of the keynote on the first day. We think AIR is a really promising vehicle for platform-independent rich media applications on the desktop, and at Allurent we’ve been busily prototyping and working up ideas on how to exploit its best features. Desktop Connection is a kind of digital brochure, intended as a premium shopping experience for valued Anthropologie customers. It’s an AIR app that can be used either online or offline (since it comes with data for the whole catalog plus a bunch of preloaded media).

The feature that got the most audible reaction from the audience (and the most subsequent queries from developers and designers at the show) was the search-by-color feature:

The shopper can click on any point in a color wheel, or in a pixel of an image dragged in from the desktop or a browser, and the app displays a cluster of products with nearby colors, grouping similar hues together in the display. Although I don’t get much time to hack these days, this was a feature that I personally conceived and coded up myself, so that made it extra gratifying to see the reception from folks at the show!

Many developers and designers at the show came by the AIRPark (a set of barren white metal picnic benches on an Astroturf rectangle, in case you’re wondering what that might mean) to compliment us on the great-looking app and ask us how we implemented this feature. In case you’re one of them, well, the non-secret part of the sauce is this: apparel manufacturers typically create tiny “color swatch” image files that are used to convey color choices on their website. We take the average color values of these swatches, transform them into HSV (hue/saturation/value) triples and put them into our database. Then we build a special index based on a perceptual notion of “color distance” (check out color spaces on Wikipedia if you’re interested), and use that for a fuzzy match to the target color. The results are then sorted in a simple way to place similar hues near each other — for instance, in the example above, you see some orange items placed together although the target color was a shade of red.

Oh yeah, and my panel on Flex Best Practices went pretty well. I wanted there to be more blood, guts and arguing; in the end I think I was too polite and went easy on the contestants panelists. But at least the audience got to hear a bunch of contrasting, dissonant opinions on basic questions. I’m going to have to make Barcelona a real WWF-style smackdown. Hope to see you there!

No Comments