Why Yahoo Maps chose AJAX

Ted Patrick has posted a very frank and thoughtful post discussing the reasons why Yahoo has moved from Flex to AJAX for the latest version of Yahoo Maps. To summarize he identifies 3 main reasons for the shift :

• Shortage of Flex developers
• Problems integrating Flash advertising into Flex applications
• Complexity of migrating from Flex 1.5 to Flex 2.0

Despite these points it seems an odd decision in a year when so many great Flex applications have emerged.

Silverlight vs Flex : the hype and the search trends

There has been no shortage of hype about Microsoft's Silverlight during 2007. But I was playing around with Google Trends the other day and started wondering how well the hype translated into user interest. The graph shows the relative number of Google searches on the terms Flex and Silverlight. The most interesting things was that although Silverlight wasn't far behind in terms of news reference it was a very different story when you looked at actual searches, even when there were news spikes for Silverlight. Obviously search trends aren't the ultimate indicator for market interest but they are still help to give some idea of whats really happening among developers. These results can also be skewed when a search is done on terms that may have alternative contexts. For example, my original search included AJAX and it seemed that The Netherlands were obsessed with AJAX. This seemed odd until I looked at the news items and realised there was a soccer team named AJAX.

Adobe BRIO : did you miss this too?

The second half of 2007 has seen a tsunami of news from Adobe and I guess we could be excused for missing a few things here and there. But I was very surprised when I heard about the BRIO beta. BRIO is a slightly scaled down and re-designed version of Adobe Connect. The beta offers users a free meeting room for up to three participants with a simple easy to remember URL. In that respect it is similar to Elluminate's vRoom. Elluminate is very much focussed on education, while Connect/BRIO has a wider target audience. Pity BRIO wasn't available when CS3 was released. It would have made that "Start A Meeting" link seem less like marketing and more like a useful part of the suite.

iFlash Switcher : Installing new player versions

We're using the iFlash Switcher Firefox extension to enable testing with different versions of the Flash player on our Intel Macs. It's a very handy tool. Anyway today saw the release of Flash Player Update 3 (9.0.115.0). So we were keen to install it if only to do some testing on it's H.264 video capabilities. But getting iFlash Switcher setup turned out to be a bit of a chore. So I'd like to document this process for the next update and to save others my pain:

• Locate the folder where iFlash Switcher stores the various plugin versions. It should be something like Users:userName :Library :Application Support :Firefox :Profiles:crazyName.default :extensions :iflashswitcher_intel@sephiroth.it :chrome:plugins:
• The plugin versions will be in their own folders (i.e 9.0 r47). Make a copy of all the available plugin folders (I copied them to Desktop:tmp).
• Download and install the latest version of the Flash Player.
• The newly installed player will be located at Library: Internet Plug-Ins: Flash Player.plugin. Create a new folder in the iFlash Switcher plugins folder using the version number (i.e 9.0 r115) and copy the new plugin to that folder.
• Move the copied plugin folders (from step 2) back into the iFlash Switcher plugins folder.
• Open Firefox and change to the player version you want to work with (there is a Flash icon in the lower right corner).

Most of this is easy. It's just locating the plugin folder that causes grief.

Googlebot : accessibility in SEO clothing

You might think this an odd title.  I'm currently doing a makeover for a clients website.  At the end of four hours of CSS tinkering I was very proud to say the site looks exactly the same.  That is, of course, until you disable the CSS and see a lovely clear page of sequential text and links.  The original site looked pretty much the same with the CSS on or off and that was the problem.  This change isn't the consequence of my clients new born interest in accessibility.  It would be unfair to say my client doesn't care about accessibility but it would be fair to say he would find it hard to justify spending money to make the site more accessibile.  What my client has become very interested in is Search Engine Optimisation (SEO).  This is where you focus on changes to your website that will provide a better page ranking in Google.  The client thought SEO was important enough to engage a company that specialises in this dark art.  My changes to the site are the result of the SEO's report.  What I found fascinating is that most of the issues raised in the report are exactly the same issues that I would raise from an accessibility perspective.  That is they are about semantically correct HTML.  That seemed a little odd until I realised that Google's official site auditor is blind.  The Googlebot can't see your site.  It can only read your site and interpret what it thinks the site is about.  The sad fact is that most of the worlds successful websites only care about one blind user : the Googlebot.  Therefore if Google did nothing else to promote site accessibility than provide the world with a search engine then it is doing more for accessibility than any other company in the world.  For the rest of us we can stop trying to get our clients interested in accessibility.  Instead we can work on getting them excited about SEO knowing the outcome will be exactly the same.

Blogged with Flock

Flock 1.0

