Mobile Platform as a Service:Introdução ao framework Native

A biblioteca unificada de componentes do mPaaS (AntUI) converte especificações visuais padronizadas em controles concretos e garante um estilo visual consistente no lado do cliente.

Arquitetura da biblioteca unificada de componentes

O AntUI constrói seu sistema unificado de controles de baixo para cima, como blocos de montagem.

A tabela a seguir descreve as camadas da arquitetura, da base ao topo.

Camada de fundação

Esta camada modulariza as especificações visuais para servir de base ao AntUI. Ela inclui:

• Recursos atômicos

  Define os recursos atômicos usados pelos controles — cores, tamanhos e espaçamento — para garantir unicidade. Exemplos: cores (vermelho, amarelo, azul) e tamanhos de fonte (12, 14, 16).

• Controles atômicos

  Encapsula controles nativos da plataforma em uma biblioteca básica de controles atômicos.

• Ícones Iconfont

  Disponibiliza uma biblioteca de ícones comuns no formato Iconfont.

Camada comum

Representa o módulo central do AntUI e contém os controles de uso mais frequente:

• Recursos comuns

  Mapeia recursos atômicos para cenários de uso, como cor do título, cor do conteúdo e cor do link.

• Controles básicos

  Reproduz fielmente os controles dos mockups de design visual e mantém nomenclatura e implementação consistentes entre Android e iOS.

• Gerenciador de estilos

  Centraliza o gerenciamento de estilos por meio de definições abstratas e permite a troca de múltiplas skins por controle. Utiliza definições incrementais para que você especifique apenas os estilos necessários à sua regra de negócio.

Camada de cena

Crie conjuntos de controles com funcionalidades específicas para cada cenário, como controles voltados para fundos financeiros, comerciantes e redes sociais.

Camada de aplicação

Gerencia o comportamento específico de cada plataforma e o suporte a contêiner H5 para equilibrar unificação e personalização.

As plataformas Android e iOS possuem especificações visuais distintas. O AntUI, por exemplo, trata actionsheets de maneira diferente em cada uma:

• No iOS, o actionsheet surge na parte inferior da tela.

• No Android, aparece como uma lista pop-up centralizada na tela.

Conteúdos H5 frequentemente exigem tratamentos diferenciados para elementos como caixas de diálogo pop-up e barras de título. Para proporcionar aparência e experiência nativas ao H5, o AntUI define uma JSAPI unificada para o contêiner H5. Essa JSAPI invoca os controles adequados de cada plataforma e faz com que as páginas H5 sejam renderizadas de formas distintas no Android e no iOS.

Integração entre design e desenvolvimento

O AntUI integra os fluxos de trabalho de desenvolvimento e design visual, reduz a sobrecarga de comunicação e elimina retrabalho na criação de controles e peças visuais.

Designers elaboram as especificações e desenvolvedores as interpretam para construir os controles. Um guia abrangente de desenvolvimento simplifica esse processo em um sistema único e integrado.

• A nomenclatura unificada estabelece um entendimento comum entre desenvolvedores e designers. As convenções de nomenclatura estão detalhadas em Especificações e princípios de componentes.

• Pranchetas de design permitem que designers compreendam os controles existentes e montem estruturas de página arrastando e soltando elementos.

• O portal reúne documentação de desenvolvimento, especificações visuais e demos para download, facilitando a pré-visualização dos efeitos dos controles.

Especificações e princípios de componentes

• Estilo de nomenclatura

  Controles do mesmo tipo devem compartilhar o mesmo nome em Android e iOS. Os nomes dos controles utilizam o prefixo AU. Propriedades personalizadas de controles usam camelCase.

  Importante

  Alguns componentes apresentam diferenças entre plataformas e podem exigir implementação em apenas uma delas.

• Alinhamento de controles básicos com especificações visuais e de interação

  • Não adicione controles não previstos nas especificações ao conjunto padrão.

  • Controles fora das especificações, mas utilizados em diversos locais, pertencem à coleção de controles candidatos.

  • Uma especificação não precisa corresponder necessariamente a um único controle, como ocorre com a especificação da barra de título.

• Usabilidade

  • Diferentemente do commonui, não encapsule controles do sistema (como APImageView e APTextView). Utilize os controles nativos diretamente.

  • Os nomes devem ser precisos e inequívocos.

  • Funcionalidades semelhantes devem manter consistência entre diferentes controles.

  • Siga as convenções estabelecidas pelos usuários.

• Extensibilidade

  • Evite codificar funcionalidades de controles de forma rígida. Por exemplo, a quantidade de abas alternáveis deve suportar alterações dinâmicas.

  • Controles como caixas de diálogo e barras de navegação devem permitir modificação externa de layout.

• Inovação

  Utilize os recursos mais recentes das plataformas, como o RecyclerView do Android.