Mock-up é uma maquete ou um modelo em tamanho real de um projeto. Utilizado para o ensino, demonstração, avaliação de concepção e outras finalidades. Um Mock-up é um protótipo e mostra pelo menos alguma funcionalidade que o projeto real visa ter.
O SketchFlow é um recurso da família Microsot Expression Studio Ultimate, que lhe da a capacidade, rapidez e eficácia de mapear o fluxo de uma aplicação de interface com o usuário através de layout de telas permitindo a transição de um estado para outro. Esta habilidade permite explorar e testar várias idéias sem investir grandes quantidades de tempo, mostrando ao seus clientes que você é capaz de encontrar a solução certa para eles.
Com o SketchFlow os clientes podem testar diversos cenários e fornecer um feedback para a equipe de desenvolvimento, através de comentários, anotando a sua experiência enquanto navegam pelo protótipo.
Então vamos começar!!!
Um cliente te ligou solicitando a criação de uma tela para a consulta de pedidos de compra feitos no dia que deve mostrar o número de vendas/hora por vendedor. Você logo imaginou o que o cliente queria e iniciou o desenvolvimento do protótipo de tela.
Para isso inicie o Microsoft Expression Blend 4 + Skecth Flow e na guia Projects escolha New Project, e então na tela New Project escolha Silverlight SketchFlow Application e nomeie o protótipo com o seguinte nome PurchaseRequestSample então click em OK, conforme a figura 1 logo abaixo.
Figura 1 – Criando o projeto para o protótipo da tela.
Na barra de ferramentas do blend clique em Assets (recursos) e então na árvore selecione SketchFlow –> Styles –> SketchStyles clique no controle TitleLeft-Sketch e então desenhe no topo da página. Com um duplo clique no controle você poderá editar o texto ou então utlizar a barra de propriedades no grupo Common Properties propriedade Text.
Figura 2 – Selecionando o controle.
Figura 3 – Controle desenhado no topo da página.
Figura 4 – Barra de propriedades.
Existem algumas coisas importantes que você precisa saber ao utilizar o Expression Blend.
 |
|
Agora, vamos criar um subtítulo para a tela, para isso em Assets –> Sketch Styles selecione SubtitleLeft-Sketch e adicione o controle logo abaixo do título, então altere o texto para “Vendas hora por vendedor”. Você pode encontrar os controles facilmente fazendo buscas conforme a figura 5.
Figura 5 – Localizando os controles mais facilmente.
Mude o tamanho da fonte do controle para 14, através da barra de propriedades conforme a figura 6.
Figura 6 – Mudando o tamanho da fonte
Agora vamos inserir um retangulo abaixo do subtítulo para simular uma caixa de listagem, para isso pesquise em Assets por rect para localizar o controle Rectangle-Sketch.
A sua página deverá ficar como a figura 7 ao executar o protótipo. Para executar o protótipo pressione a tecla F5 ou vá para o menu Project e clique na opção Run Project .
Figura 7 – Página esperada até o momento.
Em algum momento teremos de redimensionar a página que está sendo criada. Uma coisa que você precisa saber é que toda a página ou UserControl criado pelo Expression Blend por padrão tem um controle Grid nomeado de LayoutRoot é nele que adicionamos os nossos controles. Através da barra de ferramentas Objects and Timeline podemos observar como os nosso controles estão organizados. Veja a figura 8.
Figura 8 – Objects and Timeline
Todos os controles que estão no UserControl podem ser observados através dessa barra de ferramenta. Cada controle possui um símbolo de um olho 
, clique nele para ocultar ou mostrar os controles que estão na página. Você também pode travar os controles evitando que eles se movam acidentalmente, para isso clique ao lado do símbolo do olho para habilitar o cadeado.
Figura 9 – TextBlock Travado.
O controle Grid “LayoutRoot” é redimensionado junto com a página, pois todas as suas âncoras estão habilitadas por padrão. Como queremos aumentar a página devemos clicar em UserControl na barra Objects and Timeline e então clicar na seta de redimensionamento 
e redimensionar a página conforme o desejado.
Quando estamos redimensionando a página podemos notar que os controles acompanham o redimensionamento do controle pai. Caso você não queira que eles acompanhem desabilite as âncoras.
Agora vamos inserir alguns retângulos dentro do rentâgulo criado anteriormente e dentro de cada retângulo adicione um controle BasicTextBlock-Sketch com o nome do vendedor.
Figura 10 – Selecionando o controle BasicTextBlock-Sketch
Deixe o nome dos vendedores em negrito selecionando B “Bold” através da barra de propriedades no grupo Text.
Figura 11
A página deverá ficar conforme a figura 12.
Figura 11
Vamos redimensionar a página e adicionar mais controles até que ela fique da seguinte forma.
Figura 12
As setas do lado direito foram desenhas através dos controles Block Arrow Down Sketch e Block Arrow Up Sketch, elas foram redimensionadas até que ficassem dessa forma.
As cores dos retângulos foram aplicadas através do grupo Brushes da barra de propriedades, selecionando Background e aplicando a cor desejada.
Figura 13
Nesse post conhecemos o SketchFlow e aprendemos diversos detalhes do Expression Blend. Aprendemos como adicionar controles a página, redimensioná-los e alterar suas propriedades.
No próximo post adicionaremos fluxos de navegação a esse protótipo, e será demonstrado como o cliente pode fornecer um feedback para a equipe de desenvolvimento.
Veja o protótipo desse post clicando aqui ou um mais completo aqui.
Continue acompanhando novidades através do blog da FlexDev e do meu blog no wordpress, até o próximo artigo.
Rovilson Mezencio juntou estes bytes...
