RIAlity Blog

Expandable Text Area

Tue, 29 Mar 2011 04:22:00 -0700

I had an issue recently where there was a standard form item, with a textInput as the entry component. The problem was that a single line was not large enough for the client to enter in the details that they required. Using a text area would be my next logical choice however because of certain real estate restrictions I wanted to keep as many form elements visible on the screen at the one time. Hence the Expandable Text area, a hybrid of the single lined TextInput and the TextArea. Where typing and removing text would re-size the input component accordingly, and setting a text value would expand the component to cater to the text size. It's a fairly simple component with the overridden measure method doing most of the work.

measure

Below in the measure command we utilize both the viewMetrics to determine the number or lines and then the measuredHeight of the TextArea


override protected function measure():void {
			
	super.measure();			
			
	// Calculate the default size of the control based on the 
	// contents of the TextArea.text property.
	var lineMetrics:TextLineMetrics = measureText(text);
			
	// get the edge metrics of the textArea
	var vm:EdgeMetrics = viewMetrics;		
	var w:Number = (explicitWidth - vm.left - vm.right);
		
	// calc the line count. If the textFields width has been 
	// updated to the TextAreas explicit
	// height then we can use it's line count otherwise we use 
	// the lineMetrics width divided
	// by the explicit width minus the edges
	var lineCount:int = Math.ceil(lineMetrics.width / w);
	
	// use the textFields linecount if it's the layout has been initialized
	if(useLineCount){
		
		lineCount = textField.numLines;
			
	}
						
	// include the total for the line height and the 
	// padding for top bottom and leading values
	measuredHeight = measuredMinHeight = (lineMetrics.height * lineCount) 
					+ vm.top + vm.bottom + lineMetrics.leading;
			
}

onTextChange

There is also a listener and handler for the "textChanged" event that is dispatched from the extended TextArea. This handler invalidates the size of the component if the number of lines in the textField has been modified. I also had to sets the variable called useLineCount to determine whether the textFields.numLines attribute should be used. As when the component is first initialized with text, the textFields layout is not yet completely set thus returning an incorrect numLines value.


private function onTextChange(e:Event):void{
							
	if(_prevLineCount != textField.numLines){
				
		// becuase the lineCount of the textField is not 
		// set as per the actual size during
		// the first phase of instanciation we know that 
		// it's correct now so we can set a boolean to
		// indicate that.
		useLineCount = true;
				
		// invalidate the size
		this.invalidateSize();
					
		_prevLineCount = textField.numLines;
					
	}
	
}

updateDisplayList

And the last piece is the updateDisplayList which sets the actual size of the textField based on the number of lines and the components unscaledWidth. It also sets the explicitWidth of the component if it results in a NaN. This occurs if the component's width is determined by a percentage or layout constraints.


override protected function updateDisplayList(unscaledWidth:Number
							, unscaledHeight:Number):void{
			
	// we just need to layout the chrome no need for scrollbars
	super.layoutChrome(unscaledWidth,unscaledHeight);
			
	// if the explicitWidth isn't set then set it.  
	// This will force the invalidateSize() to be called.
	if(isNaN(explicitWidth)){
				
		explicitWidth = unscaledWidth;
				
	}
			
	var vm:EdgeMetrics = viewMetrics;
			
	textField.move(vm.left, vm.top);
			
	var w:Number = unscaledWidth - vm.left - vm.right;
	var h:Number = unscaledHeight - vm.top - vm.bottom;
			
	// set the actual size of the textField based on the 
	// number of lines and the default measured minimum 
	// height of the component
	textField.setActualSize(w
			,(textField.numLines) * (DEFAULT_MEASURED_MIN_HEIGHT));
			
}

There it is, unfortunately it's written with the Flex 3 SDK although I'll eventually port it to 4. It's a hybrid between the two text inputs which will enable the user to concentrate on data entry without having to worry about scroll bars and what they'd typed 50 characters ago.

