AIR : User Agent String

While we were checking out the AIR iPhone we got to wondering what the server sees when you browse to a page using mx:HTML. It was simple enough to test by browsing to one of our own websites on the AIR iPhone and then checking out the server log. It was pretty interesting. The user agent string was :

AppleWebKit/420+ (KHTML, like Gecko) Safari/419.3 Apollo/1.0.Beta1

I found it interesting that it referenced both AppleWebKit and Safari. But the most interesting thing is that it still shows Apollo rather than AIR. I tried publishing my own using the Flex Builder 3 Beta and it still shows Apollo. I assume that dark corner got missed in the move from Apollo Alpha to AIR beta. I'll need to go and have a little think about how I want to deal with this in our server log application.

AIR iPhone

Can't help myself but point to this. Joe Johnston from Knoware. Has posted a really neat AIR application that looks like and has some of the functionality of the iPhone. One of the really neat things that AIR makes possible is that the browser will actually browse and search the web. The search field for Google is a bit tricky to select and the search results are impossible to read. But what a great way to demonstrate a gadgets functionality.

Is this part of the future of AIR? In the future will all new gadgets be released with an AIR application to download and try out the gadgets features?

Fireworks CS3 : Creating Flex Symbols

Fireworks CS3 added the ability to export an MXML layout from your design for use with Flex. To assist this it includes a selection of common Flex components. These components are stored in Windows > Common Libraries > Flex Components. By adding the Button to your design and exporting to MXML you will find yourself with the appropriate MXML for a basic application with a Button. This is great as far asit goes. The Flex Components within Fireworks represent a small subset of the available Flex components. You have very limited options for styling these components and everything will be positioned absolutely. The good news is that it's not too hard to create your own Fireworks Flex Components (FFC's)and that you can add more styling options quite simply. That's what I will talk about in this post. We will go through the process of creating a simple FFC : a HRule.

There are two files required to make an FFC ; a Firework's png containing a symbol and a jsf file. So to get started create a new file in Fireworks CS3 (I made mine 50 x 5px). Next use the Line tool to create a horizontal line that stretches from the left to the right edge. Select your new line and give it an instance name (top left of the property inspector ; I called mine "line"). Copy and paste the first line, move it down one pixel and change it's opacity to 30 and call it shadow (for reasons I hope are obvious or will be soon). Finally select both lines and select F8 (or Modify > Symbol > Convert To Symbol) to convert your line to a symbol. Name your symbol HRule and select "Save to Common Library" and select "OK". A "Save" dialog appears open to <user settings>\Application Data\Adobe\Fireworks 9\Common Library\Custom Symbols (Windows), or <user name>/Application Support/Adobe/Fireworks9/Common Library/Custom Symbols (Macintosh) directory. If you save your symbol there it will appear in the Common Library panel under Custom Symbols. It must be saved within Common Library to appear within the Common Library. But you can create your own folder within Common Library with a more useful name. The symbol will be saved as ComponentName.graphic.png (in this case HRule.graphic.png). The distrubing thing is that your symbol will disappear from the stage and you'll need to find it within the Common Library and drag it onto the stage to continue.

So far so good! Now we want to create the javascript file that will power the symbol properties and control what MXML is created. To simplify this a kind someone has created a command panel to help with this process. So select the newly created HRule instance and then select Commands > Create Symbol Script. This will open an editor dialog. Select the symbol you want to edit using the button provided. If a symbol script exists for this symbol you will be prompted to import and continue editing that file. Otherwise you can start adding attributes.

The HRule has three style attributes that we'll want to change ; shadowColor, strokeColor, strokeWidth. Select the "+" at the top of the properties area. You'll notice under element name that our two lines are listed. Let's start by selecting "line". Now under attribute select fillColor; this is the Fireworks property that will be changed. Set property name to strokeColor this is what will be displayed in the Symbol Properties panel and written into the MXML. Finally you can select a default color if you wish. Repeat this for shadowColor (the strokeWidth takes a bit more work to get Fireworks to reflect the changes so I'm leaving this out to keep the example clear and simple). You can adjust the order using the arrow buttons at the top right. When you are happy select "Save".

We're nearly there. Just one more step. The script creator does most of the work for us. But I found there was one change needed so locate the jsf file (in the same folder as you saved the symbol) and open it in your preferred editor (Dreamweaver will do fine). Locate a function called "setDefaultValues" near the top of the file and add the following line after the opening curly brace:

Widget.elem.customData["flexClassName"] = "HRule";

