Xamarin Forms - Apresentando o Visual State Manager (VSM) - III

 Neste artigo vou apresentar o Visual State Manager que foi introduzido na versão 3.0 do Xamarin Forms.

Continuando a segunda parte do artigo veremos como definir seu próprio estado visual.

Já vimos que cada classe que deriva de VisualElement dá suporte a três estados comuns "Normal", Focused" e "Disabled".

Internamente, a classe VisualElement detecta quando a alteração do estado ocorre para disabled, focused ou unfocused e chama o método estático VisualStateManager.GoToState :

VisualStateManager.GoToState(this, "Focused");

Este é o único código do VSM que você encontrará na classe VisualElement. Como GoToState é chamado para cada objeto com base em cada classe que deriva de VisualElement, você pode usar o VSM com qualquer objeto VisualElement para responder a essas alterações.

Curiosamente, o nome do grupo de estados visuais "CommonStates" não esta explicitamente referenciado nos VisualElement. O nome do grupo não é parte da API para o VSM sendo meramente uma descrição geral dos estados no grupo.

É implicitamente entendido que os estados visuais em qualquer grupo são mutuamente exclusivos: um e apenas um estado é o estado atual a qualquer momento.

Se você quiser implementar seus próprios estados visuais, você precisará chamar VisualStateManager.GoToState a partir do código. Essa chamada é feita no arquivo code-behind da sua classe de página.

A seguir vamos criar um estado visual definido como valid e invalid para validar a entrada do número de telefone em uma view Entry.

Recursos Usados

Usando o projeto Xamarin.Forms

Vamos usar o projeto  XF_VSM1 criado no primeiro anterior e incluir uma nova Content Page com o nome VSMPage2.xaml.

Para poder exibir esta página basta alterar o código do arquivo App.xaml.cs conforme abaixo:

....
	public App ()
	{
		InitializeComponent();
		MainPage = new VSMPage2();
	}
...

1- Criando seu próprio estado visual : valido e invalido

Vamos definir o código abaixo no arquivo VSMPage2.xaml :

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XF_VSM1.VSMPage2">
    <StackLayout Padding="10, 10">
        <Label Text="Informe o telefone:"
               TextColor="Blue"
               FontSize="Large" />
        <Entry Placeholder="555-555-5555"
               FontSize="Large"
               Margin="30, 0, 0, 0"
               TextChanged="OnTextChanged" />
        <Label x:Name="helpLabel"
               TextColor="Red"
               Text="O telefone deve estar no formato 555-555-5555, e não começar com 0 ou 1">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup Name="ValidityStates">
                    <VisualState Name="Valid">
                        <VisualState.Setters>
                            <Setter Property="TextColor" Value="Transparent" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState Name="Invalid" />
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Label>
        <Button x:Name="submitButton"
                Text="Submeter"
                FontSize="Large"
                Margin="0, 20"
                VerticalOptions="Center"
                HorizontalOptions="Center">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup Name="ValidityStates">
                    <VisualState Name="Valid" />
                    <VisualState Name="Invalid">
                        <VisualState.Setters>
                            <Setter Property="IsEnabled" Value="False" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Button>
    </StackLayout>
</ContentPage>

Neste código XAML definimos as views:
 

O código da marcação do VSM esta anexado ao segundo Label (chamado helpLabel) e ao Button (chamado submitButton).

Existem dois estados mutuamente exclusivos, denominados "Valid" e "Invalid".

Observe que cada um dos dois grupos "ValidationState" contém tags VisualState para "Valid" e "Invalid", embora um deles esteja vazio em cada caso.

Se a view Entry não tiver um número de telefone válido, o estado atual será "Invalid" (Inválido) e, assim, a segunda Label estará visível e o botão estará desabilitado.

Quando um número de telefone válido for inserido, o estado atual se torna "Valid". A segunda Entry desaparece e o botão agora fica ativado:

O arquivo code-behind VSMPage2.xaml.cs é responsável pela manipulação do evento TextChanged da view Entry.

O manipulador usa uma expressão regular para determinar se a cadeia de caracteres de entrada é válida ou não.

O método no arquivo code-behind chamado GoToState chama o método estático VisualStateManager.GoToState para a Label helpLabel e par ao Button submitButton:

Observe também que o método GoToState é chamado pelo construtor para inicializar o estado. Deve sempre haver um estado atual. Mas em nenhum lugar no código há qualquer referência ao nome do grupo de estado visual, embora seja referenciado no XAML como "ValidityStates" para fins de clareza.

Observe que o arquivo code-behind deve considerar todos os objetos da página afetados por esses estados visuais e chamar VisualStateManager.GoToState para cada um desses objetos. Neste exemplo, são apenas dois objetos (o Label e o Button), mas podemos ter vários outros.

Executando o projeto teremos o seguinte resultado:

Criamos assim dois novos estados visuais : valid e invalid em nosso projeto Xamarin Forms usando o VSM.

Pegue o código do projeto compartilhado aqui:  XF_VSM3.zip

"Porque Cristo não entrou num santuário feito por mãos, figura do verdadeiro, porém no mesmo céu, para agora comparecer por nós perante a face de Deus;"
Hebreus 9:24

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

  Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

Referências:

José Carlos Macoratti