Skip navigation

Category Archives: Technology and Science

Want to growl in your Flex apps? Try this junk. FlexGrowl is a component that allows you to create growl-like notifications in your Flex apps. If you don’t know, Growl is an integrated notification system for OSX that listens for notifications from registered applications. It looks like this:

FlexGrowl implements this type of interface for Flex; it looks like this (click here for working demo):

However, you can customize the growl notifications to look however you’d like. The notifications shown above are created with Degrafa (which, by the way, is awesome). Click here to download the source. Let me know what you think!

HydraMVC.com Screenshot…And it seems to be the magic number for now. I’ve been using this version for a while and it seems stable and complete enough to actually use f’real. If you don’t know what it is, click here to read about it and get it.

Besides all the obvious goals for HydraMVC (read about them on the website), I have a few big plans for the framework. Firstly, I’d absolutely love to get an AIR debug console written for it. I just ran across this gem today, which is pretty close to what I would like to develop for Hydra, except that instead of debugging the AS3 code per se, it would debug the application logic of the MVC by trapping the paths of Notifications as they are handled by the various actors in the MVC. Since De MonsterDebugger is open source, there’s nothing preventing me from actually augmenting it with a HydraMVC debug console. Talk about pure hotness. Anyway, with deadlines (seriously) looming, don’t look for this anytime this month. But it will happen. Mark my words.

Secondly, something that would also be wonderful if it was integrated with a debug console would be a unit testing interface. That’s all I’m gonna say. See, the beauty of it is that we could just compile out two HydraMVC SWC’s–a debug version and a production version. The debug version would provide the hooks for the debugger and the production version would bypass them. Then, when you’re ready to deploy a HydraMVC application, just switch SWC’s. I wonder if we could even make this a compiler directive for a single SWC? Hmm… Anyway, I’m super excited. This framework is not only pretty cool as-is, but represents to me a ton of realizable potential that would really provide a very accessible, learnable, structured way to develop medium to large, scalable, debuggable Flex applications. Stay tuned. Download HydraMVC and let me know what you think.

Some really interesting things are happening at andCulture these days. In addition to rocking the CSS/HTML/jQuery/AJAX suite of technologies, we’re building libraries for Flex like never before–using Flex for both back-end application-y RIA software and also as the framework for very rich UIs that look nothing like an app.

We’ve been consuming data from .NET, both SOAP and AMF, and from PHP via AMFPHP. Jason Kichline (@jkichline) has been doing some really interesting things with building abstraction classes in a project codenamed SudzC (SOAP classes for Obj-C / iPhone).

For most (ok, basically all) of our Flex projects we use PureMVC, which is elegant, language agnostic, and quite minimal. However, it’s not without its drawbacks. Being language agnostic is nice when you want to develop for multiple platforms and not have to switch out your paradigm-parser, but not so hot when you actually want to take advantage of a platform’s stuff–like for instance, Flex’s event model. PureMVC rolls their own Observer pattern, which is really nerdy and wot not, but sometimes, you just want to use event bubbling / capture. And not have to implement Pipes.

Another interesting challenge of extracting a framework is finding the balance of modularity in encapsulation, and ease of use, so your team can actually build stuff quickly with it. For instance, we’ve got some solid application logic in our MVC, but you might want to switch out where the data actually comes from and not have to trust the developer to ensure that the Notifications are all where they need to be.

Screengrab showing basic package structure of AdeptivMVC

Screengrab showing basic package structure of AdeptivMVC

Our answer was kind of a crazy synthesis of a solution for each of these problems. First, we wrote a Plugin / Provider methodology for our framework, not unlike the Provider metaphor in .NET. So, our Model (Proxies) tell the data where to *go*, and *how* it interacts with the application, but Providers interact with the Proxies to actually *get* the data. Pretty nifty. Oh, and while we were at it, we kinda just rewrote PureMVC.

We’ll see if it works out. Basically, you know those times where if you have to trip over that creaky stair *one more time* you’re going to go totally ape and remodel the entire downstairs? That’s exactly what happened.

My mission was to take out all the annoying things about PureMVC and keep all the cool things. Kinda like Palm did with Pre and the iPhone.

Testing it basically involved taking an existing PMVC application and seeing A. how difficult it was to retrofit the new framework and, B. make sure it still works. So far, retrofitting the “AdeptivMVC”, as I’m calling it, is totally easy to do, and regression testing seems to prove that stuff still works.

Now, we also get the added niceties of being able to use Singleton proxies if you want, and have multiple observers in a many-to-many relationship within the app. I added a “Relay” pattern in the mix verus the Multion thing that is used in PMVC, which basically makes things a hierarchy which allows for some neat event bubbling tricks.