In any new FFC's you create exchange HRule for the Flex components name. That should be all we need to do. Now to test it create a new file in Fireworks (say 60x10 px if you used my suggested dimensions). Open the "Common Library" panel if it's closed and select reload from the panel menu. Look for a folder with the same name you saved your HRule into. Open the folder and you will hopefully see your HRule component; drag it onto the stage. You should be able to change the colour of the stroke and it's shadow using the "Symbol Properties" panel.

Finally, go to File > Export and under the export options select "MXML and images" and then "Save". If you open that MXML file you should see an HRule element with the colors you selected. That's it.

HRule is a simple example and we haven't implemented all the available styles. We could easily add the strokeWidth directly to the jsf file (it is defined in the source files). It won't display the changes within Fireworks which limits the usefulness from a design perspective. But it will be included in the MXML file which helps in Flex. A good place to learn more about the possibilities is to take a look at the png and jsf files for the actual Flex Components. To find these look in application_folder/Adobe Fireworks CS3\Configuration\Common Library\Flex Components\. You can get a copy of my source files to help if you get stuck.

Contribute CS3 - Blogging Problems

I'm particularly interested in the blogging features of Contribute CS3 and as mentioned in an earlier post I've been focussing my tests on these features. I had no trouble creating a connection to my Blogger account or making a new post. But it has proved to be impossible to actually edit an existing post. I can easily find and select the post. But actually trying to open it for editing gives me a wild sequence of alert dialogs. I firstly get a "failed to open document" alert followed by a "Save changes to untitled-1?". This cycle repeats and often leads to Contribute crashing.

Naturally I went searching for some documentation or work around for this problem on the product support site; with no luck. So I tried the Adobe Support Forums searching first and then when that failed posting. The post has been there for the last three days with no response. Which lead me to start looking around the forums. What I found were a group of lost souls unable to find some desperately needed help. I eventually did find a thread where an Adobe person offered some support after three weeks of frustrated posting (mostly about their frustration).

So what we find is a great feature that seems to have quite a few bugs that Adobe seems keen to ignore. I'd love to get this feature working as it would greatly simplify my life. So how about some help here Adobe. Even acknowledging the problem would be better than the current silence.

ReMIX : Expression Web - Dreamweaver Cloned

Expresssion Web, Microsoft's newest web developer tool has been out for a while. But after an initial review of the functionality and looking at a few screenshots I hadn't looked much further. Over the last couple of days at ReMIX I realised why. Expression Web is really a scaled down version of Dreamweaver. It has many of the features (but not all; apparently support for PHP development will be introduced in version 2) presented and organised in a way that is almost identical to Dreamweaver. A lot of the time it just looks like Dreamweaver with a butt ugly skin. Some of Expression Web's "exciting" features have been available since Dreamweaver MX (2002?). For example they were very proud of the following features:

• Design/Code and Split views
• CSS Properties panel
• CSS style editor dialog
• Page Structure breadcrumbs
• Application panel with data bindings
• Master Templates and nested templates
  

I'm guessing from the audience response that these were new and exciting features to many attendees. Which makes me wonder what rock they've been living under for the last five years?

All ReMIX attendees recieved a free copy of Expression Web and at work we'll find a suitable test machine for the install so all may gaze at Expression's splendor. But only for a little while. Because we'll need to get back to doing some real work with Expressions more fully featured parent : Dreamweaver.

ReMIX : Silverlight surprises