Back in January I downloaded and had a play with the Flock Browser (then in beta).  At the time Flock was pretty impressive but I found it's bookmarking less than ideal and returned to using Firefox.  Well the other day I was reading an interesting article on TechCrunch that compared memory usage between Firefox and Flock (now out of beta).  The long and short of it was that memory usage was significantly better in Flock.  Which is strange as Flock uses Firefox for it's base engine.  Anyway I decided I better give it a another look.  It's a long time since a piece of software made me go WOW.  But that was my exact response to Flock 1.0.  First of all there are the exciting features that I'd seen in the beta ; the media stream browser, the image uploader, the blog post editor (which I'm using to write this post).  What I don't remember is a series of sidebars which make access to popular web 2.0 services so easy.  For example a people sidebar provides easy access to Flickr, YouTube, Facebook etc.  The accounts and services sidebar provides easy access to a variety of services (i.e Blogger).  I remember a web clipboard but a don't remember a neat drag and drop sidebar that helps you manage a number of saved media objects (text, images, video).  Great feature here is that each saved object has a link to create a blog post from the object.  The same feature appears over images or videos in the page that you can add to your blog.  One last feature I'd like to mention is that if you browse to a page that has a Firefox search engine then Flock will make you aware of that and offer the option of adding it to your installed search engines.  There are more great features and I feel I could go on for a while but I suggest you should give it a go and make up your own mind.

Blogged with Flock

Adobe Device Central : Update 4

A new updater for Adobe's Device Central is now available for download. Device Central provides information about available mobile devices and their capabilities. It is a great tool if you are developing Flash for mobile. This is the 4th update since the release of CS3. Before installing update 4 you will need to install Flash® Lite™ 3 Update for Device Central CS3 and have installed the previous 3 updates. This is where Device Central lets us down a bit. I can't remember if my previous updates are up to date. Did I last install update #2 or update #3? The thing Device Central needs is a more streamlined way to manage these updates. It should keep track of them , check for new updates and automate their installation.

Web 2.0 As Operating System

Last night I attended the Melbourne Adobe User Group November meeting. There two excellent presentations:

• Phil Martin gave an interesting presentation on how he uses Captivate and Acrobat together.
  
• Chis Burgess talked about Chumby.

While listening to Chris I found myself making a connection between Chumby and the gOS that Wal-Mart has been selling. I guess to explain this I need to give a brief description of Chumby and gOS.

Chumby is an always on device that you configure via your browser. It runs a version of Linux and includes a Flash player (Flash Lite 3.0) and uses wifi to connect to the net. Developers build widgets so the Chumby can do things. For example, there is a clock, an RSS reader, an eBay watcher and lots of other things. The point is the content is delivered from the web. Which is fine because there is a lot of very useful content on the web.

The so called gOS (Google Operating System) is a custom Linux install that uses web services as it's applications. So you have gMail, Blogger, Wikipedia, Skype, Facebook etc as your core applications. Compared to the Chumby it is a more traditional computer with a keyboard and mouse etc. But like Chumby it believes there is enough online services to make it useful.

Both of these devices are selling for around the same price (Chumby : $175, gOS : $200). Which is around the same price as some iPod's. Therefore the market is willing to buy devices at this price if they prove useful. Which makes me wonder what are we looking at here? Is this the beginnings of a new "must have" device or a couple of wannabes curiosities?

Adobe AIR has a new frisbee : I mean logo

Mike Chambers has just released the official Adobe AIR logo on his blog. AIR was originally code named Apollo and that had a logo. Then when the AIR name was released we got a new temporary logo. But here finally is it's official log. Fair enough it's not out of beta yet. Apparently the three bits represent the three technologies that AIR is built on : Flash, HTML, PDF. Despite what the logo seems to suggest putting together those three technologies in AIR doesn't result in a hole. Though perhaps it's not a hole. Perhaps the content is so effective that it becomes invisible. That is surely the goal with RIA's; to make something where the end user is so focussed on the content that they forget about the GUI and the technology.

Beedigital has set up a poll to get the communities initial response to the logo. Cast your vote.

Further speculation on the AIR hole from Alex Bustin over at "The Back Button". He suggests there may be a connection between the hole in the AIR logo and the hole in the new Photoshop logo. Perhaps we should be expecting a new holey Flex logo etc...

Faves : BlueDot Gets On Topic

I started using BlueDot at the start of the year, after a brief trial of del.icio.us, and I've never had a reason to reconsider my decision. It seems that BlueDot has been less happy with itself than I've been so they've taken a long hard look at themselves and decided to re-brand as Faves.com. They've also introduced an range of new features and interface tweaks so I'd like to spend some time considering these changes.

Firstly, lets start with the name change. For a start it's shorter and easier, but it's also a lot clearer. The idea of a dot was always a bit forced and why was the dot blue anyway. But we've been bookmarking favourites since the day we dicovered the web and how natural it is to shorten favourites to faves. So name change : tick.

The next big change I noticed was voting. Every fave now has a digg style vote box. It's not really a new feature as you always had the option of marking a link as a favourite. But presenting it this way makes it's purpose much clearer. Prior to these changes I only ever marked one link as a favourite and that was as a test. Since the change I've already cast a number of votes.

The other new feature is a Votes tab. This allows you to quickly view faves you've voted on. I'll be interested to see what happens here as my list of voted faves grows. I imagine it could very quickly become unmanageable. What would be nice is the addition of "username's Votes" to the search options at the top of the page. The other useful feature for managing votes would be the addition of the Tag filtering tools available on your Faves tab. This would also highlight patterns in what you are voting for and could lead to the discovery of new Topics (see below).

The most useful new feature for me is the addition of Topics. Topics are a re-vamped version of BlueDot's buzz with some powerful new features. New Faves for your selected Topics appear on your home page and can be ordered by popularity or chronologically. There is also an option to hide Faves you've already seen. Topic selections are managed from the Topics area. Here you can browse Topics, search for Topics, or select from Recommended Topics. This last option seems to work particularly well as it looks at your most common Tags and recommends useful Topics based on these. Once you find a relevant topic you can add it to your selected Topics (or remove if it's already selected). These topic pages can also be added to your RSS reader. Which seems a particularly useful way to stay in touch. My only concern here is that the Topics are seperated from your Faves and I'd like to see these areas integrated in some way. But that is probably a bit impractical.

With this round of changes Faves is probably the most underrated of the available social bookmarking sites. The latest round of stats suggest that this is changing but Faves figures are still well below del.icio.us. I imagine social bookmarking is a fairly conservative marketplace. You hardly want to be moving your bookmarks every other week regardless of how easy the individuals systems make it to move. Therefore growth would need to be tied to a long term plan. But these changes show that Faves definitely has the future in it's sights.

Flex Effect Problem : Check your Alphas

The Flex feature I use less than any other is the Effects. This is because most of the time I am focussed on how the user interacts with the applications data rather than transitioning between states. Part of the reason is that effects are so easy and flexible to use. Infrequent practice means that I forget one really important difference between Flex development and Flash (AS1 or AS2) development : alpha values. In the old days you could set an objects alpha between 0 (invisible) and 100 (opaque). But in AS3 the alpha value can be set between 0 (invisible) and 1 (opaque). Consequently, setting an alpha value of 100 on the alphaTo property of the Fade Effect means you won't get any sort of fade. This has happened to me a few times now and it always results in a short period of intense frustration (an excessive period of time when you consider the scale of the problem) until I remember that I need to use 1 rather than 100.

IE's Plugin Activation Merry-Go-Round

A while ago Microsoft and Eolas had a small argument over who owns the rights to the technologies that allow plugins to play in MS Internet Explorer. As a consequence of that falling out IE was "updated" so users had to "click to activate" active content (Flash, Quicktime etc). The workaround was for developers to embed their content using external javascript. It was a big deal and for those of us who noticed it involved quite a bit of work hunting down all affected projects. That was April 2006. Well now the nice people at Microsoft and Eolas have had a chat and an agreement has been struck. So they are going to "update" the browser again so it works just like it originally did. This will start to happen in April, 2008. Though it will take a while for there to be a consistent base of users with this behaviour. I imagine it would be easiest and safest to pretent this new update isn't happening and keep using the external javascript.

This disagreement between MS and Eolas is about money (and probably quite a lot of money) and thats the way the world is. But the internet is bigger than these two companies and this argument has had a significant impact beyond the pay packets of their lawyers. I doubt there has been an internet user anywhere who wasn't affected by this process in some way. Surely they could have continued their negotiations without making us all suffer for it. I guess I don't expect companies like Microsoft to care but a bit of community consideration once in a while probably wouldn't hurt their bottom line.

Adobe CS4 : RIA Premium ?

This post is a consequence of a number of things I have been thinking about since Adobe Refresh last week. It came together while I was posting about using Illustrator to create Flex symbols. I was thinking about how little use I have for the Flash IDE at the moment. I had been using it to create an assets.swf with static skin elements. But I realise now that it is easier to use Illustrator for this.

At the moment Flex developers are disadvantaged by Adobe's packaging options. If we buy CS3 Web Premium we still need to go out and buy Flex Builder. What would be better is if one of the collections contained Flex Builder. In fact, what if there was a collection focussed on RIA development.

I had been thinking about this a little since seeing some demos of Thermo. Thermo is essentially a Flex for Designers that will integrate with Flex Builder (Flex for Developers). So lets imagine a studio with a designer and developer working on Flex based projects. Ideally we could have a CS4 RIA Designer Collection and a CS4 RIA Developer Collection and they could look a little like this:

CS4 RIA Designer Collection

• Adobe Photoshop
• Adobe Illustrator
• Adobe Thermo
• Adobe Dreamweaver

CS4 RIA Developer Collection

• Adobe Flex Builder
• Adobe Flash
  
• Adobe Dreamweaver
• Adobe Fireworks

Finally, for the developer/designer we have the Premium collection:

CS4 RIA Premium Collection

• Adobe Photoshop
• Adobe Illustrator
• Adobe Fireworks
• Adobe Flex Builder
• Adobe Thermo
• Adobe Flash
  
• Adobe Dreamweaver

Using Illustrator Symbols in Flex

The most useful thing I took away from Adobe Refresh last week wasn't something new. In fact it's been there for months and I hadn't discovered it. In a nutshell; Illustrator objects (or groups of objects) can be turned into symbols. Exporting your Illustrator file to an .swf format makes those symbols available within your Flex application. For example, if we create an up state for a play button, create a symbol called play_btn_up and export our Illustrator file as assets.swf. Then we can style our play button using css :

.playBtn{
upSkin:Embed("assets.swf#play_btn_up");
overSkin:Embed("assets.swf#play_btn_over");
downSkin:Embed("assets.swf#play_btn_down");
}

Creating the Symbols within Illustrator is as simple as opening the Symbols panel and dragging our object onto the panel. You'll probably want to rename the symbol to something simple. But otherwise the job is done. This is ideal for us as our designers have been developing all our Flex comps in Illustrator. Until seeing this we'd been importing the relevant objects into Flash and exporting from there. Oddly enough publishing from Flash is much more work than exporting from Illustrator (because you need to setup your Library items if you want to use them as Symbols).

Melbourne's Adobe Refresh : debrief

Yesterday I attended Melbourne's Adobe Refresh event. This event gave you a little bit of that excitement you get when you attend an event like MAX. Sure all the news had been blogged a month earlier. Personally, I looked at some of that news in detail and some I'd just glanced at. Refresh was about making some time to hear and see what matters in detail. We do a lot of Flex work. So it was the Flex related stuff that got me excited and there wasn't much that wasn't Flex related (in one way or another). The most interesting project for me is Thermo. The demo we saw showed a Photoshop comp converted into a working Flex application by selecting graphics (or groups of graphics) and telling Thermo what sort of component they are. This included creating a horizontal scrolling List and adding states and effects to the component. All this is done in the same format as Flex development so the converted comp will be ready for handing over to the developer (and back to designer for tweeks if necessary). This could make a very real difference to our workflow.

A lot of the other exciting things they demoed related to applications built with Flex ; things like Adobe Share, Buzzword, Adobe Media Player to name a few.

With Media Player they demonstrated some in player advertising. In case you've never seen it Media Player allows you to subscribe to video feeds and then watch selections from that feed when you are ready. One example feed they had was for CSI. Great idea but I found the advertising a bit invasive. I can see how the media owners might find this attrative but I wonder how comfortable the end user will feel. There are some very compelling alternatives out there for accessing TV shows. Media Player offers a very painless alternative as long as it isn't over-burdened with distracting features.

Some of the things (i.e Pacifica) seem like they might take a while to have an impact. But that doesn't mean I didn't come out churning over the potential these offered for the future.

Cairngorm vs PureMVC : a quick comparison

After watching Ali Mills and Luke Bayes presentation comparing the available Flex Frameworks I decided it was time to have a much closer look at PureMVC. After spending some time getting familiar with PureMVC it is hard to argue with their conclusion that PureMVC does a better job of solving many of the potential problems of using an MVC pattern. PureMVC is less dependant on Singletons, individual components are more reusable because they have fewer dependancies and there is less repeatition in setting up new functions within the framework. Despite all of these benefits I'm not convinced that this makes PureMVC a clear winner.

Towards the end of the Framework comparison presentation it is pointed out that Cairngorm is the framework that all Flex developers need to know. Well it would be nice if there were a few more developers in Melbourne who know Flex. Let alone developers with an understanding of Flex Frameworks. So the question I asked myself is if I had to train someone new next week who was unfamiliar with any Flex Frameworks which Framework would I want to teach them. The following table lists the concepts you need to understand for Cairngorm development compared to PureMVC. What is immediately evident is that there is a lot more to learn to get up to speed with PureMVC. To achieve a cleaner/purer framework PureMVC has added more complexity and this is a problem when you need to train people to use a Framework. When we started using Cairngorm it didn't take long to explain the basics of the Framework. But I think it would take a lot more explanation to get started on PureMVC despite the similarities in the two frameworks.

Cairngorm	PureMVC
Model View Controller Command CairngormEvent Delegate Service	Model View Controller Command Facade Proxy Mediator Observer Notification

Ben Forta is coming to Australia

Just read from Ben Forta's blog that a number of Coldfusion 8 (+ some Flex and AIR stuff) events are planned for Australia in November. Ben Forta is a Coldfusion legend and any opportunity to hear him talk shouldn't be missed. The dates are :

• November 20th: Sydney
• November 21st: Brisbane
• November 22nd: Melbourne
• November 27th: Perth

Google v Microsoft

Quote of the day :

"Mozilla’s financial statement really puts the browser battle into perspective. It’s not Firefox vs. IE as much as it is Google vs. Microsoft."

Mozilla banks Google bucks; Builds a portfolio

Hunt Coward

This is totally off topic. For readers outside Australia we have an election coming up and our current Prime Minister is John Howard.

Flex List : to click or to itemClick

Every interactive Flex component has a "click" event that is triggered when the component is selected by the mouse. It quickly becomes an ingrained habit to add a click event to components you want users to select. This habit lead me into trouble with a List component.

The "click" event for a List occurs whenever any part of the List is selected. For example, selecting the up button of the scroll bar will cause the List component to emit a click event. This isn't the event you want to respond to if you are trying to detect when an item in the list is clicked. The actual event I needed was the "itemClick" event. It seems like a small thing but it made a big difference to how my small application worked.

Flex Frameworks Reviewed

Just spent some time watching a presentation by Ali Mills and Luke Bayes which reviews the available Flex Frameworks. If you are looking for an up to date summary of the available Flex Frameworks you really can't go past this presentation. If I were to summarise their findings it's that most Frameworks are still too immature. The two exceptions they identified were Cairngorm and PureMVC. They felt that Cairngorm was too tightly coupled to it's Singleton's and that this made unit testing very problematic. In contrast they were very taken with PureMVC. They felt it was a more elegant solution despite it's use of Singleton's. If you are interested in Flex and Frameworks you should watch this very informative presentation.

Update : a post presentation debrief (with link to presentation) is available. The most interesting addition here for me is the following quote :

"Doug McCune brought up a really great point about Cairngorm. He mentioned that if you’re a contractor that is working on other people’s projects and going from client to client, the only framework that you must know is Cairngorm. He made the point that it’s the most likely Application Framework that you’ll encounter within the enterprise. We both agreed with that point, but added that you should investigate PureMVC as the very next step."

David Tucker : Getting Started with Cairngorm

We've adopted Cairngorm as our preferred framework for Flex development. Now we are up and running with it we are finding it clear and simple to use and that is starting to show real dividends in terms of speed, flexibility and reliability.

But we did find it quite hard to find a good starting point for getting up and running. Essentially we had to setup a few of the Cairngorm example apps (available from cairngormdocs), open all the files and flick backwards and forwards between them until it started to make sense. The good news for newbies is that a few brave souls have started posting getting started articles. The best of these so far is from David Tucker. I'll add links to the various parts as he adds them :

• Getting Started with Cairngorm - Part 1
• Getting Started with Cairngorm - Part 2
• Getting Started with Cairngorm - Part 3
• Getting Started with Cairngorm - Part 4
  

Surrender (to Guitar Hero)

My question today is how off topic can a post be and still be on topic. I ask this because my son brought home Guitar Hero (for the Playstation ) yesterday and despite being very bad at it I'm totally addicted. It's terrible to discover that much cherished favorites like Cheap Trick's Surrender are a walk in the park. While a deceptively casual sounding Nirvana track is almost impossible to master (for me at least). What I really love about Guitar Hero (and no doubt a reason for it's success) is that it is so far removed from all the battle/adventure games that have been dominating the market. Gaming was sadly in need of some diversity and Guitar Hero is evidence that new ideas can succeed. So now for all the air guitar wannabees out there ; all together 1..2..3...

Movable Life : Second Life for everyone enjoying their First Life.

Just discovered a neat application called Movable Life. Movable Life allows access to Second Life through a web browser. It offers very basic functionality. Providing a Google maps style view of Second Life. While allowing access to your inventory and a way to chat to friends. Which may be fine if you see Second Life as an over hyped chat application. If your interested in finding out more about Second Life but don't want to bother with the elaborate install and signup process then Movable Life may be for you. But don't expect it to offer much insight into what all the hype is about.

MAX : Sneak Peak Videos

A lot of very interesting videos are emerging from MAX 2007. But they are published all over the shop. So it seemed like a good idea to collect the links here for easy access. Let me know if you see any I've missed:

• Thermo : Flex for Designers
• Photoshop Express
  
• Flash Player 10 (Astro)
• Collection of Sneak Peaks (Peter Elst)
• Flash "Next"
• Flash on C/C++
• Flash Applications on Linux
• Seam Carving
• Photoshop Express
• Flash Home on Mobile
• PDF Packaging

MAX for Melbourne (& Sydney) : Refresh

Adobe Refresh is kind of like a MAX debrief for us poor suckers who couldn't go. The Melbourne Refresh event will take place at Telstra Dome on 31 October, 1.30 - 5 PM. The Sydney event will be on 30th October at the Sydney Convention Centre, 1.30 - 5 PM.

Over the course of an afternoon, you will hear from the local Adobe team as they present on what’s new and what’s happening in AIR, Flash Professional, Flex, Dreamweaver, Fireworks and ColdFusion.

Register

Adobe Share Beta available

Adobe have just released a beta version of a useful new web service. Adobe Share allows users to upload and share up to 1 Gb of files. The service uses an Adobe Id to manage logins. Which is handy for anyone who regularly downloads from labs. The interface for share uses Flex to manage the user interface. It's certainly clear and simple to use. The use of Flex also allows some interested extra features. For example, I uploaded a pdf of a recent presentation. Share provides a url or embed code for sharing this file. The url opens a Share interface with my pdf presented as a book with an additional link to download the document. The book uses the Flash book classes that you are hopefully already familiar with. Consequently there is a very user friendly turn paging experience (not that I'm claiming my presentation is a page turner).

