Dando continuidade aos artigos sobre o Sketchflow, hoje vou mostrar mostrar como utilizar fontes de dados de exemplo nos nossos protótipos. Como estamos criando somente um protótipo, não vamos nos preocupar com criação de banco de dados, popular os controles com dados reais, mas podemos criar fontes de dados de exemplo permitindo a criação de um protótipo ainda mais real com o produto final.

Seguindo o artigo anterior, criei uma página de produtos onde coloquei um ComboBox que vai mostrar o nome do produto e a foto do mesmo para o usuário escolher, a tela é simples só tem o ComboBox.

Agora com o ComboBox criado, vá até a janela Data, geralmente ela fica junto com a janela Properties, se ela não estiver aberta é só abri-la através do menu Windows/Data. Vamos no momento criar uma nova fonte de dados para o projeto, clique no ícone indicado pela seta na imagem abaixo, e selecione a opção Define New Sample Data…, como vemos abaixo, podemos importar os dados de um XML, mas isso fica para outro artigo.

Na próxima janela, informamos um nome para a nossa fonte de dados no nosso caso ProdutosDataSource, ainda podemos escolher se a fonte de dados será definida no projeto ou no documento, deixe selecionado Project, também escolhemos a opção Enable sample data when application is running caso contrário a fonte de dados não vai funcionar no nosso protótipo. Depois disso é só clicar em Ok e a nossa primeira fonte de dados está quase pronta.

Com a fonte de dados criada a janela Data ficará como na imagem abaixo, vemos também que foram criadas duas propriedades chamadas Property1 e Property2, podemos mais propriedades, excluir, renomear, que é o caso dessas duas, vamos renomear Property1 para Nome e Property2 para Foto. Para renomear uma propriedade é só dar um duplo clique no nome da propriedade e colocar o novo nome.

Com as propriedades renomeadas, vamos editar os valores da fonte de dados, para isso clique no botão Edit sample values.

Veja abaixo a tela de edição de dados mostrando as nossas duas propriedades já com dados preenchidos, vale ressaltar que no rodapé da janela podemos escolher o número de registros que será criado na nossa fonte de dados, por padrão vem definido com 10 registros.

O primeiro problema que vamos resolver é que a propriedade Foto foi criada com o tipo Boolean, e temos que falar que a coluna é do tipo image, para issó é só clicar no ícone indicado na imagem abaixo, e no popup menu que vai abrir, é só escolher o tipo da propriedade como Image.

Assim que escolhemos o tipo Image a nossa tela de edição de valores já mostra algumas imagens de exemplo na coluna foto como pode ser visto abaixo, mas ainda temos a opção de escolher um diretório do nosso computador com as imagens que queremos mostrar, no exemplo vou deixar as imagens padrão, mas caso queira mostrar imagens específicas é só escolher o diretório das imagens no campo Location. 

No caso da coluna Nome só para demonstrar as opções de dados que temos para uma coluna do tipo string as imagens abaixo mostram as configurações disponíveis como o número máximo de palavas, e o número máximo de caracteres por palavra na string, a segunda imagem mostra os tipos de dados padrão que temos para string como Lorem ipsum, Email, Address, cada tipo que definir vai preencher a coluna com exemplos do tipo escolhido, para o exemplo vamos deixar Loren ipsun mesmo. Feito isso é só clicar em Ok.

Agora o último passo é arrastar a nossa fonte de dados para o controle que vai mostrar os dados, no nosso caso o ComboBox.

Feito isso é só compilar o nosso projeto e já vemos o ComboBox do nosso protótipo mostrando dados para o usuário.

Esse foi mais um exemplo de todo o poder e facilidade do Sketchflow e como ele pode ajudar nos nossos protótipos.

Abraços.