I’ll try to get some demos and things up, maybe work on the Adeptiv framework initiative on adeptiv.com, and maybe even have some time to sleep in between doing billable work! Afterburners, engage.

You will need to know this at some point if you are interacting with SOAP in Flex, I guarantee it.

ISSUE #1:

Types registered in SchemaTypeRegistry may overlap across different services.

Description:

You have a UserService and a RoleService. Methods for both services return an ArrayOfString. This type is generated by Flex when you import the service into the project. You call methods for each service simultaneously that both return an ArrayOfString. However, you get a type coercion problem. Why?

Explanation: 

When Flex imports a web service, it generates a Base{ServiceName} class. In this class, it registers types (like ArrayOfString) with a singleton called SchemaTypeRegistry when the service is instantiated. The problem is, it doesn’t qualify which ArrayOfString it’s talking about.

Therefore, when you instantiate UserService and call a method that returns ArrayOfString, the BaseUserService will map ArrayOfString to net…userservice.ArrayOfString. This works just great when you aren’t making asynchronous calls.

The problem arises when you make asynchronous calls to both UserService AND RoleService. The last service to register ArrayOfString with its corresponding ActionScript class wins. Then, when the result for the other service returns, it will try to explicitly cast a net…userservice.ArrayOfString to a net…roleservice.ArrayOfString and you will net a null result. It won’t error, because it uses the “as” keyword vs, an explicit cast (i.e. result as ArrayOfString, vs ArrayOfString(result)), which makes debugging even more mysterious.

Workarounds:

In my opinion, this is truly a bug in the framework vs a limitation. If you can make asynchronous calls, you should be able to asynchronously deserialize the results, plain and simple. However, we’ve only really found two plausible workarounds.

“Doctor, it hurts when I sit this way.”

“Then don’t sit that way.”

One workaround is to simply queue the calls. Wait until the first call returns, then instantiate the next web service and make the second call.

If you are into changing your back end to patronize the front end, you will need to make the return type unique.

Bon apetit.

 

ISSUE #2:

MyMethod can’t return an object of with the type name MyMethodResult.

Description:

If you have a ListUsers class, and you return an object of type ListUsersResult, your code will compile but your application will break.

Explanation:

Again, the problem lies in the Base{Service} generated class. The result wrapper will not generate properly if you name your result object in this manner.

Workarounds:

Again, don’t sit that way. You simply cannot append “Result” to the end of your result object if it is named the same as the method itself.

 

ISSUE #3:

Headers array gets overwritten.

Description:

You try to make a method call, but it sends an empty headers array, even after you’ve set the headers. 

Explanation:

When Flex generates the method functions abstraction classes for your service, instead of “passing along the headers” as the ASDoc would indicate, it simply creates an empty array. Can you guess where this is found. Correct! The Base{Service} class. The first line after the method signature will be “var headerArray:Array = new Array();”.

Workarounds:

We have to remember to do a global search and replace for “var headerArray:Array = new Array();” replaced with “var headerArray:Array = this.headers;” each time we regenerate the web service abstraction classes when we need to preserve headers for method calls.

 

ISSUE #4:

You can’t have a service with a method named .logout()

Description:

If you name your method “logout” (i.e. for an authentication class), your generated class won’t compile.

Explanation:

The inheritance chain for the web service abstraction classes is: MyService HAS BaseCubeReportService EXTENDS AbstractWebService EXTENDS AbstractService HAS AsyncRequest. AbstractService has a public function logout():void that calls the logout() method of it’s asyncRequest object. When Flex Builder attempts to generate the logout abstraction method in your service class, it will error as though you were trying to override this function.

Workarounds:

Again, avoid usage of “logout”.

 

I sincerely hope this saves you the hours of debugging that we invested to gain this knowledge.

