O SketchFlow do Expression Blend é uma ferramenta para a criação de protótipos para aplicações Silverlight e WPF da Plataforma Microsoft.

É uma ferramenta muito simples de utilizar e de grande valor para projetos que precisamos de aceites e feedbacks do cliente para cada parte da aplicação.

 

Pensando em aplicações para Windows Phone também temos este recurso a partir do Silverlight 4.0.

Quando você instala o Expression Blend 4 ele ainda não vem com o SkecthFlow For Windows Phone instalado, você precisa baixa-lo e instala-lo para poder utilizar, no final do artigo estará o link para o download e documentação da ferramenta.

 

Nos passos a seguir iremos criar um pequeno formulário de cadastro que ira exibir em tela as informações digitadas nos campos e também faremos o uso das ferramentas de feedback do SketchFlow.

 

Sua utilização é bem simples vejam a seguir:

 

Abra o Expression Blend  --> Clique em New Project

 

Logo após irá aparecer a seguinte tela:

 

 

1º Escolha o Tipo do Projeto que neste caso é Windows Phone

2º Escolha o Template que iremos utilizar, que é o Windows Phone SketchFlow Application.

Depois de feito isso, teremos a seguinte tela que nada mais é do que um “palco” para trabalharmos no nosso protótipo da futura aplicação Windows Phone.

 

 

Com isso já podemos trabalhar no nosso protótipo.

Para um exemplo vamos criar um simples formulário de cadastro:

Adicione quatro TEXTBLOCK, mais três TEXTBOX e dois BUTTONS e deixe-os dispostos da seguinte maneira:

 

 

Como estamos utilizando o Expression Blend temos o XAML como linguagem, então vamos ver como ficou o código deste protótipo:

 

        <!--TextBlock - Titulo - Cadastro-->

        <TextBlock Margin="120,46,112,0" TextWrapping="Wrap" Text="Cadastro" VerticalAlignment="Top" FontSize="48" FontWeight="Bold"/>

<!--TextBlock´s do Formulário -->

        <TextBlock x:Name="Nome" HorizontalAlignment="Left" Margin="42,180,0,0" TextWrapping="Wrap" Text="Nome:" VerticalAlignment="Top" FontSize="32"/>

        <TextBlock x:Name="Email" HorizontalAlignment="Left" Margin="42,287,0,0" TextWrapping="Wrap" Text="E-mail:" VerticalAlignment="Top" FontSize="32"/>

        <TextBlock x:Name="Senha" HorizontalAlignment="Left" Margin="42,0,0,348" TextWrapping="Wrap" Text="Senha:" Width="117" FontSize="32" Height="50" VerticalAlignment="Bottom"/>

<!--TextBox´s e PasswordBox do Formulário-->

        <TextBox x:Name="txtNome" Height="47" Margin="159,180,68,0" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="32"/>

        <TextBox x:Name="txtEmail" Height="47" Margin="163,287,68,0" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="32"/>

        <PasswordBox x:Name="pswSenha" Margin="163,0,68,348" VerticalAlignment="Bottom" Height="50" FontSize="32"/>

<!--button´s do Formulário-->

        <Button x:Name="btnCadastrar" Content="Cadastrar" Height="84" Margin="8,0,0,190" Style="{StaticResource Button-Sketch}" VerticalAlignment="Bottom" FontSize="32" HorizontalAlignment="Left" Width="202"/>

        <Button x:Name="btnLimpar" Content="Limpar" HorizontalAlignment="Right" Height="84" Margin="0,0,8,190" Style="{StaticResource Button-Sketch}" VerticalAlignment="Bottom" Width="168" FontSize="32"/>

 

Após configurarmos o layout do nosso protótipo vamos codificar o comportamento dele.

Vamos fazer com que assim que clicarmos no botão Cadastrar ele exiba um MessageBox com as informações digitadas nos TextBox.

Então dentro do método (public partial class Screen_1 : WindowsPhoneChrome) digite o seguinte trecho de código:

 

private void btnCadastrar_Click(object sender, RoutedEventArgs e)

{

         string texto = "Seu nome é: "+ txtNome.Text + "\nSeu email: " + txtEmail.Text + "\nSua senha:" + pswSenha.Password;           

         MessageBox.Show(texto);

}

 

private void btnLimpar_Click(object sender, RoutedEventArgs e)

{

        txtNome.Text = "";

        txtEmail.Text = "";

        pswSenha.Password = "";

}

 

Agora vamos rodar a aplicação e testar as funcionalidades.

 

 

Bom nosso código esta funcionando perfeitamente correto? Bom, mas vamos colocar outro cenário que seria o não funcionamento do botão Cadastrar.

Vendo que estamos falando de protótipo e muitas vezes não estamos do lado do cliente, como ele informaria o erro que está dando para nós? É simples.

 

O SketchFlow tem as seguintes ferramentas abaixo para poder identificar onde aconteceu o problema.

 

 

Como mostrado na imagem seguinte:

 

 

Estas opções são as de feedback da ferramenta que servem para quem está recebendo o protótipo poder deixar marcado onde seu protótipo não funcionou ou caso queira que mude algo no layout entre outras coisas que o ele ache relevante para enviar ao desenvolvedor.

 

Esta ferramenta acaba sendo de grande valor para não termos retrabalho nos aplicativos que estamos desenvolvendo pois o cliente informa ainda em protótipo os problemas que podem estar acontecendo na aplicação e possíveis mudanças referente ao mesmo.

 

Neste artigo entendemos o que é o SketchFlow do Expression Blend e vimos que podemos utilizar também para aplicações do Windows Phone.

Criamos um protótipo para Windows Phone no Expression Blend, fizemos ele funcionar corretamente e também fizemos o uso das opções de Feedback da ferramenta.

Para saber mais:
Aprofunde seus conhecimentos sobre este tema na comunidade Windows ...

Aprofunde seus conhecimentos sobre este tema na comunidade C#

Aprofunde seus conhecimentos sobre este tema na comunidade Silvelight
Aprofunde seus conhecimentos sobre este tema na comunidade Expressi...

Link para o download do SketchFlow for Windows Phone + Documentação

Exibições: 395

Comentar

Você precisa ser um membro de DevBrasil para adicionar comentários!

Entrar em DevBrasil

Comentário de Cleiton Felipe de Moraes em 22 junho 2012 às 21:59

Valeu Michaell....

Comentário de Michaell Dantas em 17 junho 2012 às 12:55

Show parceiro....muito massa essa ferramenta !!! Parabéns....

© 2020   Criado por Ramon Durães.   Ativado por

Badges  |  Relatar um incidente  |  Termos de serviço