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.

Na próxima janela só precisamos escolher um local para salvar os arquivos e o nome da pasta que será criada, feito isso é só clicar no botão Ok.

Os arquivos gerados devem ser enviados para o cliente, lembrando que para executar o protótipo é só abrir o arquivo TestPage.html. Sera aberto o browser padrão com o SkethFlow Player rodando o protótipo, um detalhe é que o cliente precisa do Silverlight instalado para visualizar o protótipo. Veja abaixo o protótipo em execução.

O SketchFlow Player algumas janelas interessantes.

• Navigate: Além de navegar pelo protótipo mesmo clicando nos botões, como no caso acima no botão Login a janela Navigate mostra as navegações possíveis apartir da tela que estamos visualizando no momento. Temos também um slider que possibilita aumentar ou diminuir o zoom sobre a tela visualizada.
• Map: Mostra o mesmo diagrama com o relacionamento entre as telas que temos dentro do Blend.
• Feedback: É a janela mais interessante e onde serão feitas todas as anotações sobre o protótipo, nela temos pincéis para desenho, podemos escrever anotações, podemos escolher cores para cada pincel, enfim, o cliente tem o protótipo livre para rabiscar, escrever como se estivesse com uma folha de papel e caneta na mão.

Nas imagens abaixo tem um exemplo do que pode ser feito, vale notar que alterei os valores dos campos de Login e Senha mostrando que o protótipo é interativo e não apenas uma imagem.

Com a minha analise do protótipo feita, onde coloquei minhas anotações sobre o que quero mudar no mesmo, eu preciso exportar o meu feedback para o desenvolvedor, para isso dentro da janela Feedback no botão Show Feedback Options escolhemos a opção Export Feedback.

Feito isso aparecerá uma janela para para o autor do Feedback colocar seu nome e iniciais.

Clicando no botão OK  uma janela do Windows para salvar arquivos aparecerá, é só escolher um diretório e dar o nome do arquivo que será salvo.

Um arquivo .feedback sera criado, esse arquivo deve ser mandado de volta ao desenvolvedor para ele analisar os feedbacks do cliente e fazer as modificações solicitadas, agora só precisamos importar esse arquivo de feedback do cliente no Blend, na janela Feedback clique no botão +, uma janela para adicionar arquivos existentes aparecerá, só precisamos escolher o arquivo de feedback e clicar em Open.

Se o botão que tem o desenho de lampada da janela Feedback estiver ativo, veremos no fonte das telas as anotações feitas pelo nosso cliente, facilitando a correção dos problemas, também vemos os comentários que ele escreveu na própria janela de Feedback, outro detalhe importante é que na janela SketchFlow Map as telas com feedback terão uma lampada adicionada no item da mesma dentro do diagrama. Veja abaixo os feedback do cliente visto dentro do Blend.

Imaginando que terminamos todo o trabalho, temos a opção do Blend gerar automaticamente a documentação de todo o protótipo, para isso escolha o item Export To Microsoft Word do menu File.

Na próxima janela só precisamos informar o nome do arquivo .docx que será gerado, a pasta o
nde será gerado, e ainda temos a opção de mandar o arquivo abrir no final da geração, e se você possuir algum template de documento do Word, pode marcar a opção escolher template e selecionar o mesmo.

Veja abaixo o documento aberto no Word com a documentação do projeto, imagens do mapa das telas, e imagem das telas.

Bom esse foi um pequeno exemplo de todo o poder do SketchFlow ainda tenho muito o que falar, animações, coleção de dados, mas fica para os próximos artigos, e só para completar, em um projeto novo que estou trabalhando, fizemos um SketchFlow do site e mandamos para o cliente, ensinamos ele a utilizar a ferramenta de feedback, e ele adorou, elogiou demais, adorou navegar pelo site e ver onde tudo vai ficar antes mesmo do desenvolvimento do site começar.

Abraços.

Expression Studio 3
Expression Blend 3 + SketchFlow
Expression Web 3
Expression Design 3
Expression Encoder 3 + IIS Smooth Streaming

Expression Professional Subscription
Expression Blend 3 + SketchFlow
Expression Web 3
Expression Design 3
Expression Encoder 3 + IIS Smooth Streaming
Visual Studio Standard
Office Standard
Office Visio Professional
Windows XP
Windows Vista Business Edition
Windows 7 Ultimate

Para mais informações clique aqui.

Com o Expression Blend 3 + SketchFlow instalado, ao criarmos um novo projeto temos a opção de criar um projeto SketchFlow, na imagem abaixo estou criando um projeto de Silverlight, mas temos a mesma opção para  WPF.

Com o projeto criado, vemos que o Blend ganha novos painéis como por exemplo SketchFlow Animation, SketchFlow Map e Feedback.

A primeira janela que chama a atenção é a SketchFlow Map onde vemos um diagrama com toda a estrutura do nosso protótipo, tela por tela, com as ligações entre elas, renomeie Screen 1 para Login no SketchFlow Map, para isso clique com o botão direito na caixa azul e escolha Rename ou um duplo clique e altere o nome.

Agora vamos desenhar nossa tela de Login do protótipo, existe um estilo especial para de controles para o SketchFlow com o formato de desenho a lapis o que da mais ainda a impressão de que é somente um protótipo, para acessar esses controles é só clicar na item SketchStyles do nó Styles da janela Assets todos os controles listados do lado seguirão o padrão de desenho.

Agora que temos os controles com estilo do SketchFlow podemos arrastar normalmente para a página e desenhar nossa tela de login, veja a tela pronta abaixo.

Esse é o protótipo da nossa tela de login, agora quando o usuário clicar no botão Login, vamos mandar ele para a tela inicial do site, para isso voltamos a janela SketchFlow Map e a partir da tela de Login criarmos uma Connected Screen chamada Home.

Acima vemos que o SketchFlow Map nos ajuda a identificar rapidamente a ligação entre as telas do nosso projeto. Para cada tela no SketchFlow Map é criado um arquivo .xaml no nosso projeto, temos a opção de editar cada uma das telas escolhendo cada uma pela janela Projects como qualquer projeto feito no Blend ou clicando duas vezes na parte azul das caixas no SketchFlow Map.

Agora vamos desenhar nossa a tela principal do site, veja abaixo.

Bom não é o melhor protótipo do mundo mas vale como exemplo :), agora o próximo passo é falar que quando o usuário clicar no botão Login ele será redirecionado para a tela do site, volte para a tela de Login,  no botão Login clique com o botão direito do mouse, escolha o item Navigate To no próximo submenu serão listadas as telas conectadas a tela de Login, como só temos a tela Home clique na mesma.

O nosso pequeno protótipo está pronto, agora precisamos mandar para validação onde o cliente vai analisar e devolver o protótipo com suas anotações, depois vamos importar essas anotações no Blend para facilitar nosso trabalho e no final de tudo o Blend vai gerar automaticamente a documentação do projeto, mas essa parte fica para amanhã ;).

Abraços.