Animating Spark List Items.

Thu, 03 Mar 2011 01:03:00 -0700

Previously in Flex 3 List Components came with a style property called the itemsChangeEffect. This allowed you to specify a sequence of effects to apply to the item renderers when a change to the dataProvider occurred. eg.

Because I was writing a Flex 4 Application I couldn't find anything similar to this property in the Spark List components, so I decided to roll my own utilising a Custom layout for the List Component. With the Flex 3 itemsChangeEffect you had to wait for your data to change before the effect would take place. With my effect I wanted the user to be able to drag an item around the list with the other elements moving away to allow for placement of the dragged item. Kind of like moses parting the waves with a draggable item. Writing the custom layout:
Positioning the Elements.
Inside the custom layout it's the override of the updateDisplayList that does the hard yakka positioning and sizing the List items. It makes sure that the items x and y positions do not overlap or exceed the width of the component. In this instance the first item is in the first row and any subsequent elements are beneath this in pairs.
Drag and Drop
For this layout I still needed the the drag and drop functionality so I extended the TileLayout. If you still need the drag and drop functionality you may need to override a handful of the methods needed to calculate the dropLocations,indices and the location of the dropIndicator. calculateDropLocation
calculateDropIndex
calculateDropCellIndex
calculateDropIndicatorBounds
Animating the elements - things to remember
With animating a Flex container you need to set the autoLayout flag to false before the animation to prevent flex from updating the containers layout after a child element is resized or repositioned. Once the animation has finished the autoLayout flag can be set back to it's default value of true.


override public function updateDisplayList(width:Number, height:Number):void{
	
	...
		
	if(animate){
		
		target.autoLayout = false;
		target.validateNow();
		
		var  trans:Parallel = new Parallel(target);	

		trans.addEventListener(EffectEvent.EFFECT_END,onTransitionEnd);			     
		trans.play();
		
	}
	
}

private function onTransitionEnd(e:EffectEvent):void{		
	
	e.target.removeEventListener(EffectEvent.EFFECT_END,onTransitionEnd);
	target.autoLayout = true;
	
}

Only animate the elements that need animating. This is fairly obvious but can become a real bottleneck especially when dealing with large datasets. Test an elements previous position to determine whether it needs to be included in the sequence. Depending on your interactivity you may need to set useVirtualLayout to false. Because virtualisation uses an estimate of elements displayed on screen for positioning and sizing, I found that with scrolling and dragging elements beyond the containers current scroll index, these elements were not being resolved. By setting it to false all elements are created and positioned allowing any calculations needed by those not currently displayed on the UI to still be allowed. You can view and example of the layout here. You can read more about the Spark SkinnableDataContainers here Here is a nice article on creating custom layouts with Spark here

Mashing up Flex in Australia

Fri, 13 Nov 2009 00:22:00 -0700

I recently found out about a competition being held in Australia, by the Government 2.0 Taskforce called Mashup Australia. This taskforce, as taken from their Terms of reference. will advise and assist the Government to:

make government information more accessible and usable -- to establish a pro-disclosure culture around non-sensitive public sector information;

make government more consultative, participatory and transparent -- to maximise the extent to which government utilises the views, knowledge and resources of the general community;

build a culture of online innovation within Government -- to ensure that government is receptive to the possibilities created by new collaborative technologies and uses them to advance its ambition to continually improve the way it operates;

promote collaboration across agencies with respect to online and information initiatives -- to ensure that efficiencies, innovations, knowledge and enthusiasm are shared on a platform of open standards;

identify and/or trial initiatives that may achieve or demonstrate how to accomplish the above objectives.

