In order to fix this, all you need to do is make sure the folder/package with your files is added to the ‘runnable application files’ in the Flex Applications tab of projects properties. If there are already added, just try adding again and it should resolve the issue.

Thanks to Jason San Jose for pointing this out to me!

One of the biggest problems when using sub applications is the security violations that the Flash platform throws up. These are seen in the debugging console, and with most Flex projects the number and frequency of violations, mean the console becomes impossible to use.

Today I discovered Arthropod. Arthropod is an AIR application that offers a console that you can log to from a SWF (Flex, AIR, Flash applications or movies). All you need to do is include a simple class, and then log your debugging messages like so:

<

>Debug.log("my message");

Arthropod uses the local connection to communicate with the desktop application, and although currently only supports AS3, it should be possible to get an AS2 version running too.

This means I can now debug to Arthropod and don’t need to use the default flex builder debug console. However Arthropod also allows you to do a lot more, by debugging applications in their live environment. For more info check out http://arthropod.stopp.se

If you are interested in developing large application in Flex, it’s a good idea to break up parts into modues or separate application. This encourages loose coupling, improves the ease of updating and out sourcing development.

If your project is an AIR application then you will probibly want to load those modules locally (rather than rely on the web) and download/update them at runtime, rather than having to package them with your applicaiton. If this is the case you will no dout run into a host of problems involving application and security domains.

Adobe support this concept using the, “Marshall Plan“, an environment for protecting your main application from the many porential risks of downloading excutiable code. Be sure to read the 58 pages of info in this PDF.

The key points of the Marshall Plan are, Application Domains, and Secutiry Domains. In a nut shell, Application domains seperate class definitions (so you can use the same framework/singletons in each app) and security domains protect against applicaitons traversing into their reletaves.

If you want to do anything slightly complicated with your sub applications (RPC, use frameworks, etc) you will need to load them into a separate application and security domain. This does cause some problems with your sub application’s components that try and access high level objects (like stage and mouse), but apparently you can work around these :/

One of the first hurdles in running sub applications in seperate security and application domains is communication. The Marshall Plan has restricted communication in AIR down to a single shared EventDispatcher called sharedEvents, which is located inside the loaderInfo for the SWFLoader and the subApplication. Documentation on this is non existant, and I found myself routing around in debug mode trying to find the correct reference, and here it is:

// From the parent app where mySubApp is an instance of SWFLoader
var e:Event = new Event('testFromParent');
mySubApp.content.loaderInfo.sharedEvents.dispatchEvent(e);
mySubApp.content.loaderInfo.sharedEvents.addEventListener( 'testFromSubApp' , _eventFromSubApp );
 
// From the sub app
var e : Event = new Event('testFromSubApp');
this.systemManager.loaderInfo.sharedEvents.dispatchEvent(e);
this.systemManager.loaderInfo.sharedEvents.addEventListener( 'testFromParent' , _testEventHandler);

That right there is the basics of communicating between the two. Untyped objects can also be passed through, and typed objects (like ArrayCollections) will be converted to generic objects. They key is knowing to use the loaderInfo in the, “content” of the SWFLoader, and that the loaderInfo in the child app is in the systemManager.

I have created a demo AIR application that downloads a sub application, stores it locally, loads it in, and shows them both communicating.

Download the source code here or just the AIR application.

]]> http://www.pixelbox.net/2009/02/11/sub-application-communication-in-air/feed/ 1 http://www.pixelbox.net/2009/01/23/ui-navigation-question/ http://www.pixelbox.net/2009/01/23/ui-navigation-question/#comments Fri, 23 Jan 2009 18:01:04 +0000 Rob http://www.pixelbox.net/?p=311

Question to ponder over the weekend.

You have a list of articles that scroll vertically in a desktop app.

When you click on an article to view in full you have navigation arrows to go to the next and previous article.

Do the buttons point up and down, to mimic scrolling on the previous screen?

Do they point left and right like iTunes which also displays songs vertically?

Answers on a post card.

One of the biggest problems I faced when I first wrote the script was not being able to set parameters in call back functions. This meant I had to either use globals or modify classes and then get them back.

So this time around I did a little research and found this great function from John Resig, which allows you to do just that, pre fill arguments for call back functions. Essentially it stores the arguments until you run the function, at which point it puts it all together again.

This has cut down my code significantly, so thanks John!

