Danny-T.co.uk

Flex Sliding Drawer Mask and Move Effect

I’ve just been trying to create a simple Sliding Drawer effect in Flex 3 and came across a load of weird and wonderful glitches that made something which should take 20 minutes leave me banging my head against the table for a couple of hours.

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.

Thoughts (aka moan) about Buzzword

I’ve been using Buzzword for a few years now, it’s still one of the best examples of an RIA that stands up against it’s costlier, heavier installable counterparts. Having your documents online accessible from anywhere is a great facility plus, there are some truly innovative UI aspects that make using it a great experience, or example paging in scrollbars, great text-flow around images and the history feature is first class.

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.

Merge folders on copy instead of replace on OSX

When trying to copy a folder onto another of the the same name in OSX you will only get prompted to replace the items and not merge them. This is a real pain in the ass if you’re trying to merge folders and if the folder has several other nested folders.

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/

Flex framework component localization

Having just gone through far too many hoops to get a the flex framework localized I thought I’d share a few notes here.

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.

Read More

Optimal RIA development hardware

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.

Subclipse missing files / folders

So I was trying to get the latest files for a Flex project recently and I had an error about a missing stylesheet. I of course took the standard approach to fixing this and promptly bitched at the foolish developer who neglected to commit the crucial element… Alas turns out I was the fool and upon doing what I should have done in the first place and checking the logs and repository turns out the file was actually committed already.

So I check the file system, no dice. Do another update, nope. Try synchronizing with repository, nada. Try about 10 more updates on the off chance it will magically work one time, amazingly it doesn’t. WTF!?

Anyway turns out the solution is to do the following:

Right click project select “Update to version”

Choose HEAD, change Depth to “Fully recursive” and tick “Change working copy to specified depth”

Et voila, all files and folders get gotten again, no idea what causes this hiccup but this is much nicer than previous resolution of deleting entire project and checking out again

Flex/Flash Builder Icons for Eclipse – FB plugin version OS X

So I imagine very few people are bothered about this, but for anyone out there as precious as I am about things being ‘just right’ they might be interested in this.

I prefer to use the Plugin version of Flex/Flash Builder than the stand alone install, I’m not sure why it just feels better and seems more stable to me. Anyway, if you run multiple versions of Eclipse for whatever reason then it can be a bit confusing having all the same icons.

Having just done a clean install of my Mac to try and squeeze some more life out of it (whoever said Macs don’t need this was lying – it helps a LOT), I wanted to address this HUGE issue of all my eclipse based applications having the same icon.

For example, the first thing I did was to download and install Eclipse, make a copy of the Eclipse installation and then download and install Flex Builder 3 and the Flash Builder 4 Beta.

Now I want to use the proper FB3 and FB4 logos on these instances so I can tell them apart (you can see why this keeps me up at night I’m sure). So firstly you might notice the icons in the dock are alias’ (shortcuts) rather than direct references to the applciations, this was so I could rename them to be “Flex Builder 3″ and “Flash Builder 4″ as opposed to both being called “Eclipse”.

Next, command click on the alias and select “get info” and you’ll see the properties inspector for your alias pop up. Now navigate to your applications folder and do another ‘get info’ on the Flex/Flash builder plugin application (which should have the icon you’re after):

Now simply drag the large image at the bottom of the plugin get info panel into the little image at the top left of the alias get info panel et voila!

Custom named, pretty icons for plugin versions of Flex on Eclipse.

I’m sure to the hard-core Mac users this was obvious but to the new breed like myself I’d be interested if anyone else actually finds this at all useful?

AIR: URLRequest works on Windows but not on Mac

If you find that URLRequest works on Windows but not on Mac then simply prepend file:// to your url string. This will then work on both Windows and Mac.

var myFilePath:String = “someFile.xml”;
var request:URLRequest = new URLRequest(“file://” + myFilePath);

Calling secure (SSL) remote service from local Flex app running in Flexbuilder

If you have your remoting service running under SSL you might find when trying to use it from FlexBuilder you get an error along the lines of:

Channel.Security.Error error Error #2048:
Security sandbox violation: file://localhost/Users/Username/Flex/Projects/MyProject/bin-debug/MyProject.swf cannot load data from https://www.mywebsite.com/remoting/weborb.aspx. url: ‘https://www.mywebsite.com/remoting/weborb.aspx’”

Firstly make sure you have a cross domain file but I’m assuming you’ve already done that much, all you need to do is add the following to allow your locally running (non-secure) site to access the secure remote site by adding this:

1

<allow-access-from domain="localhost" to-ports="*" secure="false" />

Open multiple instances of flex builder on OSX

I keep various workspaces in Flex Builder for things like client projects, tests, examples etc. Sometimes it’s a pain to have to restart FB just to check something from one workspace, so to be able to have two (or more) workspaces open at a time you can launch multiple instances of flex builder by doing the following:

cd /Applications/Eclipse [or your path to flex builder folder]
./eclipse &