No dia 13 de Outubro o roadshow do Imagine Cup passou na UBI (Universidade da Beira Interior, Covilhã). Como MSP (Microsoft Student Partner) da UBI coube-me a mim a tarefa de organizar tal evento. O programa deste evento foi o seguinte:
1º - O meu colega João Antão da Microsoft apresentou o Imagine Cup 2010 a todos os presentes no auditório. Houve muita gente interessada e nos dias seguintes tenho ouvido muita gente a dizer-me que vai participar este ano. ;)
2º - A equipa do Sharing Spot (Eu, André Barbosa e David Mota), 2ª classificada a nível nacional na competição do ano passado, falaram um pouco da sua experiência na competição, do pré e pós Imagine Cup.
3º - Sessão Técnica sobre Silverlight apresentada por mim.
Essencialmente é este 3º ponto que me "obrigou" a fazer este post. Nesta sessão criei uma loja de música virtual utilizando o SketchFlow. Uma aplicação Web bastante simples onde é possível comprar instrumentos músicais.
Para iniciar a elaboração deste projecto basta abrir o Expression Blend 3 e seleccionar um projecto Silverlight + SketchFlow. Agora pretendemos adicionar um fundo ao nosso website. Para isso basta arrastarmos uma imagem previamente adicionada ao projecto para o nosso "canvas". Como podem reparar a imagem não fica logo posicionada da forma que pretendemos, logo temos que pressionar com o botão direito do rato sobre a imagem e seleccionar "Auto-size -> Fill". Desta forma temos o nosso wallpaper bem posicionado como podemos ver na imagem em baixo.
De seguida pretendemos inserir um menu que nos vai permitir navegar no nosso site. Este menu vai ser bastante simples sendo que vai ser constituido apenas por um rectangulo que vai servir para limitar o menu e 6 botões. Nós não vamos trabalhar todas as páginas que vamos criar, apenas vamos trabalhar a parte da loja mas criamos de qualquer das formas os botões para navegar entre as páginas. Os botões que vamos criar são os seguintes:
- Home
- Store
- Clinic
- Blog
- Location
- Contacts
O aspecto da página que criámos será o exibido na imagem em baixo.
De reparar que o menu que acabámos de criar ainda não nos permite navegar no site por duas razões: primeiro porque ainda não criámos as páginas para as quais queremos navegar e em segundo porque ainda não dissemos aos botões para onde queremos que eles naveguem.
Por isso vamos agora criar as nossas páginas. Como podemos ver na imagem mostrada em baixo, ao passar com o rato sobre o nosso ecrã principal a primeiro opção que nos aparece é "Create a connected screen", seleccionamos essa opção e arrastamos para outra posição do SketchFlow Map. Assim criamos um novo ecrã. Agora vamos replicar esta acção para os restantes botões e ainda alterar o nome dos nossos ecrãs. O resultado final é o apresentado em baixo.
O passo seguinte é adicionar um wallpaper nos ecrãs que acabámos de criar. Para isso vamos introduzir a noção de component screen. Um component screen é um elemento que é comum a todos os ecrãs aos quais está ligado. Para isso vamos adicionar o novo wallpaper a um dos ecrãs criados recentemente da mesma forma que fizemos no ecrã principal. De seguida queremos criar então o nosso componente screen. Para isso carregamos com o botão direito do rato sobre a imagem e seleccionamos "Make Into ComponentScreen..." como podemos ver no ecrã em baixo. Depois de lhe termos dado um nome vemos um novo componente de cor verde no SketchFlow Map.
Agora para termos a imagem nos ecrãs todos temos que seleccionar o 3º ícone do component screen que criámos anteriormente e arrastar para cima do ecrã ao qual pretendemos ligar. Assim obtemos a imagem no ecrã. De reparar que a imagem não fica posicionada no mesmo sitio em todos os ecrãs. É necessário reposicioná-la da mesma forma que fizemos no primeiro ecrã. O resultado final é o apresentado em baixo.
De seguida vamos criar em todos os ecrãs um menu que nos vai permitir navegar entre os vários ecrãs da nossa Aplicação Web. Como criámos um menu logo no primeiro ecrã vamos então aproveitá-lo para criar um novo component screen de nome "NavigationMenu". O método de criação é o mesmo que foi utilizado anteriormente com o wallpaper e o resultado final é o apresentado de seguida.
A partir deste momento temos o menu de navegação em todas as janelas ao qual este está ligado. Tal como fizemos com o wallpaper temos que posicionar o menu onde pretendermos pois o Blend não posiciona o objecto no mesmo sitio onde ele foi criado. Agora, se executarmos reparamos que ao utilizarmos o menu ainda não conseguimos navegar para lado nenhum, isto porque ainda não atribuimos funções aos botões. Pois é isso mesmo que vamos fazer de seguida.
Para dizermos a um botão para que ecrã este deve navegar é bastante simples como podemos ver no ecrã em baixo. Basta irmos para o component screen criado anteriormente e sobre o botão pressionamos com o botão direito do rato e seleccionamos "Navigate To". Aqui é só escolher para que ecrã queremos navegar. De reparar que ao alterarmos as opções de navegação do menu estas são alteradas em todo o lado onde o menu esteja presente.
A partir deste momento já temos uma aplicação completamente navegável. Por isso passamos à parte seguinte que é criar a parte da loja online. Para isso temos que abrir o ficheiro "Store". Neste ecrã vamos querer inserir um TextBlock (com o nome da página), duas Listboxes (uma onde irão estar os todos os objectos da loja e outra onde estarão os objectos que queremos comprar) e um botão (que irá permitir fazer as compras). O aspecto final deverá ser o seguinte:
De modo a adicionarmos dados às nossas Listboxes vamos utilizar uma caracteristica do Expression Blend 3 que é o SampleData. O SampleData permite-nos simular uma base de dados. Basta-nos definir uma estrutura de dados e o Expression Blend gera os valores automaticamente por nós. Desta forma torna-se muito fácil utilizarmos dados na nossa aplicação.
Para criar este SampleData basta definir um novo sample data como está exibido na imagem em baixo. Depois de dar-mos um nome ao Sample Data Source este é criado automaticamente criando logo uma colecção com duas propriedades. Aqui vamos definir uma estrutura de dados de acordo com as nossas necessidades. Para o nosso caso vamos definir 4 campos: nome (String), descrição (String), preco (String -> Price) e imagem (Image). Para a o campo imagem podemos definir as nossas próprias imagens ou deixar que o Blend as gere automaticamente. Para isso basta definir-mos a pasta onde o Blend vai buscar as imagens. O resultado final para o SampleData deve ser o que está nas imagens em baixo.
Agora que temos a nossa "base de dados" criada temos que adicionar os dados à Listbox. Para isso basta seleccionar a colecção e arrastar para a Listbox como podemos ver na imagem em baixo.
A partir deste momento temos os nossos dados na ListBox mas o aspecto não é o pretendido. Por isso vamos editar o template dos items da ListBox. Isto é feito de uma forma muito simples tal como podemos ver na imagem exibida em baixo.
Aqui podemos editar o ItemTemplate da nossa Listbox de uma forma bastante fácil. Basta alterar as propriedades dos nossos elementos e temos automaticamente um novo aspecto para cada item da base de dados. Eu vou pretender fazer algo mais complexo para ficar com um aspecto mais "user-friendly". O resultado final deverá ser o apresentado em baixo.
Como podem reparar no template que eu criei apenas podem ver a imagem, o nome e o preço do objecto. E porquê?? Porque eu aqui decidi mostrar-vos mais umas novidades desta nova versão do Silverlight 3. 
Estas são os States e os Behaviors. Os States são os estados possíveis de um objecto e os Behaviors são os comportamentos que um objecto tem.
Para vos mostrar estas funcionalidades eu defini a altura ("Height") do TextBlock "descricao" a 0. Agora vou definir os estados possíveis deste objecto. Como podem ver na barra de ferramentas no canto superior esquerdo têm uma tab "States". É aqui que vamos adicionar os nossos estados. Mas antes disso vamos converter o 2º StackPanel que contém o "nome", "descricao" e "preco" para um UserControl para se tornar mais fácil tratar dos estados. Este passo é muito simples. Basta pressionar com o botão direito do rato sobre o StackPanel e escolher "Make Into UserControl". Aqui decidi atribuir-lhe o nome "SlidingStackPanel". Agora que já temos o nosso UserControl podemos então adicionar os estados ao mesmo.
Em primeiro lugar temos que adicionar um VisualStateGroup que vai servir para agrupar todos os nossos estados. Para isso basta pressionar o botão "Add state group" tal como mostra a imagem em baixo. De seguida temos que adicionar os nossos estados. Para isso basta pressionar o botão "Add State". No nosso caso vamos querer 2 estados: On (quando o TextBlock está visível) e Off (quando o Textblock está escondido). Depois de criarmos os 2 estados vamos então definir as propriedades dos mesmos. Com o estado "On" seleccionado vamos alterar a sua propriedade "Height" para 100. E com o estado "Off" seleccionado vamos alterar a propriedade "Height" para qualquer valor e depois voltamos a colocar este valor a 0. Este é um pequeno truque para que o Expression Blend grave uma keyframe na Timeline de modo a que o Silverlight reconheça que existe uma alteração de estado. Para a alteração de estado não ser feita tão bruscamente podemos ainda adicionar uma transição. Para isso em cada um dos estados podemos adicionar uma transição, definir o tempo da mesma e ainda definir o tipo de animação como podemos ver em baixo.
Neste momento temos os estados definidos. Agora vamos aproveitar um behavior que já vem como base no Expression Blend 3 que é o "GoToStateAction". Este Behavior permite alterar o estado de um objecto em runtime. Como podem ver em baixo eu atribui 2 Behaviors à imagem, um quando o rato é colocado sobre a imagem e outro quando o rato sai da imagem. Ao passar por cima da imagem é mostrada a descrição do objecto e ao sair a descrição é novamente escondida.
Bem, parece que chegámos ao fim. Espero que tenham gostado tanto como os meus colegas da UBI que estavam a assistir a esta sessão. Comentem e façam sugestões se tiverem alguma coisa que estejam interessados em ver neste blog. Pode ser que eu consiga ajudar.
No próximo post vamos falar de Silverlight Business Applications e de DataBinding. Estes temas foram abordados por mim num workshop no ISCTE.
Stay tuned...