A nice feature is that the files can be shared with anyone or you can select who you want to share the file with. One feature that some systems offer that would be a nice addition is some statistics on the number of views and downloads. But the service is a beta so it will be interesting to see where it goes from here.

I guess it's no coincidence that Adobe announced the purchase of Buzzword on the very same day. Buzzword is a Flex based word processor. Let me see I can edit word documents and save them online for sharing. Do I see a pattern here?

My Must Have Tools

We've added some extra staff to help out with our work load. One thing that keeps surprising me is that there are tools that I use every day (hour, minute ...) that other web developers haven't heard of. This doesn't reflect poorly on them. Really it's more about how we create our own development culture and forget that it might not be the norm. But rather is based on a fairly random sequence of events and connections that are unique to your situation. Anyway thinking about all this it seemed a good time to talk about the tools I use everyday and can't live without. I'm not talking about the big things (ie Dreamweaver, Flex Builder etc). But rather the extensions and services that fill the gaps the core applications can't or don't do. So here they are :

Firefox Extension : Firebug

The Firebug extension for Firefox allows you to view the html, javascript and css of any web page you can view in your browser. More than that it allows you to navigate the code view by selecting elements of the page (and visa versa) and to modify the css (temporarily) to discover how things work in that page or to debug problems in your page. For me working in a browser that doesn't have Firebug is like trying to eat porridge without a spoon.