The Mashup Australia competition was created to emphasis this and provide a practical demonstration of the benefits of opening up sets of their data. There was quite a large amount of data sets available albeit some not exactly in the most usable format. It was a great way to make the public aware that this data exists, and for us as developers to have fun with how this data could be presented. I spent a few days on a couple of entries, using flex and flash for the UI. It would have been nice to have a bit more time to test them and to add a few more bells and whistles. 1.
The first idea I had was called the GCI PhotoHUB. Because a number of Government Cultural Institutions publish their photographs onto flickr I thought it would be nice to have a central application to be able to search/view these common image sets. I used the neat as2flickrlib API however I did realise that the commons API was not included in the lib so I had to write one myself for getting that particular piece of information. I wanted to create something that was intuitive for the end user and something a little playful for them to interact with. This is the entry here
2.
The second idea was to create more visually digestible way to display crime statistics in Australia. I chose a number of methods for this which included primarily a map overlay, secondary - charting components, thirdly - a raw data set. I felt that this would give the end user 3 options depending on what they felt comfortable with. The initial UI was changed slightly after working through some UX concepts from a good friend of mine who works as a UX consultant. There were a number of design cues including the map indicators taking reference from police lights as well as the font chosen for the map overlay to help with the overall theme. The data set provided was in the form of an xls document. Because .xls documents aren't exactly the best format for web applications. I created a webservice to read the xls file and serve up the data as both a ColdFusion query set as well as a call to return XML. Making the data much more useful for both Flex and potentially other developers eventually. This is the entry for crimewave here Both these apps were built in quick time so I'm sure there will be a couple of bugs crawling around :) so if you find one feel free to let me know. Overall it was a fun way to utilise this newly exposed data from the Government and even a better way to expose it using Flex as the tool.

Who should know about RIAs

Thu, 17 Sep 2009 17:23:00 -0700

During the times when I'm attending an event that is non-IT related people ask me what I do for a living. Most often then not when I tell them that I build RIAs for companies they tend to get a glazed look over their face. It's similar to the look of an original flavoured Krispy Kreme glazed donut, and where the eyes loose focus and start filtering out to the background. Worst case scenario is when I need to snap my fingers three time and tell them to return back to the conversation. Most of the time I can prevent the "Krispy Kreme Look" by explaining to them the concept behind the RIA or Rich Internet Application. Once I do that the penny normally drops and they can name a couple of examples, most commonly TweetDeck and Twirl. These are two of the most downloaded Flex and AIR applications, and have done well in exposing the RIA to the broader community. I think it's important for us in the RIA space to be pushing the concept and benefits of RIA to the general public. From acceptance breeds growth, and in the digital realm RIA acceptance still has a little way to go. In Australia recent studies have shown the amount of money spent in the digital arena is ever increasing. When compared to annual profit, the amount of money spent in digital is still rather small, even though online customer growth is increasing. It's this statistic which had me thinking about the acceptance of RIAs in companies and them willing to invest in technology to help with their revenue stream. As the more a company spends in the digital environment the higher the margin of profit, it makes sense to invest in RIAs. As customers migrate towards and expect more from companies in terms of digital services and experience. A companies customer service is no longer not only judged by the smile of the shop assistant or the friendliness of the wait staff but also by it's online service. This is where well planned and executed RIAs excel, engaging the user, holding their hand through a complex task, giving them the information when they want it without hassle. The RIA doesn't call in sick, steal money from the till or wake up on the wrong side of the bed, things that we have to deal with day to day with traditional customer service. The technology is not important but the idea behind it is and it's something that us working in the RIA world need to push, not only towards business managers but to the general public, the end user or customer. As they say the customer is always right and by raising their awareness to RIAs it can not only benefit everyone involved but also the overall growth of the digital space.

Catalyst could save you time

Wed, 17 Jun 2009 18:46:00 -0700

