Fortunately there’s a simple solution . Just set  minHeight=”0″ and it will tell the component to not expand beyond the height of it’s Parent.  This works for any container with a vertical layout as well including Panels

There’s additionally an autoLayout property which can be set to false, however I can’t get consistent results with that.  It seems like there would be some more intuitive property name to control this behavior, but at least there is a solution.

// create an XML object with one child.
var parentXml:XML = ;

// parentXml.child is an XMLList.  add two new elements
parentXml.child[parentXml.child.length()] = ;
parentXml.child[parentXml.child.length()] = ;

// remove the 2nd item
delete parentXml.child[1];

Put this code inside a function and step through it in the debugger to see what’s happening.

One thing to note is that if you are binding controls to “parentXml”, the UI doens’t necessarily receive update events when the child nodes are manipulated.  In this case you may have to dispatch an event to force the UI to re-call the getter for parentXml.  Although, that is a subject for another post…

PDT Screenshot

Installing PDT (PHP Development Tools) Plugin for FlexBuilder allows you to work with PHP projects within the FlexBuilder environment.  This is useful if you are using AMFPHP, WebORB for PHP or some other PHP-based remote server.  There are similar instructions posted elsewhere, however I found that they have become outdated.  Because FlexBuilder 3 is based on an older release of Eclipse, you now have to specifically install older versions of the PDT files.

Note – If you are using a recent version of Eclipse with FlexBuilder plugin, or are using FlexBuilder 4 then you should not follow these instructions – instead install the most recent version of PDT.  These instructions are only necessary for FlexBuilder 3 Stand-Alone edition.

Installing PDT:

1. Open FlexBuilder 3 menu Help->Software Updates->Find and Install
2. Search for new feature to install
3. Click “New Remote Site” and enter the following:
   • Name: PDT 1.x
   • URL: http://download.eclipse.org/tools/pdt/updates/
     (note is that this URL is to the old 1.x update site)
4. After adding the site, click OK and select the following two Sites to include:
   • Europa Discovery Site
   • PDT 1.x
5. Click “Finish” to begin searching for updates
6. Once the results are displayed, un-check the box that says “Show latest version of a feature only”
7. Expand PDT 1.x and select PDT SDK 1.0.3
   (important – do not select a higher version than 1.0.3)
8. After you have selected PDT SDK, you may have required libraries missing.  You can try at this point clicking “Select Required” and they will be automatically selected from the Europa Discovery Site.  However, this sometimes causes FlexBuilder to lock up.  In which case, you have to force quit FlexBuilder, start the process over and manually select the required libraries which are:
   • Graphical Editors and Frameworks->Graphical Editing Framework 3.3.2
   • Java Development->Eclipse Java Development Tools 3.3.2
   • Models and Model Development->Eclipse Modeling Framework (EMF) Runtime + End-User Tools 2.3.2
   • Models and Model Development->XML Schema Infoset Model (XSD) Extender SDK 2.3.2
   • Web and JEE Development->Web Standard Tools (WST) Project 2.0.2
     (if any of these libraries are missing and do not appear, it probably means that you have already installed them)
9. You should now be able to click “Finish” and agree to the license.  You can then restart the app and begin working with PHP project within FlexBuilder.

Configure Smarty (TPL) Template Editing

There is another project called smartypdt – however it doesn’t seem to be compatible with the older version of PDT – at least I couldn’t get it working.  Instead I simply configure TPL files to open using the PHP editor:

1. Open the menu Window->Preferences
2. Navigate in preferences to General->Content Types
3. Expand the Text node and highlight “PHP Content Types”
4. In the File associations list, add *.tpl

At this point you should be able to open a PHP folder and edit both PHP and TPL files.  If you configure your include path correctly, you should have code insight on your PHP classes and functions.

To install in Flex Builder 3:

1. Help -> Software Updates -> Find and Install…
2. Choose “Search for new features to install” and click Next
3. Click “New Remote Site” button and enter the following in the dialog:
   • Name = Flex Pretty Print Command:
   • URL = http://flexformatter.googlecode.com/svn/trunk/FlexFormatter/FlexPrettyPrintCommandUpdateSite/
