dispatchEvent()™ » User Experience http://dispatchevent.org Collective thoughts on the Flash Platform, iOS, Unity, and any other technology we use. Mon, 23 Apr 2012 19:07:06 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 IA Design Patterns http://dispatchevent.org/mims/ia-design-patterns/ http://dispatchevent.org/mims/ia-design-patterns/#comments Tue, 20 May 2008 01:00:12 +0000 Mims H Wright http://blog.extends.eventdispatcher.org/?p=274 Here’s a site with some cool IA patterns.
Nice One
If you liked that, there’s more at Yahoo’s Design Pattern Library.
This link is from Information Aesthetics… aaand there’s more like this on Ethan Eismann’s blog who is incidentally an Adobe Thermo Developer.

]]> http://dispatchevent.org/mims/ia-design-patterns/feed/ 0 The State pattern in Flex – combining view states with logical states http://dispatchevent.org/mims/the-state-pattern-in-flex-combining-view-states-with-logical-states/ http://dispatchevent.org/mims/the-state-pattern-in-flex-combining-view-states-with-logical-states/#comments Wed, 23 Jan 2008 07:15:17 +0000 Mims H Wright http://mimswright.com/blog/?p=229 If you’ve used Flex, you’ve no doubt (er, hopefully) been using View States (AKA <mx:State>) to change the look of your RIA as it progresses through different situations of use. While this is immeasurably useful, it does not necessarily qualify as an implementation of the State Design Pattern which allows you to change not only how a component looks but how it functions as well.
(for more on design patterns, read my favorite book Head first design patterns).

Take the following example for a “Breakfast maker” application.

Download Source!

StateDemo.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*" currentState="{ENGLISH}">
	<mx:Script>
		<![CDATA[
			// define the state names as constants
			static public const ENGLISH:String = "English";
			static public const FRENCH:String = "French";

			/**
			 * When the "make breakfast" button is clicked, display the steps
			 * you'll need to follow to make breakfast.
			 * Imagine that you'd need to implement all of these steps as functions
			 * and that there are several more languages to support.
			 */
			protected function onBreakfastButton(event:Event):void {
				if (currentState == ENGLISH) {
					output.text = "Fry eggs" +
								  "\nFry tomatoes" +
								  "\nToast bread" +
								  "\nMake tea";
				}
				if (currentState == FRENCH) {
					output.text = "Tartiner du beurre sur baguette" +
								  "\nMettre le yaourt dans un bol" +
								  "\nTranche les fruits" +
								  "\nFaire cafe";
				}

			}
		]]>
	</mx:Script>

	<!-- Define the changes to the view in the <mx:states> tags -->
	<mx:states>
		<mx:State name="{ENGLISH}">
			<mx:SetProperty target="{breakfastButton}" name="label" value="Make Breakfast" />
		</mx:State>
		<mx:State name="{FRENCH}">
			<mx:SetProperty target="{breakfastButton}" name="label" value="	Préparer des petits-déjeuners" />
		</mx:State>
	</mx:states>

	<mx:VBox>
		<mx:Button id="breakfastButton" click="onBreakfastButton(event)" />
		<mx:TextArea id="output"  height="100" width="250"/>
		<mx:HBox>
			<!-- Swap states using these buttons -->
			<mx:Button label="English" click="{currentState = ENGLISH}" />
			<mx:Button label="French" click="{currentState = FRENCH}" />
		</mx:HBox>
	</mx:VBox>
</mx:Application>

Compiling this code gives you the following…
View SWF

The problem

While there’s nothing inherently wrong with this application, there could be complications when trying to make changes to the logic. First of all, the onButtonClick() handler has to provide different functionality based on the currentState. The states themselves need to add labels to the breakfastButton. Imagine what would happen if you expanded this application to support 15 languages or to create lunch, dinner, and teatime. Things could get out of control fast!

The Solution – applying the state design pattern

