Tutorial 3: personalizar o aplicativo

Widget de botão Habilidades básicas a intermediárias do App Maker

Cerca de 30 minutos

O que você criará

Você criará uma pequena parte de um aplicativo de rastreamento de projetos. O objetivo não é ter um aplicativo totalmente funcional, mas aprender sobre a customização de aplicativos. O usuário poderá:

  • criar novos registros de projeto e inserir dados neles;
  • editar registros do projeto;
  • navegar pelos registros.

O que você aprenderá

Com este tutorial, você aprenderá a:

  • customizar o aplicativo no editor do App Maker sem usar cascading style sheets (CSS). Selecione um tema geral e uma variante de estilo para widgets dentre as integradas no App Maker;
  • customizar o aplicativo escrevendo a linguagem CSS no Editor de estilo. Outra opção é usar folhas de estilo externas. O CSS oferece controle total sobre a aparência do aplicativo.

Preparação

Crie uma pequena parte de um aplicativo de rastreamento de projetos que você personalizará.

Criar seu aplicativo

  1. Faça login na conta do G Suite fornecida pelo empregador ou pela escola.
  2. Abra o App Maker.
  3. Crie um aplicativo em branco:
    • Se o App Maker exibir a caixa de diálogo de boas-vindas, clique em Criar novo aplicativo.
    • Caso contrário, clique no menu Novo Aplicativo em branco.
  4. Renomeie o aplicativo. Exclua o nome padrão, Aplicativo sem título, e insira Customizar aplicativo.

Criar um modelo de dados

  1. Passe o cursor sobre Dados e clique em para adicionar um modelo.
  2. Crie um modelo de dados do Google Cloud SQL. Nomeie o modelo de dados como DadosdoProjeto.

Adicionar campos ao modelo de dados

  1. Na barra de ferramentas da guia do modelo de dados DadosdoProjeto, clique na guia Campos.
  2. Adicione esses campos ao modelo de dados DadosdoProjeto:

    Nome do campo Tipo de campo
    Project String
    Owner String
    DueDate Data

Renomear a página para a IU e selecionar uma fonte de dados

  1. Renomeie NovaPágina como Projetos.
  2. No Editor de propriedades, defina a propriedade fonte de dados para a página Projetos como DadosdoProjeto.

Adicionar uma tabela e um formulário de edição

  1. Clique em Widgets e arraste um formulário Widget de Formulário para a página. Selecione Editar formulário.
  2. Em Widgets , arraste uma tabela Widget de Tabela para a página abaixo do formulário de edição. Alinhe horizontalmente as bordas esquerdas do formulário com a tabela.
  3. Clique em Fechar para fechar "Widgets".

Visualizar o aplicativo

Antes de customizar o aplicativo, visualize-o. Ele agora usa as variantes de estilo padrão para widgets no tema Material.

  1. No canto superior direito, clique em Visualizar para executar o aplicativo em uma nova guia do navegador.
  2. Clique em Permitir para que o aplicativo use informações específicas.

Customizar o aplicativo sem usar CSS

Com o App Maker, é possível customizar o aplicativo sem escrever a linguagem CSS. É possível:

  • selecionar um tema, um conjunto integrado de estilos para todos os widgets do aplicativo;
  • selecionar dentro de um conjunto de variantes (variantes de estilo para cada tipo de widget). O tema padrão, Material, tem um grande número de variantes incorporadas. Por exemplo, para um botão, é possível escolher entre estilos com diferentes cores de fundo. Para um rótulo, é possível escolher entre diferentes tamanhos de fonte. Todos os widgets têm uma variante padrão.

Selecionar um tema

O App Maker tem estes temas:

  • Material: um conjunto de estilos simples, mas elegantes, com uma opção entre diversas variantes de estilo para cada tipo de widget. É possível usar o tema Material na forma atual ou personalizá-lo ainda mais.
  • Simples: um conjunto de estilos bem simples, com poucas opções entre variantes de estilo. Se você é habilidoso com CSS e pretende usá-lo para criar estilos próprios para todos os widgets, use o tema Simples.

Altere o tema do aplicativo:

  1. Na barra lateral esquerda, clique na página Projetos.
  2. Na barra de guias acima do Editor de propriedades, selecione a Editor de estilo.
  3. Na lista suspensa Tema, selecione Simples. Observe que os estilos usados no formulário e na tabela são mais simples. Para rótulos e botões, existe apenas uma variante incorporada.
  4. Neste tutorial, será usado o tema Material. Na lista suspensa Tema, selecione Material.