4. Click Finish and complete the process of installing the plugin

After installing and restarting Flex Builder you’ll have five new icons in your toolbar.  These allow you to add doc block and clean up spacing for selected sections or an entire file.

The settings for Flex Formatter are found along with all of the other Eclipse preferences.  You can choose to have files formatted automatically on save, specify locations to exclude and a few other options.

The Auto Format settings allows you to configure the template used when cleaning your code.  This allows you to specify exactly how you like your files formatted.  This is an extremely useful feature for organizations that enforce a certain code style.

Without going over it all again, Flex dates are timezone aware and the UTC offset is automatically calculated for you.  The problem is that you are locked into displaying the timezone of the local system clock unless you hack the date values.  But when sending over the wire to the server the date is automatically converted into the server’s timezone without telling you what timezone the Date is supposed to be in. In other words, you get “8:00 PM UTC” but you have no ideas what timezone that pertains to, so you don’t know whether the Date is actually supposed to read 2:00 PM EST, 1:00 PM CST, or 11:00 AM PST. Technically those are all the same “time,” but in some cases you need to work in timezones other than your own.

Anyway, I implemented my own solution for this issue last year, but was going on the assumption that the timezone offset is based only on the local system clock.  What I found out last week is that the timezone offset will actually change if you create a Date in the past or future where DST has kicked in/out.  In other words, every Date has it’s own offset.  I’ll admit that could probably be handy however if you are trying to neutralize the timezone changes that Flex does, it only makes your job that much harder.  I had not been expecting this and so we had to do some modification to our client to correctly handle DST changes at the server.

Below is some code to demonstrate how the timezone offset changes with DST, even though your system clock is still the same.  Note that you need to set your system clock to a timezone in the US that observes daylight savings time on March 15.  (Chicago for example). If you’re in the UK the switch is March 28, so you can change the dates to March 27 & March 28 to see the effect. Notice that the timeZoneOffset property is different between the two dates. I suppose this makes sense but it definitely creates hassles on the server side.

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication 
 xmlns:mx="http://www.adobe.com/2006/mxml" 
 layout="vertical" 
 height="700"
 width="1000"
 creationComplete="onCreationComplete()"
>
 
<mx:Script>
 <![CDATA[
  public function onCreationComplete():void
  {
   var d1:Date = new Date(2010,2,14); // march 14
   result1.text =  "MARCH 14: "
    + d1.toDateString() 
    + " OFFSET = " 
    + d1.timezoneOffset.toString();
 
   var d2:Date = new Date(2010,2,15); // march 15
   result2.text = "MARCH 15: "
    + d2.toDateString() 
    + " OFFSET = " 
    + d2.timezoneOffset.toString();
  }
 ]]>
</mx:Script>
 
<mx:Label id="result1" />
<mx:Label id="result2"  />
 
</mx:WindowedApplication>

I’m interested in anybody else’s ideas or solutions as to how you work with dates across timezones in Flex. Please post a comment.

Those of us investing time in developing AIR apps have been working with one hand tied behind our back, unable to do simple things like even launch a document in MS Word, let alone utilize the thousands of shell commands available inside the OS.  (Well, there are various alternatives and hacks to do similar things, but still…)  Simple functions like burning a CD or encoding an audio file were simply not possible because the underlying libraries that perform these functions are not accessible within the AIR sandbox – even if those libraries themselves are cross platform.  None of the other major cross-platform environments have this limitation.  AIR was designed to connect to a server via HTTP in order to do these types of things, which is great for a web-based solution but not so for a desktop solution.  So AIR sometimes gets a bad rap as a a “widget” development platform that is good for eye candy, but not able to have deep interaction with the OS.

With AIR 2 Adobe decided to lift even more of the constraints and allow developer to execute native commands.  What this means is that we might start seeing very handsome AIR apps that serve as SVN front-ends, MP3 encoders, network monitoring tools, disk utilities, etc.   AIR will be able to interact with other software on the machine such as legacy enterprise apps.  I know this was not Adobe’s original vision for AIR, but  I have always thought otherwise and I’m very glad Adobe decided to loosen the shackles.  There are several other interesting improvements in version 2, but I think the native call feature has the potential to open the floodgates for enterprise developers.