After the Day 1 keynote at ReMIX we moved into the real business : the presentations. During the day there were two real areas of surprise that emerged for me. The first relating to Silverlight and the second was relating to Expression Web and Visual Studio 2008 (I'll talk about this in a seperate post).

After MIX there was a lot of blog traffic about Silverlight. Following along it was clear that Silverlight was a genuine challenger for Flash's crown. But what got a bit lost in all the hype was how much of the excitement was about what Silverlight might offer. Today I realised how limited a platform Silverlight currently is. The original beta release doesn't provide many common controls that are essential for any RIA. For example, they hadn't considered providing a text input control. The upcoming version 1 release will fix this oversight. But many important controls will still be missing and are not going to be part of a version 1.1 release slated for early 2008. Examples of missing controls are a Tree view, Accordian and dataGrid. Equally surprising for someone with a Flex background is the abscence of a styling mechanism and the very restrictive layout engine (both are being 'considered' for v 1.1).

One of the questions I had been asking myself is how to approach this new technology. It seems clear that both Flex and Silverlight will offer advantages in different areas. Should I attempt to have a similar level of knowledge across both technologies or should I aim for expertise in one and maintain a good overview of the other. Certainly the developer experience in Flex and Silverlight is very similar. Both use XML for visually laying out the application and code to manage user interaction. But there is still a lot for new comers to learn in the detail of the differences. From what I saw today it is clear that I can put off my decision at least for the next year.

Silverlight is a long way from being ready. I already mentioned the lack of many necessary controls. But presentations demonstrated that Silverlight requires a lot of unnecessary complication to perform simple operations. This isn't surprising. Earlier versions of Flex were quite confusing compared to the current version with most of the refinements occurring during the Flex 2 beta. All of this, in my mind, suggests it's too early to jump in and try to gain any sort of detailed understanding of Silverlight. As the Silverlight framework finds it's feet there will be regular developer tremors as the ground shifts around them. I recommend we meet back here one year hence to re-assess Silverlight's readiness.

ReMIX : UX Sux's

Today was the first day of the ReMIX 07 conference in Melbourne. ReMIX is the Australian version of Microsoft's recent MIX conference and was designed to kick start Silverlight development in Australia. During the keynote this morning there was a lot of talk about getting designers more involved in the development process. Despite that the vast majority of the audience were self confessed developers. Still I wonder how inclusive the designers (and for that matter the developers) found the language. For example, Brian Goldfarb spent much of the keynote talking about "form factors" (ie mobile phones are an example of a form factor, desktop computers are another example) and "market vectors". I imagine the only attendees who might feel at home with this jargon are involved in marketing not interactive design. Even worse it turned out the obscure UX used throughout the agenda turned out to be an acronym for "user experience". It seems that even bad acronymns can offer a poor user experience. More humourous was Goldfarb's insistence on referring to R.I.A's as a whole word (pronounced ree-a) making me think of nothing so much as diarrhoea.

Whats my point? It just this; if you can't talk a language that your audience can relate to how do you hope to convince them that you developed a product with their needs in mind. Microsoft have never really understood design and it's importance for usability. But they've never tried to develop designer tools before. If they have any hope of getting designers on board they have to understand designers and what they are looking for in a software package. Flash itself was never that cool. It became cool because some really cool designers embraced and made it do cool things. If Silverlight is to become as successful as Flash it needs to engage designers. But it will never achieve that as long as they fill their speeches with marketing jargon.

Dreamweaver -> Spry -> AIR

Continuing my CS3 trial I was keen to have a look at how Spry is implimented within Dreamweaver. Further to that I was very interested in the process for creating AIR applications using Dreamweaver. My explorations remain at a very basic level. But it still seems worth a short post.

Firstly, lets look at Dreamweaver and Spry. The most commonly used Spry components now have their own tab on the insert bar. Therefore, to add a new data set you select the "new Spry Data Set" button. In the dialog that appears you paste in the data source and select "get Schema". You then select the node of the schema that contains the data you want to work with. If publishing to the browser the usual security limitations apply. If publishing to AIR they don't. Once a data set is defined you can insert elements from the Bindings panel. They need to go into a region and you'll need to use a repeat if the element repeats. These last two options are on the Spry insert tab. What I found nice was that these components could be added to almost any html element and appeared with code hinting if you start typing "spry".

You can preview this in a browser using F12. But if you install the AIR extension (available from Labs) it can be previewed using AIR (Preview > Preview in Adobe AIR). The AIR preview is so simple it's ridiculous. The publish option for AIR seems hidden by comparison. It's within the Site menu (Site > Package as Adobe AIR Application). For some reason publishing my simple test file to AIR was a real buzz.

Anyway, that's all I have time for. If time allows I hope to do some further tests with Spry and AIR in Dreamweaver.

Blogging From Contribute CS3

I'm currently trialing Adobe CS3 prior to upgrading from Macromedia Studio 8. In particular I was keen to try out the blogging options in Contribute CS3. Which is exactly where I'm writing this post. This functionality was released a few months ago. But I prefer to manage upgrades as new suites are released. I'd also tried this from work but have never been able to create the connection. Now I know that the problem is probably proxy related as I had no problem making this connection from home. What's nice about posting from Contribute is that you are writing directly into your page with all the pages available styles. So you get a real feel for how the final post will appear. The Blogger editor is very sensitive to whitespace and so you can end up with some unexpectedly large spaces in your post.

One potential limitation is Bloggers use of labels instead of Tags. There is a drop down in Contribute listing all existing Labels and you select the ones you want to use. But there doesn't seem to be a mechanism for adding new Labels. Which means I'll probably need to edit this again in Blogger to add Contribute as a Label. But perhaps I'm just missing the option. It is very much a first try.

Gears, Pipes and Mashups

I'll be doing a presentation this Thursday evening at the Victorian MUV. The presentation will be an overview of the Mashup landscape combined with emerging trends as evident in Google Gears and Yahoo Pipes. We were talking about this a bit at Thursday's talk at the Gordon TAFE. I was pretty surprised that many of the people there were unfamiliar with these developments. Which is good news for my talk as it means you may find it all very new and exciting.

Jody Fenn will also be talking about UI Prototyping with Acrobat. This is a technique we've been using more and more as the applications we develop grow in complexity. But it's a great way to develop, test and get feedback on relatively straightforward websites. I can strongly recommend Jody's talk to anyone involved in interface design or development.

• Download Presentation
  

Flex presentation : Gordon TAFE

I will be doing a presentation at Gordon TAFE this morning. Like the last presentation I did it will be an introduction to the Flex basics ; layout, components, styles, actionscript basics. We have a bit more time so I have also added some information on data binding and states. This post is essentially to make the links and presentation available.

Resources:

• Useful links : http://bluedot.us/users/geekglue/tag/flex/basic
• Getting Started with Flex presentation notes (pdf)
  

Google Street View : Ed Ruscha Revisited

Thinking about Top Street Views on the trip home I suddenly remembered how old an idea this actually is. In 1966 the American artist Ed Ruscha created a fold out book showing "Every Building On Sunset Strip". The technique was an automated camera attached to the side of a car. By driving down the street at a fixed speed he was able to photograph every building. Sound familiar.

Every building wasn't Ruscha's only photographic book. Similarly prescient was 1967's "Thirtyfour Parking Lots" photographed from a helicopter. Inspired by this book and the easy access of Google maps the blogger at AMP decided to create a Flickr set of parking lots.

Ruscha eventually went back to his painting. But it may turnout that his most durable contribution was his trail blazing photography.

Google Street Views : Product Placements

I guess most of us would have had a look at Google Street View (read more ) by now. In case you haven't it's basically a series of 360 panoramas of a city. You can use Google maps to look around the city streets that have been mapped. Where they've mapped a city they've done large chunks of the city. The way they make these is to drive around the city in a van with a special camera mounted on the roof. One unexpected outcome is all the odd details that are hidden in the details. It hasn't taken long for Top Street Views to take a Digg approach to rating these hidden moments. For example is this really a house breaker.

Looking at this shot of the Street View team it seemed to me it wouldn't take long for Google to start selling product placements. Imagine two girls holding a giant logo waiting in a street at a certain time for the Google van to take their picture. Or an actor from a current TV series doing something in character that would provide a hint to an upcoming "special event". There could even be artistic interventions. Perhaps lonelygirl15 could make an appearance. The opportunities for viral promotion escapades seem endless.

GoLive Lives

Since it was announced that Adobe would absorb Macromedia there has been much speculation about what products might be retired. A few weeks ago we saw the official announcement that Freehand was going to vector heaven. Which was extremely sad news for me as Freehand was and remains a tool I use almost daily in so many ways. Sure I've worked with some great graphic designers who curse the ground that Freehand occupies. But I still argue that once to get used to it's unique way of doing things it's a very versatile tool.

Anyway that's neither here nor there because the point of this post is that GoLive 9 is now available. I don't know anyone who suggested that GoLive would see another version. Dreamweaver is so obviously superior and why support two products that serve one purpose. Though I note that there is a large section titled "Interested In Switching?" (similar to what they did with Freehand's death notice).

WordPress Plugin Limbo

I've spent a lot of my spare time this last week taking a closer look at WordPress . For those who aren't sure WordPress is an open source blogging application. It's very easy to install (as far as web applications go) and many hosting solutions allow you to install it using fantastico (or similar). Anyway I'm involved in a project and we are considering WordPress. We need it to do more than a typical personal blog. So I've been looking at the range of available plugins to see if we can match all our desired functionality to available plugins.

WordPress has a terrific architecture for using plugins and for skinning your blog. Quite simply you put new skins in a themes folder and new plugins in the plugin folder. These themes and plugins will then appear in the appropriate page of the WordPress administrator . Selecting a theme changes the look of your blog. Activating a plugin makes that plugins functionality available.

But there is a catch. Because of the rapid uptake and development of WordPress plugins developed to work with WP 2.1 may not work with WP 2.2. In fact the world of WordPress plugins is littered with plugins that were developed and tested with WP 1.5 and haven't seen any further development since. I think part of the reason for this problem is that when you discover WordPress it's hard not to get a bit excited and one way to channel that excitement is plugin development. But then you're interest moves elsewhere. I mean web development is full of exciting potential (at least it seems that way to me). It's a bit like being a kid in a candy shop. So then a new version of WordPress is released and your wonderful plugin has a bug. It seems that most plugin developers inevitably get sick of supporting their marvelous plugins. The process for the plugin user goes something like this : we see a great plugin, we see it worked in a previous version, we see we need the new WordPress functions, we discover the plugin doesn't work in the current version, we don't have time to find and fix the bug ourselves, we await an update to the plugin or a new plugin with the required functionality. Process repeats. Welcome to WordPress Plugin Limbo.