Home » Tutoriais » iWork » Deixe seu banco de dados mais bonito com uma interface bacana

Deixe seu banco de dados mais bonito com uma interface bacana

:: por Redação macmais :: 15/04/2011 :: Deixe um comentário

Por Henrique Bilbao e Afonso Petry Jr.*

No último tutorial, criamos os links entre as tabelas para o uso do sistema. Hoje é o dia em que sua criatividade será o fio condutor da nossa aula, pois vamos mostrar as ferramentas de design de interface.

Use o nosso como referência, mas ficará a seu cargo fazer o leiaute de seu aplicativo de controle de estoque. O visual de um programa como esse não muda muito, é verdade, mas é sempre bom saber que é possível inovar um pouco e ser diferente dos demais. Mas é importante ter em mente que o leiaute deve seguir a cara da sua empresa.

Leiaute do Sistema | Deixando o programa como você gostaria que ficasse

 

CONHECIMENTO BÁSICO | Leiaute é a organização de seus botões, dados e telas de uma forma prática para ter, ao alcance de um clique, relatórios, cadastros, etc. Use [Command] + [L] para editar e [Command] + [B] para voltar ao preview.

1 Escondido Ocultar a área de ferramentas do sistema é um ótimo recurso para uma interface mais limpa, desde que sejam feitos botões para que se vá aos leiautes que se deseja.

2 Etiquetas As Tabs (etiquetas) servem para substituir os menus em uma mesma tabela do BD, caso os dados estejam em outra tabela. Se preciso, pode-se criar um novo leiaute, com as mesmas Tabs.

3 Campos Ao editar o leiaute, você pode arrastar os campos de dados para onde desejar, como no caso acima, quando separamos, ao lado da foto do produto, os dados que consideramos principais.

4 Botões O ideal é usar imagens no formato PNG. Você pode criar as suas próprias ou buscar na internet, sem problemas. Use o comando Insert > Picture para inserir a imagem.

Visual perfeito | Sempre faça testes em um novo leiaute, para depois atualizar seu sistema

 

1 Processo de criação Selecione Edit Layout e em seguida New Layout. Você pode escolher um tipo específico de leiaute e ainda dizer de onde será obtida a informação.

2 No lugar certo Selecione os campos que julgar necessários, no caso, todos menos o pk_ (pois é uma chave primária que já está pronta para se autoincrementar).

3 Temas Aqui é onde você decide qual tema (visual) usar. Se você não vai fazer um personalizado, escolha a opção Default (padrão) para continuarmos.

4 Dando forma Crie um fundo utilizando a ferramenta Rounded Rectangle, depois, troque a cor usando o Inspector > Appearance > Fill. Faça o mesmo para a linha (Line).

5 Organização O desenho ficou por cima dos campos preestabelecidos pelo FileMaker. Para organizá-los, clique com o botão direito e selecione Arrange > Send to Back.

6 Pastas de leiautes Você pode agora organizar seus leiautes em File > Manage > Layouts. Em New, crie uma pasta e arraste seu novo leiaute para lá.

7 Novas listas Clique sobre o campo Estado, depois em Inspector > Control Style > Drop-down list. Selecione o botão Edit para criar uma nova lista de estados.

8 Etiquetando Use as Tabs como se fossem menus. Adicione Tabs como Cadastros, Consultas e Suporte. Em seguida, arrume o leiaute para encaixar tudo.

9 Botões Adicione imagens PNG ou criei seu próprios desenhos. Depois, com o botão direito do mouse, escolha no menu contextual Button Setup e indique qual a ação que ele deve realizar.

Qualquer dúvida sobre este tutorial, envie um email para suporte@hisolucoes.com ou baixe a versão deste tutorial em www.hisolucoes.com/filemaker/04.zip.

*Matéria originalmente publicada na MAC+ 59.

Deixe um comentário

 

Publicidade