With the new functionality comes the inevitable risk that some AIR apps will only run on one platform, or they may require you to install an OS-specific component in addition to the AIR application.  It will also be possible to build an AIR app that requires a certain Windows-only or OSX-only command.  However, thoughtful developers will at least be able to make that choice for themselves.

AIR 2 is out in beta now and end users will start seeing new applications when the public release launches in the first half of 2010.

If this is something that has caused you grief, I encourage you to vote for the issue to be fixed in the Flex SDK.

The crux of the problem is a combination of three things.  First that all Dates are timezone aware, yet they are “locked” to the local system timezone and the offset property is read-only.  The second is that all of the Date formatting functions and Date-related UI controls have no concept of timezone.  The third is that the Date class is marked Final, so there is no way for developers to extend the class and override the default behavior.  It almost seems like it was an intentional effort to prevent any apps from displaying anything other than local time, which is weird.  The unfortunate side effect of this design is that it forces developers to use very ugly hacks.

In my mind there would be two “correct” way to deal with this.  The first would be to allow the timezone offset property of a Date to be writable.  This would allow developers to store the correct UTC time but specify the offset of their choosing for input and display.  To me this makes the most sense and I don’t understand at all why it isn’t allowed unless there is some low-level feature of the Flash engine that makes this difficult.

A less optimal solution, if changing the timezone is not possible, would be to re-write all of the Date related UI controls and functions (formatters, etc) so that they can accept input and display output in a different timezone from the local system.  This would be a ton of work and you’d probably run into problems with third-party components that weren’t written the same way.  This would at least allow you to keep your date values stored correctly, though.

What developers are currently forced to do instead is to actually create Dates with incorrect UTC values in order to get them to display correctly.  If I have a meeting in NY at 5PM but I am physically in PST, I have to set the time to 5PM PST in order to show it on a calendar 5PM.  But 5PM PST is actually 8PM EST so this is not technically correct – the UTC value is off by 3 hours.  Flex of course wants this item to show up on my calendar as 2PM PST because it does not think a user would ever want to see time written in it’s relevant timezone.  When I pass this to the server, of course, I have to neutralize the senders timezone offset on the way in, and then account for the receiver’s timezone on the way out.

For now I’ve managed to work-around all of these issues, however it is a constant worry for my team since our users are managing events that take place around the world, some of them traveling to a new timezone every day.  I hope that Adobe will address this seemingly minor issue in a future release.

• NetConnection.Call.Failed: HTTP: Status 500
• Channel Disconnected

You may have tried directing your browser to weborb.php only to get this message: “WebORB v3.5.0 Fatal error: Call to a member function getServiceURI()”

The getServiceURI message is actually a red herring error message.  This simply occurs because weborb.php is expecting the raw headers to contain Flash remoting AMF message data.  Your browser is just making a normal HTTP GET and doesn’t know anything about AMF.   So weborb.php winds up with a null object on which it tries to call getServiceURI().  I wouldn’t be surprised to see a future release of WebORB that catches this error, even though it isn’t the purpose of this particular file to run inside a browser.

So, you are probably frustrated because you were trying to figure out what is wrong with your install and why you are getting the connection and/or channel errors.  These errors are almost always the result of a PHP compile-time error.  PHP5 itself is rather inconsistent in the way it handles different types of errors.  You may have noticed that it’s impossible to catch a syntax error or a bad path in a require_once() statement, for example.  If an include file is missing, PHP craps out before you have a chance to do any error handling.  You can only catch and handle run-time errors within your PHP code.  You may be tempted to think that WebORB should be able to catch these errors and return a more useful message to Flex, however the PHP engine stops executing before it even gives your code or WebORB a chance to handle anything.  It’s kinda the equivelant of having a syntax error in Java or C code that causes your app to not compile.  It doesn’t matter what type of error trapping code you write – if you code doesnt’ even compile, it doesn’t even get the chance to run.