I've just come back from attending the Brisbane leg of the Australian Adobe User Group. It showcased the new features and overall direction for the development suite of products which included the new Flash Catalyst, Flash Builder, Flex 4, Cold Fusion 9 and Bolt. I was really interested in Catalyst as it's something that I could see a lot of benefit in using personally. Adobe has made a conscious effort to further improve the work flow between designer and developer which the introduction of Catalyst. A tool to help create interactive user interfaces transitions and all, without having to worry about a single line of code. It also enables the user to port this directly into flex for the developer to turn this into an application. By having something like Catalyst can remove the steps involved going back and forth between Interactive Designer and Developer as the explanation of transitions and state changes are nutted out in the design stage for the developer to see. Of course this is the ideal scenario and we all know it never exactly works out as smoothly as that. For a designer it can eliminate the need to provide multiple screen shots of piece of interaction and the need further explain your concepts through emails, phone calls, power point presentations, smoke signals or interpretive dance. It's still in Beta so I'm sure there will be many more tantalizing features to come but so far it's looking great. Overall I can come away from the user group meeting knowing that Adobe is indeed heading in the right direction. They have identified the need to streamline the design/development work flow, as well as further enhancing an existing suite of core products. Having said that I still think a developer that can touch type could save you more time :) You can download the beta version of Catalyst from the Adobe Labs here

I think I might try a Swiz

Sun, 22 Mar 2009 17:30:00 -0700

After talking to a friend about frameworks and so forth. He mentioned the Swiz framework after incorporating it in a project he was currently working on. Being a dedicated Cairngorm guy I couldn't say that I had looked at Swiz before but from what I had heard it sounded like something that may be useful in the future. I had also thought it would make a great name for a cocktail "Excuse me bartender fetch me another Swiz"... [More]

What's your pot of gold at the end RIANBOW

Wed, 04 Feb 2009 03:38:00 -0700

This is my first post for 09 and coming of the back of the new year which goes hand in hand with resolutions and all that jazz. What is your motivation in being a RIA developer? For me it's seeing a project evolve from it's conceptual stages through to it being released to the end user. I get my thrills out of knowing that people are actually using this application that had started out as a twinkle in a project team members eye. It's even better when they are absolutely over the moon with the end result. I know many others who find utter enjoyment in coming up with the perfect class, function, or design pattern. So what's your motivation, what's your pot of gold?

Finding UI inspiration in the everyday.

Sun, 14 Dec 2008 23:48:00 -0700

Finding inspiration in the everyday. Often when I'm working on a certain aspect of the UI design phase for while I sometimes find analogies in everyday occurrences that I can relate back to the current UI I'm working on. It doesn't matter if it's a good or bad experience it's all part of drawing information and ideas outside the context that you're working in. I may look at it and work out how could this be improved or what makes this a good experience. It's true with everything though, the more interest you take in something the more you notice it, and the greater the detail you notice it with. [More]

Issue with AIR after installing Flex 3.0.2 Updater

Sun, 23 Nov 2008 18:39:00 -0700

After just installing the Flex 3.0.2 Updater the AIR project that I was working on didn't quite agree with my proactive decision. Upon debug it was throwing the error. Process terminated without establishing connection to debugger. Command: "/Applications/Adobe Flex Builder 3/sdks/3.2.0/bin/adl" -runtime "/Applications/Adobe Flex Builder 3/sdks/3.2.0/runtimes/air/mac" /workspace/theAirApp/bin-debug/theAirApp-app.xml /workspace/theAirApp/bin-debug Output from command: error while loading initial content This issue has been logged with Adobe with the work around being to modfiy the namespace in your AIR applications-xml file to use 1.5 like so

Flash Player 10 Released

Tue, 14 Oct 2008 23:50:00 -0700

It has just been announced that Flash Player 10 has been officially released. Adobe has posted a list of it's top new features here Exciting stuff. The flash player keeps getting better and better.

Be generous... share your assets

Wed, 08 Oct 2008 17:19:00 -0700

Within your team at least..

I know for some people sharing doesn't come easy, for some it's in their nature while others battle to give anything away. These people are also generally high in the tight arse scale.

However when it comes to developing projects in teams it's essential to provide ways of sharing our knowledge and code base.

