Flex Form表单 表格加载XML 数据绑定

2010-10-29

1、数据绑定 ：
bb中显示aa中的内容
<mx:TextInput id="aa" x="200" y="20" />
<mx:TextInput id="bb" x="200" y="40" text="{aa.text}" />

2、Form表单及其各种组件：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12">
<mx:Script>
   <![CDATA[
    function sub()
    {
    
    }
   ]]>
</mx:Script>
<mx:Form width="100%" height="100%">
   <mx:FormHeading label="用户注册" width="100%"/>
   <mx:FormItem label="用户名:">
    <mx:TextInput id="username"/>
   </mx:FormItem>
   <mx:FormItem label="密码:">
    <mx:TextInput id="password" displayAsPassword="true"/>
   </mx:FormItem>
   <mx:FormItem label="性别:" direction="horizontal">
    <mx:RadioButton groupName="sex" label="男" selected="true"/>
    <mx:RadioButton groupName="sex" label="女" />
   </mx:FormItem>
   <mx:FormItem label="籍贯:">
    <mx:ComboBox> // 下拉菜单
     <mx:Array>
      <mx:Object label="北京"/>
      <mx:Object label="上海"/>
      <mx:Object label="山东"/>
     </mx:Array>
    </mx:ComboBox>
   </mx:FormItem>
   <mx:FormItem label="兴趣爱好" direction="horizontal">
    <mx:CheckBox id="pashan" label="爬山" selected="true"/>
    <mx:CheckBox label="游泳"/>
    <mx:CheckBox label="下棋"/>
   </mx:FormItem>
   <mx:FormItem label="爬那座山" visible="{pashan.selected}"> // 如果pashan被选中，那么显示此item中的内容
    <mx:CheckBox label="泰山"/>
    <mx:CheckBox label="娥眉"/>
    <mx:CheckBox label="武当"/>
   </mx:FormItem>
   <mx:FormItem label="自我简介">
    <mx:TextArea width="200" height="100"/>
   </mx:FormItem>
   <mx:FormItem direction="horizontal">   
    <mx:Button label="确定"/>
    <mx:Button label="重写"/>
   </mx:FormItem>
</mx:Form>
<mx:StringValidator source="{username}" property="text" minLength="6" maxLength="12" tooShortError="用户名太短" tooLongError="用户名太长"/> //验证用户名
</mx:Application>

3、表格加载XML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Model id="books">
   <datas>
    <book>
     <name>JAVA基础</name>
     <author>王国维</author>
     <publish>人民出版社</publish>
    </book>
    <book>
     <name>C++学习</name>
     <author>王为名</author>
     <publish>人民出版社</publish>
    </book>
    <book>
     <name>JAVA基础</name>
     <author>王国维</author>
     <publish>人民出版社</publish>
    </book>
    <book>
     <name>JAVA基础</name>
     <author>王国维</author>
     <publish>人民出版社</publish>
    </book>
    <book>
     <name>JAVA基础</name>
     <author>王国维</author>
     <publish>人民出版社</publish>
    </book>
   </datas>
</mx:Model>
<mx:Label width="100%" text="选择图书" color="red"/>
<mx:DataGrid id="book_t" width="100%" rowCount="3" dataProvider="{books.book}">
   <mx:columns>
    <mx:DataGridColumn dataField="name" headerText="书名"/>dataField="name" 与xml中的节点相对应
    <mx:DataGridColumn dataField="author" headerText="作者"/>
    <mx:DataGridColumn dataField="publish" headerText="出版社"/>
   </mx:columns>
</mx:DataGrid>
<mx:Canvas width="100%" height="100" backgroundColor="#ffffff">
   <mx:Label x="10" text="书名：{book_t.selectedItem.name}"/>//{book_t.selectedItem.name} 绑定相应的值
   <mx:Label x="100" text="作者：{book_t.selectedItem.author}"/>
   <mx:Label x="200" text="出版社：{book_t.selectedItem.publish}"/>
</mx:Canvas>
</mx:Application>