When any part of either your service or WebORB encounters a compile-time error, it instantly dies and, depending on your server config, will write out the error details to STDOUT (which shows in a browser) but what it does not do is return a proper AMF message to the client.  If you were to look at the output of the PHP page, most likely you would instantly see cause of the error.  However Flex/Flash seemingly ignores the output of the page and it only processes the headers returned by the server (ie 500 error).  So PHP is outputing the details of the error but Flex blocks you from reading it.

UPDATE: I now use App Puncher to view error messages now.  A network proxy or packet inspector would probably work as well.  My original info below is still here in case you want to trace down errors by hand.

To figure these errors out, I try to start debugging with a simple function that doesn’t do anything.  Slowly, step-by-step I start re-enabling code until I locate the source of the channel disconnect by process of elimination.  Other times I write a debug page in PHP and call the function in question directly.  (This isn’t always easy if Flex is passing in complex structures, however, it can be worth the effort sometimes).

I’ve noticed these things to be sure-fire causes:

• require_once statement with file missing (or PHP include path not set right).  Note that if you are dynamically calculating the abolute path of the current working directory that it will be different when you are running via the “Management Console” than if you call your service directly from Flex.  This is a dead giveaway if it runs in one, but not the other.
• passing in an argument to a method that does not match the declared PHP type.  You can detect this by simply removing your type declaration in your methods and see if the data comes through.  This could indicate a mapping problem or an unsupported type.
• syntax error that causes PHP compile-time error.  This can be any type of silly syntax error.  These are usually easy to see if you create a server-side page that calls your service method.
• If the WebORB examples work, but not your own services, it’s pretty much a giveaway that PHP is crashing somewhere inside your own service code and not the WebORB installation.
• If you can’t even get the WebORB examples to work, then there is a good chance that editing PHP.ini will be required.  If that’s the case, hitting weborb.php with your browser can sometimes show you what’s wrong – just realize that any errors mentioning either getServiceURI() and FlashorbBinaryReader are due to the missing AMF headers that your browser didn’t send and are not the problem.

If you have a better way of debugging, please post a reply.  This can be an extremely frustrating error to chase down and I would welcome any suggestions.

FlipCard 2 has been rewritten from scratch to include various suggested features:

Download FlipCard from the FlipCard Project Page at Google Code.

The full source code was not included in the initial release due to the fact that it was mixed in with code from another application.  I finally set aside some time to re-factor and package it up into it’s own project.  I’m releasing the code in hopes that others might contribute and improve the component, so please feel free to submit code patches, documentation, skins, etc.

FlipCard v1 was written in MXML and used various tricks to allow child components to be added.  Unfortunately this made it impossible to view the front and back side contents in Design view.  The component is rewritten in 100% ActionScript and works in Design view, including the ability to edit the inner contents as well.  FlipCard inherits from ViewStack and behaves as such in Design view, allowing you to change the selectedIndex and view the back side.  Design view currently has some issues in that you can “flip” the card too many times and the child items go out of view, however toggling out and back in to Design view is a simple workaround.

The control is now much easier to customize and the flip button is no longer hard-coded into the FlipCard.  A FlipCardContainer class is include that will automatically generate a button, or you can create your own buttons to toggle the flip card via ActionScript.

The initial version also used code that had some memory leak issues and those have been fixed as well.

Please feel free to comment below, however if you have bug reports or feature requests, I ask that you post them on the google project page and not this blog post.

The TextInput can be bound as well so that when the dataSource changes, the value of the TextInput will automatically update. However, unlike the DataGrid, changing the text of the TextInput will not automatically update the dataSource. Take the following code for example (assuming “source” is a String variable):

<mx:TextInput id="text1" text="{source}" change="{source= text1.text}" />

When the TextInput is changed, the value of source remains the same. It’s only bound one-way. If you want the value of source to be updated when TextInput changes, it’s actually easy, but there are at least five (5) different ways to do it of which I know. For the most straight-forward two-way binding, you could update the TextInput code like so:

