Gorilla Player: Visualização de UI em tempo real

Por Leonardo RodriguezNovember 8, 2018 Xamarin Platform

Traduzido por Adriano D’lucca 

 

Este é um post contribuído pelo convidado Leonardo Rodríguez Viacava. Leo é co-fundador e CTO da UXDivers , criadores do Grial UIKit e do Gorilla Player . A UXDivers é especializada em projetar e codificar experiências móveis envolventes usando tecnologias Xamarin.

O Gorilla Player é um visualizador XAML gratuito para Xamarin.Forms projetado para criar eficientemente UIs multi-plataformas. Suporta pré-visualização em vários simuladores e dispositivos reais em simultâneo. O Gorilla não impõe restrições ao seu XAML, suportando controles personalizados, renderizadores customizados e estruturas MVVM como o Prism.

Quando começamos o UXDivers (em meados de 2015), éramos uma pequena equipe de designers e desenvolvedores em uma missão: levar as UIs XAML para o próximo nível, fazendo a ponte entre o design e o desenvolvimento do Xamarin.Forms. Percebemos rapidamente que a conversão de designs sofisticados em XAML exigia ciclos de feedback rápido, mas não tínhamos o ferramental certo. Por isso, criamos o Gorilla Player para nos ajudar a criar os belos modelos de interface do usuário XAML que compõem o Grial UIKit e os projetos personalizados para nossos clientes. A Gorilla melhorou tanto o nosso processo de desenvolvimento que, em 2016, transformamos essa ferramenta interna em uma ferramenta pública gratuita para ajudar a comunidade Xamarin.

Como mencionado anteriormente, o Gorilla Player não impõe limitações aos arquivos visualizados, é executado em vários dispositivos reais e simuladores de uma só vez e suporta ligações de dados por meio de dados de amostra JSON. Graças ao Gorilla, os projetos no UXDivers têm três etapas: (1) nossos designers trabalham na UX / UI usando sua ferramenta de design favorita, (2) quando o cliente está satisfeito com o design, o designer ou o desenvolvedor codifica a interface do usuário em XAML com a ajuda do Gorilla Player, (3) então o desenvolvedor escreve a lógica e finaliza o aplicativo.

O Gorilla torna a criação de excelentes UIs móveis um processo agradável, leve e colaborativo para desenvolvedores e designers.

Começando com o Gorila

Para começar, instale o aplicativo da área de trabalho , disponível para Windows e macOS. O instalador inclui um complemento do Visual Studio necessário para sincronizar o arquivo XAML que você está editando com a superfície de visualização.

Como exemplo, vamos visualizar o aplicativo Conference Vision criado por David Ortinau para a Conferência Build 2018 com o Gorilla Player. Este aplicativo foi construído inteiramente em Xamarin.Forms usando componentes legais da comunidade, controles personalizados, efeitos, comportamentos e estilo CSS.

  1. Clone o repositório.
  2. Adicione o UXDivers.Gorilla.SDK.AutoConfig pacote NuGet ao ConferenceVision.iOS projeto.
  3. Adicione GORILLA como um símbolo adicional à Debug configuração. Isso garante que o aplicativo seja iniciado no modo de visualização.
  4. Adicione dois arquivos ao ConferenceVision projeto: a.)  DesignTimeData.json Contendo dados de tempo de projeto e b.) Gorilla.json Para configurar a barra de navegação personalizada.
  5. Execute o aplicativo, conecte-se ao servidor e comece a visualizar!

Projetando com Gorila

Para mostrar por que o Gorilla é tão importante para nós, vamos fazer uma demonstração rápida de como desenvolver projetos customizados no UXDivers. Vamos criar um aplicativo para homenagear uma das nossas bebidas favoritas: café.

Configuração do Projeto

Ao iniciar um novo aplicativo, um de nossos desenvolvedores geralmente cria um novo projeto e adiciona dependências como controles da comunidade, bibliotecas, estruturas MVVM e fontes personalizadas. Quando estiver pronto, adicione o Gorilla para começar a trabalhar na interface do usuário com nossos designers.