Flex makes it fairly easy for us to share our components and assets across projects, allowing us to reuse the existing code base and yet maintain a single source.

There are a few ways of sharing your code base however I've found the easiest way for my is to create a Flex Library and share the compiled .swc across multiple projects using a custom namespace.

Of course you have the standard issues of sharing libraries such as versioning and assessing the impact that certain fixes may have in the applications that use it, but this is less of an issue if the components are developed correctly and that the components that reside in your library warrant being there.

Steps to start sharing and to stop being so selfish.

1. Create a new Flex Library Project

Move your custom components into the source of the library project. If you're moving components from an existing flex application you'll need to ensure that your package structures are correct.

2. Create your manifest.xml

From the adobe website "Manifest files map a component namespace to class names. They define the package names that the components used before being compiled into a SWC file. They are not required when compiling SWC files, but they can help keep your source files organized."

It identifies which files are contained in the specified namespace which we will setup next

The best way to create one is to base it on the existing manifest.xml from the Flex 3 SKD. Modify your new manifest.xml to include all of your new components.

eg.

Save this file in your /src/ folder. I like to prefix the file with the name of the project eg rialitylib-manifest.xml

3. Create your config.xml

We now need to create our config file for the library project. This lets the compiler know which manifest file the namespace relates to. Again you can base this config on the existing flex-config.xml, however since we're really only care for the namespace so it's best strip everything else out to look something like this.








http://www.rialitycheck.com/2008/mxml
rialitylib-manifest.xml

Save this file in your /src/ folder. Again I like to prefix the file with the name of the project eg rialitylib-config.xml

4. Load your config

Now that we've got everything we need to compile the new component library our final step is to tell the compiler to load up the newly created config file.

To do so we just add the following into the Additional compiler arguments on the Flex Library Compiler Panel
-load-config+=rialitylib-config.xml

That's it for you project, everything should compile and a .swc should end up in your output folder.

5. Open your flex existing project and Import your swc
So your team mates have decided to share their code! After giving them high fives open your existing/new flex project. You can either drop the compiled swc into your project or create a swc folder and point to the bin directory of your library project you just created. The latter method allows you to recompile your library and not have to worry about dropping the swc back into your project.

6. Use them
To use your teams custom components simply define your namespace in the top of your .mxml file and then reference your components accordingly. Otherwise flex will create one for you when using autocomplete.
eg.

That's all there is to it.

As long as you keep track of your library component versions and have a suitable tracking procedure you'll enjoy having a single code base for all your reusable code. The place where you really save lots of time is in maintenance across your applications. You can also break up the development team by allocating library tasks and application specific tasks separately.

Plus your good karma rating goes up when you share.

On a side note, after watching Charlie Boorman's and Ewan McGregor's Series the Long way down giving a little to Unicef definitely goes a long way. If you're feeling extra generous you can make a donation here

What's behind the preloader?

Thu, 18 Sep 2008 19:27:00 -0700

What's behind the pre-loader? CursorManager.setBusyCursor(); When designing a new UI it's important to delve inside the end user's cerebral hemispheres to understand what drives users to perform the tasks they do. The pre-loader as a concept has been around for a long time in various forms not necessarily related to web applications. It can be seen in the form of a support act when going to see a band, or the lighting before a thunder storm, or the clowns before the lion tamer. In one way or another the pre-loader has provided a way to distract the user from the time taken to get to their main goal at that given point in time. Adobe has obviously has understood the necessity for the pre-loader concept and have included pre-loading functionality inside the flash component library, and more recently Flex. Flex also has the capability of setting the busy cursor on service request thus emphasising the importance of notifying the user and keeping them aware that that data will appear to a screen near them. Of course this type of distraction is minimal, however providing something that is too distracting may result in a slight loss in the ability for the user to focus back on the task of interest. I remember reading about a case study about a property owner of a large corporate building. Not a day would go past without a complaint about the building's lift and how long it took to arrive in the lobby. It came to the stage where something needed to be done about this. For the owner there were two obvious solutions, one would be to spend thousands on getting the lift replaced or let the issue go and continue being at the end of the complaint stream. An associate suggested that the owner get a psychologist in, they agreed to bring him in after much speculation. His suggestion was not to worry about replacing the lift but to fit full length mirrors in the lobby. The mirrors were installed and as a result not a single complaint was received from that point on. In this case the mirrors were the pre-loader and the data was the lift. People were distracted by the fact that they could look at themselves while waiting for the lift (there was probably some sort of Flexing involved too). It was a very simple yet elegant solution. Inside the flex applications that I build I like to pre-load all requests to the server whether it be as a busy cursor / text notification / progress bar or even sound (elevator music anyone?). The simplest way way I've found to do this is to have a public String property on my Model of course you may want to create a more detailed class but I'll use the string in this example. By setting this property from my commands it allows the application to listen/test to the changes to this and display the required feedback/preloader to the user. an example would be something like this ModelLocator.as


	public var statusMessage:String = "";

