Posted By

chrisaiv on 02/21/09


Tagged

Flex mxml binding


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

uselessdreamer


Flex: Data Binding Basics


 / Published in: MXML
 

URL: http://www.theflexshow.com/blog/index.cfm/2008/7/23/The-Flex-Show--Fifteen-Minutes-With-Flex--Episode-3--Understanding-Data-Binding

Here are a few notes from this podcast:

A. What is Binding? a. Binding ties two properties together. b. One is the source, one is the destination c. When the source changes, Flex changes the destination B. Why does this work? a. The TextInput property is set as [Bindable] b. Bindable comes in Two formats 1. The TextInput property is set as [Bindable] 2. Bindable Metatdata Tag [Bindable(event="propetyChange")] C. Where can Bindable be used? a. Before an AS Class Definition b. Before a getter or setter method c. Before a Variables

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3. <!--
  4. A. What is Binding?
  5. a. Binding ties two properties together.
  6. b. One is the source, one is the destination
  7. c. When the source changes, Flex changes the destination
  8. B. Why does this work?
  9. a. The TextInput property is set as [Bindable]
  10. b. Bindable comes in Two formats
  11. 1. The TextInput property is set as [Bindable]
  12. 2. Bindable Metatdata Tag [Bindable(event="propetyChange")]
  13. C. Where can Bindable be used?
  14. a. Before an AS Class Definition
  15. package com.chrisaiv
  16. {
  17. [Bindable]
  18. public class Foo
  19. {
  20. }
  21. }
  22. b. Before a getter or setter method
  23. private var _data:Object;
  24. [Bindable("dataChange")]
  25. public function get data():Object
  26. {
  27. return _data;
  28. }
  29. public function set data( obj:Object ):void
  30. {
  31. _data = obj;
  32. }
  33. c. Before a Variables
  34. [Bindable]
  35. public var a:Object = new Object();
  36. -->
  37. <mx:Script>
  38. <![CDATA[
  39. [Bindable]
  40. public var firstName:String = '';
  41.  
  42. private function assignName( name:String ):void
  43. {
  44. firstName = name;
  45. }
  46. ]]>
  47. </mx:Script>
  48. <!-- Make your Binding Bi-Directional -->
  49. <mx:Binding source="firstNameInput.text" destination="firstName"/>
  50. <mx:VBox>
  51. <mx:Form>
  52. <mx:FormItem label="First Name Variable">
  53. <mx:Text id="firstNameVariable" text="{firstName}"/>
  54. </mx:FormItem>
  55. <mx:FormItem label="First Name">
  56. <mx:TextInput id="firstNameInput" text="{firstName}"/>
  57. </mx:FormItem>
  58. <mx:FormItem label="Last Name">
  59. <mx:TextInput id="lastNameInput"/>
  60. </mx:FormItem>
  61. <mx:FormItem label="E-mail">
  62. <mx:Text id="email" text="{firstNameInput.text}_{lastNameInput.text}@domain.com"/>
  63. </mx:FormItem>
  64. </mx:Form>
  65. <mx:Button label="FirstNameToJeff" click="assignName('Jeff')"/>
  66. <mx:Button label="FirstNameToJohn" click="assignName('John')"/>
  67. <mx:Button label="FirstNameToRyan" click="firstNameInput.text='Ryan'"/>
  68. </mx:VBox>
  69. </mx:Application>

Report this snippet  

You need to login to post a comment.