Selecionar variantes de estilo para widgets específicos

Selecione variantes de estilo e observe os efeitos:

  1. No canto inferior esquerdo, clique em Mostrar contornos para delinear os widgets. Ao selecionar variantes, os widgets poderão desaparecer, por exemplo, se uma caixa de texto branca estiver em um painel branco. Com os contornos, é possível encontrar os widgets.
  2. Clique no formulário Editar projetos. Verifique se o formulário inteiro está selecionado. A caixa de seleção azul precisa envolver todo o formulário. Na guia Contorno, Panel: Form1 precisa estar selecionado.
  3. No canto superior esquerdo, a lista suspensa Variante estará com Papel selecionado.
  4. Na lista suspensa Variante, selecione Principal. O formulário inteiro ficará azul. Observe que o rótulo "Editar projeto" ficou automaticamente branco. Essa alteração automática não modificou a variante do rótulo. Observe que os widgets de Projeto, Proprietário e Data Desejada não foram alterados automaticamente. Para deixar esses widgets brancos, selecione a variante Dark para eles. Não faça isso agora.
  5. Clique no rótulo Editar projetos.
  6. Na lista suspensa Variante, selecione ExibiçãoUm. Isso aumenta o tamanho do rótulo Editar projetos.
  7. Clique no botão Criar. Este é o widget à direita do rótulo Editar projetos. Não é possível ver o texto, porque é azul sobre azul. Com o botão selecionado, o último item na localização atual é Button: Form1CreateButton.
  8. Na lista suspensa Variante, role pelas opções de variantes dos botões. Observe que algumas variantes usam ícones de Material. Selecione a variante ÍconeDark.
  9. Visualize o aplicativo.
  10. Clique em "Desfazer" três vezes para desfazer as alterações de variantes.

Customizar o aplicativo com CSS

Aqui, você aprende a usar CSS para customizar o aplicativo. Para isso, escreva conjuntos de regras CSS. Geralmente, ao desenvolver aplicativos da Web, os seletores em conjuntos de regras fazem referência a elementos HTML. No App Maker, você pode usar seletores para referenciar widgets ou as propriedades styleClasses para aplicar os conjuntos de regras aos widgets.

Sobre CSS

CSS consistem principalmente em unidades de linguagem denominadas conjuntos de regras, que definem quais estilos aplicar e em quais locais.

Este é um exemplo de um conjunto de regras:

.app-Projects-Form1CreateButton {
      background-color: #B2FF59;
      color: #03A9F4;
    }
    

Em um conjunto de regras:

  • Um ou mais seletores definem em qual local aplicar o estilo. No exemplo acima, o seletor é .app-Projects-Form1CreateButton. Isso diz ao App Maker para aplicar os estilos ao botão Form1CreateButton na página Projects.
  • As declarações definem os estilos a serem aplicados. No exemplo acima, as declarações definem a cor e a cor do plano de fundo.

Cascading Style Sheets são aplicadas de três maneiras:

  • O App Maker avalia conjuntos de regras de cima para baixo, tanto para arquivos CSS externos quanto para o conteúdo do Editor de estilo. Se mais de um seletor aplicar a mesma declaração a um widget específico, as declarações nos conjuntos de regras mais abaixo em um arquivo CSS substituirão as declarações acima delas.

    Por exemplo, nesses dois conjuntos de regras: primeiro, especifica-se que todos os botões serão azul claros, e, em seguida, que o botão Form1CreateButton será laranja. Portanto, o Form1CreateButton button será laranja. A cor do texto em todos os botões será um cinza escuro. Essa cor não será substituída no botão Form1CreateButton.

    .app-Button {
          background-color: #A1C2FA;
          color: #212121;
         }
        .app-Projects-Form1CreateButton {
          background-color: #FFB74D;
        }
        
  • O App Maker avalia arquivos CSS externos na ordem em que são adicionados nas Configurações gerais.

  • O App Maker avalia o conteúdo do Editor de estilo por último, depois de avaliar os arquivos CSS externos.

Criar uma variante de estilo personalizada

É possível criar variantes de estilo personalizadas para tipos de widget, por exemplo, para fornecer aparências personalizadas de botões ou painéis. Depois de definir uma variante personalizada, selecione-a na lista suspensa Variante.

A sintaxe de um seletor de classe para uma variante personalizada é:

    .app-widget_type--widget_style
    