At the end of last week I attended FOWA2008 with Tom from work. Having only really been to the excellent dconstruct previously (I’m not counting things like internet world) I wasn’t sure how it would match up. I wasn’t disappointed as it turned out to be a great event with some fantastic talks, and some great swag, such as the Carsonified Journal!.

The event was at Excel (which is huge and a bit lacking in character) and had two main tracks, which was something I wasn’t used to. Initially I was thinking about splitting between the developer and business, but once I found out they were filming the talks and putting them online I didn’t have to worry about missing a thing!

Blaine Cook & Joe Stump’s talk called: Languages Don’t Scale, was a great look at the language fanboys out there and how we shouldn’t bitch about X not scaling as all languages have their pros and cons, and at the end of the day, the differences are insignificant. They focused on the main area of concern for scaling, architecture.

Matt Biddulph’s talk entitles: Dopplr: It’s made of messages, was also really interesting. It would have been nice to have some code examples, but it was a little more tech focused that his talk at dconstruct, which was obviously more about the UX.

Later that day Blaine Cook, Ex Chief Engineer at Twitter presented another talk called: Colliding Worlds: Using Jabber to make awesome web sites. This was another really interesting talk, and something I would love to look into.

Building Desktop Caliber Web Applications with Objective-J and Cappuccino by Francisco Tolmasky, 280 North was really interesting. At first I was a huge sceptic of these sorts of frameworks, which focus on building an app, rather than how it translates onto the web. Francisco pointed out that the framework is aimed at building applications, not websites, which makes sense, as it’s modeled around Objective C methodology.

Recently I have been making the transition from programming web sites, to desktop applications, and the differences are huge. A client-side focused application is so different from a typical client server architecture, and as a web developer it’s extremely hard to build these apps using a typical website methodology.

Many frameworks like Cairngorm, PureMVC or in this case Cappuccino look at addressing this, by modeling your application as you would for a desktop application, and abstracting how it’s presented or rendered. Some of the features of Cappuccino are fantastic, such as key mapping, undo history and clever trickery with HTML canvases (check out 280Slides), however it’s biggest advantage is also it’s disadvantage. By using HTML, CSS and JavaScript it suffers form limited lockout, however by not requiring a plugin it also lacks from not having socket support, or better filesystem, webcam integration. Hopefully over the next few years (especially with chrome) the browsers will start evolving and adding some of these limitations.

Day two had some more great talks, such as Scaling the Synchronous Web by the meebo guys, and how they managed scaling on Meebo. Andrew Turner’s talk Beyond Google Maps opened my eyes to a world (no pun intended) of mapping tools available on the web. We also got a treat of seeing Mark Zuckerberg, although there wasn’t time (probably a good thing) to see him get grilled.

The day ended with the infamious DiggNation, which didn’t disappoint, especially with free Google beer!

Looking forward to next year already!

NOTE: This isn’t working in the latest releases of browsers. Please let me know if you have updated or know of maintained versions of this code I can link to.

I have often used JavaScript to add reflections to images. Ideally this would be done server side, but often for quick presentations or mock ups it saves a lot of time.

I have previously used Reflection.js, which uses prototype. Since I now normally use jQuery I looked for a jQuery version of reflection, which I found here.

There is a big problem with the code though. If the images haven’t loaded then the reflection fails. Most of the time if you refresh the page it will work (thanks caching), but that’s not idea.

I have written a work around until the plugin is updated. The work around will run and check each image with the reflect class to see if it has finished loading (using the handy .complete). If it hasn’t it sets a flag to retry after a time out, if it has then we call the reflect function on it, and then remove the reflect class, so we don’t check it again next time. Tom improved this by using the .load function which removes the need for the time out, nice work, I have updated the examples. This works really well, especially when you have lots of large images, or users on slow connections. The code will also add the reflection to each image as it loads, rather than waiting for all of them to load.

<script type="text/javascript">
	$(document).ready(function() {
		$("img.reflect").each(function(){
			$(this).load( 
				function(){ 
					$(this).reflect({height: 0.3, opacity: 0.6} );
				} 
			);
		});
	});
</script>

Please let me know if you have any advice or improvements!

You can see a jQuery Reflection work around example here