Step 1: Download PandoraBoy (http://code.google.com/p/pandoraboy/)

Step 2: Download Airfoil (purchase for $25) (http://rogueamoeba.com/airfoil/)

Step 3: Enjoy Pandora over iTunes remote speakers while keeping all other sounds local.

A few people here have only recently switched to Mac as their primary computing platform. People generally find most things to be easier and more pleasant to use on a Mac. However, there is frequently a point of confusion for a Windows user when they try to find their “network drives,” or mapped network shares that they had previously configured to automatically remap on login, and were displayed in “My Computer.”

This describes the methodology of mounting network drives in Finder so that they are easily accessible in normal workflow, minimizing the steps required to access those drives, and removing the need to remember if they have been mounted or not.

1. Mount the drives using Finder.

  • Click on Finder, and select “Connect to Server…” from the “Go” menu.
  • Connect to our primary data server “carbon” by entering “smb://carbon” in the “Server Address:” field and click “Connect.” Once Finder has connected, you will be able to select from the following shares: backups, documents, media, proposals, resources, temp, townhall, users, vault.
  • Repeat this process for all the drives you would like to be accessible. Repeat this process as well for other servers as well. Our primary web server, “nitrogen” (use “smb://nitrogen” in the “Server Address:” field), will give you access to the “wwwroot” share.

2. Create a “Network” folder in your user folder.
  • Open a finder window, and click on your username in the sidebar.
  • Control+Click (or right click) in the window and select “New Folder.”
  • Name the new folder “Network”

3. Create shortcuts to the network drives in the Network folder.

  • You should see all your network drives on your desktop. If you don’t, click your desktop, select “Preferences…” from the “Finder” menu, and ensure that “Connected servers” is checked.
  • With the newly created “Network” folder, as well as your desktop visible, select all your network drives and drag them to the “Network” folder. Your cursor should add a small curved arrow when you drag them over the folder.

4. Create shortcuts to the “Network” folder.

  • Drag the “Network” folder into your sidebar, preferably as the first item, above your username.
  • Drag the “Network” folder into your dock, next to the Trash Can.

5. Integrating into your workflow.

  • Remember that you don’t have to remember to “mount the drives” when you need them. Treat them as if they are already mounted and just use them. OSX will mount them as needed.
  • When saving a file from within an application, click the “Network” folder in the sidebar, and then choose the drive you want to open. If it’s mounted, it will be immediately accessible. If it’s not, there will be a slight pause as OSX mounts the drive.
  • When you are opening file, or need to browse the network drive, it is often easiest to click the “Network” shortcut in the dock and select the drive you want to explore. Again, if it’s mounted, it will appear instantly. If it’s not, it will mount automatically. You will see it appear on your desktop.
  • If you find the desktop icons of your network drives distracting, you can hide them altogether, guiding you to always use the dock or the sidebar as your first access to the drives. To do this, click your desktop, select “Preferences…” from the “Finder” menu, and uncheck “Connected servers.”

Keep in mind that this was written for OSX 10.5 Leopard, however this process will also work in 10.4 although the names of certain things may be slightly different. Also, this is just what I’ve found to be a streamlined workflow; it’s not necessarily “the way” ™ to do it. I’d love to hear what others do.

If you aren’t using an MVC framework like Cairngorm, Model-Glue, Guasax, or PureMVC for your Flex development, you really should think about starting. Our adoption of PureMVC at andCulture has allowed us to structure our ideas around a concrete paradigm and move on to arguing about more important things.

I’ve implemented PureMVC in both Flash and Flex projects and I’ve noticed that #3 of this post really applies. I mean really applies. As a general philosophy, I believe it’s better to start out with as few Mediators as possible, and structure them (or it) around the logical parts of the application or module—not the View Components or even their hierarchy as much. And, when the Mediator starts to become cumbersome, think about refactoring. 

For instance, for a Flash kiosk I just finished, I more-or-less had a Mediator for each VC—not entirely, but I definitely ended up with a disorganized mess of Mediators, which I affectionately refer to now as Mediator Soup. 

One of the biggest issues is state. Often elements that have their own Mediators should actually be a complex VC with a single, intelligent Mediator. Or, if that doesn’t flow architecturally, approach the VC as a separate Module or component, with it’s own MVC, and interface to it via it’s own API.

I’ve noticed that this approach allows me to think of the application in a more logical way, and seems to keep the code cleaner. I’d appreciate any thoughts or feedback on this.

Adobe has enhanced the security policy in Flash Player 9.0.115 and 9.0.124 that may cause some issues if you’re interacting with Web Services. Typically when I start a Flex project, I just throw a simple, open crossdomain.xml file on the root of the service site (or elsewhere) and go to town (which is poor practice to leave when you deploy). 

The “come and get it” policy file typically looks like this:

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM
"http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
    <allow-access-from domain="*" />
</cross-domain-policy>

 

However, we noticed that an intranet project we’ve deployed stopped working on certain computers, throwing the following error:

[RPC Fault faultString="Security error accessing url" faultCode="Channel.Security.Error" 
faultDetail="Unable to load WSDL. If currently online, please verify the URI and/or format
of the WSDL (***YOUR WSDL ENDPOINT HERE***)"]
      at mx.rpc.wsdl::WSDLLoader/mx.rpc.wsdl:WSDLLoader::faultHandler()
      at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
      at flash.events::EventDispatcher/dispatchEvent()
      at mx.rpc::AbstractInvoker/http://www.adobe.com/2006/flex/mx/internal::dispatchRpcEvent()
      at mx.rpc::AbstractInvoker/http://www.adobe.com/2006/flex/mx/internal::faultHandler()
      at mx.rpc::Responder/fault()
      at mx.rpc::AsyncRequest/fault()
      at ::DirectHTTPMessageResponder/securityErrorHandler()
      at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
      at flash.events::EventDispatcher/dispatchEvent()
      at flash.net::URLLoader/flash.net:URLLoader::redirectEvent()

 

When you check out the XSD for policy files, you’ll notice that (among other things) they’ve added a “allow-http-request-headers-from” element. So the new “come and get it” policy file looks like this:

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM
"http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
    <allow-access-from domain="*" to-ports="*" />
    <allow-http-request-headers-from domain="*" headers="SOAPAction"/>
</cross-domain-policy>

 

This should allow you to consume your services from basically anywhere. Remember to lock your stuff down when you deploy.

Ok, you’ve created a 30,000-frame animation that needs to be deployed to the web as an animation and to DVD as a movie. (Don’t judge me. Seriously.) Anyway, you’ve done this, and you’ve got all your scenes exported and whatever and the website looks great. On to the DVD production. Let’s see, just export an uncompressed video file, stick into After Effects color-correct and export as you need. Nope! Hang on there, not so fast. Literally–if your CPU can’t render the animation at 30fps, it won’t render to video at 30fps…in other words, you’d think that Flash would be smart enough to process each frame during the export ensuring that no frames get dropped, because we only care about the high-quality output of the video–but no such luck. So, we’ve been using this utility for what seems like 20 years (ok, since 2001) but what a HACK. I mean seriously, Adobe. The only other way I was able to get good video from Flash where the animation was too complex for 30fps was to reduce the framerate of my animation to like 1fps, export, and then pump up the framerate to 30fps in After Effects. HA. HA. HA. If anyone has a method, or I’m being a total moron, I would gladly accept public humiliation in exchange for knowing how the #$(*@# to do this properly. Kthx.

After finally getting my Flex Builder 3 Beta 3 environment all set up, I realized that it was actually quite a few steps, and could probably be pretty aggravating to someone getting started. This should walk you through getting Eclipse Europa + Flex 3 Beta 3 + Subclipse installed properly, with the added bonus of configuring Quicksilver + Flex keyboard shortcuts so they don’t trip over each other if you’re on OSX.

First, get your Actionscript projects to work in Flex Builder 3 Beta 3. After I uninstalled Beta 2 and installed Beta 3, it would appear that all my Actionscript projects stopped running. Well, in reality, Flex Builder really was just confused as to what it was running. It seems that you have to add Actionscript projects back to the run menu.

Step 1: Click the arrow next to the run button, and select Open Run Dialog…

Step 2: Add your Actionscript project back to the favorites menu. This involves selecting the project, clicking the Common tab, and checking the menus you want the project to be included on. Ta-da, back in the menu. Seriously, if anyone knows a better way, or why this happened, please let me know.

Second, getting Subclipse installed in Europa. By default, Eclipse won’t let you install Subclipse. If you don’t know, Subclipse allows you to use SVN in the Eclipse file explorer, which is awesome for us on OSX because there really isn’t a decent SVN client yet (why?!). I use SmartSVN if I have to.

Step 1: Enable minor increments.

This step allows you to select specific minor versions of the Subclipse package. If you only allow service increments (default), you’ll probably get a contingency error like “missing required component buckminster.blah.blah.blah.yousuck”. Open Prefrences for Eclipse and select Install / Update. Then under Valid Options, select “Service and Minor Increments”.

Step 2: Install the Subclipse plugin.

This should work now as you’d expect. You may not be able to install the entire Subclipse package, so only select what works. Use “http://subclipse.tigris.org/update_1.2.x&#8221; to install.

Step 3: Use Subclipse in Eclipse to manage your SVN projects.

Last, configure Spotlight and Quicksilver so they don’t trip over Flex Builder. If you don’t know what Quicksilver is, please go out there and download it. It’s just wonderful, trust me.

Step 1: Quicksilver renders Spotlight essentially useless, so we’re going to first disable the Spotlight keyboard shortcut. Click on “Spotlight” in System Preferences. Uncheck any keyboard shortcut mappings that exist.

Step 2: Configure Quicksilver to use Command+Space (or anything but Control+Space and Control+Shift+Space). I simply mapped it to Command+Space to replace the default Spotlight keyboard shortcut.

Step 3: Enjoy code completion back in Flex Builder 3 by using Control+Space for methods and fields, and Control+Shift+Space to display function argument code hints if they disappear.

I’m only sharing this because it’s the path I took. If there’s a better way, let me know.

Follow

Get every new post delivered to your Inbox.