We love playing with new technology and strive to stay on top of the latest and greatest. We also regularly attend industry events and user groups such as FOTB, Droidcon, 360Flex, DDD, NxtGen and LFPUG and always looking for the next great event.

You’ll get to work with the likes of me, @andreablack, @peterkeating and @colinl along with occasional input from great talents such as @nwebb, @getrichhull, @amw7 and others to help us build world class RIAs.

We get all sorts of interesting projects ranging from sales tools for one of the worlds largest toy manufacturers to really cool audio slow-downers to help people learn to play music. We like to consider ourselves ‘platform agnostic’ which means we don’t get caught up in the “my tech is better than your tech” arguments. We focus on learning as much as possible and using the best tool for the job. This is great fun for us, we don’t get stuck using the same old technology and means our clients get a better result from experienced and unbiased opinion.

If you’re a developer with good OOP experience, familiarity with Flex and/or .Net and a genuine passion for building amazing user experiences and writing great code why not check out our openings and drop us your CV/portfolio.

These sort of issues are always a real pain as it’s a problem not expected, not budgeted for and almost certainly going to eat a lot of time. Oddly I couldn’t find much else out there on the same issue. Fortunately one of the few resources I did find in this case someone had already done the hard work for us!

Jake over at byHook posted some extremely handy classes which use javascript injection to pickup the js mousewheel events in the browser which are much more reliable. It then uses the info from these events to fire off a new mouseevent in Flash.

It was built for use in Flash projects but works seamlessly in Flex also:

Import the classes and add the following to the APPLICATION_COMPLETE event:

private function onAppComplete(e:FlexEvent):void
{
MouseWheelEnabler.init(this.stage);
}

And that’s all, much more consistent and responsive scrolling! It did still feel a little slow for my taste so I added the following bumpDelta method to the system manager to speed things up:

private function onAppComplete(e:FlexEvent):void
{
MouseWheelEnabler.init(this.stage);
systemManager.addEventListener("mouseWheel", bumpDelta, true);
}
public function bumpDelta(event:MouseEvent):void
{
event.delta *= 2;
}

Like I said, couldn’t find much when searching on this issue hence my re-posting of Jake’s solution. I was specifically looking for Flex so thought this might help someone else in the future but all props definitely due to byHook for the code.

Always assume the call you’re making will work.

Some context for the above, I recently got sick of my iPhone and decided to give Android a spin, side-stepping the obvious discussion here, one of the things that has irked me about the Android experience is that it just doesn’t feel as responsive as the iPhone for certain applications, specifically email. So I started to compare the two and realised that the iPhone reacts to my interactions immediately whereas Android seems to wait for approval from the server. This eye-opening discovery led to me imposing a new standard here at Moov2:

Every user interaction must have an immediate and obvious reaction.

Proud and smug feelings of wearing my user experience hat were soon interupted when challenged to explain wtf I actually meant by this. So, for example, deleting an email from a list of viewed email messages. When I hit delete I expect that message to be removed from the list and if that happens as soon as I press the delete button, I’m a happy chap. Conversely, if I have to wait, even a couple of seconds, I may think I missed and try hitting it again… and again… etc. So developers, quite simply, as soon as that delete button is hit, remove the message from the list and THEN send your call informing the server to do it’s part. This approach can be applied to pretty much any application development that involves a rich user interface, Flash, Flex, Silverlight, AJAX, Android, iPhone, native desktop apps and whatever.

But what if something goes wrong?

Of course, just throwing the message away willy-nilly is reckless, there’s a whole host of things that could prevent that message from being deleted. The user might be offline, the email list might not be up to date or there may just be some other bug elsewhere making the delete email process just plain not possible at the moment. In this case, sheepishly, politely and unobtrusively, let your user know the fact and pop the email back where it came from. This will obviously be a nuissance to the user, but how often does this really happen in comparisson to how often it works? Very rarely, and it’s no less annoying for the user than having to sit there waiting with no response only to find out the action failed.

What if I NEED the response in order to update the UI?

So deleting is a fairly convenient example because we’re taking away from an already viewable interface, what about if we’re adding to our interface based on the response from our call? For example displaying the list of emails in the first place. Well, for this I suggest you present all of the interface elements that you know are going to be available and just provide some indication that something else is going on to reassure the user that their input has been acknowledged. So when the user chooses to view their inbox, immediately react and change the view, present them the ‘Inbox’ title, show them any user controls they might be able to interact with and display the space those messages are going to load into with some form of preloader/spinner and note indicating their messages are being retrieved.

So take a minute and review your result handlers to see how much UI stuff is being done there. Could it be moved to before the call was made? This sometimes means you need to think about how to best back-track when things go wrong but for the 95% of the time when you just get the result you’d expect you’ll deliver a MUCH more responsive feeling interface that your users will thank you for.