The state design pattern allows you to separate out state specific functionality and defer the execution of methods to those state objects.

BasicStatePatternDiagram

I’ll combine the state pattern with the view states by making a currentLogicalState property of the application. This setter will also automatically set the currentState based on a name stored in the currentLogicalState. This is easier done than said…

1. Define a logical state interface

My logical state interface only needs to have one getter for name so that we can associate it with a view state.

ILogicalState.as

package
{
	public interface ILogicalState
	{
		function get name():String;
	}
}

2. create a customized state interface for this application

This interface should contain any methods that are state dependent.

IBreakfastMakerState.as

package
{
	public interface IBreakfastMakerState extends ILogicalState
	{
		function get breakfastInstructions():String;
		function get breakfastLabel():String;
	}
}

Note that this interface extends ILogicalState.

3. create state classes

I’ll create two different state classes, one for English breakfast and one for French Breakfast. Each will implement the IBreakfastMakerState interface and will provide the functionality needed to prepare the appropriate breakfast.

EnglishBreakfastState.as

package
{
	public class EnglishBreakfastState implements IBreakfastMakerState
	{
		public function get name():String
		{
			return "English";
		}

		public function get breakfastInstructions():String
		{
			return "Fry eggs" +
				   "\nToast bread" +
				   "\nFry tomatoes" +
				   "\nMake tea";
		}
		public function get breakfastLabel():String {
			return "Make Breakfast";
		}
	}
}

FrenchBreakfastState.as

package
{
	public class FrenchBreakfastState implements IBreakfastMakerState
	{
		public function get name():String
		{
			return "French";
		}

		public function get breakfastInstructions():String
		{
			return "Tartiner du beurre sur baguette" +
				   "\nMettre le yaourt dans un bol" +
				   "\nTranche les fruits" +
				   "\nFaire cafe";
		}

		public function get breakfastLabel():String {
			return "Préparer des petits-déjeuners";
		}
	}
}

4. Refactor StateDemo.mxml

Finally, rewrite the StateDemo.mxml to take advantage of the new state objects and call it LogicalStateDemo.mxml. (Note, this application should run exactly the same as StateDemo.mxml)

LogicalStateDemo.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*"
	initialize="onInitialize(event)">
	<mx:Script>
		<![CDATA[

			// define the logical states as constants
			static public const ENGLISH:IBreakfastMakerState = new EnglishBreakfastState();
			static public const FRENCH:IBreakfastMakerState = new FrenchBreakfastState();

			/**
			 * keep track of the current logical state and when the currentLogicalState changes
			 * update the currentState using its name property.
			 */
			protected var _currentLogicalState:IBreakfastMakerState;
			public function set currentLogicalState(state:IBreakfastMakerState):void {
				_currentLogicalState = state;
				currentState = _currentLogicalState.name;
			}

			protected function onInitialize(event:Event):void {
				currentLogicalState = ENGLISH;
			}

			protected function onBreakfastButton(event:Event):void {
				// rely on the logical state to handle the logic of preparing the breakfast.
				output.text = _currentLogicalState.breakfastInstructions;
			}
		]]>
	</mx:Script>

	<!-- Define the changes to the view in the <mx:states> tags -->
	<mx:states>
		<!-- Name each view state using the name of the logical state -->
		<mx:State name="{ENGLISH.name}">
			<!-- Change the label using a value from the logical state -->
			<mx:SetProperty target="{breakfastButton}" name="label" value="{ENGLISH.breakfastLabel}" />
		</mx:State>
		<mx:State name="{FRENCH.name}">
			<mx:SetProperty target="{breakfastButton}" name="label" value="{FRENCH.breakfastLabel}" />
		</mx:State>
	</mx:states>

	<mx:VBox>
		<mx:Button id="breakfastButton" click="onBreakfastButton(event)" />
		<mx:TextArea id="output"  height="100" width="250"/>
		<mx:HBox>
			<!-- Swap logical states using these buttons -->
			<mx:Button label="English" click="{currentLogicalState = ENGLISH}" />
			<mx:Button label="French" click="{currentLogicalState = FRENCH}" />
		</mx:HBox>
	</mx:VBox>