Observe o duplo hífen. Este é um sinal para o App Maker que o nome da variante está a seguir.

Exemplo:

.app-Button--Orange

Para criar uma variante de estilo personalizada para um tipo de widget, siga estas etapas:

  1. Na barra de guias acima do Editor de propriedade, selecione o Editor de estilo para abri-lo. Nesse local, crie uma folha de estilo CSS para personalizar seu aplicativo. Em alguns casos, o preenchimento de códigos aparece enquanto você digita. Também é possível pressionar Ctrl+Espaço para visualizar a conclusão do código.

  2. Adicione uma variante Laranja para os botões. Copie e cole este código no Editor de estilo:

    .app-Button--Orange {
          background-color: #FFB74D;
        }
        
  3. No aplicativo, clique no botão Criar.

  4. Na lista suspensa Variante, selecione a variante Laranja. O botão "Criar" ficará laranja.

  5. Na lista suspensa Variante, selecione a variante CorSimples.

    Dica: como alternativa à criação de uma variante personalizada, substitua uma variante atual. Por exemplo, para botões, adicione um conjunto de regras com o seletor .app-Button--Icon e especifique uma cor de plano de fundo diferente (por exemplo, ciano):

    .app-Button--Icon {
          background-color: #4DD0E1;
        }
        

    Todos os botões para os quais você escolher a variante Ícone terão uma cor de fundo ciano.

Customizar um widget específico usando uma propriedade styles

A propriedade styles dos widgets fornece uma maneira fácil de aplicar um ou mais estilos a um widget específico. No value da propriedade styles, é feita referência a conjuntos de regras CSS por nome de classe. É possível definir os estilos no Editor de estilo, nas folhas de estilo externas ou em ambos.

  1. Adicione conjuntos de regras para estilos no Editor de estilo. Dê aos estilos nomes de classes que não personalizem partes do aplicativo diretamente, isto é, não façam referência a app-. Por exemplo, adicione estes conjuntos de regras CSS:

    .Green {
          background-color: #0F9D58;
          border-style: double;
          border-width: 4px;
          border-color: #000000;
          border-radius: 7px;
        }
        .Border {
          border: 4px solid #000000;
          box-shadow: 5px 5px 10px #BDBDBD;
          margin: 15px;
        }
        
  2. Selecione o widget a ser customizado. No formulário de edição, clique no botão Criar.

  3. Como o valor da propriedade styles, insira os nomes das classes dos estilos a serem aplicados (separados por espaços):

    1. No Editor de propriedade , expanda a seção Exibir. Será exibido o valor , já selecionado ao lado do ícone da lista suspensa .
    2. Na propriedade estilos, insira os nomes das classes Verde e Borda.

Usar folhas de estilo externas

É possível usar folhas de estilo externas para customizar widgets. Como no Editor de estilo, as folhas de estilo externas precisam conter conjuntos de regras CSS que apliquem estilos aos widgets ou que você mesmo os aplique usando as respectivas propriedades styleClasses. Folhas de estilos externas com conjuntos de regras que aplicam estilos a elementos HTML não customizarão os widgets do App Maker.

Uma folha de estilos externa precisa estar localizada em um URL que o App Maker consiga acessar no Google Cloud. Você fornece o URL nas Configurações gerais. Por exemplo, é possível fornecer o URL de um arquivo CSS para uma fonte do Google:

https://fonts.googleapis.com/css?family=Roboto+Condensed:regular,bold

Colocar uma folha de estilos em um URL no Google Cloud

Se o arquivo CSS ainda não estiver na nuvem do Google, o App Maker fornecerá uma maneira fácil de colocá-lo:

  1. Em um gerenciador de arquivos, localize o arquivo CSS.
  2. No App Maker, clique em Configurações Recursos.
  3. Arraste o arquivo de texto para a área Adicionar .
  4. Clique em Copiar URL do recurso .
  5. Clique em Configurações Configurações gerais.
  6. Em URLs CSS, cole o URL do recurso e clique em Adicionar CSS.
  7. Para novos arquivos CSS, repita as etapas de 2 a 6.

Adicionar uma referência do aplicativo a uma folha de estilo

Para usar uma folha de estilo externa localizada em um URL na nuvem do Google:

  1. Consiga o URL do recurso do arquivo CSS.
  2. Clique em Configurações Configurações gerais.
  3. Em URLs CSS, cole o URL do recurso e clique em Adicionar CSS.
  4. Para novos arquivos CSS, repita as etapas de 1 a 3.

A seguir