By the way, if you’d like to actually see some code demonstrating this concept tweet the following message to Pete who has prepared a very clean implementation of this for a Flex application we’re currently working on: “Hey @peterkeating, codez pls http://bit.ly/f8HOyp. I’m sure he’ll oblige with a sample soon enough.

One fairly simple yet useful and perhaps not widely known discovery I made was how to go about getting assets designed in Flash into my Flex skin with just a bit of faffing about. I’d figured this wouldn’t be too high up on many people’s interest list with Catalyst weighing in as the main contender but Paul showed some interest so if for no one else, I know it’s of interest for at least someone out there!

Fla to Fxg to Spark

Will try to keep this to the point and let the visuals do the talking.

We start off with a simple Spark Button and assign it a custom skin:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   minWidth="955" 
			   minHeight="600">
	<s:layout>
		<s:VerticalLayout gap="20" 
			paddingLeft="20"
			paddingTop="20" />
	</s:layout>
	<s:Button label="My Button" 
			 skinClass="skins.FlaFxgSkin" />
</s:Application>

To create the skin simply File, New, MXML Skin and set the host component to be a Spark Button as so:

With the generated skin we can actually remove everything down to the following which is just an empty button skin with a label:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
	     xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009" 
	     minWidth="21" 
	     minHeight="21" 
	     alpha.disabled="0.5">
 
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>
 
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>    
 
    <s:Label id="labelDisplay"
             textAlign="center"
             verticalAlign="middle"
             maxDisplayedLines="1"
             horizontalCenter="0" verticalCenter="1"
             left="10" right="10" top="2" bottom="2">
    </s:Label>
 
</s:SparkSkin>

At this point we have a pretty dull skin and want to jazz it up a little with some Flash sexyness, I suggest you find your own but this is what I’ll be using to demonstrate:

Once you have your masterpiece all you need do is File, Export, Export Image and choose the FXG file type. Point this file at your desktop or somewhere handy and you can open it in your text editor of choice.

What I noticed when I did this is that the FXG from Flash has near enough identical paths, fills, strokes, gradients etc as in spark (of course this is obviously by it’s very nature). The only thing that didn’t correlate was the spark namespace. If your shape is simple enough you can just go and manually add the s: by hand but if it isn’t then RegEx to the rescue. You’ll see I’ve used Notepad++* Programmers Notepad in the following screens to do a regex search and replace to insert the namespace we want.

Regex
find pattern - (<|</)(\w)
replace pattern - \1s:\2
(you might need to change the replace to $1s:$2 depending on text editor)

Before:

After:

Then you have your fxg code needed for your skin, simply copy and paste all of the the <s:Path> elements into your skin just above the label:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
	     xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009" 
	     minWidth="21" 
	     minHeight="21" 
	     alpha.disabled="0.5">
 
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>
 
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>    
 
	<s:Path data="M59.2 25.8 59.55 43.35 82.25 50.3 67.7 58.05 85.35 79.95 58.45 71.8 55.5 99.75 42.2 75 20.3 92.65 28.45 65.75 0.5 62.8 25.25 49.5 7.6 27.65 34.5 35.75 37.45 7.85 50.75 32.55 59.2 25.8">
		<s:fill>
			<s:SolidColor color="#009900"/>
		</s:fill>
	</s:Path>
	<s:Path data="M82.25 50.3 59.55 43.35 59.2 25.8 58.9 11.05 89.5 0.5 109 26.25 90.5 52.8 82.25 50.3">
		<s:fill>
			<s:LinearGradient x="58.9" y="26.65" scaleX="50.1">
				<s:GradientEntry ratio="0" color="#414142"/>
				<s:GradientEntry ratio="1" color="#686868"/>
			</s:LinearGradient>
		</s:fill>
	</s:Path>
	<s:Path data="M59.2 25.8 58.9 11.05 89.5 0.5 109 26.25 90.5 52.8 82.25 50.3 67.7 58.05 85.35 79.95 58.45 71.8 55.5 99.75 42.2 75 20.3 92.65 28.45 65.75 0.5 62.8 25.25 49.5 7.6 27.65 34.5 35.75 37.45 7.85 50.75 32.55 59.2 25.8M82.25 50.3 59.55 43.35 59.2 25.8">
		<s:stroke>
			<s:SolidColorStroke weight="1" color="#20343D"/>
		</s:stroke>
	</s:Path>
 
    <s:Label id="labelDisplay"
             textAlign="center"
             verticalAlign="middle"
             maxDisplayedLines="1"
             horizontalCenter="0" verticalCenter="1"
             left="10" right="10" top="2" bottom="2">
    </s:Label>
 
