聪明文档网

    聪明文档网

    最新最全的文档下载
    当前位置： 首页> Flex导航设计与表单验证

    Flex导航设计与表单验证

    时间：    下载该word文档
    Flex3界面导航设计教程

    博客分类：
    module可以延迟加载,这样在你的程序初始化的时候,只需要加载MailFrame.
    Flex
    AdobeActionScriptXML

    一个导航容器可以通过一组子容器来监控用户的操作。比如，TabNavigator这个容器就可以通过一组tabs来让用户选择可见的子容器。Flex3提供了三种主要的导航容器：
    ViewStackTabNavigatorAccordion
    接下来的时间逐个介绍每个容器的使用方法。1.ViewStack导航容器
    ViewStack导航容器，以下简称VS容器。是由很多子容器组合起来的，这些子容器相互叠在彼此之上，并且在某一特定的时间内只有一个容器是可见的或者说是Active状态的。VS容器没有定义built-in的机制来切换当前处于active状态的容器，所以用户需要使用像LinkBar,TabBar或者ToggleButtonBar这些控件，或者使用ActionScript来更改当前可见容器的状态。比你可以定义一系列的按钮来控制所有子容器的切换动作。


    图中左边的图片显示VS容器中第一个子容器是激活的，可以用索引的方法来表示VS容器里面的子容器。比如0-（n-1）.创建一个VS容器
    使用标记就可以定义一个VS容器，当然还可以设定很多属性了：
    selectedIndex表示如果VS容器里里面有多余一个的子容器，那么
    selectedIndex的值所对应的那个子容器就是active的可见的。其取值范围0到n-1.n代表子容器的个数。

    selectedChild当前激活的容器当定义了一个或者多个子容器，如果没有定
    义子容器，其值为null。并且这个属性必须是现在AS当中指定你要激活的那个容器的id.
    numChildren值VS容器当中到底有多少个子容器。
    举例：我们试图增加一些特效。
    Xml代码



    xmlns:mx="http://www.adobe.com/2006/mxml">id="myWU"duration="300"/>id="myWD"duration="300"/>id="myWR"duration="300"/>
    dataProvider="{myViewStack}"borderStyle="solid"
    backgroundColor="#EEEEFF"/>id="myViewStack"borderStyle="solid"width="100%"
    creationCompleteEffect="{myWR}">id="search"label="Search"hideEffect="{myWD}"showEffect="{myWU}">

    text="SearchScreen"/>
    id="custInfo"label="CustomerInfo"hideEffect="{myWD}"showEffect="{myWU}">text="CustomerInfo"/>
    id="accountInfo"label="AccountInfo"hideEffect="{myWD}"showEffect="{myWU}">text="AccountInfo"/>    效果图：



    2.TabNavigator导航容器
    TabNavigator容器用来创建和管理一组tabs，这些tabs可以帮用户导航选择需要的子容器板块。
    创建TabNavigator容器
    你可以通过标记来定义个TabNavigator容器。用户可以通过tab选择对应的板块容器。当用户改变当前容器时，TabNavigator容器都会触发一个change事件。
    TabNavigator容器会自动为每一个子容器创建一个tab,并且通过label属性设定tab里面的值。当然你可以指定图片等。用户还可以设定enabledisable属性来决定那个容器可用与否。举例：
    Xml代码


    version="1.0"?>
    
    xmlns:mx="http://www.adobe.com/2006/mxml">id="myWL"/>
    label="Accounts"width="300"height="150"
    showEffect="{myWL}">text="Thisisatextcontrol."/>
    label="Stocks"width="300"

    height="150"
    showEffect="{myWL}">text="Thisisatextcontrol."/>
    label="Futures"width="300"height="150"
    showEffect="{myWL}">
    text="Thisisatextcontrol."/>    效果如图：



    TabNavigator支持键盘导航功能，即可以通过键盘来选择tabs.具体可以参考developmentguide.
    3.Accordion导航容器
    窗体是很常见的容器了，可是有时候组件很多一个窗体放不下，accordion就提供了一个可以来回移动的窗体。这个容器可以包含一系列的子panels。但是任意时刻都只有一个panel是可见的。
    创建Accordion容器
    你可以使用标记来创建这个容器。举例说明：
    Xml代码


    version="1.0"?>
    
    xmlns:mx="http://www.adobe.com/2006/mxml"width="600"height="600"
    creationComplete="setButtonStyles(;">
    publicfunctionsetButtonStyles(:void{
    comp.getHeaderAt(0.setStyle('color',0xAA0000;comp.getHeaderAt(1.setStyle('color',0x00AA00;}]]>

    id="comp"height="250">
    id="shippingAddress"label="1.ShippingAddress">id="sfirstNameItem"label="FirstName">id="sfirstName"/>
    id="billingAddress"label="2.BillingAddress">id="backButton"label="Back"click="comp.selectedIndex=0;"/>
    id="nextButton"label="Next"click="comp.selectedIndex=2;"/>
    id="creditCardInfo"label="3.CreditCardInformation">    
    我们增加了一些效果。比如用户通过按钮可以选择那个panel是可见的。
    Xml代码


    id="lastButton"label="Last"click="accordion1.selectedIndex=accordion1.numChildren-1;"/>
    这段程序就可以打开最后一个panel.
    同时还可以设定每个panels的外观，包括字体、颜色等。
    ButtonBar和ToggerButtonBar和的效果图一样
    3.动态控制对象的布局


    3.1使用Tile显示多个按钮
    Tile直接继承Container，使用起来非常方便。适合重复排列的元素。direction属性值为horizontal时，设置其子级对象的布局方向为水平方向。tileWidth和tileHeight用来控制每个子级对象的长和宽。
    Xml代码


    version="1.0"encoding="utf-8"?>layout="absolute">

    //导入Button对象importmx.controls.Button;internalfunctionaddItem(:void{//创建Button实例
    varbtn:Button=newButton(;btn.label="btn_10";btn.height=50;btn.width=75;
    //向Tile容器中添加该按钮holder.addChild(btn;}]]>
    xmlns:mx="http://www.adobe.com/2006/mxml"

        
    id="holder"
    x="41"
    y="45"
    width="330"
    height="280"
    horizontalGap="2"
    direction="horizontal"tileHeight="80"tileWidth="80">label="btn_1"height="50"width="75"/>label="btn_2"height="50"width="75"/>label="btn_3"height="50"width="75"/>label="btn_4"height="50"width="75"/>label="btn_5"height="50"width="75"/>label="btn_6"height="50"width="75"/>label="btn_7"height="50"width="75"/>label="btn_8"height="50"width="75"/>label="btn_9"height="50"width="75"/>
    x="266"y="340"label="增加一个按钮"fontSize="12"click="addItem("/>
    3.2更强大的Grid组件
    Grid继承自Box，类似于HTML中的表格，由行和单元格组成。单元格中可以包含其他元素。行必须为GridRow对象，每个单元格必须为GridItem对象。两者继承自HBox。colSpan表示单元格所占的横向格数，rowSpan表示单元格所占的纵向行数。类似于HTML的Table。
    Xml代码



    version="1.0"encoding="utf-8"?>layout="absolute">
    x="62"y="96"horizontalGap="2">width="100%"height="79">width="100%"height="100%">label="Button1"/>
    width="100%"height="100%"colSpan="2">label="Button2"height="60"/>
    width="100%"height="100%">label="Button3"/>label="Button4"/>
    width="100%"height="79">width="100%"height="100%">label="Button"/>
    width="100%"height="100%">
    label="Button"height="60"width="98"/>
    xmlns:mx="http://www.adobe.com/2006/mxml"

    
    width="112"height="100%">
    label="Button"width="41"height="55"/>label="Button"width="85"/>
    4.方便的导航容器
    导航类允许用户在其子级元素之间却换，但必须是容器类型，单我们可以在子级容器中圈套其他容器和组件。
    4.1Accordion组件
    Accordion是一个可折叠的导航器，包含一个子面板列表，但一次仅显示一个面板。selectedChild和selectedIndex表示当前显示的子元素和显示元素的索引号，可以利用这两个属性来控制组件的显示内容。如代码中的tab_menu.selectedIndex=1表示却换到第2个面板。
    Xml代码


    version="1.0"encoding="utf-8"?>layout="absolute">
    
    internalfunctiondoSkip(:void{
    xmlns:mx="http://www.adobe.com/2006/mxml"

    tab_menu.selectedIndex=1;}]]>    
    id="tab_menu"x="57"y="67"width="194"height="270"fontSize="12">
    label="Item1"width="100%"height="100%">text="Canvas1"/>x="10"y="38"/>
    label="Item2"width="100%"height="100%">text="这里插入内容"height="28"/>
    label="请选择性别"/>label="女"/>label="男"/>        

    
    title="内嵌的height="90%">
    
    x="259"y="315"label="跳到第二个菜单"fontSize="14"labelPlacement="right"click="doSkip("/>
    4.2ViewStack组件
    由若干重叠在一起的子容器组成，每次只有一个容器是可见或活动的。但它不为用户提供却换当前活动容器的界面接口，可以通过AS进行控制，或者和其他控制类容器联合使用。如：LinkBar、TabBar、ButtonBar、ToggleButtonBar等。一般用来做向导类的应用。就是有那种下一步下一步的。selectedChild表示当前处于激活状态的子级对象。
    Xml代码


    Panel"label="Item3"width="90%"
    version="1.0"encoding="utf-8"?>layout="absolute">
    internalfunctiondoChange(:void{
    if(viewstack_1.selectedChild==child2{viewstack_1.selectedChild=child1;
    xmlns:mx="http://www.adobe.com/2006/mxml"

    }else{
    viewstack_1.selectedChild=child2;}}]]>
    x="46"y="72"id="viewstack_1"width="200"height="200">id="child1"label="View1"width="100%"height="100%">fontSize="12">
    label="请选择您感兴趣的技术："/>label="Flash"/>label="Flex"/>
    label="FlashMediaserver"/>label="Breeze"/>    
    id="child2"label="View2"width="100%"height="100%">text="请输入您的邮箱地址"fontSize="12"/>

    x="46"y="304"label="切换按钮"fontSize="12"click="doChange("/>
    4.3使用TabNavigator进行快速导航
    继承自ViewStack，还提供了用户却换内容的界面接口。类似标签页却换面板。
    Xml代码


    version="1.0"encoding="utf-8"?>layout="absolute">
    x="70"y="91"width="200"height="200">label="Tab1"width="100%"height="100%">x="10"y="31"label="选中我"fontSize="12"/>
    
    label="Tab2"width="100%"height="100%">x="20"y="41"text="第二个面板"fontSize="12"/>    
    
    5.表单布局
    Flex提供了一套表弟组件，让我们可方便的构建复杂的表单程序。
    xmlns:mx="http://www.adobe.com/2006/mxml"

    Form容器是表单功能组件中的主要成员，继承自Container，相关的组件还有FormItem和FormHeading。
    5.1简单的用户输入表单
    FormHeading表示表弟标题，这里也可以放置顶部的导航控制。
    FormItem可以容纳多个组件，且组件的布局方向有horizontal和vertical。FormItem还有一个属性required表示本栏的值是否为空。
    5.2表单验证
    最后添加了5个验证对象，分别针对不同的组件，他们的source属性表示目标对象：StringValidator字符验证，property="text"为文本属性，minLength和maxLength表示字符最短长度和最长长度。tooShortError提示信息。PhoneNumberValidator电话号码验证DataValidator日期验证EmailValidator邮箱验证
    Xml代码


    version="1.0"encoding="utf-8"?>layout="absolute">
    title="用户注册信息"width="359"height="303"x="24.5"y="37"fontSize="12">
    width="100%"height="100%"horizontalGap="0">label="用户资料"width="100%"/>
    label="用户名："width="100%"required="true">width="100%"id="user_txt"/>
    label="密码："width="100%"required="true">
    width="100%"
    displayAsPassword="true"
    xmlns:mx="http://www.adobe.com/2006/mxml"

    id="pass_txt"/>
    label="性别："width="100%"direction="horizontal">
    groupName="isMale"
    label="男"
    />
    groupName="isMale"label="女"/>
    label="邮箱："width="100%">
    width="100%"id="email_txt"/>
    label="电话："width="100%">
    width="100%"id="phone_txt"/>
    label="出生年月："width="100%">
    width="100%"id="birth_txt"/>horizontalAlign="center">
    label="确定"/>label="重写"/>
    height="32"
    paddingBottom="0"
    paddingTop="0"

    
    source="{user_txt}"property="text"minLength="6"maxLength="12"tooShortError="用户名太短了"/>
    source="{pass_txt}"property="text"minLength="6"maxLength="12"/>
    source="{phone_txt}"property="text"/>source="{birth_txt}"property="text"/>source="{email_txt}"property="text"/>
    

    免费下载 Word文档免费下载： Flex导航设计与表单验证

    TOP热门搜索

    相关推荐：

    领导讲话材料汇编

    • ￥29.8

      ￥45 每天只需1.0元
      1个月 推荐

    • ￥9.9

      ￥15
      1天

    • ￥59.8

      ￥90
      3个月

    选择支付方式

    • 微信付款
    会员须知 联系在线客服 登录账号
    郑重提醒：支付后，系统自动为您完成注册

    请使用微信扫码支付(元)

    订单号：
    支付后，系统自动为您完成注册
    遇到问题请联系 在线客服

    常用手机号：
    用于找回密码
    图片验证码：
    看不清？点击更换
    短信验证码：
    新密码：
     
    绑定后可用手机号登录
    请不要关闭本页面，支付完成后请点击【支付完成】按钮
    遇到问题请联系 在线客服

    侵权投诉  © 2013-2019 http://www.tcm999.cn   站点地图 |  手机版

    本站文档均来自互联网及网友上传分享，本站只负责收集和整理，有任何问题可通过上访投诉通道进行反馈