flex 3 学习小结2

来源:互联网 发布:网络神曲视频 编辑:程序博客网 时间:2024/04/25 18:20

1 数据绑定
    <mx:Panel title="简单数据绑定" fontSize="13" x="225" y="180" height="138" width="213" verticalAlign="middle"

horizontalAlign="center">
  <mx:VBox>
   <mx:HSlider id="mySlider"/>
   <mx:Text text="{mySlider.value}"/>
  </mx:VBox>
 </mx:Panel>
  就是用{}拉

2 model绑定
  <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="13">
 <mx:Model id="employeemodel">
   <employees>
        <employee>
            <name>John Smith</name>
            <department>技术部</department>
            <email>john@163.com</email>
        </employee>
        <employee>
            <name>Tom Steve</name>
            <department>人力资源部</department>
            <email>tom@163.com</email>
        </employee>
      </employees>
    </mx:Model>
    <mx:Panel title="使用Model组件">
     <mx:DataGrid dataProvider="{employeemodel.employee}">
            <mx:columns>
             <mx:DataGridColumn dataField="name" headerText="员工名"/>
             <mx:DataGridColumn dataField="department" headerText="部门"/>
             <mx:DataGridColumn dataField="email" headerText="Email"/>
            </mx:columns>
     </mx:DataGrid>
    </mx:Panel>
</mx:Application>

3 使用mx:object来绑定
  <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:Panel title="使用Object组件">
     <mx:DataGrid >
        <mx:dataProvider>
          <mx:Object name="John Smith" department="技术部" email="john@163.com"/>
         <mx:Object name="Tom Steve" department="人力资源部" email="tom@163.com"/>
         <mx:Object name="fisher Steve" department="人力资源部" email="fisher@163.com"/>
        </mx:dataProvider>
     </mx:DataGrid>
    </mx:Panel>
</mx:Application>
4 树型列表组件
    <?xml version="1.0" encoding="utf-8"?>
 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
     fontFamily="simsun" fontSize="12"
     layout="absolute"  width="242" height="442" >
     <mx:Panel title="使用XML组件">
     <mx:Tree id="tree" x="10" y="35" width="218" height="397" showRoot="false" labelField="@label" >
       <mx:dataProvider>
         <mx:XML id="XMLData">
         <menus>
         <node label="Mail">
             <node label="Inbox"/>
             <node label="Personal Folder">
                 <node label="Demo"/>
                 <node label="Personal"/>
                 <node label="Saved Mail"/>
                 <node label="bar"/>
             </node>
             <node label="Calendar"/>
             <node label="Sent"/>
             <node label="Trash"/>
         </node>
     </menus>
       </mx:XML>
       </mx:dataProvider>
     </mx:Tree>        
     </mx:Panel>
 </mx:Application>
5 验证
  <mx:NumberValidator id="numV" source="{txtQQ}" property="text"/>
   <mx:Label x="19" y="274" text="QQ"/>
  if &numV.validate().type==ValidationResultEvent.VALID
  {

  ...//验证通过
}
    StringUtil.trim(txtPassword.text)=="",其中 StringUtil.trim用来去掉空格
6  日期格式化
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="13">
  <mx:Script>
   <![CDATA[
       [Bindable]
         private var today:Date = new Date();        //获得系统时间,存储在Date类型中
   ]]>
  </mx:Script>
    <!--定义一个日期格式化组件-->
    <mx:DateFormatter id="DateDisplay"
        formatString="MMMM D, YYYY"/>
    <mx:Panel width="400" height="200" title="使用DateFormatter组件格式日期" horizontalAlign="left"

verticalAlign="middle">
     <mx:Label text="未格式化的日期:{today}"/>
     <mx:Label text="格式化后的日期:{DateDisplay.format(today)}"/>
    </mx:Panel>
</mx:Application>

 

原创粉丝点击