O X do Xamarin Forms — Reactive UI
Fala Galera,
Quando criamos aplicações Xamarin.Forms geralmente utilizamos o padrão MVVM.
Muitas vezes criamos nossa própria navegação , ViewModelBase e etc. Algumas vezes utilizamos frameworks como Prism , MVVMCross , MVVM Light e etc.
Porem existe um framework bem legal que pode nos ajudar a desenvolver Apps com o padrão MVVM além de utilizar uma abordagem um pouco diferente , o ReactiveUI.
O ReactiveUI é um framework open source que facilita a utilização de ReactiveX no desenvolvimento de interfaces reativas em diversas plataformas, além de nos fornecer um suporte incrível ao MVVM.
ReactiveX ? Reactive Extensions é uma biblioteca para criar programação assíncrona e orientada a eventos utilizando o padrão Observer , é da mesma forma que o Linq funciona (inclusive criado pela Microsoft e pelo mesmo time que desenvolve o linq) . Para conhecer mais clique aqui
O ReactiveUI disponibiliza uma serie de funcionalidades prontas que facilitam a implementação de interfaces :
- ReactiveObject : Basicamente nossa BaseViewModel
- Reactive Platform Wrappers : Nos ajuda a fazer implementações na plataforma, ciclo de vida e etc
- Data Binding
- Commands
- Navigation : Nos ajuda na implementação de uma navegação por MVVM
- Helpers : Diversos helpers para validação, eventos, logs e etc.
Basicamente tudo que precisamos de um Framework MVVM e de uma interface reativa.
Bom vamos ver na pratica!
Configurando o Framework
Vamos ao Nuget adicionar os seguintes pacotes em nossos projetos:
Como vamos utilizar o MVVM e os Eventos precisamos deles. Existem mais pacotes para ReactiveUI , a instalação depende de sua necessidade.
Lembre-se só instale plugins que vamos utilizar.
Tudo certo vamos utilizar!
Utilizando Reactive UI
Vamos criar nossa ViewModel, para conseguirmos utilizar os Bindings que irão entender que as propriedades sofreram modificações nossa ViewModel deve usar como base o ReactiveObject em seguida as propriedades utilizarão o RaiseAndSetIfChanged :
Com isso temos nossa ViewModel funcionando :). Agora vamos implementar um command para o login :
Pronto. Basicamente o que fizemos foi criar um command que pode ser executado apenas quando o valor do login e senha não estiverem null ou vazios, toda essa implementação é feita de forma bem simples , agora vamos implementar uma tela simples:
E executar :
Bem simples a utilização não é?
É possível simplificar mais ainda as implementações, como ? com o Fody!
Fod.. Quem ? Pra resumir bem , O Fody é uma ferramenta extensível e poderosa para Weaving que permite manipular um Assembly adicionando uma parte de código na compilação.
Então vamos adicionar um novo pacote em nosso projeto :
Em seguida precisamos criar um arquivo chamado FodyWeavers.xml com a tag ReactiveUI :
<Weavers xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="FodyWeavers.xsd">
<ReactiveUI />
</Weavers>Agora vamos alterar nosso código para uma forma mais simples. Graças ao Fody ele vai implementar tanto o RaiseAndSetIfChanged como todas as outras implementações na hora da compilação. Assim você tem um código menor e mais fácil de dar manutenção :
Utilizamos o atributo [Reactive] que vai dizer para o Fody onde ele pode adicionar o código , alem disso graças as extensões novas do pacote podemos alterar as propriedades do "Ocupado" assim que o comando terminar sua execução :
Muito legal não?
O Reactive UI tem muita coisa alem desse exemplo simples que eu fiz tanto para interfaces, viewmodel , bindings e etc. Por isso recomendo a leitura da documentação oficial clicando aqui.
Claro que ainda mais coisa para explorar do ReactiveUI sobre validação e navegação, isso vai ficar para um próximo artigo.
Caso queira baixar o código utilizado no Exemplo: Clique aqui.
Quer ver outros artigos sobre Xamarin ? Clique aqui.
Espero ter ajudado!
Aquele abraço!
