Flex data binding example

In the example below, data binding in flex is demonstrated.

Flex data binding example

Flex data binding example

     

In the example below, data binding in flex is demonstrated. Here data binding means binding or connecting the properties or attributes of flex controls to each other. In the example the text property of  flex control Text  contains a single pair of curly brace and  in the braces the value of text property of TextInput control  is invoked. In this way, the data binding is done in flex and due to this whenever the generated swf file is executed  in a web browser, the text attribute properties of both the flex controls Text and TextInput respectively will  possess the same value.

Syntax for binding: <mx:Text text =  { id_value.text }/>

Bind.mxml

<?xml version = '1.0' encoding = 'utf-8'?>
<mx:Application xmlns:mx = 'http://www.adobe.com/2006/mxml'>
  
  <mx:Style>
  .neo {color : green}
  Button {font-size : 10pt}
  </mx:Style>

  <mx:TitleWindow title = 'Flex Data Binding' showCloseButton
 = 'true' width = '40%' height = '30%' color = 'red'>
  <mx:TextInput id = 'ti' text = 'hello'/>
  <mx:Text text = '{ti.text}'/>
  
  <mx:Button label = 'Bind data' styleName = 'neo' 
  click = 'ti.text = "roseindia"'/>
  </mx:TitleWindow>
  
</mx:Application>
  

Bind.swf

Download the code

Tutorials

  1. Action Script custom components
  2. Flex Tutorials
  3. Login.mxml
  4. Performing Object Introspection
  5. For..in loop
  6. How to display on textbox using ObjectUtil class
  7. Introducing Flex
  8. Downloading and Installing Flex
  9. Flex Example
  10. Flex Combo Box example
  11. Flex wipe behavior example
  12. Flex Validator example
  13. Flex Tab Navigator example
  14. Flex Cascading Style Sheets example
  15. Flex Alert Box example
  16. Flex Remove Event Listener example
  17. Flex dispatch event example
  18. Flex Custom mxml tags example
  19. Flex current target property example
  20. Flex Circle drawing example
  21. Flex adding single event on varied components Example
  22. Flex Add Event Listener example
  23. Action Script 'source' attribute example
  24. Action Script 'include' statement example
  25. Flex combobox selecteditem
  26. Flex data binding example
  27. Compiling MXML files with FlexBuilder
  28. Flex Handling KeyboardEvents
  29. Flex checkbox control example
  30. Flex event phase detection example
  31. Explore key & mouse with Flex
  32. Flex KeyboardEvent Listener
  33. Flex KeyboardEvent properties
  34. Flex target property example
  35. Flex terminating event flow example
  36. Downloading and Installing Flex Builder
  37. Eclipse flex ant coding example
  38. Flex Container
  39. Flex Introduction
  40. What are Flex Containers