Data Driven Application using Adobe Flex – Part 3

Today I’m having a closer look at the Data Features provided by Adobe Flex using the Adobe Developer Guide and the forum for more information.

In the Flex Developer Guide, CHAPTER 37 Representing Data, an explanation is given about the different possibilities you have to define a data driven application.

In the first example you can check out how to define a model with some data fields and show these fields in your application. Note ! You need to enclose the inputfields in an mx:form-container to be able to view the fields or set the lay-out different from absolute because this renders the fields inapproprialty as well.

In the next example you can check out the validation-framework in Flex SDK where you can add validation to specific fields. Flex includes a set of validators for common types of user input data, such as ZIP codes, phone numbers, and credit card numbers.

If you have a closer look at the 2nd example you will notice the ZIPCodeValidator is used which is one of the default validators included in Flex. When you run the application a red box is shown when a validation exception occurs. Note : When you have a look at chapter 40 you will notice that the first example on page 1282, the PhoneValidator, doesn’t work properly. You need to add the listener- and trigger-attribute into the PhoneValidator to let the code work.

A view on the validation exception and message box is shown in the following screenshot:

As you can see it’s fairly easy to create a form-based application with validation defined on the input fields. If you want to have more information regarding the functionality that’s behind these validators you can check out the class-files by going to the source-tab of your application and clicking ‘go to definition’ on one of the validators.

If you want to change the error-message you can override the resource-bundle which is used in Adobe and you can even override the style of the message. E.g. if you want the message to appear in your favorite color, or house-style you can provide the following int ‘mx:style’-tag:

{ borderColor: #0000FF}

In the previous examples we’ve used curly braces to bind our data, you can also use the mx:Binding-tag, see page 1253 for an example.

Now that we’ve seen the different functionalities to create data bound applications, let’s have a look at the different Flex Data Management Features.

What if we want to store data and synchronize data in client-server applications or in MVC-applications? The following screen can give us a clearer view on the different features we can use:

As you can see there are 3 different components we can use to store and retrieve managed data, which are HTTPService, WebService and RemoteObject.

And I need to look into an example using RemoteObjects, more on this next time!

About these ads

One thought on “Data Driven Application using Adobe Flex – Part 3

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your 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