Technically source is not bound to the TextInput, but it does produce the desired result. source is updated manually whenever the valueCommit event fires. The valueCommit event fires when the TextInput text has been changed onBlur (ie when when TextInput loses focus). If you prefer source to be updated on every key stroke, you can change valueCommit to change instead and the update will occur on every keyUp. If I’m updating a database or making a service call, I prefer valueCommit so the back-end code only fires once after the user is finished updating the field. If the TextInput is an ajax-style auto complete or lookup, the change event might be more desirable so the application can react after each key stroke.

As I mentioned there are five methods to do this. You can bind controls using Flex’s binding features in either MX code or ActionScript. Depending on your application one may be better than the rest as far as keeping your code clean and consistent. For the most part they all achieve the same result. Below is source code that demonstrates all five techniques:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="{init()}">
	<mx:Script>
		<![CDATA[
			import mx.binding.utils.BindingUtils;
			import mx.binding.utils.ChangeWatcher;
 
			/**
			 * Called at creation complete and initializes all of the examples
			 */
			private function init():void
			{
				this.initExample2();
				this.initExample3();
				this.initExample4();
				this.initExample5();
			}
 
			/**
			 * Example 1: simple inline binding (see the MXML)
			 * -----------------------------------------------------------------------
			 */
 
			[Bindable]
			private var value1:String = "example 1";
 
			/**
			 * Example 2: use ChangeWatcher to assign a change watcher to text2.text
			 * -----------------------------------------------------------------------
			 */
 
			[Bindable]
			public var value2:String = "example 2";
 
			private var watcher2:ChangeWatcher;
 
			public function initExample2():void
			{
				watcher2 = ChangeWatcher.watch(text2,"text",text2changed);
			}
 
			/**
			 * notice that the argument is an event
			 */
			public function text2changed(event:Event):void
			{
				this.value2 = (event.currentTarget as TextInput).text;
			}
 
			/**
			 * Example 3: use BindingUtils to bind a change watcher to the text3.text setter
			 * -----------------------------------------------------------------------
			 */
 
			[Bindable]
			private var value3:String = "example 3";
 
			private var watcher3:ChangeWatcher;
 
			public function initExample3():void
			{
				watcher3 = BindingUtils.bindSetter(text3changed,text3,"text");
			}
 
			/**
			 * notice that the function argument is a string (the value of text3.text)
			 */
			public function text3changed(val:String):void
			{
				this.value3 = val;
			}
 
			/**
			 * Example 4: Use BindingUtils to bind text4.text to this.value4 (notice value4 has to be public)
			 * -----------------------------------------------------------------------
			 */
 
			[Bindable]
			public var value4:String = "example 4";
 
			private var watcher4:ChangeWatcher;
 
			public function initExample4():void
			{
				watcher4 = BindingUtils.bindProperty(this, "value4", text4, "text");
			}
 
			/**
			 * Example 5: using MX:Binding in the MXML (see below)
			 * -----------------------------------------------------------------------
			 */
 
			[Bindable]
			private var value5:String = "example 5";
 
			public function initExample5():void
			{
				text5.text = this.value5;
			}
 
		]]>
	</mx:Script>
 
	<mx:HBox>
		<mx:TextInput id="text1" text="{this.value1}" change="{this.value1 = text1.text}" />
		<mx:Label id="label1" text="{this.value1}" />
	</mx:HBox>
 
	<mx:HBox>
		<mx:TextInput id="text2" text="{this.value2}" />
		<mx:Label id="label2" text="{this.value2}" />
	</mx:HBox>
 
	<mx:HBox>
		<mx:TextInput id="text3" text="{this.value3}" />
		<mx:Label id="label3" text="{this.value3}" />
	</mx:HBox>
 
	<mx:HBox>
		<mx:TextInput id="text4" text="{this.value4}" />
		<mx:Label id="label4" text="{this.value4}" />
	</mx:HBox>
 
	<mx:HBox>
		<mx:TextInput id="text5" />
		<mx:Label id="label5" text="{this.value5}" />
	</mx:HBox>
 
	<!-- Configure the binding here in MXML -->
	<mx:Binding source="text5.text" destination="this.value5" />
 
</mx:WindowedApplication>

If you know of any other ways to bind data to UI Controls, please post a comment.