`
cloud21
  • 浏览: 396328 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

很漂亮的Flex 用户登录界面

    博客分类:
  • Flex
阅读更多
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientColors="[0x000000,0x323232]" fontSize="12">
    <mx:Script>
        <![CDATA[
            // Import easing classes if you use them only in MXML.
            import mx.effects.easing.Bounce;
        ]]>
    </mx:Script>

    <!-- Define the transition to animate the change of view state. -->
    <mx:transitions>
       <mx:Transition>
            <mx:Parallel 
              targets="{[loginPanel, registerLink, loginButton, confirm,realname,tel,email,areaname,realnameL,telL,emailL,areanameL]}">
                <mx:Resize duration="500" easingFunction="Bounce.easeOut"/>
                <mx:Sequence targets="{[confirm,realname,tel,email,areaname,realnameL,telL,emailL,areanameL]}">
                   <mx:Blur duration="200" blurYFrom="1.0" blurYTo="20.0"/>
                   <mx:Blur duration="200" blurYFrom="20.0" blurYTo="1"/>
                </mx:Sequence>
            </mx:Parallel>
        </mx:Transition>
    </mx:transitions>
        
    <mx:states>
        <mx:State name="Register">
            <mx:AddChild relativeTo="{loginForm}" 
                position="lastChild">
                <mx:FormItem id="confirm" label="确   认:">
                    <mx:TextInput/>
                </mx:FormItem>
            </mx:AddChild> 
            <mx:AddChild relativeTo="{loginForm}" 
                position="lastChild">
            <mx:FormItem id="realnameL" label="真实姓名:">
                <mx:TextInput id="realname"/>
            </mx:FormItem>
            </mx:AddChild> 
            <mx:AddChild relativeTo="{loginForm}" 
                position="lastChild">
            <mx:FormItem id="telL" label="电话:">
                <mx:TextInput id="tel"/>
            </mx:FormItem>
            </mx:AddChild>
            <mx:AddChild relativeTo="{loginForm}" 
                position="lastChild">
            <mx:FormItem id="emailL" label="Email:">
                <mx:TextInput id="email"/>
            </mx:FormItem>
            </mx:AddChild>
            <mx:AddChild relativeTo="{loginForm}" 
                position="lastChild">
            <mx:FormItem id="areanameL" label="所在区域:">
                <mx:TextInput id="areaname"/>
            </mx:FormItem>
            </mx:AddChild>                                                              
            <mx:SetProperty target="{loginPanel}"
                name="title" value="用户注册"/>            
            <mx:SetProperty target="{loginButton}"
               name="label" value="注册"/>
            <mx:RemoveChild target="{registerLink}"/>
            <mx:AddChild relativeTo="{spacer1}" position="before">
                <mx:LinkButton label="返回登录" 
                    click="currentState=''"/>
            </mx:AddChild>
        </mx:State>
    </mx:states>

    <mx:Panel id="loginPanel" 
        title="用户登录" color="0xffffff" borderAlpha="0.15"
        horizontalScrollPolicy="off" verticalScrollPolicy="off" horizontalCenter="0" verticalCenter="022">

        <mx:Form id="loginForm" color="0x323232">
        <mx:FormItem label="用户名:">
            <mx:TextInput/>
        </mx:FormItem>
        <mx:FormItem label="密   码:">
            <mx:TextInput/>
        </mx:FormItem>
    </mx:Form>
    
    <mx:ControlBar>
        <mx:LinkButton id="registerLink"
            label="新用户注册" 
            click="currentState='Register'"/>
        <mx:Spacer width="100%" id="spacer1"/>
        <mx:Button label="登录" id="loginButton"/>
    </mx:ControlBar>
    </mx:Panel>

</mx:Application>
4
2
分享到:
评论

相关推荐

    flexviewer登陆界面

    标题提到的"flexviewer登陆界面"是指在Flex Viewer应用中实现用户身份验证的界面,通常是为了保护对特定内容或功能的访问。描述中说"为flexviewer创建简单的登陆界面",意味着我们需要创建一个基本的UI组件,让用户...

    web简单漂亮的 登陆界面

    在本资源中,我们主要关注的是"web简单漂亮的 登陆界面"。这通常是指一个设计简洁、美观且易于理解的网页登录页面。这样的界面对于初学者来说是一个很好的学习起点,因为它可以帮助他们掌握基本的Web开发技能,同时...

    jsp开发网站注册登陆界面

    例如,可以使用`display: flex`或`grid`布局来对齐表单元素,使用`border-radius`为输入框添加圆角,使用`box-shadow`添加阴影效果。 三、JavaScript交互 JavaScript负责处理用户交互,验证表单数据,以及进行动态...

    使用html语言设计登陆界面

    然后,我们将身体元素的显示方式设置为 flex,以便让登陆界面水平居中。我们还将身体元素的高度设置为 100vh,以便让登陆界面占满整个页面高度。 接下来,我们定义了 `&lt;form&gt;` 元素的样式,以便让登陆界面更美观。...

    flex4.5.1登陆的例子

    总结来说,"flex4.5.1登陆的例子"展示了如何利用 Flex 4.5.1 SDK 中的 ActionScript 和 MXML 来构建一个简单的登录界面,包括用户交互、事件处理、数据绑定和服务调用。这个例子为初学者提供了学习 Flex 开发的基础...

    登陆界面源码

    本资源名为"登陆界面源码",显然是一份使用HTML和CSS编写的登录页面代码。接下来,我们将深入探讨HTML、CSS以及如何创建一个简单的登录界面。 HTML(HyperText Markup Language)是网页内容的基础结构语言,它定义...

    网页登陆界面

    总结来说,这个"网页蓝色登陆界面"是一个基于HTML构建的用户登录系统,可能结合了CSS和JavaScript来提升用户体验。它涉及到网页基本结构、表单元素、样式设计、响应式布局以及简单的交互功能。实际部署时,还需要...

    Flex做的登录表单

    Flex是由Adobe公司开发的一种用于构建富互联网应用程序(RIA)的框架...以上就是使用Flex构建登录表单涉及的主要知识点,从界面构建到功能实现,再到错误处理和用户体验优化,每个环节都体现了Flex的强大功能和灵活性。

    基于spring+hibernate+flex整合登陆实现

    在本项目的背景下,Flex可能被用来构建用户登录界面,提供友好的用户体验。Flex应用程序可以通过ActionScript与后端服务进行通信,使用AMF(Action Message Format)协议,这种协议可以高效地传输数据,实现前后端的...

    flex 单点登录,前端后端源码 jar包

    在这个场景中,前端是使用Adobe Flex技术构建的用户界面,这是一种基于ActionScript的富互联网应用程序(Rich Internet Application, RIA)框架。后端则是用Java开发的服务端逻辑,可能涉及到认证中心(Identity ...

    Flex (Mysql+iBATIS登陆 )

    综上所述,"Flex (Mysql+iBATIS登陆)"项目涉及到Flex客户端的UI设计和事件处理,服务器端的iBATIS SQL映射,以及MySQL数据库的使用,通过这些技术的整合,实现了一个完整的用户登录系统。通过深入理解每个环节,...

    css制作的一个WEB登陆界面

    在Web开发中,创建一个吸引人的登录界面至关重要,它不仅需要美观,还要提供良好的用户体验。本教程将深入探讨如何使用CSS(Cascading Style Sheets)来构建一个复杂的Web登录界面。对于初学者来说,这是一次很好的...

    Flex+Spring+hibernate+mySql整合的一个登陆程序

    标题中的“Flex+Spring+Hibernate+MySQL整合的一个登陆程序”是指使用这四个技术栈构建的登录应用程序。这个项目结合了前端的Flex(一种基于ActionScript和Flash的RIA开发框架)与后端的Spring(一个全面的Java应用...

    flex+spring登录实例(jar包全,导入就运行)

    Flex是Adobe公司推出的一种基于ActionScript的开源框架,主要用于构建交互性强、用户体验良好的前端用户界面。而Spring则是Java后端开发中的一个核心框架,它提供了一整套服务,包括依赖注入、数据访问、事务管理等...

    QQ登陆界面

    QQ登陆界面是一个典型的网页设计项目,它涉及到前端开发中的CSS样式设计和JavaScript交互技术。在这个项目中,开发者通过结合这两种技术来创建一个吸引用户且功能完整的登录页面。 首先,我们来看CSS(Cascading ...

    flex+smartfoxserver+java+access登陆程序与源码.rar

    本项目“flex+smartfoxserver+java+access登陆程序与源码.rar”提供了一个集成的解决方案,利用Adobe Flex作为前端用户界面,SmartFoxServer作为后端实时通信服务器,Java作为业务逻辑处理,以及Access数据库进行...

    flex登陆实例

    `loginForm.mxml`是本案例的核心组件,负责展示登录界面以及处理用户的输入信息。该组件主要包含以下元素: - **两个标签**:用于显示“用户名”和“密码”的提示文本。 - **两个文件域**:分别为用户名和密码的...

    Flex3/4 Cairngorm框架 入门 源码 主要是登陆注册功能。

    2. **视图(View)**:展示用户界面,通常由Flex组件构成,如Button、Label等。视图并不直接处理业务逻辑,而是通过事件与控制器通信。 3. **控制器(Controller)**:负责处理视图和模型之间的交互。在Cairngorm中...

    Flex4+struts2 登陆 HTTP方式

    Flex4是Adobe公司开发的开源框架,用于构建具有丰富用户界面的Web应用。它基于ActionScript编程语言,使用MXML和AS3(ActionScript 3.0)进行声明式编程。Flex4引入了全新的皮肤和组件架构,增强了图形和布局能力,...

    jQuery 实现弹层登陆界面

    本教程将详细讲解如何使用 jQuery 实现一个弹层登录界面,该界面将在用户点击登录按钮时以弹出层的形式出现,不影响页面主体内容的展示。 首先,我们需要在 HTML 文件(如 `demo.html`)中创建基本的结构。弹层登录...

Global site tag (gtag.js) - Google Analytics