Firefox Extension : Web Developer Toolbar

The Firefox Web Developer Toolbar does some of the things that Firebug does and a bunch of things it doesn't. Somethings can be done without the toolbar. But the toolbar makes it easier. For example, you can disable/enable javascript, clear the cache, resize the browser, disable/enable css (just to name a few) all with a couple of clicks. Between Firebug and the Toolbar there isn't much you can't do that you might want to do.

IE : Developer Toolbar

Sure most web developers have realised what a piece of junk internet explorer is. Unfortunately most of the world still has some catching up to. So we still need to make websites work for Internet Explorer. In fact most of the problems that need to be solved relate to making things work in IE. So the good news is that the IE Developer Toolbar is a really good. It features cover most of what the Firefox Toolbar does and some of what Firebug does. It even does some things better than either of the Firefox extensions.

gotAPI

Not an extension but a web service. A search engine for the API's of most of the programming languages a web developer will ever need. For example, select PHP and it will search and display documentation from php.net. Very fast. Very useful.

Social Bookmarking : BlueDot

There are obviously a few social bookmarking services on the web and they all have their strengths. I started using BlueDot in January this year and have never regretted it. It is a great way to maintain and access your bookmarks. What is essential isn't BlueDot but rather using online bookmarking. You will see tools and solutions that you don't need today or that you'll need again in a few months. You need to be able to find them quickly wherever you are. I think this is more important for web developers that for most other groups. A good bookmarking service consistently maintained is essential.

That's it. I may think of more over the next few days. But these are the things I really couldn't live without. Maybe you already know about these. Maybe you don't. What are your must have tools?

Flex Design Pattern : MVC

As mentioned in a previous post I'll be doing a presentation on the Model View Controller Design Pattern as it relates to Adobe Flex tomorrow evening. For those who are interested you can download the presentation from Adobe Share.

Drupal multisite setup

High on my list of priorities as we move towards our first real Drupal site was understanding how to setup multiple Drupal sites using the same core files. A lot of users have written on this subject and in the last couple of days I've read most of them. The alarming thing is that no two seem to be the same. The sad news is that I want to add to that growing list of multisite setups instructions.

The reason most of the posts proved unhelpful is that they assume you are creating different sites under different domains. For example, www.examplesite1.com and www.examplesite2.com will point to the same ip. But that wasn't what we were after. All our sites are under one domain. So we will create www.ourdomain.com/examplesite1/ and www.ourdomain.com/examplesite2/. The following instructions assume that you have already created a new alias in your Apache configuration file that points to your Drupal install.

In your Drupal 5 folder you will find a sites folder containing two folders ; "all" and "default". The "all" folder is for shared modules and themes that aren't part of the core but will be used with all your sites. The "default" folder contains a settings.php. If no other sites are found, based on your url, then the default folder is used. To create new sites using the same core you create new folders with their own settings.php file within the sites folder. The first important thing you need to know is that the folder name of your new sites need to reflect the address of the site with "." replacing "/" in the folder name. For example, if your site's url is http://localhost/test1/ then Drupal will look for a folder named localhost.test1. There are a few possible variations on this and they are described in settings.php. But what proved crucial for us was that you need to uncomment and change the $base_url variable to hold your full url without the trailing slash. Ours looked like this :

$base_url = 'http://localhost/test1';

This variable is optional in settings.php and for the senario of multiple domains for a single ip then it's probably doesn't need changing. But if you've done everything else and keep seeing the default site then you probably need to change this setting. We definitely did. Now to create a new site at this url you need to create a new empty database and assign priviledges. Add this information to settings.php as shown in the examples provided (in settings.php). Then navigate to install.php at the new sites url (e.g http://localhost/test1/install.php) and follow the usual install procedure. The result should be a shiny new Drupal website.

Victorian Adobe User Group : September Meeting

The September meeting of the Victorian Adobe User Group will be taking place Thursday week (20th September, 2007) starting at 6 PM. This month Steve Piscopo from Nectarine will be talking about animation principles and how they apply to Flash. In addition to that I'll be talking about the Model View Controller Design Pattern and how it applies to Flex. Below is the full description for my presentation.

The venue has a limited window of easy access so make sure you check out the access details (note : site still branded as MUV) before coming.

