Flex: understanding databinding: oneway and twoway

17 02 2009

Something that isn’t that well talked about in the Flex world is two way databinding, and it’s implications. 

I was working with an MVC project recently and I came up to an interesting problem with an ArrayCollection somewhere in the View that was bound oneway from the Model. When I changed a property of the object in the View, it changed in the Model. Huh? I didn’t use two-way databinding so why would this happen?

I realised this was due to the fact that while one-way databinding doesn’t change the source when the destination object changes, it DOES ensure that both objects have the same reference. The implication here is that if you change a property of the destination object, it will change in the source as well. They are the same object reference after all.

Let’s prove this with examples. Simple databinding in Flex is trivial. 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="white">

<mx:Script>
<![CDATA[

[Bindable]
public var someName:String;

]]>
</mx:Script>

<mx:TextInput text="{someName}" />

<mx:Label text="This is the local obj 'someName': {someName}" />

</mx:Application>

That’s all well and good but what if we want to change the someName variable back? We insert a Binding tag to bind back – two way binding.

<mx:Binding source="textInput.text" destination="someName" />

OK great. But something is happening here that needs to be discussed.  The binding is REPLACING the reference of “someName” to that of a new String. So it may be logical to assume that we need two-way binding when updating the destination of some binding to reflect the changes in the source. But, hang on:

Say I have this Model: 

package
{

	[Bindable]
	public class TestModel
	{
		public static var obj:TestObject = new TestObject("test via model","me via model");
	}

}

And say I have some Object: (TestObject.as)

package
{
	[Bindable]
	public class TestObject
	{

		public var name:String;

		public var desc:String;

		public function TestObject(n:String, d:String)
		{
			this.name = n;
			this.desc = d;
		}

	}
}

And this is my Application:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="white">

	<mx:Script>
		<![CDATA[

			[Bindable]
			public var someObj:TestObject;

		]]>
	</mx:Script>

	<mx:Binding source="TestModel.obj" destination="this.someObj" />

	<mx:Binding source="textInput.text" destination="someObj.name" />

	<mx:Label id="someLabel" text="From the MODEL: {TestModel.obj.name}" />

	<mx:TextInput id="textInput"  />

	<mx:Label text="This is the name locally: {someObj.name}" />

</mx:Application>

I’m simply binding the Model to the local “someObj” (one-way) and then ensuring that changing the TextInput will change the name property of “someObj”. What happens? Try it. 

testbinding

Notice how my Model is also changing? So, you can see that one-way binding actually ensures that both the source and the destination point to the same object reference. You use two-way binding if you need to change the entire destination object completely and want this to be reflected in the source.

Let’s have a look at the final example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="white">

	<mx:Script>
		<![CDATA[

			[Bindable]
			public var someObj:TestObject;

			private function onEnter():void
			{
				someObj = new TestObject("created locally","local");
			}

		]]>
	</mx:Script>

	<mx:Binding source="TestModel.obj" destination="this.someObj" />

	<mx:Binding source="textInput.text" destination="someObj.name" />

	<mx:Label id="someLabel" text="From the MODEL: {TestModel.obj.name}" />

	<mx:TextInput id="textInput" enter="onEnter()"  />

	<mx:Label text="This is the name locally: {someObj.name}" />

</mx:Application>

Now, when you hit “ENTER” on your keyboard aftering entering some text, you’ll see the local object now points to a new object instance. And, you can see the Model doesn’t change from this point on, because it still points to the original instance. If you wanted the Model to update from this change, you would add:

<mx:Binding source="someObj" destination="TestModel.obj" />

 

Although you’d be careful to insert it AFTER the Binding tag that assigns someObj as the destination and TestModel as the source. Otherwise you’ll set the Model to null before you begin!

Make sense?

Advertisements




Silverlight vs Flex

16 02 2009

The Silverlight vs Flex argument is hillarious!

We’ve got a statement from Adobe’s CFO here on Silverlight. Personally I think that the CFO wasn’t the best person to comment on Silverlight, but hey, maybe we got an insight into Adobe’s non-censored attitude to Silverlight. 