</s:SparkSkin>

And you’re done! Okay you’ll obviously want to do more with it than that, you can tie this into your button states and also do clever dynamic stuff with the FXG once it’s in but for now I figured this is enough. It would be really nice if this could be done without all the copying and pasting and I think possibly a JSFL script could do alot of the work for us so if anyone wants to contribute that, I’d be most grateful.

I’m going to try to expand on this and demonstrate a bit more of what I’ve been discovering as I find the time and figure more interesting things out.

Here’s the end result:

However, this is the sort of behaviour that was giving me grief:

Nice eh? The components disappear randomly, the mask doesn’t stay still, the label isn’t viewable on the rotated button and it’s generally a bit of a pig.

Here’s the few things I learned to eliminate this glitchy behavior:

1. In order to rotate a button, you need to embed the font.
2. When you rotate a button the width property actually reports the height of the rotated button (which makes sense but is a bit odd at first), this also confuses any containers the button is in
3. A mask needs to have cacheAsBitmap=true
4. Sprite seems to be the best class to use for masks but you’ll need to add it to rawChildren when adding it to the displaylist as it isn’t a DisplayObject

Most of this is demonstrated in the source for the above:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	backgroundColor="#ffffff"
	layout="vertical" 
	creationComplete="cc()"
	>
 
	<mx:Style>
		/* need to embed font to allow rotated buttons */
		@font-face {
		    src: local("Arial");
		    fontFamily: ArialEmbedded;
		    fontWeight: normal;
		}
 
		@font-face {
		    src: local("Arial");
		    fontFamily: ArialEmbedded;
		    fontWeight: bold;
		}
 
		Button {
			font-family: ArialEmbedded;
		}
	</mx:Style>
 
	<mx:Script>
	<![CDATA[
 
		private function cc(): void
		{
			// create mask
			var drawerMask : Sprite = new  Sprite();
			drawerMask.graphics.beginFill(0xffffff);
			drawerMask.graphics.drawRect(0, 0, drawer.width + 20, 300);
			drawerMask.graphics.endFill();
			drawerMask.x = tabs.x;
			// eliminate glitchiness
			drawerMask.cacheAsBitmap = true;
			this.rawChildren.addChild(drawerMask);
			// assign mask 
			this.drawer.mask = drawerMask;
		}
 
		private function slide() : void
		{
			if(openBtn.label == "Open")
			{
				drawerPusher.width =  drawer.width + 20;
				openBtn.label = "Close";
			}
			else
			{
				drawerPusher.width = 0
				openBtn.label = "Open";
			}
		}
	]]>
</mx:Script>
	<mx:HBox width="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">
		<mx:Spacer id="drawerPusher" width="0" />
		<mx:VBox id="drawer" moveEffect="Move" backgroundColor="#cccccc">
			<mx:Label text="I'm in a drawer" />
			<mx:Button label="Button1" />
			<mx:Button label="Button2" />
			<mx:Button label="Button3" />
		</mx:VBox>
 
		<mx:Spacer id="tabSpacer" width="8" />
		<mx:HBox id="tabs" rotation="90" moveEffect="Move">
			<mx:Button id="openBtn" label="Open" click="slide()" />	
		</mx:HBox>
	</mx:HBox>
</mx:Application>

Hopefully this can save someone else the headaches I had.
Props to @andytrice for the cacheAsBitmap tip in his insideria article on masking.

That said, it definitely feels like it might be a bit of a second class citizen to Adobe. As I mentioned I’ve been using Buzzword for literally years and witnessed it evolve considerably since it’s earlier days. However, that evolution appears to have slowed. The only notable feature to have been added in the past few months is Workspaces. Other than this I know of a long list of feature requests that are as yet, unfulfilled. To be fair, this is more a rant about Buzzword specifically and not Acrobat.com as a whole as I haven’t fully checked out the presentation or ‘tables’ software and they have added support for conferencing with Adobe Connect so maybe that’s where efforts are being spent.

Workspaces is however, a great feature which I would love to make full use of… but can’t:

This has been the case for a long time now and several other aspects such as Connect are restricted by this. Whilst I appreciate there are legal and corporate considerations here that argument only stands for so long, what year is this?! I’ve been a fully-paid up user of a lot of SAAS services who have managed to figure this out. I did moan about this on twitter a while back to which I did get a response from the acrobat twitter account informing me to sign up to be notified when they worked this out, however I have been on the notification list for a long time now and have never had even an update from it.

Talking of SAAS or cloud based software, I’m a techie and a businessman, probably the ideal target audience for Acrobat.com I’m not afraid to be an early adopter of technologies and am comfortable signing up to such things. Which is why I also use Google Chrome as my current browser of choice… which is why this is also annoying:

