--- title: "Formate gráficos e tabelas para qualquer dispositivo móvel no seu ambiente BYOD (Bring Your Own Device)" date: "2014-12-10" categories: - "development" tags: - "charts" - "mobile-development" - "mobiletogether" - "software-tools" description: Explore como formatar gráficos e tabelas para diversos dispositivos móveis em ambientes BYOD (Bring Your Own Device), utilizando as variáveis globais e locais do Altova MobileTogether para aumentar a eficiência do desenvolvimento. --- Status: #blog Tags: #charts #mobile-development #mobiletogether #software-tools Categories: [development](/blog/pt/category/development.md) # Formate gráficos e tabelas para qualquer dispositivo móvel no seu ambiente BYOD (Bring Your Own Device) Um dos desafios no desenvolvimento de soluções empresariais móveis é a formatação para todos os diferentes dispositivos que os utilizadores finais podem usar. Cada sistema operativo móvel suporta uma variedade de tamanhos de ecrã, desde os smartphones mais pequenos até aos tablets maiores. E, ao mudar para um sistema operativo concorrente, todos os tamanhos de ecrã mudam novamente. A necessidade de suportar muitos dispositivos móveis diferentes pode retardar o desenvolvimento de soluções móveis para empresas que adotam a política de "Bring Your Own Device" (BYOD), ou seja, "traga o seu próprio dispositivo". ![Gráfico de pizza para qualquer dispositivo móvel, criado utilizando o Altova MobileTogether](https://lh5.ggpht.com/-7Xh6qdjc2N0/VIc8xfEsPgI/AAAAAAAAB30/DNEO_7zmRMg/Opening%252520Chart%252520Capture%25255B2%25255D.png?imgmax=800 "Pie chart for any mobile device created using Altova MobileTogether") O Altova MobileTogether é um [framework de desenvolvimento móvel multiplataforma](https://www.altova.com/pt/mobiletogether.html) que permite criar aplicações uma única vez para várias plataformas: - Android - iOS - Windows 8 - Windows Phone 8 - Cliente baseado em navegador, desenvolvido em HTML5 Além disso, o MobileTogether suporta todos os tamanhos de ecrã disponíveis para cada sistema operativo, com funcionalidades especiais para aumentar a produtividade dos desenvolvedores. **Variáveis globais para o resgate** O Designer MobileTogether oferece acesso a uma biblioteca com mais de três dúzias de variáveis globais e locais que pode utilizar para diversos fins durante o desenvolvimento da sua solução móvel. As variáveis globais são estáticas, o que significa que não se alteram durante a execução da sua solução. As variáveis locais são dinâmicas e podem estar disponíveis apenas em determinadas circunstâncias. Muitas variáveis globais armazenam valores referentes ao dispositivo que executa a solução móvel em tempo de execução: ![Variáveis globais no Altova MobileTogether](https://lh4.ggpht.com/-vNpe-nYOYfI/VIc8xs2WRLI/AAAAAAAAB34/AMbi82MP8SM/Global%252520Variables%252520Crop%25255B2%25255D.png?imgmax=800 "Global Variables in Altova MobileTogether") Pode definir variáveis globais diretamente na janela de propriedades do MobileTogether Designer, ou pode criar funções que incluam variáveis globais e definir resultados com base no resultado dessas variáveis. Se não conseguir encontrar uma variável específica que o seu projeto necessite, pode até mesmo definir as suas próprias variáveis personalizadas. Naturalmente, todas estas variáveis estão disponíveis, além dos elementos nas suas fontes de dados que podem conter valores que também pode utilizar em funções. **Definir o tamanho do gráfico como uma variável** Se atribuir a variável global $MT_DeviceWidth como a largura de criação do gráfico na janela de propriedades, o seu gráfico preencherá automaticamente a largura de qualquer dispositivo em modo vertical, independentemente do sistema operativo móvel ou do tamanho do ecrã. Não é necessário definir a altura do gráfico. A altura é gerada automaticamente, permitindo que todo o gráfico seja visualizado sem necessidade de deslocamento. Também pode utilizar variáveis globais e locais com visibilidade dependente do dispositivo, uma opção no menu de contexto, para definir o comportamento em condições específicas, como a orientação vertical ou horizontal. A solução "Widget Sales Data" no servidor de demonstração Altova MobileTogether ilustra como aplicar variáveis locais a dados de gráficos de diferentes formas, dependendo da orientação do dispositivo. Por exemplo, a página "Vendas por Região" exibe um gráfico de linhas na orientação vertical ou um gráfico de barras 3D na orientação horizontal. ![Um gráfico de barras tridimensional, criado no software MobileTogether, visualizado num telemóvel Android](https://lh4.ggpht.com/-7ijQLURgs5c/VIc8xypd59I/AAAAAAAAB4A/hgwqmhCvwFY/Android%252520shot%25255B4%25255D.png?imgmax=800 "A 3-D Bar Graph Designed in MobileTogether as Viewed on an Android Phone") A solução de dados de vendas de widgets está incluída nos exemplos instalados com o MobileTogether Designer, para que possa analisá-la e ver como foi construída. Os gráficos definidos pela variável `$MT_DeviceWidth` mantêm o mesmo tamanho quando o dispositivo é rotacionado e não utilizam eficientemente o espaço disponível no dispositivo, como se pode observar no exemplo do gráfico de barras abaixo. ![Exemplo de gráfico de barras horizontal](https://lh6.ggpht.com/-Q-fzzxWIwwc/VIc8yUVZ97I/AAAAAAAAB4E/A8do4TBfJyE/photo1framed%25255B23%25255D.png?imgmax=800 "Horizontal Bar Graph Example 1") Uma alternativa melhor é a variável global $MT_CanvasX. O valor de $MT_CanvasX altera-se quando o dispositivo é rodado e o gráfico é automaticamente redesenhado. Se utilizarmos $MT_CanvasX para definir a largura do gráfico na janela de propriedades, o gráfico é redesenhado de forma mais elegante para se ajustar ao ecrã em orientação horizontal, com mais espaço para o texto da legenda ao longo do eixo horizontal. ![Gráfico de barras horizontal dimensionado automaticamente para se ajustar ao ecrã, pela MobileTogether](https://lh6.ggpht.com/-8-LS-SPDvAU/VIc8yyI_eWI/AAAAAAAAB4M/XfeVo6k1nlQ/photo2framed%25255B3%25255D.png?imgmax=800 "Horizontal Bar Graph Automatically Sized to Fit Screen by MobileTogether") **Pode** [**ver uma demonstração em vídeo**](https://www.altova.com/pt/mobiletogether/demos.html) **sobre a criação de gráficos no MobileTogether Designer no site da Altova,** [**descarregar uma versão de avaliação gratuita**](https://www.altova.com/pt/download/mobiletogether-designer.html) **que inclui mais de 30 soluções de exemplo e começar a criar as suas próprias!**