</mx:Application>

Et voila! A state pattern that works with the existing view states. This may seem like a lot of work for such a simple thing but it will really pay off in the long run on a complicated RIA.

Download Source!

]]> http://dispatchevent.org/mims/the-state-pattern-in-flex-combining-view-states-with-logical-states/feed/ 3 Leopard 10.5 supports 512 pixel icons http://dispatchevent.org/mims/leopard-105-supports-512-pixel-icons/ http://dispatchevent.org/mims/leopard-105-supports-512-pixel-icons/#comments Wed, 28 Nov 2007 16:22:37 +0000 Mims H Wright http://mimswright.com/blog/?p=206 While playing around with Icon Composer in the newest version of XCode Tools for I noticed that Leopard now supports 512×512 pixel icons – much larger than the older 128×128 pixel icons. I assume this has to do with the Cover Flow view for the Finder which displays icons much larger than the other views. Sure enough, Apple have redesigned all their icons for the new format and they look gorgeous. I took some screen grabs of my favourites. Click the thumbnails to see the details. Notice the small text in the iTunes and Dictionary icons and the textures on the truck and the guitar. Hawt!

Click for full size

Dictionary icon

Dictionary



Garage band icon

Garage Band



iTunes icon

iTunes



TextEdit icon

TextEdit



Transmit icon

Transmit


]]> http://dispatchevent.org/mims/leopard-105-supports-512-pixel-icons/feed/ 0 Napkintop web design for maximum impact http://dispatchevent.org/mims/napkintop-web-design-for-maximum-impact/ http://dispatchevent.org/mims/napkintop-web-design-for-maximum-impact/#comments Mon, 26 Nov 2007 23:11:08 +0000 Mims H Wright http://mimswright.com/blog/?p=203 This link is an oldie but a goodie. It has helped me remember to KISS countless times and to focus on the needs of users when designing sites. Check it out.

