User Interface Explorer

Páginas filhas
  • Estados e Transições

Quando usar

  • Para mostrar os conteúdos mais importantes na frente, e esconder o restante;
  • Para representar para o usuário que houve mudanças na interface;
  • Para conduzir o usuário de que foi alterado o contexto que ele estava para outro modo.

Estrutura

O conteúdo mais usado e importante sempre deverá estar visivél. Coloque o restante em sua própria página ou secção. Colocar um botão ou link claramente marcados para o resto, como "Mais Opções". Muitos UIs usam setas ou divisas, ">>", como parte do link ou botão.

Esta secção deverá ter um outro botão ou link para deixar o usuário fechá-la novamente. Lembre-se, a maioria dos usuários não vai precisar dele na maior parte do tempo. Apenas certifique-se que à entrada e à saída deste "restante" são óbvios.

Comportamentos

Em algumas interfaces, a janela literalmente expande para acomodar os detalhes da secção e, em seguida, encolhe novamente para baixo quando o usuário a fecha.

Boas Práticas

  • Quando o usuário precisa passar de um grupo de informações para outro, onde estará disponibilizado na mesma interface um efeito de transição auxiliando a observar as mudanças na interface.

Exemplo

Unknown macro: {flash}

Código fonte


<?xml version="1.0" ?>
<!-- Simple example to demonstrate the Transition class. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <!-- Define one view state, in addition to the base state.-->
    <mx:states>
        <mx:State name="Register">
            <mx:AddChild relativeTo="{loginForm}" position="lastChild">
                <mx:target>
                    <mx:FormItem id="confirm" label="Confirm:">
                        <mx:TextInput/>
                    </mx:FormItem>
                </mx:target>
            </mx:AddChild>
            <mx:SetProperty target="{loginPanel}" name="title" value="Register"/>
            <mx:SetProperty target="{loginButton}" name="label" value="Register"/>
            <mx:SetStyle target="{loginButton}"
                name="color" value="blue"/>
            <mx:RemoveChild target="{registerLink}"/>
            <mx:AddChild relativeTo="{spacer1}" position="before">
                <mx:target>
                    <mx:LinkButton id="loginLink" label="Return to Login" click="currentState=''"/>
                </mx:target>
            </mx:AddChild>
        </mx:State>
    </mx:states>

    <mx:transitions>
        <!-- Define the transition from the base state to the Register state.-->
        <mx:Transition id="toRegister" fromState="*" toState="Register">
            <mx:Sequence targets="{[loginPanel, registerLink, confirm, loginLink, spacer1]}">
                <mx:RemoveChildAction/>
                <mx:SetPropertyAction target="{loginPanel}" name="title"/>
                <mx:SetPropertyAction target="{loginButton}" name="label"/>
                <mx:SetStyleAction target="{loginButton}" name="color"/>
                <mx:Resize target="{loginPanel}"/>
                <mx:AddChildAction/>
            </mx:Sequence>
        </mx:Transition>
        <!-- Define the transition from the Register state to the base state.-->
        <mx:Transition id="toDefault" fromState="Register" toState="*">
            <mx:Sequence targets="{[loginPanel, registerLink,
                    confirm, loginLink, spacer1]}">
                <mx:RemoveChildAction/>
                <mx:SetPropertyAction target="{loginPanel}" name="title"/>
                <mx:SetPropertyAction  target="{loginButton}" name="label"/>
                <mx:SetStyleAction target="{loginButton}" name="color"/>
                <mx:Resize target="{loginPanel}"/>
                <mx:AddChildAction/>
            </mx:Sequence>
        </mx:Transition>
                </mx:transitions>
    <!-- Define a Panel container that defines the login form.-->
    <mx:Panel title="Login" id="loginPanel"
        horizontalScrollPolicy="off" verticalScrollPolicy="off"
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
        <mx:Text width="100%" color="blue"
            text="Click the 'Need to Register?' link to change state. Click the 'Return to Login' link to return to the base state."/>
        <mx:Form id="loginForm" >
            <mx:FormItem label="Username:">
                <mx:TextInput/>
            </mx:FormItem>
            <mx:FormItem label="Password:">
                <mx:TextInput/>
            </mx:FormItem>
        </mx:Form>
        <mx:ControlBar>
            <mx:LinkButton id="registerLink"  label="Need to Register?"
                click="currentState='Register'"/>
            <mx:Spacer width="100%" id="spacer1"/>
            <mx:Button label="Login" id="loginButton"/>
        </mx:ControlBar>
    </mx:Panel>
</mx:Application>

Referências

Veja Também

\\ h6.Navegação {pagetree:root=@home|startDepth=2|expandCollapseAll=true}