I appreciate Chrome is a new browser and I don’t expect every new technology that comes along to be instantly fully supported. However before they blocked Chrome it did work, it was glitchy but then a lot of sites are and that’s what you expect in early release software. A much more welcome approach would have been a note saying Chrome wasn’t fully tested yet so an alternative browser is recommended but you’re free to carry on if you choose.

UPDATE: see Bob Treitman’s (Adobe QA engineer – I believe) comment below explaining the above is an FP10.1 issue.

Anyway, I will continue to use Buzzword for now (not to mention stop moaning and get some work done) but I am getting increasingly disheartened by the lack of new features and restrictive US-only availability. I will also have a look at other similar services, I do use Google docs but it still feels like a webpage as opposed to a word processor, feel free to suggest alternatives in the comments.

I just came across this exact scenario trying to update the Flex SDK and copy in the Datavisualisation components (as instructed here) because it just replaced the SDK!

Anyway to resolve this copying from terminal can behave like you would expect:

cp -R -n /SoureFolder/* /TargetFolder/

so in the case of the datavis components:

cp -R -n /Users/[username]/Downloads/datavisualization_sdk3.5/*
/Applications/Adobe\ Flex\ Builder\ 3\ Plug-in/sdks/3.5.0/

All I was trying to achieve was to ensure the Flex components (mx) adhere to a selected locale so things like date choosers and other locale-dependent components could be tailored to the users chosen language.

This is easy to do but took a long time to figure out, so for the benefit of others (and no doubt myself in the future):

Localizing the flex framework

• Go to http://ttfx.org/Tontons_Flexeurs/BabelFlex.html and download your chosen language(s)
• Extract the zip and copy the fr_FR (or whatever lang) to
  [your flex installation]/sdk/3.4.0/frameworks/locale/
• Add the chosen language to your flex compiler arguments -locale=fr_FR,en_US

And you’re done! Setting resourceManager.localeChain = ['fr_FR', 'en_US'] or whichever language you want will then change the days of week and month names etc to suit the selected language.

For something so simple I had to do ALOT of digging, props to @fitzchev for the babelflex link.
WHY ARE THESE NOT IN THE SDK BY DEFAULT????????!!!!!!
Apparently they are in Flex4 which is good news but Flex has been around for how long now? Part of the reason this took so long to figure out is because I refused to believe that I had to either write my own or find others’ translations for such major languages as French, Spanish, German etc.

Before finding the BabelFlex conversions I’d also explored the process for creating my own localized framework bundles but that’s covered well in the BabelFlex readme in all of the downloads so head over there if you need to.

]]> http://danny-t.co.uk/index.php/2010/03/07/flex-framework-component-localization/feed/ 6 http://danny-t.co.uk/index.php/2010/02/13/optimal-ria-development-hardware/ http://danny-t.co.uk/index.php/2010/02/13/optimal-ria-development-hardware/#comments Sat, 13 Feb 2010 22:06:23 +0000 DannyT http://danny-t.co.uk/?p=170 No matter how much we spend on new hardware, progress bars, spinning timers, system freezes and occasionally crashes are a familiar site when developing RIAs. My Macbook Pro seems to be fast approaching the end of it’s life and I’ve started to think about a new machine.

So I thought rather than spend forever looking up hardware specs, recommended platforms and whatever, I’d just do the lazy thing and put it out there to the #lazyweb and see what came up.



Within moments the ever-helpful seantheflexguy responded with his spec and his endorsement of his setup:


Well, that was very useful and I thought how great it would be if we could collate more information about other RIA developers’ setups and how they rate them.

So feel free to contribute and copy the following into the comments and fill it in and you can help do my research for me share hardware spec for the benefit of the RIA community .

Computer:
Processor:
RAM:
Hard Disk Size:
Hard Disk Speed:
Primary Software Used:
Rating: / 10
Other Comments:


Here’s mine for starters:

Computer: Macbook Pro 17″
Processor: 2.4Ghz Intel Core 2 Duo
RAM: 4Gb
Hard Disk Size: 150Gb
Hard Disk Speed: 5600rpm (i think)
Primary RIA development Software Used: Flex Builder, Visual Studio 2008 (under VMWare Fusion), Sql Server 2008
Rating: 7 / 10
Other Comments: The machine has been a real workhorse for the past 2 years and has taken quite a bit of torment from me. The hardware has been fairly robust although the problems are starting to present themselves now (now i’m out of warranty!) and things are very costly to put right. Runs very hot when running FlexBuilder in OSX and VS in windows and has really started to slow down lately. Never had much of a problem with system crashes or freezing other than the occasional browser fail.

]]> http://danny-t.co.uk/index.php/2010/02/13/optimal-ria-development-hardware/feed/ 1