Flex was created for developing Rich Internet Applications (RIA's). When you develop an RIA's you quickly come to appreciate the need for a consistent and efficient framework. Therefore it's not surprising that Flex developers turned to Design Patterns. The success of the Cairngorm framework quickly turned Model View Controller (MVC) into the most popular pattern for Flex development.

This presentation will start with an overview of Design Patterns before delving into the MVC pattern. Finally, we'll look at what frameworks are available for Flex MVC development and touch on alternative patterns for Flex development.

Drupal : Themed Taxonomy

As discussed in my last post we've been looking at CMS's at work. In particular we did some tests with Drupal and TextPattern. We seem to have settled on Drupal. Mostly because of an existing (and stable) LDAP module. For our tests we looked at an existing project that was built as a static site with editors using Contribute. In the next iteration of this site we need to look at adding search functionality as well as making the structure more flexible without loosing the strengths of the current site. Those strengths offer some very real challenges to any CMS. Specifically the site uses over 20 distinct templates because each themed area has it's own look. In researching Drupal I eventually came across the Taxonomy Theme module which may offer the best way to handle this. I've installed it twice now ; once on our development server and once on my laptop. Both times I initially assumed that enabling the Taxonomy module would make it magically appear (it doesn't). Both times I thought that installing and enabling the module would make it appear (it doesn't). In fact like most Drupal modules you need to find the modules settings page (Administer > By Module > Taxonomy Theme > Taxonomy Theme) after enabling it. Enabling the module in the Global settings allows you to then select a different theme for each Taxonomy term (available from the Taxonomy tab in the Taxonomy Theme area). Obviously you'll need to define a taxonomy and create a list of terms first.

The thing that surprises me is that enabling any module in Drupal requires a very similar process and yet despite this we still intend to move forward with Drupal. We move forward in the full knowledge that we as developers have much to learn so that our users will have little to learn.

TextPattern : Quality not hype

I haven't had much time to post for the last fortnight. But there has been lots I wanted to talk about. One reason I've been time poor is that we've been doing some research into Content Management Tools to cover the needs of some upcoming projects. In the end we installed and tested two systems; Drupal and TextPattern. This short list was partly derived by running available CMS based sites through the W3C validator. TextPattern was the only CMS that validated cleanly and Drupal was fairly close. But in the end some popular choices from our shortlist quickly disappeared as they had so many validation errors.

The inclusion of TextPattern was a big surprise. We currently have a casual working for us who is a real TextPattern fan. I kept saying ; but you wouldn't be able to do x in TextPattern and almost everytime the answer was yes. In fact almost anything you would want to do with Drupal could be done with TextPattern. Though in every example there was one major difference between the two : TextPattern was easier. Everything in Drupal requires three semi-obscure steps to set it up. While everything in TextPattern required one click and a save.

There were things we really needed that weren't available for TextPattern (ie. LDAP validation) so in the end we decided on Drupal. But if you are looking for a CMS and your needs aren't too complicated then I suspect you won't go to far wrong using TextPattern.

Flex RemoteObject concurrency

We have just started using amfphp for our Flex projects. For a long time we held off because the PHP remoting options seemed a bit immature. Then we were in the middle of a large project and it wasn't a good time to make the change. During that time we were requesting PHP generated XML using HTTPService. Anyway here we are using amfphp (I plan to write a longer post about that soon). But as part of the change we've also been trialing ServiceCapture (also looked at Charles which is also looked very good). ServiceCapture is a web debugging proxy and it allows you to see all transactions between your machine and the web. It's particularly good for remoting as it shows exactly what the remote gateway is returning to your application.

One thing we noticed was that many of our remoting calls were happening twice. This seemed a bit odd . Turns out RemoteObject has a very useful property called concurrency. For example setting concurrency to 'single' means that only one RemoteObject call is made at a time. Exactly what we needed.

I eventually realised the reason the RemoteObject was getting called twice was that I had a group of RadioButtons with a change event. Selecting one RadioButton changes both buttons in the group and consequently triggers two RemoteObject calls. I changed my change events to click events and the problem was doubly solved.

This small problem highlighted for me how important tools like ServiceCapture and Charles are for Flex work.

Flash Player Moviestar

This is already all over the Flash blogs (though it's been a bit slow to make it to the mainstream technologies columns considering the scale of it's implications) but I wanted to summarise the news for my own reference. Tinic Uro's blog is the place to go for the real detail. But the guts of it is that a beta of the Flash Player was released last night. This beta player, code named MovieStar adds support for popular media codecs; H264 and AAC. Meaning that in the future we will no longer be limited to using Flash video (.flv) files in our applications.

Our department has for many years used Quicktime as our standard for video production. There were many good reasons for this; the main one being quality and availability. But in the last 18 months the success of YouTube and Google video has made Flash video an almost standard for online delivery. Consequently we've been considering our options for moving towards Flash for future video development. But one of the sticking points has always been quality. The ability to play alternative video formats in Flash changes everything. There are still a few questions to answer before making any changes and we'll need to leave time for a non-beta release to trickle out to our audience. But this will definitely determine our future direction.

Bridge : Managing Favorites

If you are like me then you like to get rid of extraneous clutter in the applications you use. Therefore one of the first things I did after installing CS3 was to have a close look at what was available within each application and decide what wasn't needed and if it was possible to get rid of the things I wouldn't need.

Bridge opens with a long list of Favourites. Some of these feel more like marketing (i.e Start Meeting) than an actual feature. They are easy to get rid of you just right click and select "Remove From Favorites". One of the first things to go was Bridge Home. But today Alan Mussellman has a post "Bridge Home and Fireworks CS3" that got me to thinking I may have been a bit hasty in my decision to remove Bridge Home. But how do you get a banished favorite back. In the end it took me a while to work this out. I looked in all the menus and sub-menus, searched the help all with no luck. Finally I decided to look in preferences (win :Edit > Preferences; Mac : Bridge > Preferences). Under General preferences at the bottom of the page you'll find a list of the available top level favorites. Just tick the checkbox for the items you want to see.

If you want to add a folder to your favorites you can drag and drop it from the content pane to the favorites panel. This is useful for quickly accessing current project files.

Some of the default favorites are Flash pages (i.e. Bridge Home). So I guess there must be some way to add our own favorites pages using Flash/Flex. Now that could be really useful. I can think of a lot of conent I wouldn't mind accessing in Bridge. But a few quick tests show web pages being opened by the default browser and swf files getting opened by Flash (even after adding them to Favorites). Think I'll need to add this to my Research list.

Additional (19th August, 2007):

It seems there is some information around relating to extending Bridge CS3. You can find a few examples at the Adobe - Bridge Exchange.

Flex Frameworks : Getting Started with Cairngorm

We've being looking for an appropriate Flex framework to use over the last few months. Adopting a framework has been on my mind since I started using Flex. But initially learning Flex offered a big enough learning curve and being the only Flex developer in the office made it less of an imperative. But earlier this year we appointed a new web developer and part of his job description was to become a Flex developer. He has just completed his first Flex project and we are about to start on a larger collaborative project. Consequently adopting a suitable framework became a higher priority.

I was aware of Cairngorm long before I did any Flex work. But everything I've read says it's not worth the effort for smaller projects and I guess I consider our projects quite small. But when I started looking around the alternative frameworks they either seemed a bit immature or nearly as complex as Cairngorm (but without a strong support community). Consequently we've decided to bite the bullet and use this smaller project as a good place to start learning Cairngorm. To test the idea I built a really small module based project using Cairngorm. The first day was like pulling teeth, but each day after that it became easier and easier. I think the hardest thing about getting started with Cairngorm is there is no obvious starting point. There is an excellent series of six articles written long ago that provide a great insight into the thinking behind Cairngorm and some examples of how things are done. But it doesn't really explain all the elements and how they relate to each other. There are also a number of example applications over at Cairngormdocs that I highly recommend. But looking through these examples involved a lot of opening files and trying to make sense of how the different bits relate to each other. In the end it seemed there were quite a few balls to juggle and so I put together a small document defining our project structure with some notes on how the bits relate. Below are some outtakes from that document that might help fellow Cairngorm newbies. Now keep in mind I'm still a newbie myself so I'm probably off on a few points (I'd appreciate anyone who knows better correcting my mistakes so I'm not spreading mis-information). Each point looks at a typical folder you'll need for a Cairngorm project and their purpose :

• business : The business folder contains Services.mxml which defines all web service definitions (ie. HTTPService, remoteObject etc). Also add Delegate files here. Delgates initiate the service calls and listen and respond to results/faults.
• command : Create a Command for each action. Commands are called from the Views in response to user interaction. They could update the model directly or use a Delegate to make a service request.
• control : The Controller connects events to commands so that when the view dispatches an event through the CairngormEventDispatcher the relevant command is called. These connections are made using addCommand().
• event : define the custom events (that the control connects to a command) that will be called by the view to trigger commands.
• model : The Model stores all required state data. Bind views to the model properties so they reflect changes to the model. Update the model through commands or in response to Delegate results.
• view : The basis for all views in our project will be modules and hence in same folder as the main application file. But it still makes sense to encapsulate many view functions within their own components. These should be stored here.
• vo : Value Objects (vo's) represent more complex elements of the model. Store value object definitions here.
  

Victorian Adobe User Group : August Meeting

The August meeting of the Victorian Adobe User Group will be taking place this coming Thursday (16th August, 2007) starting at 6 PM. This month Chris Burgess will be taking a look at web security in relation to Web 2.0, AJAX, RIA development. I doubt we can ever spend enough time learning more about web security. So I'm very much looking forward to Chris's talk.

We'll also be taking a look at the second part of the Actionscript 3 video tutorial from Cartoon Smart.

If you're in the state, available and interested it will be great to see you there. The venue has a limited window of easy access so make sure you check out the access details (note : site still branded as MUV) before coming.

Flash Quicktime Controller : Quicktime API

In the last two posts I've been looking at communication between Flex and Javascript using ExternalInterface. With the final goal being to create a Flex controller for a Quicktime movie (why?). In this post we'll take a look at the Quicktime API and some examples of how we would use it to communicate with Flex.

The Quicktime API is broken down into 4 sections :

• Movie Commands
• Quicktime Properties
• Movie Properties
• Track Properties

We'll be working with the first three of these sections. As mentioned in the last post we get Flex to call a javascript function to load the Quicktime movie once the Flex application has finished loading. I'm adding the Quicktime to the page using AC_Quicktime.js (instructions and code). This script has a function named QT_GenerateOBJECTText_XHTML that returns the required string for the embed which I add using innerHTML:

function qt_add(src)
{
var str = QT_GenerateOBJECTText_XHTML(src,'320','240',
'',
'autoplay','true',
'name','qt_mov',
'id','qt_mov',
'controller','false',
'emb#bgcolor','black',
'align','middle');
         
 var o = document.getElementById('qt');
 o.innerHTML = str;

 interval_ID = window.setInterval("qt_Status()",100);
}

The Quicktime movie needs to load completely before we can inform Flex of the movies duration and current position. To do this we need to use GetPluginStatus(). This function returns a string with one of five possible values (Waiting, Loading, Playing, Complete, Error). By using javascripts setInterval method we can regularly poll the Quicktime movie to check it's status. Once it's status changes to "Complete" we can end the polling and inform Flex that the Quicktime movie is ready. The code to check the load status looks like this (assuming a Quicktime movie with an ID of "qt_mov"):

var s = document.qt_mov.GetPluginStatus();

if(s == "Complete")
{
window.clearInterval(interval_ID);
//tell Flex app movies length
get_qt_duration();
}

I'm going to tell Flex that the movie has loaded by sending it the movies duration (in milliseconds) using the GetDuration method. Within Flex this value is used to set the HSliders maximum value :

 function get_qt_duration()
{
var d = document.qt_mov.GetDuration();

var o = document.getElementById('QT_SWF');
o.set_qt_duration(d);
}

You'll also notice in the status script that we setup another setInterval to regularly check the position of the movies playhead. We can get the time elapsed using GetTime. Within Flex we use this to set the HSliders value.

 function set_qt_time()
{
var d = document.qt_mov.GetTime();

var o = document.getElementById('QT_SWF');
o.set_qt_time(d);
}

Thats really all the information I need to send from the Quicktime movie to Flex. There is of course a few things I'd like to be able to do from Flex. Lets start with the basics ; I want a button to Play/Pause the movie. I don't want to go into the mechanics of the Flex side as I'm assuming that this is a common enough process. But in javascript I decided to go with a function to start and a function to stop the Quicktime movie:

 function qt_play()
{
document.qt_mov.Play();
play_state = true;
}

function qt_stop()
{
document.qt_mov.Stop();
play_state = false;
}

It really doesn't get any simpler than methods called Play and Stop. The next thing we want to be able to do is drag the slider in Flex and then update the Quicktime movies position. We can do this using the setTime method. But there is a small problem. Setting the movies position stops the movie. So you need to follow setTime with a Play() command. But in our example we won't want it to play if the movie is paused. Hence the play_state variable in the last two functions. Now we only restart the movie if the play_state is true :

function update_qt_time(t)
{
document.qt_mov.SetTime(t);

if(play_state)
{
 document.qt_mov.Play();
}
}

In Flex we are listening to the sliders thumbPress and thumbRelease events. I respond to the thumbPress by setting a variable called slider_drag_state to true. This is because I don't want the slider to update while I'm dragging it. On thumbRelease we call the javascript function update_qt_time with the new slider value and the Quicktime movies position is updated.

There is a lot more we could do with our Quicktime controller. But this is just a very basic proof of concept to check what is and isn't possible before moving onto the real application later in the year.

Flash Quicktime Controller : Javascript To Flex

In my last post we started looking at creating a Flex controller for a Quicktime movie. Specifically we looked at calling javascript functions from Flex using ExternalInterface. This time we'll talk about calling Flex functions from javascript.

As you may remember we called a javascript function after the Flex creationComplete event is fired so the Quicktime movie doesn't load until after the Flex application. Next we'd like to tell the Flex controller that the Quicktime movie is loaded. I'm not going to talk about the Quicktime API in this post so lets assume that there is a mechanism for testing the load state of the Quicktime movie. We have a javascript funtion qt_status which is listening for the Quicktime movie to finish loading. When the load is complete we want it to call a Flex function. For this to work we need to register this event within Flex before it's needed by the javascript function. Once again we'll use the creationComplete event (i.e before we load the Quicktime movie) to register the available functions.

ExternalInterface.addCallback("qt_complete", qt_complete);

As you can see we use ExternalInterface addCallback and send it a string representing the function name to call from javascript (can be different from the actual function name) and the actual Flex function name this refers to. As discussed in the previous post you need to check for the availability of ExternalInterface before adding this callback. Once created you can call this function using javascript, adding parameters if required , like this :

var myFlexApp = document.getElementById('QT_SWF');
myFlexApp.qt_complete(myParam);

For this to work the Flex applications ID needs to be set to 'QT_SWF'. With this done it's really simple to get javascript to communicate with your Flex application. In the next post we'll look at the Quicktime API and using it to interact with our controller.

Flash Quicktime Controller : Flex To Javascript

For the last few days I've been prototyping a Flex controller for use with Quicktime movies. The prototype is for an upcoming project that needs to interact with videos from a number of systems. At least one of those systems doesn't publish to Flash.

I'm going to talk about this over a few posts. In this first post we'll look at calling javascript functions from Flex.

In the end I used a HSlider component to create the scrubber and then added a Button to play/pause the movie. The interaction was handled by ExternalInterface on the Flex side and within the page javascript was used to communicate with the Quicktime plugin using it's API.

ExternalInterface is extremely easy to use. You simply need to pass the javascript functions name to the call method:

ExternalInterface.call("functionName");

You can also add parameters (required by the js function) after the function name. ExternalInterface isn't available in all browsers so you should wrap this call in a conditional to check if ExternalInterface is available :

if (ExternalInterface.available)
{
ExternalInterface.call("functionName");
}

Now all you need is a javascript function in your page to respond to this call. In my prototype
I don't want Quicktime to load until after the Flex app has loaded. So I created a js function called swf_init that is called after Flex's creationComplete event. This function adds the Quicktime movie to the page. In the next post I'll talk about creating callbacks with ExternalInterface so javascript functions can talk to our Flex app.

Flickr v YouTube : Crisis Response

Just reading a post from the Flickr blog about photos people have been posting about the Minneapolis bridge collapse. Once again I was fascinated by the perspective on news events that we get from the Flickr community. The world news services invariable present a very narrow and predictable window onto events. But Flickr allows a wide range of individuals to share these moments from their perspective.

One question that came to mind as I browsed the Flickr images relates to how video sharing services respond to these events. To test this I used the same search terms on YouTube as had been used in Flickr. The contrast was amazing. There were no personal videos of the event on YouTube (except for headshot of some guy talking about how he heard about it). Every video was taken from the news. Why is this? Does it tell us something about the communities that use Flickr compared to YouTube? Does it tell us something about the quite different relationship with have to photographs as compared to video? Is it really just a reflection on the availablity of still cameras compared to video cameras. My guess is that it's a combination of all of these (and no doubt a few I haven't considered). What are your thoughts?

FFC : Button - Limitations

After making good progress developing my own LinkButton Fireworks Flex Component (FFC) I was keen to take this a bit further by extending one of the existing FFC's. The natural progression from the LinkButton was to take a look at the Button component. If you installed the Flex Style Explorer you can quickly have a play with the available style options for the Button. There are a number of styles that the LinkButton and Button share. But you'll quickly notice one big difference. The Button has a background (all states) with a gradient and you can change the gradients colors and alpha. The fill colors are controlled using the fillColors array. It looks something like this:

fillColors: ['#FFFFFF','#CCCCCC','#FFFFFF','#EEEEEE'];

The first two values represent the colors for the up states top and bottom colors respectively. The second two values represent the colors for the over states top and bottom colors respectively. The down state is controlled by the themeColor. It turns out to be pretty easy to display changes to the fillColors values by setting the fills gradient.nodes color. The nodes is an array with the Button background having two nodes. You would set the color of one node like this :

var vals   = Widget.elem.customData["currentValues"];
bg_obj  = Widget.GetObjectByName("up_fill");
bg_obj.pathAttributes.fill.gradient.nodes[0].color = vals[8].value; 

Setting the fillAlphas is a similar process except that you use the gradient.opacityNodes color. There is one crucial difference and that is the addition of an alpha component to the color value. For example, '#FFFFFFFF' is a white opacityNode set to 1.0 (no transperancy); '#FFFFFF00' is a white opacityNode set to 0.0 (full transperancy). The tricky bit here is working out the hex values for the alpha component. Perhaps there is a neat line of javascript that someone could suggest to sort this out. But in the end I wrote a function with a series of conditionals to set values at 0.05 increments. A bit awkward but effective enough for my needs.

This was all good. But as I was working through these issues I finally came to an impasse. As you can see the fillColors property is an array. That's alright we can have an array. But to my knowledge we can't have an array with a color picker for each index. That means hand typing the colors and I was really aiming for better. The other option is to use four values and to combine them for MXML output. This may be an option and I'll probably explore this option. But this got me thinking. What would be great is if you could develop a Flash panel for individual components that shows inside the Symbol Properties and allows you to set properties using a GUI (ie. like the Flex Style Explorer). Ideally this swf just needs to exist alongside the graphic and jsf files for it to be used. So if Button.swf existed in your custom component folder it would become the components editor.

100+ WordPress Plugins

Mashable has published two essential lists for anyone working with WordPress. I'm currently working on a project involving WordPress. I've spent many hours researching WordPress tools for specific purposes. But there are many plugins on these lists that I hadn't found but really need. If you need a plugin then start your search with these lists :

• 50+ WordPress Plugins for Multimedia

• 50+ Tools For The WordPress Admin

• 30+ WordPress Plugins To Get More Blog Readers

• 30+ WordPress 3-Column Themes
• 30+ WordPress 2-Column Themes
• 30+ WordPress Plugins for Statistics

"Geeking Out" On Fireworks Flex Components

I've been a regular reader of Alan Musselman's blog for as long as I can remember. If you are at all interested in using Fireworks then Alan is the man to read. Even if it's only to discover all the other great blogs he mentions. So I was very excited to read his blog today and discover his post was about this blog. Specifically his post relates to my ongoing experiements with building Fireworks Flex Components (FFC's) with links to four of my posts on this topic. Below is the complete list of posts on FFC's :

• Fireworks CS3 : Creating Flex Symbols

• Fireworks Flex Components : Extended

• Fireworks : Flex Style Explorer

• Fireworks Flex Components : Label

• FFC : LinkButton (Managing State)

• FFC : :LinkButton (flexClassDefinition)

• FFC : LinkButton - Tidying Up
  

Flex LinkButton : Background Color

This post is a variation on an earlier post where I talked about having no background on Flex's LinkButton rollover state. This post relates to a question I saw on a forum about how to set the color of the LinkButton's background in the up state (no rollover). The LinkButton by default sets it's background transparent when there is no user interaction. There isn't any style attribute you can use to directly change this behaviour. To override this behaviour you need to set a skin :

 LinkButton {
   upSkin:Embed("up_skin.png");
   overSkin:Embed("over_skin.png");
   downSkin:Embed("down_skin.png");
}

In this example I'm using a graphic. But you could also use a Flash symbol (see earlier post). The behavior of the LinkButton's label is unchanged by skinning the component in this way making this quite a useful approach. But if you want your LinkButton to have a background and you set that with a skin then you might want to consider if it's not really a Button that you need. The Button provides more style options than the LinkButton and may therefore be easier for this sort of use.

Web 2.0 Shopping Spree Goes Mobile

Since the iPhone's release there has been at least a post a day of Web 2.0 services releasing iPhone applications. In fact, throughout the year there has been a steady trickle of announcements about this and that service making deals or releases relating to mobile access. We've also seen near daily announcements of Web 2.0 acquisitions by Google, Yahoo and Microsoft (to name a few). But one thing I don't remember seeing (please correct me if I'm wrong) is mobile phone companies buying Web 2.0 companies. Which is why I was interested to read that Nokia had purchased media sharing site Twango. "The plan is to provide a seamless integration of Twango on both the Internet and on your cell phone." It seems natural that as mobile phone companies look towards better integration with the web that they would want to get involved in developing services. But if mobile companies are going to join the Web 2.0 shopping spree it would seem the buying bubble just got a whole lot bigger.

