`

flex组件学习4_form

    博客分类:
  • flex
阅读更多
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
	<!--
		The Form container always arranges its children vertically and left-aligns them in the form.
		 The form container contains one or more FormHeading and FormItem containers.
		 
		1 Form 一般布置他字组件 垂直 左对齐
		2 form 可以有一个或多个 FormHeading FormItem子容器
		 

	-->
	
	 <mx:Form id="myForm" width="400" height="100">

        <!-- Define FormHeading and FormItem components here -->

    </mx:Form>
    <!--no.1-->
    <!--When you create a FormItem container, 
    you specify its direction by using the value vertical (default) or horizontal for the direction property
    当我们创建一个FormItem ,你可以用 direction属性 确定他是 垂直排列 还是水平 排列
    -->
	 <mx:Style>       
        .myFormItemLabelStyle {
            color: #333399;
            fontSize: 20;
         }
         
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private function processValues(zip:String, pn:String):void {
                // Validate and process data.
            }
        ]]>
    </mx:Script>

    <mx:Form id="myForm1" defaultButton="{mySubmitButton}">

        <mx:FormItem label="Zip Code" 
            labelStyleName="myFormItemLabelStyle">
            <mx:TextInput id="zipCode"/>
        </mx:FormItem>
        <mx:FormItem label="Phone Number">
            <mx:TextInput id="phoneNumber"/>
        </mx:FormItem>
    
        <mx:FormItem>
            <mx:Button label="Submit" id="mySubmitButton" 
                click="processValues(zipCode.text, phoneNumber.text);"/>
        </mx:FormItem>
    
    </mx:Form>
	
	<!--no.3-->
    <mx:Script>
        <![CDATA[
            private function submitForm():void {                
                // Handle the form submission.
            }
        ]]>
    </mx:Script>

    <mx:Form id="myForm2" width="400">

        <mx:FormHeading label="Billing Information"/>

        <mx:FormItem label="First Name">
            <mx:TextInput id="fname" width="100%"/>
        </mx:FormItem>

        <mx:FormItem label="Last Name">
            <mx:TextInput id="lname" width="100%"/>
        </mx:FormItem>

        <mx:FormItem label="Address">
            <mx:TextInput id="addr1" width="100%"/>
            <mx:TextInput id="addr2" width="100%"/>
        </mx:FormItem>

        <mx:FormItem label="City / State" direction="vertical">
            <mx:TextInput id="city"/>
            <mx:ComboBox id="st" width="75">
              <mx:ArrayCollection>
                 <mx:String>MA</mx:String>
                 <mx:String>NH</mx:String>
                 <mx:String>RI</mx:String>
              </mx:ArrayCollection>                     
            </mx:ComboBox>
        </mx:FormItem>

        <mx:FormItem label="ZIP Code">
            <mx:TextInput id="zip" width="100"/>
        </mx:FormItem>

        <mx:FormItem label="Country">
            <mx:ComboBox id="cntry">
              <mx:ArrayCollection>
                 <mx:String>USA</mx:String>
                 <mx:String>UAE</mx:String>
                 <mx:String>UAW</mx:String>
              </mx:ArrayCollection>                     
            </mx:ComboBox>
        </mx:FormItem>

        <mx:FormItem>
            <mx:HRule width="200" height="1"/>
            <mx:Button label="Submit Form" click="submitForm();"/>
        </mx:FormItem>
    </mx:Form>

</mx:Application>

 官方文档太多了,没全用

 

分享到:
评论

相关推荐

    Flex_Boxs_BorderContainer_Canvas_DividedBox_Form

    本教程将深入探讨“Flex_Boxs_BorderContainer_Canvas_DividedBox_Form”中的各个知识点,帮助你掌握这些关键组件的使用。 首先,我们来看“Boxs”。在Flex布局中,“Boxs”通常指的是Flex容器,它允许开发者对容器...

    Flex学习PPT_wildh

    4. **Flex组件库**:Flex提供了一套丰富的组件,如Button、Text、Form、List等,可以直接在界面上拖放使用,大大简化了UI设计。此外,开发者还可以自定义组件以满足特定需求。 5. **数据绑定**:Flex支持数据绑定...

    Flex from_validator_表单验证

    这可以通过在MXML或ActionScript中定义UI组件来完成。 2. 定义验证规则:每个需要验证的字段都需要一个对应的验证规则。例如,邮箱字段可能需要验证是否为有效格式,密码字段可能需要验证长度和复杂性。 3. 配置验证...

    flex组件介绍

    ### Flex组件介绍与详解 Flex是一种用于开发交互式应用程序的开源框架,由Adobe Systems创建,主要应用于Adobe Flash Player和Adobe AIR。Flex提供了丰富的用户界面组件库,这些组件可以帮助开发者快速构建高质量的...

    flex form 验证(转)

    在Flex中,`Form`组件是用于收集用户输入数据的主要工具,而`FormValidator`则是处理表单验证的核心类。 1. **表单验证基本概念** 表单验证通常包括对输入数据的类型检查(如数字、字符串)、长度检查、格式检查...

    FLEX学习资料,从零基础开始学FLEX

    可能涵盖了Flex组件的深度使用、高级图形绘制、状态管理、数据访问和优化技巧等内容。对于希望提升Flex项目实战能力的开发者来说,这是一份宝贵的资源。 **6. Flex3控件API.pdf** 这份文档很可能是Flex 3的控件API...

    flex 时间组件(time)

    Time组件在Flex中属于MX组件库,它是MX Form组件家族的一部分,主要服务于数据输入场景。Time组件的设计目标是提供一个易于使用的UI,让用户可以方便地选择小时、分钟和(可选)秒。它通常与DateChooser组件一起使用...

    flex_test.rar_flex

    3. **与Java的通信**:Flex可以通过HTTPService或WebService组件与Java后端进行通信。BlazeDS或LCDS作为中间件,提供AMF(Action Message Format)协议,使得Flex与Java之间的数据交换更为高效。 4. **Java后端处理...

    FlexForm表单设计器

    FlexForm表单设计器是一款基于Adobe Flex技术开发的高级表单设计工具,专为构建用户界面提供强大支持。Flex是一种开放源代码的框架,主要用于构建富互联网应用程序(RIA),它使用MXML和ActionScript编程语言,结合...

    Flex实例,form表单

    总结,使用Flex Builder创建联系人表单涉及到了Flex的基础知识,包括组件的使用、事件处理、数据绑定以及UI设计。理解这些概念,将有助于你构建更复杂的Flex应用程序。在实际开发中,你还可以结合其他技术,如...

    Flex课程学习(附带源码)

    2、flexBuilder基于eclipse的IDE集成Design、debug动态help 4j:ant脚本 3、flex framework visual components Manager classes RPC/Messaging/Data Service c Utilities 4、MxML ()" /&gt; A、 ...

    Flex从入门到实践_1

    4. **Flex组件库** Flex提供了一套丰富的组件集,如Button、TextInput、Label、List等,可满足大部分UI需求。理解这些组件的用法、属性和事件,能帮助开发者快速构建用户界面。此外,自定义组件也是提升应用特性的...

    flex2帮助文档.chm

    4. **组件体系**:详述Flex 2内置的组件库,如Button、Canvas、Form等,以及如何自定义组件。 5. **数据绑定**:解释如何实现视图和模型之间的动态数据绑定,使得UI自动反映数据的变化。 6. **图形和动画**:讲述...

    flex源码_董龙飞

    2. **MXML**:在MXML文件中,你可以看到各种Flex组件的声明,如Button、Canvas、Form等,以及它们的属性和事件处理函数。通过MXML,开发者可以直观地设计UI布局,而无需深入到ActionScript的细节中。 3. **...

    Flex DataGrid组件 使用详解

    在实际开发中,根据具体的需求,DataGrid组件可以与其他Flex组件(如Form、Button等)配合使用,创建出更复杂的用户界面。总的来说,Flex DataGrid组件是Flex开发中不可或缺的一部分,对于处理结构化数据的展示和...

    Flex 3 组件实例与应用(2009版)

    《Flex 3 组件实例与应用》是一本针对初学者学习Adobe Flex 3框架及其组件的指南书籍。这本书由作者Dason编写,内容覆盖了Flex 3中的多种组件及其用法,并通过实际案例帮助读者更好地理解和掌握这些组件的应用场景和...

    Login-System.zip_ac_oetags.js_flex_flex login

    在本压缩包“Login-System.zip”中,包含了一个名为“ac...通过这个简单的示例,开发者可以学习到如何使用Flex构建交互式界面,以及如何通过JavaScript库收集用户行为数据,这对于提升用户体验和业务洞察具有重要意义。

    Flex书籍 文档 资料(整理 非常齐全)

    4. **Flex组件库**:Flex SDK提供了一个丰富的组件库,包括按钮、文本输入框、列表、图表等多种UI元素。这些组件可以拖放到设计视图中,极大地提高了开发效率。 5. **Flex Builder**:虽然Flex SDK本身是命令行工具...

    Flex入门资料 flex3.0

    3. **Flex组件库**:讲解Flex提供的各种预定义UI组件,如Button、Label、List、Form等,以及如何自定义组件以满足特定需求。 4. **数据绑定**:Flex中的数据绑定机制使得UI元素的状态可以直接与数据模型关联,实现...

    Flex UI组件使用全集

    ### Flex UI组件使用全集详解 #### 概述 本文档是基于阿树对Adobe Flex UI组件库的全面整理,并结合Adobe主页上提供的各种组件代码示例进行深度解析。Flex是一种用于构建高度交互式的Web应用的框架,尤其适用于创建...

Global site tag (gtag.js) - Google Analytics