We’ve got a response from Tim Sneath, a Silverlight evangilist from Microsoft.

We’ve got a debate with an MS evangilist vs an Adobe evangilist. (To be fair to Silverlight, the MS guy seems like he’s a fish out of water. He starts off with a great argument about competition making us better developers, and ends up floundering).

If you ask me, Adobe needs to fix the perception that most developers have that Flash simply sux. 

The problem is, that for years, the Flash platform was only accessible to those freaks who understood and lived in the four dimensional world of Flash. Trying to code on multiple layers with inherited objects in respect to time and still understanding  scope was, and still is, a nightmare

 I think many web developers have poked their noses into Flash – and many developed a natural distaste for it. Those that tended towards design sometimes learned to love it (and we learned to hate them for polluting the web with horrendous Flash websites that were inaccessible and useless). Then came Flex, at a time when web apps and Web 2.0 was the wave of the future. Macromedia released an SDK that finally made the power of Flash available  (“leveragable” in biz speak) to developers who wanted to use it.

Microsoft, on the other hand, have wowed developers ever since they took Java made .NET.  Managed code – with the ever evolving C# – allows us  developers to write pure object oriented code from web sites to windows applications. And thank god. I mean, I don’t have much interest in OS programming or the kernel. I’ll let others specialise in that. I’m interested in engaging, interactive applications, in whichever form they take.

Let’s get back to basics. Adobe specialises in cross platform solutions. Microsoft have a vested interest in Windows. 

Adobe has flash advocates (I’m using this term from now on) who were pre Flex (ewww), and post Flex (like me). Microsoft has .NET evangilists. Actually, I’m a good example, cause I’m both. I trained in Computer Science at university. I worked mainly with Java on Solaris machines. When I finished uni, I wanted to write software that people would use. I started with the web because of it’s reach, and have been focused on it ever since.  So now I write Flex and AIR apps that interface with .NET, and I’m happy to look at other RIA technologies as long as they

  • Compile (I’m sorry, but I like the portability of compiled code); 
  • Allow for OO programming (Yes, AS3 is OO – close enough anyhow); and
  • Are portable; and
  • Are accessible.

I think the issue between Flash & Silverlight is all this use of “Company X” evangilist business. Too many religious connotations. No wonder there’s so much passion in this argument. Everyone’s drawing lines in the sand. WTF? Anyone heard of software architecture? The goal is to understand as many technologies as possible to create the best solution for the client – whoever they may be. The platform is just a means to an end. We’ve got to constantly weigh up the options from all sides to create the right system at the right time.  

I’m giving myself a task. Over the coming months, I’m going to investigate Silverlight further, now that v2 allows me to code the frontend in C#, and because .NET 4.0 is looking to integrate the client and server within the single code base. As I go through it, I’m going to post my findings here, for those who want the quasi-objective truth.





what’s the big deal with Flash 10

13 02 2009

Rather than explaining what makes Flash 10 so impressive, here are a few links:

Things are just starting to get interesting.





Silverlight Client to Server Remoting

11 02 2009

Being the Flex/AIR to .NET developer that I am, I find Silverlight curious to say the least.

Initially I had assumed that Silverlight 2, as it was deployed inside an ASP.NET side, would automatically handle remote objects from the client to the server. This would alliviate the developer from having to write two classes for her value objects (one on the client and one on the server). Moreover, it would minimise the amount of setup time to get going.

Turns out, it doesn’t. Not in .NET 3.5. You’ve got the options of using Web Services or solutions like WebORB .NET for Silverlight (using AMF).

Posing the question on Twitter today, I was sent the following link from Tim Heuer from the Silverlight team:

http://channel9.msdn.com/pdc2008/PC11/

So, it seems the future of Silverlight, within .NET 4.0 and Visual Studio 2010 is a seamless integration from server to client via the one code base.

Something Mr. Cool (the speaker from said video) didn’t mention in whether or not the server would require the “Dublin” addition to IIS. This seems to be the way .NET 4.0 is achieving the communication from Client to Server. I think I need to test drive VS2010 to be sure.