GetLiftCommand.as


public function execute( event:CairngormEvent ):void {
	var levelChangeEvent : LevelChangeEvent = LevelChangeEvent(event);
	var liftID : int = levelChangeEvent.liftID;
			
	var delegate:LiftDelegate = new LiftDelegate(this);
	delegate.getLift(liftID);
	
	/* set the service status */	
	model.serviceStatus = "I'm getting the lift so I'll put some mirrors up";
}

public function result( event : Object ):void {

	model.lift = event.result.lift;

	/*clear the service status now that we've got the result*/
	model.serviceStatus = ""; 
}

MainBuilding.mxml

In todays development world where the amount of information that is being pushed back to the client is getting larger and larger, pre-loading is important to not only give feedback to the user but to give them a slight distraction prior to the data arriving. CursorManager.removeBusyCursor();

Flex SDK 3.1 and Flex Builder 3.0.1 Released

Wed, 20 Aug 2008 18:40:00 -0700

Matt Chotin has posted an article about the release of the latest version of the Flex Builder version 3.0.1. This Flex Builder update includes the Flex 3.1 SDK along with a number of bug fixes and certified versions of the professional data visualization and testing components. To manually initiate an update to Flex Builder using the Adobe Updater, open Flex Builder and go to Help > Search for Flex Builder Updates...

Crumbline Navigation

Tue, 19 Aug 2008 22:18:00 -0700

Crumbline navigation has been around for a long time. The first instance I can recall was when Hansel and Gretel used a Crumbline of pebbles to navigate their way out of the forest. It was only when they used bread crumbs instead of pebbles did they become lost. Crumblines are a great way for uses to navigate through the UI especially if the UI contains wizards and or drill downs. It provides instant feedback to the user in relation to the depth and direction of their navigational choices. Uses can then step back to the exact position they want by selecting the specific crumb at any given time. This is an example I created in Flex 3 to illustrate the Crumbline Navigation in it's most simplistic form.

This component takes in a collection of Crumb Objects. The Crumbline then dispatches "crumbEvents" when a crumb item is selected, letting the view dictate how it handles the navigational change. eg.

In this example I used a simple viewstack and bound this to the Crumbline using it's selectedIndex property.

A demo of this can be seen here Special thanks to the Brothers Grimm for the Crumbline model.

Mac and PC working together with Synergy

Wed, 13 Aug 2008 23:52:00 -0700

I'm running both a Mac and PC in my current development environment. I've got some software on both platforms that I use that gotten around to port accross to either the mac or pc. Another benefit is browser testing for any type of css/HTML work. This nifty piece of software called Synergy allows you to share your mouse across multiple machines. It also allows copy and paste although with a PC/MAC combination bitmap data is not yet supported so only text can be stored on the clipboard at the moment. You can download the software here and you'll need to allocate a server and the clients that connect to it. For those fence sitters out there that can't decide which platform to use this may be a solution :)