At D.Construct 08, Matt Biddulph and Matt Jones talked about Delighters. A delighter is a term coined by the Hotel industry for an item that delights a customer and increases the chance of them staying again (more info on delighters here). Items such as Plush Towels, an arrival gift or free movies could all be delighters, but Matt referred to the placement of a rubber duck in the bath tub on a rainy day as his example. However during the conference Thayer tweeted this perfect example of one.

Dopplr (Matt and Matt’s application) uses these Delightors on various parts of their site. The ones they talked about included the logo changing colour depending on your travels, the favico also changing, and your comparison to an animal in terms of speed.

I have often seen high attention to detail as a delightor. I remember in MGS2 on the PS2 you could shoot the ice bucket and watch the ice cubes scatter on the floor, something incredibly rare on a console of the power of the PS2. Better still the ice cubes melted, and even better the melted faster the further away from one another they were!!! This had nothing to do with the game’s plot and was purely for fun, but it made the game all the more impressive.

Computer games seem to have been at it for ages. I remember in the old Sonic games, that if you left your character still for about 30 seconds they would start tapping their feet, now days it’s a lot more complex, but something like GTA is littered with little extras they add that level of depth and ‘delight’. Even the PS2 it’s self allowed you to rotate the little PS2 logo so it was the correct way up when you stood the PS2 on it’s side, something almost no one noticed.

It is often rare to find delightors on the web, although they do exist. Aside from Dopplr’s delightors, here are some I have found:

• The header of Dunstan’s blog changing with the weather
• Live searching, again on Dunstan’s blog (this was a log time ago)
• Zooming with the mouse wheel on google maps
• The parallax effect on the Silverback holding page
• The little nuke animation when you delete an image on organize
• Google’s event logos
• Auto Save on Gmail

I love these little delighters, and would love to add them into some of my projects. Let me know if you know of others and I’ll add them to the list!

So yes, this is yet another post on Chrome the new browser from Google. However I am going to leave the UI and performance etc to the other million posts and focus on the strategy behind it!

Firstly Google clearly have a brand advantage of creating a browser, by using Google to view the web you are constantly reminded of… well Google. It seems so strange it took them so long, especially when you look at Google Desktop, which is a far more complicated and niche product. I often here people to referring to Internet Explorer as, “The Internet”, so it will be interesting if this will change things! The browser has also been in the press a lot, even popping up in the London commuter papers as spread reviews.

I think the second goal for Google was to create a platform that improves their online “applications”, even though I will expect them to support older browsers, I also expect we will see Chrome only features very soon. Plus you know they will run faster on Chrome, and in support questions Google will suggest using Chrome etc etc.

This kind of leads into another area, which the implementation of gears hints to. Microsoft and Adobe are both promoting cross platform runtimes for web type applications (RIAs). These are both extensions of their plugin runtimes, which can be written in HTML and JavaScript as well as native languages. However Google’s approach is to remove this compiled “complicated” stage and instead support an already existing web app by offering Google Gears caching support, to plain old HTML and JavaScript. I am yet to fully understand the features and abilities of Gears, but I am convinced this is where it’s going.

This is highlighted by the fact all sites run in their own instance of the browser, making them akin to applications. You can also create links on your desktop to like an application shortcut. This is along he same lines as Fluid or other SSBs which I love for Google’s web apps. I am unsure though if people will see an app like Gmail as a replacement for a desktop client, unless Google release a pre set up instance of Chrome.

You may have noticed recently that some of the programs on the iPlayer offer you the chance to watch them in the new beta high quality player. This is great as I have a Mac Mini connected to my TV, so I get on demand BBC programs in HD (ish) for free (well at no extra cost).

However when watching I noticed that it kept stopping, I was unable to start it again unless I refreshed the page, which then meant I had to skip back to where I was to continue my viewing pleasure. I noticed that there was a pattern to this, and it was after about 20 minutes or so.

I think this is something to do with the flash player running out of memory, and not being able to buffer more of the program, which would make sense as I am only seeing this with the HD programs and a refresh of the page fixes it.

By right clicking on the player you can go to settings and change the local storage size, however I think this is just for local stored objects (flash cookies) rather than something like a movie, however after changing this to unlimited I had no problem… (as of yet). It may be that scrubbing information is stored in there, but that’s just a wild guess.

I would be interested to know if anyone else is having this problem, and if they are how they resolved it. I remember having a problem in the early days with my router, but this is more of a subtle problem, and I’m sure I’m not the only one! So let me know if you have any ideas!