The code to get the communication between the client and server is fairly bloaty – and seems a bit hackish at this stage. I get the impression MS are trying to quickly increase the functionality of Silverlight before too many people invest in the Flex Framework. MS are down in the fight as Silverlight currently can’t escape the browser unlike AIR  (WPF can too but it’s Windows dependant). I guess they want to entice the developers via integration rather than the software architects by reach.





Flash: Motion Tween vs Shape Tween

6 02 2009

So I was helping my girlfriend last night with a Flash assignment. You know – make a Flash TV remote and what not. (It’s a painful process, esp when you know you could do it in Flex in 5m).

I was going through the basics of animation when I came up to a wall. I’ve always struggling quantifying how to use the timeline and tweening.

It was then that I really realised that Motion tweens requires a Symbol to animate and Shape tweening requires vectors.

Seems a simple conclusion, but still.

So, I wanted a surefire way to teach her how do make the two different animations, regardless of Flash version so here goes.

Motion Tween

  1. Make a new symbol (movie clip) in your library.
  2. Insert a new keyframe in frame 1. (Right click frame 1 in the timeline).
  3. Either drag something into this frame from the library, OR create a new object by using the toolbox and when done, select the frame, right click on the content and choose Convert to Symbol. (Make it a movie clip – see note #2 below). If you jumped to Step 4 without doing this, Flash would automatically convert the objects to a symbol for you.
  4. Now, everything in Frame 1 is a sybmol. Make this frame a motion tween (right click frame in timeline).
  5. Create insert a key frame further down the timeline at some point. Obviously the number of frame should be higher for the length of time the animation should take.
  6. So now, in the frame you created, making a “keyframe” has copied an instance of your symbol. Now wherever you move this instance, the motion is automatically created.
  7. if you want to transform either the start or the end symbol, goto the corresponding frame, select the object, right click and choose free-transform, then do whatever you want to the symbol and see the change.
  8. if you want to change the colour channels of either the start or the end, click the start or end frame, click the symbol, in the properties window you should see the properties of the movie clip – if you see the properties of the frame instead, click the symbol again. Now you can modify the Color (sic) settings at your heart’s desire.
  9. if you want easing of motion, then click on a frame within the motion tween somewhere and the properties window should show the frame properties and the tween. Here you can add a sound, easing, rotation, and even path orientation (that is another topic).
  10. if you want to create another step in between the animation, select some frame within the tween, and either click and drag the symbol somewhere to move it, or simply insert a keyframe up in the timeline.

Shape Tween

  1. Make a new symbol (movie clip) in your library.
  2. Insert a new keyframe in frame 1. (Right click frame 1 in the timeline).
  3. Now because it’s a shape tween, you MUST create some objects using the Toolbox. These could be shapes, or text or brush/pencil strokes.
  4. When you’re happy, create a shape tween on this keyframe. (rightclick in the timeline)
  5. Now insert a frame (not a keyframe) further down the timeline.
  6. Notice the … in the frames? that’s because there’s nothing to tween to yet.
  7. Now, if you want to morph to a completely new shape, you need to Insert a Blank Keyframe in the last frame (or wherever you want it). Start drawing whatever it is that you want, using whichever colours, and transparency needed.
  8. If you want to morph the existing shape, then Insert a Keyframe, and start playing with the shape – free transforming it, selecting parts of it and changing the colour, whathaveyou.
  9. If you want to change the easing of the tween or the Blending, click on any frame within the tween in the timeline, see the properties window has the frame selected, and modify the tween options.

NOTES:

  • Use the Library.  If you didn’t know this then learn it – everything you make should exist within your library and be dragged into the stage or other items so that your library is a collection of your world objects.
  • All new symbols should either be Movie Clip or Button. A graphic is  can be animated in the future if you decide to go down that path. A button is useful for obvious reasons, and you can even import a movie clip onto the button states.
  • If you accidentally create a motion tween on an object you want to shape tween, you will find you can’t make it a shape tween again. This is because Flash converts objects to symbols automatically when a motion tween is applied. You’ll need to either go back (Undo) to before the symbol was created or recreate your object.