Databinding for Designers

Quite often a prototype that you are quickly building needs just a touch of realism. This recently happened to me while building a sample web application. The app followed standard login pattern, but I knew that having a placeholder <username> onscreen once the user had signed in might bother the client as they walked through the prototype. I know some will say, “Can you just explain that it is just a placeholder?” Maybe, but I have had experiences in the past where the simplest things (like this) have tripped up the client and spent an entire meeting trying to move past it.

Prototype UI without databinding

So, to avoid this issue, I’m going to show you how to add just a few lines of code to your Flash Catalyst project and build a more realistic prototype.

Here is the start of the original Flash Catalyst project. A few elements converted into buttons, and text inputs. The entire project is 3 scenes. You can download the project here.

If you purchased one of the Creative Suites you should have Flash Builder. If not, you can download a trial from Adobe.com.

Launch Flash Builder, then go to File>Input FXP.

Flex Project Import Dialog

You will be presented with a dialog that gives you two choices; pick File, then locate the DataBinding.fxp file.

Import Flex Project Dialog 2

The settings on the next dialog can be left alone, and just click Finish.

Once the Catalyst project has been imported, you will see your project in the Package Explorer on the left.

Flex Package Explorer

Open the project folder if not already open, then navigate until you find Main.mxml. This is your main file for the project and the one we will be editing. Double-click this file, and the code window will automatically open for you.

I am sure to a designer, this entire markup might be unnerving. But we only need to make a few changes. We need to locate the markup for the user in put text input.

<s:TextInput skinClass="components.userNameTextInput"
x="526" y="72" d:userLabel="User Name Input"/>

and add

id=”usernameTextInput”

It should now look like:

<s:TextInput skinClass="components.userNameTextInput"
x="526" y="72" d:userLabel="User Name Input" id="userNameTextInput"/>

This gives the element a unique identifier that we will be able to reference later.

Now, we need to locate the text component that displays the <username> text once the user has signed in.

<s:RichText color="#ffffff" fontFamily="Myriad Pro Semibold" fontSize="12" kerning="off"
lineHeight="350%" d:userLabel="&lt;username&gt;" whiteSpaceCollapse="preserve"
x="605" y="25" visible.SignInForm="false">

Here we can attach the linkage (or data binding) between the username input and text label.

One of the features that the Flex framework offers is databinding – allowing two components to share values between them.

To this component we need to insert the following:

text. Home={usernameTextInput}>

The markup should now look like:

<s:RichText color="#ffffff" fontFamily="Myriad Pro Semibold" fontSize="12" kerning="off"
lineHeight="350%" d:userLabel="&lt;username&gt;" whiteSpaceCollapse="preserve"
x="605" y="25" visible="false" visible.Home="true" id="richtext1" 
text.Home="{userNameTextInput.text}">

Let’s break down exactly what we added. First is the Text.Home attribute. This uses the revised state system in Flex 4. It says that text attribute in the “home” state is going to have a specific value. This allows the same component to have different attributes in different states. The next portion of the statement is establishing the actual databinding. This is done by the addition of the { }. The item surrounded by the { } will be automatically replaced by the actual value.

So here is where we will use that ID we added to the text input. Between the curly braces, we place the reference to the text inputs text value usernameTextInput.text.

That’s it!

Run this project and you should see the username you entered on the signin screen appear on the final screen. By adding two little items to the markup, we have added a touch of realism to our prototype.

One last touch up

Now the real application would contact some server, validate the user, and return the response, then display the proper page. But, this is a prototype and we can fake that part.

There is one more thing we might want to fix. If you noticed, the password field displays its unmasked contents when you transition form the signin screen to the home screen. Again, this is a simple fix. Locate this component:

<s:TextInput skinClass="components.PasswordTextInput"
x="526" y="127" d:userLabel="Password Input" displayAsPassword.SignInForm="true"/>

and change the

displayAsPassword.SignInForm attribute from
displayAsPassword.SignInForm="true"

to simply

displayAsPassword ="true"

Now this component will always use password masking in any state, not just in the SignInForm state.

A more realistic prototype

I hope this simple tutorial has shown you that a little time using Flash Builder can produce a more realistic prototype.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s