Para este aplicativo de amostra, usaremos os pacotes UXDivers.Effects e xamanimation NuGet. Como visto no vídeo abaixo, depois de criar a solução, você inclui os pacotes NuGet UXDivers.Effects xamanimation todos os projetos, e o pacote Gorilla AutoConfig apenas para os projetos específicos da plataforma (iOS e Android).
Nota: O pacote AutoConfig do Gorilla está em Beta, portanto, certifique-se de ativar os nugets de pré-lançamento para ver este pacote disponível!

Observe que desde que UXDivers.Effectsxamanimation são referenciados apenas no XAML, você precisa incluir um typeof para forçar seus assemblies a carregar; caso contrário, o XAML Loader falhará.

Você deseja poder visualizar os arquivos XAML e ainda ter a opção de executar o aplicativo completo no modo de depuração e liberação. Para facilitar a alternância entre o modo do Gorilla e DebugRelease, crie uma Gorilla configuração de solução fazendo uma cópia da Debug configuração e adicionando a GORILLA symbol lá.

O aplicativo agora está pronto para ser implantado no modo Gorilla em todos os dispositivos, e você está pronto para começar a trabalhar em seus XAMLs.

Crafting XAML

Gorilla permite que você use vários dispositivos simultaneamente. No UXDivers, sempre usamos pelo menos um dispositivo Android e um iOS, mas se você precisar dar suporte a tablets, várias orientações ou vários idiomas, poderá adicionar mais dispositivos. O vídeo abaixo mostra como você pode construir nossa interface de usuário com o Gorilla Player. Neste exemplo específico, adicionamos imagens à solução, adicionamos estilos ao App.xaml e criamos exibições de acessórios, como ProductCardTemplate para usar na página.

Como o vídeo mostra, o Gorilla segue seu fluxo de trabalho, visualizando cada tela que você codifica sem atrapalhar.

Bindings

O Gorilla permite integrar dados em qualquer momento do processo. O designer ou desenvolvedor pode adicionar as ligações necessárias no início ou mais tarde, como no exemplo abaixo. Para fazer isso, eles adicionam o DesignTimeData.json arquivo ao projeto. Este arquivo associa um objeto JSON a cada arquivo XAML. O Gorilla define esse objeto como o BindingContext  da página ou visualização, fazendo com que ele atue como o modelo de visualização do tempo de design para essa página ou visualização.

Para ajudá-lo a definir os dados de tempo de design, o Gorilla suporta recursos avançados, como referências de objeto JSON, dados globais e carregamento de dados de outros arquivos.

Polimento

Graças à visualização imediata do Gorilla, polir suas páginas é divertido. Para nossa tela de pedidos de café, personalizamos a TitleView propriedade, adicionamos animações e testamos um tema sombrio.

Neste vídeo, usamos o Gorilla.json arquivo de configuração para instruir o Gorilla a mostrar a barra de navegação para cada página. Você também pode instruir o Gorilla a exibir a barra de navegação em páginas específicas ou até mesmo usar um tipo de página de navegação personalizado disponível em seu projeto.

Localização

O Gorilla também pode ajudar você a criar aplicativos localizados. Você pode testar seus layouts em diferentes idiomas simultaneamente escolhendo o idioma específico para visualizar em cada dispositivo. Basta configurar o Gorilla para torná-lo ciente dos idiomas que seu aplicativo suporta. Você pode aprender mais sobre esse processo lendo a documentação .

Saber mais

O Gorilla Player permite que você faça uma rápida interação em suas interfaces de usuário XAML,  não impõe restrições ao uso de bibliotecas ou controles, oferece suporte à pré-visualização simultânea em vários dispositivos e é totalmente gratuito para uso. Para começar, baixe o Gorilla Player em nosso site. Para saber mais sobre o Gorilla, confira nosso wiki ou fórum .

Todos os vídeos animados mostrados neste post estão disponíveis como vídeos nesta lista de reprodução

Fonte: blog.xamarin.com

RelatedPost

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *