About data representation, Data binding, Data models, Data validation, Data formatting
Posted on May 28, 2010 | No Comments
Adobe® Flex® provides the following set of features for representing data in your applications: data binding, validation, and formatting. These features work in conjunction with the Adobe® LiveCycle™ Data Services ES and Vega features for working with remote data. Together, they allow you to perform the following tasks:
- Pass data between client-side objects.
- Store data in client-side objects.
- Validate data before passing it between client-side objects.
- Format data before displaying it.
The following steps describe a simple scenario in which a user provides input data and requests information in an Adobe Flex application:
- The user enters data in input fields and submits a request by clicking a Button control.
- (Optional) Data buy cialis tadalafil binding passes data to a data model object, which provides intermediate data storage. This allows data to be manipulated and passed to other objects in the application.
- (Optional) One or more data validator objects validate the request data. Validator objects check whether the data meets specific criteria.
- The data is passed to a server-side object.
- The server-side object processes the request and returns data or a fault object if a valid result cannot be returned.
- (Optional) Data binding passes data to a data model object, which provides intermediate data storage. This allows data to be manipulated and passed to other objects in the application.
- (Optional) One or more data formatter objects format result data for display in the user interface.
- Data binding passes data into user interface controls for display.
The following diagram illustrates what happens in Flex for two different user input examples. In one example, the user enters ZIP code data, and Flex validates the format. In the other example, the user requests the current temperature in Celsius.
Data binding
The data binding feature provides a syntax for automatically copying the value of a property of one client-side object to a property of another object at run time. Data binding is usually triggered when the value of the source property changes. You can use data binding to pass user input data from user interface controls to a data service. You can also use data binding to pass results returned from a data service to user interface controls.
The following example shows a Text control that gets its data from an HSlider control’s value property. The property name inside the curly braces ({ }) is a binding expression that copies the value of the source property,
<mx:HSlider id="mySlider"/>
<mx:Text text="{mySlider.value}"/>
Data models
The data model feature lets you store data in client-side objects. A data model is an ActionScript object that contains properties for storing data, and that optionally contains methods for additional functionality. Data models are useful for partitioning the user interface and data in an application.
You can use the data binding feature to bind user interface data into a data model. You can also use the data binding feature to bind data from a data service to a data model.
You can define a simple data model in an MXML tag. When you require functionality beyond storage of untyped data, you can use an ActionScript class as a data model.
The following example shows an MXML-based data model with properties of TextInput controls bound into its fields:
<?xml version="1.0"?>
<!-- datarep\DatarepModelTag.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Model id="reg">
<registration>
<name>{nme.text}</name>
<email>{email.text}</email>
<phone>{phone.text}</phone>
<zip>{zip.text}</zip>
<ssn>{ssn.text}</ssn>
</registration>
</mx:Model>
<mx:TextInput id="nme"/>
<mx:TextInput id="email"/>
<mx:TextInput id="phone"/>
<mx:TextInput id="zip"/>
<mx:TextInput id="ssn"/>
</mx:Application>
Data validation
The data validation feature lets you ensure that data meets specific criteria before the application uses the data. Data validators are ActionScript objects that check whether data in a component is formatted correctly. You can apply a data validator to a property of any component. For models in a remote procedure call (RPC) component declaration, properties to which a validator component is applied are validated just before the request is sent to an RPC service destination. Only valid requests are sent.
The following example shows MXML code that uses the standard ZipCodeValidator component, represented by the <mx:ZipCodeValidator> tag, to validate the format of the ZIP code that a user enters. The source property of the ZipCodeValidator validator indicates the property that it validates.
<?xml version="1.0"?>
<!-- datarep\Validate.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:TextInput id="input" text="enter zip" width="80"/>
<mx:Model id="zipModel">
<root>
<zip>{input.text}</zip>
</root>
</mx:Model>
<mx:ZipCodeValidator source="{zipModel}" property="zip"
listener="{input}" trigger="{input}"/>
</mx:Application>
Data formatting
The data formatting feature lets you change the format of data before displaying it in a user interface control. For example, when a data service returns a string that you want to display in the (xxx)xxx-xxxx phone number format, you can use a formatter component to ensure that the string is reformatted before it is displayed.
A data formatter component is an object that formats raw data into a customized string. You can use data formatter components with data binding to reformat data that is returned from a data service.
The following example declares a DateFormatter component with an MM/DD/YYYY date format, and binds the formatted version of a Date object returned by a web service to thetext property of a TextInput control:
<?xml version="1.0"?>
<!-- datarep\Format.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:WebService id="myService" destination="Shop"/>
<!-- Declare a formatter and specify formatting properties. -->
<mx:DateFormatter id="StandardDateFormat" formatString="MM/DD/YYYY"/>
<!-- Trigger the formatter while populating a string with data. -->
<mx:TextInput
text="Your order shipped on {StandardDateFormat.format(myService.purchase.result.date)}"/>
</mx:Application>
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Comments
Leave a Reply
You must be logged in to post a comment.
Community presentations of the blogger
Sameera at LinkedIn
BIOGRAPHY
Sameera Thilakasiri is a front-end developer and UX Architect based in Colombo, Sri Lanka, specialist in User Interface Design, User Experience, Usability and Accessibility, Information Architecture, Responsive Web Design, Interactive Design, Search Engine Optimization, Trainging and Public Speaking.
In his profession, follow the best practices, W3C web standards and guidelines, responsive, semantic, usable, accessible, SEO friendly to cutting edge cording using XHTML/HTML5, CSS and jQuery for Pixel-perfect cross browser compatibility.
In his leisure blogging for technical articles and lifestyle photographer.