Adobe CS3 : Install Headache

I've just spent a good part of the last 24 hours installing Adobe CS3 Web Premium.  Sure I didn't spend the whole time on the install.  But I was doing something towards it for most of my waking hours.  I have never had so much trouble installing the web studio before.  Perhaps the most disappointing part was that I couldn't use my serial number with the trial software I installed last month.  Consequently I had to uninstall every application before trying to install the suite (each application took 20 minutes to uninstall).  This was a real headache as I don't have a DVD drive and the suite only comes on DVD.  This is clearly mentioned in the system requirements so I can't grumble here.  But it wasn't an unreasonable assumption that I could use my serial number to activate the trial software.  In the end I had to transfer the 2GB of install onto a Flash drive and install from there (I wasted quite a bit of time exploring other options before I found this solution; which required the purchase of a 2GB+ Flash drive).

I made one big mistake while uninstalling the Flash trial; I didn't uninstall the Flash player and plugin because I needed them for Flex. When I ran the installer I couldn't install Flash because it said I already had Flash (because I hadn't uninstalled the player and plugin).  In the end it took another 20 minutes to uninstall the two remaining Flash components before I could re-run the installer.

The final small obstacle was that I couldn't activate the software without disabling my firewall.  This wasn't a big thing (though I didn't feel comfortable about needing to disable my firewall). 

My question at the end of all this is why does it need to be so difficult (and I know from searching that my experience is mild compared to some).  Most of the issues seem to come from an attempt to make the different applications interact more seamlessly.  Most of the install (and uninstall) time is spent dealing with "shared components".   But I'd give that up in a second if I was given some options about how I want to install and use the software.  I rarely need my applications to work hand in hand.  What I want is for them to start quickly, run efficiently and take care of the job at hand with as little fuss as possible so I can move onto to the next part of the workflow.  I'm sure I'm not speaking for everyone.  But at the same time I'm sure I'm not the only user who feels this way.

Web 2.0 Trendmap using Web 1.0 approach

Over the last few days I've recieved emails and seen posts about the Information Architects 2007 Web Trend Map. The map attempts to map out current web trends using the Tokyo subway map as the basis for design. Unlike a few commentators at TechCrunch I always find these things thought provoking. But I couldn't help but feel that some of the data was probably out of date before the site went live. For example, Last FM and Pandora both show nice conditions ahead. But recent discussions about royalty rates tell a very different story. I don't think you'd have to look too closely at the map to find many similar anomolies. The reason for this problem is that the approach to the map is too Web 1.0. The data is static and must await a process of review and revision before changes can be made. Compare that to a web 2.0 approach were the data is harvested from a web service or user contributions (or a combination of both). Obviously the design needs to be fairly static. It would be difficult to get the map to redraw itself based on dynamic data. But there is no reason that each node and it's icons couldn't be dynamically generated. This would remove the irony of having a static image attempting to map the dynamic culture of the contemporary web.

Position Vacant : Adobe Competitor Required

It's taken a while to sink in. But the biggest disappointment for me post ReMIX is that Expression and Silverlight are light years away from offering any serious competition to Adobe's Dreamweaver/Flash/Flex ( see Expression : Dreamweaver Cloned and ReMIX : Silverlight Surprises) . I guess I didn't really expect Microsoft to offer a genuine challenge in this arena. It's not something they have ever been good at. But I think it's very important that someone does offer an alternative. It's not that I don't love what Adobe has been doing. But monopolies are always bad. Adobe don't quite have a monopoly and it is hard to use that term when Microsoft is the competition.

I find myself thinking over Chafic Kazoum's perspective ; that Microsoft isn't really interested in competing with Adobe. They are just offering their developers an alternative to discourage wandering eyes. In other words the semblance of competition will be enough to satisfy most Microsoft developers. I was sceptical when I first read this view. But my experience at ReMIX suggests it has merit.

But that doesn't help us. We need competition. Competition fosters innovation and competition keeps software prices down. There are options out there (i.e OpenLaszlo) but they are too dispersed and too small to have a real impact. Perhaps what we need is for someone to start buying up all the Adobe competitors to harness their combined potential.

Victorian Adobe User Group : July Meeting

The next meeting of the Victorian Adobe User Group will take place this coming Thursday from 6 PM.

For the main presentation Brian Chau from Adobe will be talking about Adobe Fireworks CS3/Flex integration and the new Fireworks Photo Gallery feature. Brian is always a lively and informative presenter. Fireworks has always been an undervalued application and these new features extend it's value to a whole new group of users.

We'll also be looking at part one of a video tutorial called Actionscript 3 Basics from Cartoon Smart. Cartoon Smart is a great resource for learning about Flash (actionscript and animation) and Web Design. They have very kindly provided a couple of their video tutorials for use by the user group. With the introduction of Actionscript 3 into Flash CS3 this is a very timely presentation. I've always felt that one of the biggest hurdles to moving to Flex development isn't Flex itself but rather the change to AS3.

If you're in the state, available and interested it will be great to see you there. The venue has a limited window of easy access so make sure you check out the access details (note : site still branded as MUV) before coming.

FFC : LinkButton - Tidying Up

This is my third post looking at creating a LinkButton Fireworks Flex Component (FFC). In the first post we looked at using a state property to manage the appearance for different states of the FFC within Fireworks. This state property created a problem with the exported MXML by introducing an invalid property so in the second post we talked about using flexClassDefinition to get more control over the exported MXML. In this post we'll look at some of the small details that we missed in those posts.

Firstly, let's look at adding a property to manage if the LinkButton is enabled. This property is included in the default FFC's and I'm aiming to maintain consistency with those as much as possible. We actually need two properties; enabled (a Boolean) and disabledColor (a Color). The disabledColor effects the text color when the LinkButton is disabled. All that's required to make this work is the addition of an additional if statement within applyCurrentValues :

if(enabled)
{
switch (state)
{
//states managed here
}
}
else
{
label_obj.pathAttributes.fillColor = values[13].value;
bg_obj.visible = false;
}

The second missing detail relates to a group of three properties that are relatively easy to implement ; fontWeight, fontStyle, textDecoration. Each of these properties have two potential states (which vary for each). So the best way to handle this in the properties is with a ComboBox :

values.push({ name:"fontWeight", type:"ComboBox", value:"bold,normal,bold" });
values.push({ name:"fontStyle", type:"ComboBox", value:"normal,normal,italic" });
values.push({ name:"textDecoration",type:"ComboBox", value:"normal,normal,underline" });

This creates a slight complication in applyCurrentValues because in Fireworks each of these settings is actually a Boolean so we need to do a simple if else statement for each property :

if(values[9].value.split(",")[0] == "bold")
{
label_obj.bold = true;
}
else
{
label_obj.bold = false;
}

if(values[10].value.split(",")[0] == "italic")
{
label_obj.italic = true;
}
else
{
label_obj.italic = false;
}

if(values[11].value.split(",")[0] == "underline")
{
label_obj.underline = true;
}
else
{
label_obj.underline = false;
}

Adding these also creates a problem in the export. Because it outputs all the options to the MXML rather than just the selected one. I could make them all Text but then you'd need to know the correct value to type in. Which could lead to all sorts of problems. As is all you need to do is to remove the unwanted options from the MXML. I'm keen to fix this but I haven't found an answer as yet. With some luck a kind reader will emerge with the solution.

There are four other styles that could be added to our LinkButton FFC ; cornerRadius, paddingLeft, paddingRight, letterSpacing. They could be easily added to the properties list. But I've yet to find a way to update the FFC to display these styles. Everything else we've added is able to be visualised and I don't see any value in having the styles included if they can't be displayed. The whole point is to be able to create a document that can be used to create a design and to output a working Flex file. So for now I've left these styles out until I can find a way to get them working.

If you want to use my LinkButton FFC or use the files as the basis for your own FFC's or you want to experiment with the missing details you can get the files here.

FFC : :LinkButton (flexClassDefinition)

In my last post we talked about creating a LinkButton Fireworks Flex Component (FFC). By the time we finished we had a component that could update and export the LinkButton's different states. We could also control the label, font and fontSize. As you may remember there was a problem in the exported MXML. There isn't a state property for LinkButton and consequently Flex Builder correctly flagged an error.

We can get more control over what is exported to MXML by using the flexClassDefinition. The flexClassDefinition is an object with some useful properties that can be added to customData. The basics looks like this:

var definitionObject = new Object();
Widget.elem.customData["flexClassDefinition"] = definitionObject;

You won't see this defined in the default FFC's (e.g Button) as this is handled by the exporter. But for our custom components this mechanism is needed. I'm not going to talk about all the available properties (because there is an article that does a much better job than I ever will) only those we need. Let's start by removing 'state' from the exported MXML. To do this we define the attributes we wanted exported:

definitionObject.defaultProperties = ["id","x", "y", "width", "height"];
definitionObject.attributeProperties = ["label", "enabled"]; 

The defaultProperties is an array of attributes that we haven't defined as properties and that we want to have included. The array can also include; alpha, source and styleName. By not including these within defaultProperties they won't be included in the export. If one of the included defaultProperties isn't required (for example if we don't change the FFC's opacity it's alpha attribute isn't required) it isn't exported.

The attributeProperties is an array of the properties that we've defined that we want included. By not including 'state' in this array then 'state' isn't included in the exported attributes. You'll notice I've kept this list short and consequently none of the style properties would be exported. The reason is that I actually want them defined as a style. In fact ideally I'd like to have one style defined for all LinkButtons if they look the same and to use custom styles if they are different. I want the same styling intelligence we get using Text to create Labels (see FFC : Label for more on this). We can get this exact behaviour by defining styleProperties :

definitionObject.styleProperties = ["color","textRollOverColor",
       "textSelectedColor","rollOverColor",
       "selectionColor","fontFamily",
       "fontSize","disabledColor"];

Defining styleProperties like this earns us the following style definition in the exported MXML :

<mx:Style>
 LinkButton {
  disabledColor:#AAB3B3;
  fontSize:11;
  fontFamily:Verdana;
  selectionColor:#7FCDFE;
  rollOverColor:#AADEFF;
  textSelectedColor:#2B333C;
  textRollOverColor:#2B333C;
  color:#0B333C;
 }
</mx:Style>

That brings us pretty close to a fully functional LinkButton FFC. There are still a few things that can be added and a few problems to be solved. But let's talk about them next time. Until then you might want to take a look at the source files.

FFC : LinkButton (Managing State)

A little while ago I wrote a few posts relating to creating a simple HRule Fireworks Flex Component (FFC). I chose the HRule because it wasn't interactive and hence relatively simple to implement. But now I'd like to move on and do something a little bit more interactive and to tackle some of the issues involved. Looking around I settled on the LinkButton. LinkButtons display a label with no background in the normal state. On rollover the background is displayed and the label changes color. On mouseDown the backround color changes and the label color could change (the default is that the rollover and selected label colors are the same).

Looking at the Button component from the Flex Components you'll notice a State property with three options ; Up, Over and Down. In the Button FFC changing the textRolloverColor and then selecting the Over state you'll see the FFC update to display the new textRolloverColor. This State property allows us to preview the style changes that relate to different states of an interactive component. Adding this State property to the setDefaultValues function is our first job when creating an interactive component. It looks like this :

values.push({ name:"State",type:"ComboBox", value:"Up,Up,Over,Down" });

Within applyCurrentValues we'll need to get the current selection of this property:

var state   = values[0].value.split(",")[0];

Then use the value of state to decide what values to apply. Before doing that lets take a look at the structure of LinkButton.graphic.png. Like the HRule it's very simple. There is a text field named 'label' and a rectangle named 'bg'. For each of the selected states we'll need to update the color of 'label' and the color and visibility of 'bg'. To do this we need to define 5 properties within setDefaultValues ;

values.push({ name:"color", type:"color", value:"#0B333C" });
values.push({ name:"textRollOverColor", type:"color", value:"#2B333C" });
values.push({ name:"textSelectedColor", type:"color", value:"#2B333C" });
values.push({ name:"rollOverColor", type:"color", value:"#AADEFF" });
values.push({ name:"selectionColor", type:"color", value:"#7FCDFE" });

Here's the code from applyCurrentValues that uses the current state to set these values;

var state   = values[0].value.split(",")[0];

var label_obj = Widget.GetObjectByName("label");
var bg_obj = Widget.GetObjectByName("bg");

switch (state)
{
 case "Up"  :
  label_obj.pathAttributes.fillColor = values[2].value;
  bg_obj.visible = false;
 break;
 case "Over":
  label_obj.pathAttributes.fillColor = values[3].value;
  bg_obj.pathAttributes.fillColor = values[5].value;
  bg_obj.visible = true;
 break;
 case "Down":
  label_obj.pathAttributes.fillColor = values[4].value;
  bg_obj.pathAttributes.fillColor = values[6].value;
  bg_obj.visible = true;
 break;
}

As you probably spotted the tricky bit is getting the value of state. But this line is copied straight out of the Button component so the only credit I get is for being smart enough to look at those components. The rest is a matter of changing the fillColor for the 'label' and 'bg' to the relevant colors and setting the visible property of 'bg'. Set visible to false for the 'Up' state and true for the others.

There are a few other relevant properties/styles we can easily change. The simplest properties are the label property (controls the text visible on the LinkButton), font and fontSize :

//setDefaultValues after state
values.push({ name:"label",type:"Text",value:"Button"});
//setDefaultValues after selectionColor
values.push({ name:"fontFamily", type:"font", value:"Verdana" });
values.push({ name:"fontSize", type:"Text", value:"11" });

//applyCurrentValues after state switch statement
label_obj.textChars = values[1].value;
label_obj.font = values[7].value;
label_obj.fontsize = Number(values[8].value);

All this works nicely within Fireworks but there is a problem that you may have spotted. When we export to MXML Flex Builder will display an error because 'state' is not a valid attribute for the LinkButton (all Fireworks properties are added as attributes). For now we can simply remove the state attribute. But to fix the export we need to talk about "flexClassDefinition". Let's save that till the next post. In the meantime you can look ahead by downloading the source files.

BlueDot Makeover

I've been using BlueDot since the start of the year for the purpose of managing my bookmarks. Originally I'd tried del.icio.us. But BlueDot had some additional features that I found handy. Like with any service there are always improvements that could be made. Hence it was a pleasant surprise when a page refresh revealed a BlueDot home page makeover. BlueDot's design was always better than del.icio.us but these changes make it even more so. The improvements are simple; near the top of the page there are now three tabs. One tab each for Dots, Tags and Favorites. Placing Favorites on a tab has allowed them to remove it from what was an increasingly busy sidebar. Tags remain on the sidebar but having a tab makes them more readily accessible. It's only the most popular Tags but thats fine especially when they each have a graphic to simplify selection. This Tag page existed before it's just that it was too hard to find to be useful. The other obvious difference is the addition of a slogan (Stuff you care about) to the logo. As I said the differences are simple. But they are improvements and when you are a regular visitor then any improvement is a big one.