An Introduction to Using Patterns in Web Design [37 Signals]

]]> http://dispatchevent.org/mims/napkintop-web-design-for-maximum-impact/feed/ 0 How to replace HTML with Flash http://dispatchevent.org/mims/how-to-replace-html-with-flash/ http://dispatchevent.org/mims/how-to-replace-html-with-flash/#comments Tue, 27 Feb 2007 20:05:52 +0000 Mims H Wright http://mimswright.com/blog/?p=106
  • Create your page
  • Replace the text
  • Replace the images
  • Replace everything else
    • ]]>     http://dispatchevent.org/mims/how-to-replace-html-with-flash/feed/ 0     Oldest New Feature Awards http://dispatchevent.org/mims/oldest-new-feature-awards/ http://dispatchevent.org/mims/oldest-new-feature-awards/#comments Mon, 22 Jan 2007 16:26:31 +0000 Mims H Wright http://blog.mimswright.com/?p=83 OK, OK, I promised myself I wouldn’t knock on Vista until I’ve really given it a fair shot, and I think that’s what I was doing when I went to the Vista features showcase too see what fantastic new innovations are on their way from Redmond. I’m sure it’s no surprise that most of them had already been fantastically innovated by their competitors.

    But there are some among these which many of us have been enjoying for so long now that they are as much features of an operating system as a steering wheel is a feature of a car. So without further ado, I present

    The Oldest New Feature Awards

    The Michael Chertoff Award for Preparedness goes to

    Security

    Security

    Windows Vista includes compelling security features that make it even more secure than earlier Windows client operating systems. You can achieve your business and computing goals with confidence, knowing that Windows Vista provides more protection against the latest generation of security threats through new features and fundamentally more secure architecture.

    Windows Vista also builds upon the User Account Protection initiative by default, limiting Internet Explorer 7 to just enough permissions to browse the web, but not enough to modify your files or settings keeping your PC safer from web-based attacks.

    So let me get this straight, when you’re browsing the web, don’t expose system files to hackers. Why didn’t I think of that!?

    The William Lumberg Award for Office Achievements goes to

    Fax

    Faxing and Scanning

    Faxing and scanning functions come together in Windows Vista through Windows Fax and Scan. Sending and receiving faxes through your PC is now as simple as performing the same tasks on a fax machine, especially for digital documents.

    Only for Windows users would performing tasks on a fax machine actually be considered simple.

    The Linus Torvalds Award for Best Thing about NOT using Windows

    Sleep

    Sleep

    Windows Vista introduces a new power state called Sleep. The new Sleep state in Windows Vista combines the speed of Standby with the data protection features and low power consumption of Hibernate. Resuming use when your PC is in the Sleep state takes just 2-3 seconds. You can shut down and restart your computer less often by using the new Sleep state, a simple one-click on and off experience which not only reduces power consumption, but also helps protect your data.

    My Powarboke has done this for years, but you’ll be amazed at how great it is when you turn off Vista!

    ]]>     http://dispatchevent.org/mims/oldest-new-feature-awards/feed/ 0     Wiiality Check http://dispatchevent.org/mims/wiiality-check/ http://dispatchevent.org/mims/wiiality-check/#comments Sun, 12 Nov 2006 20:22:21 +0000 Mims H Wright http://blog.mimswright.com/?p=62 Last week, I had a chance to demo a Wii at the Nintendo World Store and these are my impressions…
    Wii demos at Nintendo World

    First, the WiiMote control. I had seen the ads but was nonetheless astonished at the range of motions that could be detected by the controller. However, some games responded jerkily especially when using the infrared pointer. I’d say the control responded the way I would expect about 85% of the time which isn’t bad but could be improved.

    I played 3 games for about 5 minutes each. It was hardly enough time to make a fair assessment but I must say I was a little disappointed.

    Wii Sports

    “Hey look, you can use the WiiMote to play sports!” Wii sports was little more than a demo of the wireless controller. I played tennis followed by bowling. While the prospect of controlling your racket by swinging your controller conceptually was tantilizing to me, the actual gameplay felt a lot more like pong. I couldn’t seem to find any measure of control beyond either [swing-and-hit] or [swing-and-miss]. Bowling was similarly lifeless.

    Excite Truck

    “Hey look, you can use the WiiMote to drive a truck!” The Nintendo Store dude showed me that I simply turn the controller this way to turn right and that way to turn left. This button accelerates, that button breaks. OK sure. So I’m driving with the WiiMote. But who cares? This game was decidedly NOT fun.

    WarioWare Smooth Moves

    All was not lost. WarioWare was the perfect mix of innovative control mixed with innovative game design that I was looking for. The Warioware series continues to impress me with its simplicity and creativity and is only improved by the versitility of the remote control interface. I LOL’d at least 3 times while (literally) cranking, jumping, drawing, and even hula-hooping.

    Overall, the games seem to be shallow and uninventive relying solely on the gimmick of the WiiMote which did not hold my interest for more than the first 2 minutes. I left the store with a distinct taste of “Dave and Busters” in my mouth.

    I wouldn’t get your hopes up too much for the Wii launch titles. i’m still holding out hope for some of the games coming down the line (plus I didn’t get to play Zelda which will probably tip the scales).

    ]]>     http://dispatchevent.org/mims/wiiality-check/feed/ 4     Fashion Preview Hooks http://dispatchevent.org/mims/fashion-preview-hooks/ http://dispatchevent.org/mims/fashion-preview-hooks/#comments Tue, 17 Oct 2006 11:23:59 +0000 Mims H Wright http://blog.mimswright.com/?p=48 My newest efforts in ultimate closet optimization are what I call “Fashion Preview Hooks™” (pat. pend.). I installed mine last night!

    The installation is simple. Just attach 2 hooks of any kind at approximately eye and belly-button level and aligned vertically. That’s it. Now you have Fashion Preview Hooks!

    These hooks have a couple of uses. If you’re trying to put an outfit together you can preview it by hanging your shirt on the top hook and pants on the bottom hook and swap them out quickly without having to try each one on. Also, when you go to bed at night you can throw your outfit for the next day on the wall.

    Fashion Hooks 1   Fashion Hooks 2

    ]]>     http://dispatchevent.org/mims/fashion-preview-hooks/feed/ 3     Making Accessible Flash with without the Accessibility class http://dispatchevent.org/mims/making-accessible-flash-without-the-accessibility-class/ http://dispatchevent.org/mims/making-accessible-flash-without-the-accessibility-class/#comments Tue, 01 Aug 2006 16:22:56 +0000 Mims H Wright http://blog.mimswright.com/?p=17 A couple of years ago I attended a seminar on Flash’s accessibility features put on by Macromedia. They were very proud of themselves but to be quite honest, it was laughable. To actually create an accessible site using Flash’s interface would be incredibly time consuming and full of workarounds and hacks. For example, assigning alt tags to all but the most basic graphics and animations is very time consuming. Also creating and managing tab indexes for every selectable element is a nightmare but actually, quite a necessary step since the built in algorithm for tabbing does not go in an intuitive order (thanks, Microsoft!)

    Learning all of this, however, did help me to realize however some of the ways that Flash can be used to make an accessible site WITHOUT using the Accessibility package. Here are some points.

    • There’s more to accessibility than blindness. You’re also designing for the colour blind, the hearing impaired, the elderly, people who cannot hold a mouse steady, people with learning disabilities, &c.
    • Make text large and readable. Make buttons large and clickable.
    • Provide keyboard shortcuts to common tasks. Allow users to navigate using the keyboard and assign tab orders where appropriate.
    • Avoid using colour to provide contrast in your designs (ie. red text on green background). To check this, turn the saturation all the way down on your monitor.
    • Take advantage of Flash’s multimedia abilities to display both audio content and visual content (including subtitles)
    • Make it in XHTML. No seriously. If possible put the entire contents of the site in XHTML which is easily handled by screen readers. If you still need Flash, hide the flat version with CSS and scrape the XHTML for data!
    • Test your work on Lynx or better, turn on your screen reader! A lot of the tricks for determining search engine visibility apply to screen readers.

    A lot of this just comes down to good design that doesn’t get in the way of the content making it as easy to access as possible.

    ]]>     http://dispatchevent.org/mims/making-accessible-flash-without-the-accessibility-class/feed/ 1     A lesson in Interface Design http://dispatchevent.org/mims/a-lesson-in-interface-design/ http://dispatchevent.org/mims/a-lesson-in-interface-design/#comments Fri, 14 Jul 2006 21:30:11 +0000 Mims H Wright http://www.mimswright.com/blog/?p=3 While riding the freight elevator up to my office (I’ve been meaning to lose some weight so I can use the normal one) I noticed the sixth floor button does not light up. When this first came to my attention, I tried pressing multiple times and even banging on it but the button remained eerily dark. I concluded that it might have been broken or perhaps that the sixth floor no longer existed. As I wondered uncomfortably, a curious thing happened – the elevator stopped at the sixth floor after all! I realized that it wasn’t the button but the indicator light on the button that was broken.

    I feel that this story taught me a valuable lesson about what can happen when an interface fails to communicate with it’s client. Although I’ve learned from experience that the elevator is indeed going to my floor, there was a moment where I was not only uninformed but on some unconscious level confused, uncomfortable, and afraid. Let us all remember from this experience how important it is to provide feedback to the user!

    Thank you.

    6th Floor

    ]]>     http://dispatchevent.org/mims/a-lesson-in-interface-design/feed/ 0