Antes de vos mostrar como utilizar uma PathListBox no Silverlight vou primeiro explicar no que consiste este controlo. O PathListBox é um controlo que existe no Silverlight do tipo ListBox mas que em vez de apresentar o seu conteúdo como uma ListBox normal (horizontalmente ou verticalmente) dispõe os seus itens de acordo com um caminho. Ou seja, podemos utilizar qualquer objecto do tipo path para definir a disposição dos seus itens (Ellipse, Rectangle, Triangle, Pen, etc...).
Para começarmos temos que criar um novo projecto Silverlight no Expression Blend. Depois temos que procurar na nossa lista de controlos a PathListBox. Em seguida basta arrastar o controlo para o nosso ecrã e concluimos a primeira fase do nosso exemplo. O próximo passo será criar um controlo do tipo path para definir o caminho na qual a ListBox deve colocar os seus objectos. Para isso vou utilizar a pen, mas poderia muito bem utilizar qualquer outro tipo de path. No nosso projecto vamos seleccionar a LayoutGrid e com a pen seleccionado vamos desenhar um caminho ao nosso gosto. A minha path ficou com o aspecto exibido na imagem em baixo.
O próximo passo é dizer à PathListBox qual o LayoutPath que tem que seguir. Para isso temos que seleccionar a PathListBox e ir ao painel de propriedades. Na tab de Layout Paths pressionamos no icone de alvo e arrastamos para cima da Path que desenhámos anteriormente. Como podemos ver na imagem seguinte é logo adicionada a nossa path à lista de Layout Paths da nossa ListBox.
A partir deste momento todos os objectos que carregarmos para a ListBox serão dispostos nesta path. Podemos ainda "brincar" com algumas das propriedades que nos são colocadas ao dispor.
Para provar que realmente este exemplo está a funcionar vamos criar alguns objectos para colocar na ListBox, sendo que para isso vamos utilizar o SampleDataSource. De modo a criar um SampleDataSource temos que ir ao canto superior direito à tab Data e criar um "New Sample Data" como é mostrado em baixo.
Depois de atribuirmos um nome podemos ver que é criada automaticamente uma colecção com duas propriedades. Para propósitos de demonstração eu apenas vou pretender ter uma propriedade do tipo imagem. Por isso vamos apagar uma das propriedades e alterar o tipo da outra para o tipo Image, sendo que o Blend gera por nós imagens por defeito por isso não temos que nos preocupar em ter imagens no projecto. Em seguida basta seleccionar o objecto "Collection" e arrastar para cima da nossa PathListBox. A partir deste momento temos o DataBinding feito e o aspecto será algo do género.
Está portanto demonstrado o uso da PathListBox. Agora é tudo uma questão de imaginação e de personalização. Eu trabalhei mais um bocadinho à volta deste projecto e criei uns botões para navegar na ListBox e vocês? Onde pretendem aplicar este conceito? Comentem e apresentem algumas ideias.
Neste tutorial vamos criar um simples RSS Reader para Windows Phone 7. Para isso vou mostrar-vos uma maneira bastante simples de consumir um ficheiro XML no Expression Blend.
Antes de mais, para podermos criar aplicações para Windows Phone 7, temos que instalar as developers tools que podem ser descarregadas aqui.
Depois de termos as tools instaladas, temos que abrir o Expression Blend para Windows Phone 7 e criar um novo projecto. Como podemos ver na imagem em baixo temos 3 tipos de projectos possíveis mas neste caso nós vamos escolher o primeiro.
Depois de criamos o nosso projecto temos que carregar o nosso feed de RSS para dentro do projecto. Para isso vamos utilizar um pequeno "truque" que é a capacidade que o Sample Data tem de carregar dados de um ficheiro XML. Para isso só temos que, no canto superior direito, na tab "Data" clicar no icone que nos permite adicionar um novo Sample Data Source ao projecto e escolher "Import Sample Data from XML" tal como mostra a imagem apresentada em baixo.
Em seguida será exibido um ecrã onde temos que escolher o nome que pretendemos dar ao nosso Data Source e o caminho para o ficheiro XML. Aqui vou escolher o caminho para o feed de RSS do meu blog para propósitos de demonstração mas vocês podem escolher outro se preferirem. Para isso basta alterar o URL.
Depois de clicar em OK podemos reparar que no nosso projecto temos agora um novo Data Source e a parte mais curiosa é que o Blend já criou por nós toda a estrutura de dados que estava presente no ficheiro XML. A partir deste momento temos o nosso objecto e podemos fazer databinding para qualquer elemento existente na nossa aplicaçao. A primeira coisa que vou fazer é o binding para o titulo e subtitulo do blog. Para isso basta-me seleccionar os objectos e arrastar para cima do TextBlock respectivo como podemos ver na imagem em baixo. De notar que agora o nosso Data Source tem uma linha amarela à volta. Isto significa que está a ser utilizado no databinding.
Esta parece a parte fácil da aplicação mas realmente a dificuldade não passa muito para além disto. Agora que já temos o titulo e subtitulo do blog temos que mostrar os posts do blog e para isso, mais uma vez, só temos que arrastar os elementos que pretendemos ver para a nossa aplicação. Assim sendo vamos seleccionar o objecto ItemCollection do Sample Data Source e arrastar para o ecrã. Podemos ver que o Blend sugere automaticamente que os resultados sejam mostrados numa ListBox. Como é isso mesmo que nós pretendemos vamos largar o objecto na nossa aplicação. O resultado obtido será algo do género do que está exibido na imagem em baixo.
Obviamente este não é o aspecto que nós pretendemos ter na nossa aplicação mas o resultado final está muito próximo pois já temos os nossos posts na ListBox, agora é apenas uma questão de seleccionar os objectos que queremos mostrar e atribuir-lhes estilos. Para isso vamos editar o itemTemplate da nossa ListBox. Aqui existe um passo muito importante que é atribuir nomes a cada TextBlock dentro do nosso itemTemplate. Quando fazemos Drag and Drop de um objecto do Sample Data Source, o Blend cria os items respeitando a ordem em que eles estão dispostos no Sample Data Source. Por isso, e antes de começarmos a confundir os TextBlocks temos que lhes atribuir nomes como na imagem em baixo.
Para questões de demonstração apenas vou escolher mostrar o titulo e a data em que o post foi publicado. Aqui podem brincar com a disposição dos elementos de acordo com a vossa preferência. O resultado final da minha aplicação é o que está apresentado na imagem em baixo.
Espero que tenham aprendido algo de útil e que daqui surjam ideias para projectos mais interessantes.
Até à próxima...
Com as Windows Phone Developer Tools na sua versão beta e o Windows Phone 7 em technical preview, é chegada a altura de começar, para quem não começou já, a desenvolver aplicações para esta plataforma. Por isso a Microsoft fez um refresh aos recursos de design para que os designers e developers possam criar mais facilmente aplicações ao estilo do Windows Phone 7.
O UI Design and Interaction Guide for Windows Phone 7 v2.0 está agora em versão beta. Com informação adicional e um novo layout está de leitura mais fácil. Este guia oferece informação bastante detalhada sobre os elementos e controlos da UI, comportamentos da UI e modelos de interacção baseados na interface "Metro". Tanto os developers como os Designers devem ler este guia para ter em conta os principios de implementação para criarem melhores aplicações.
Os Design Templates for Windows Phone 7 são uma colecção de 28 templates Photoshop e fontes que podem ser utilizados ao criar aplicações para Windows Phone 7 pois contêm os templates com as medidas certas, ao mílimetro!!!
Experimentem! Criem as vossas aplicações para Windows Phone 7 e mostrem à comunidade...e principalmente divirtam-se a fazê-lo!
O que é a Microsoft Silverlight Media Framework?
A Silverlight Media Framework é uma framework open source da Microsoft que permite aos "developers" implementar soluções de reprodução de IIS Smooth Streaming robustas, costumizáveis e totalmente escaláveis. A SMF tem como base o Smooth Streaming Client (conhecido anteriormente como "Smooth Streaming Player Development Kit") acrescentando um grande número de "features" adicionais, incluindo uma API que permite aos "developers" criar plugins para a framework.
Novidades na versão 2.0
A versão 2.0 da SMF tem uma arquitectura particularmente modular com uma API que permite aos "developers" criar plugins para esta. Permite também aos "developers" excluir bibliotecas que não sejam utilizadas nos seus projectos permitindo assim cortar no aumento desnecessário do tamanho. Esta versão vai incluir plugins para Timed Text (DFXP),URL frame linking, uma framework para metadata, suporte para a Microsoft Silverlight Analytics Framework, suporte para multiplos tracks de audio, monitorização melhorada de bitrate, suporte para Silverlight 4 "styling", JavaScript API, um plug-in de logging, entre outras novas features. Tira ainda partido da nova Managed Extensibility Framework (MEF) do Silverlight 4.
Nada melhor do que experimentar...
http://smf.codeplex.com/
Hoje em dia é muito comum vermos numa página web um slideshow, seja para mostrar fotos, videos ou qualquer outro tipo de informação. Pois bem, o que vou ensinar-vos hoje neste tutorial é a criar um simples slideshow que vai conter 5 imagens e cinco botões que quando forem pressionados vão avançar ou retroceder para a imagem correspondente. A ideia num slideshow é ter um "timer" por trás e de "x" em "x" tempo este mudar a foto automaticamente mas aqui não vamos fazer isso. Vou dar-vos todas as noções necessárias para o fazer e depois vocês, caso estejam curiosos em ver este funcionamento, implementam.
Para começar vamos criar um projecto Silverlight no Expression Blend e em seguinte vamos criar a seguinte estrutura no nosso usercontrol principal.
Como podem ver criámos duas grid's dentro da Grid principal ("LayoutRoot"). Uma ("contentGrid") que vai ter 5 colunas e em cada uma delas vai conter uma imagem e outra ("controlGrid") que vai conter os nossos botões que vão permitir mudar entre imagens.
O "LayoutRoot" vai ter como tamanho definido 650*300 logo a nossa "contentGrid" vai ter a mesma altura e 5 vezes mais de largura. Agora existem três passos importantes para que o slider funcione na perfeição.
1. Cortar todo o conteúdo à volta da nossa Grid principal de modo a que as outras imagens não se vejam. Para isso vamos utilizar o Clipping e a única coisa que precisamos de fazer é o que está na imagem em baixo.
2. Usar os "states" para definir o estado do nosso usercontrol num determinado instante. Para isso vamos definir cinco estados, ou seja, vamos definir o estado do nosso usercontrol dependendo da imagem que está seleccionada. Para isso vamos à janela de "States" que normalmente se encontra no canto superior esquerdo. Em primeiro lugar precisamos de fazer "add state group" e depois nesse "state group" temos que adicionar 5 estados. Para isso só precisamos de clicar 5 vezes em "add state". No meu caso chamei aos meus estados "statex", onde x é o numero do estado que vai variar entre 1 e 5. A única coisa que temos que fazer para adicionar as animações de estado é seleccionar o estado que pretendemos animar e mover a "contentGrid" para a posição final. Ou seja, no "state1" pretendemos que a imagem 1 esteja visivel. No "state2" pretendemos que a imagem 2 esteja visivel e assim sucessivamente até ao "state5". No final podemos escolher uma "default transition" diferente da que está por defeito. O meu painel de estados final tem o seguinte aspecto:
Agora que já temos as animações temos que alternar entre as mesmas. Para isso vamos adicionar os eventos de "Click" em todos os botões de modo a que quando a carregue no botão 1 ele mude para a imagem 1 e assim sucessivamente até ao botão 5. Depois de termos adicionado os eventos vamos ao "code-behind" da nossa página principal e vamos a um bocadinho de programação porque senão isto não tinha piada. ;)
Aqui vamos recorrer a uma classe do Silverlight chamada VisualStateManager que nos permite gerir os estados e a lógica de transição entre os mesmos. Em cada um dos eventos que adicionámos apenas precisamos de adicionar uma linha de código.
O que esta linha faz é dizer que quando eu pressionar o botão 1 o meu usercontrol vai mudar para o "state1" e que vai usar transições. Agora têm que fazer isto para os restantes botões.
3. Agora que já temos toda a lógica e funcionamento pronto só nos falta adicionar as imagens. Para isso vamos adicionar uma pasta no nosso projecto Silverlight que vai conter as nossas imagens.
De seguida temos que fazer "build" ao nosso projecto para que as nossas imagens inseridas se tornem visiveis no âmbito do projecto e vamos associar a cada um dos controlos "images" uma das fotos que acabámos de inserir.
A pratir deste momento, e se todo o processo correu bem até aqui, basta fazer "Play" e temos o nosso slideshow a funcionar.
Tal como tinha referido no principio vou deixar a parte do "timer" para vocês fazerem. O aspecto final do meu slideshow é o seguinte:
Espero que tenham aprendido algo de útil. :)
See you...
Meet the Geeks hoje na Covilhã. Ás 22h no Soda.
Vão discutir-se todo o tipo de assuntos. Apareçam que vai valer a pena. ;)
Até já...
Neste tutorial vou mostrar-vos como se podem capturar as acções e movimentos do rato para criar aplicações bastante interactivas. Como exemplo vamos criar uma aplicação que permite alterar o tamanho de uma imagem e movê-la pelo ecrã.
O esquema do projecto é o seguinte:
Ao pressionar e arrastar os cantos da imagem vamos proceder ao redimensionamento. Ao seleccionar e arrastar os lados movemos a imagem de sitio.
Antes demais existem algumas noções que têm que ser introduzidas de modo a conseguirmos actuar correctamente sobre os movimentos do rato. Para o movimento de "drag" não é necessário saber onde estamos a carregar mas para o movimento de "resize" temos que saber qual o canto que temos seleccionado para calcularmos as alterações de tamanho e posição da imagem.
Basicamente o que utilizamos para calcular a nova posição é a fórmula utilizada para calcular uma distância entre dois pontos.
Outra coisa que precisamos de saber é que existem pontos para os quais é mais fácil calcular o redimensionamento. O mais fácil de todos é o canto inferior direito e é bastante fácil perceber porquê. Para o ponto inferior direito basta-nos calcular o novo comprimento e altura. Não necessitamos de movimentar a imagem. Para os outros pontos já não é assim.
Agora que já temos todas as noções necessárias para a criação deste projecto vamos passar à acção.
Em primeiro lugar vamos criar um novo projecto Silverlight no Expression Blend. (O projecto também poderia ser criado no Visual Studio mas como nós pretendemos em primeiro lugar a componente visual da aplicação criamos a aplicação no Blend)
Ao meu novo projecto eu chamei DragImageTutorial. Agora que o nosso projecto Silverlight está criado a primeira coisa a fazer é alterar o tipo do nosso Layout Root de Grid para Canvas como é mostrado em baixo. Este passo é muito importante pois facilita bastante as acções sobre as imagens pois se quisermos alterar a posição destas só temos que dar novos valores a Canvas.Top e Canvas.Left que definem as distâncias do nosso objecto ao topo e à esquerda respectivamente.
Agora vamos criar o nosso objecto que irá conter a imagem. Este objecto vai ter o seguinte layout:
Grid:
- Rectangle (Rectangulo que vai permitir mover a imagem pelo canvas)
- 4 Rectangles (Rectangulos que estão nos quatro cantos da imagem e que vão permitir fazer o redimensionamento da mesma)
- Image (Imagem que vai ser redimensionada)
A estrutura é esta. O design agora fica ao cargo de cada um. ;)
O próximo passo é adicionar os seguintes eventos a todos os rectangulos de modo a conseguirmos tratar os movimentos e redimensionamento da imagem:
- MouseLeftButtonDown ( Evento lançado quando o botão esquerdo do rato é pressionado sobre o objecto em questão)
- MouseLeftButtonUp ( Evento lançado quando o botão esquerdo do rato é largado)
- MouseMove ( Evento lançado quando o rato é movido)
Vamos começar por tratar apenas o deslocamento da imagem pois é a parte mais fácil e vai servir para perceber a nossa maneira de pensar. Antes de mais temos que criar uma variável global do tipo booleano que nos vai dizer se a imagem está a ser arrastada ou não.
Os eventos para o rectangulo que move a imagem funcionam da seguinte forma:
- Quando o botão é pressionado, caso o objecto não esteja já a ser movido, iniciamos a captura do rato para este objecto. Em seguida guardamos a distancia do ponto (X,Y) que está a ser pressionado em relação ao ponto de origem deste rectangulo e depois dizemos que o objecto está a ser movido.
- Quando o botão é largado o que fazemos é dizer que o objecto não está a ser movido e largamos a captura do rato para este objecto, caso este objecto esteja a ser movido, ou seja, isDragging = true.
- No evento de MouseMove o que fazemos é calcular o novo ponto de origem do objecto que tal como podemos ver em baixo é apenas uma diferença entre o ponto actual, tendo como base a origem da nossa janela, e o ponto onde o captura do rato foi iniciada. Estes cálculos só serão realizados caso o nosso objecto esteja a ser deslocado.
Esta parte foi a mais simples mas serviu como exemplo para os outros objectos que faltam. A lógica é a mesma (Activar -> Mover -> Desactivar), os cálculos que fazemos é que são diferentes. Para explicar mais em detalhe cada um dos rectangulos que estão nos cantos da imagem e que vão servir para fazer o redimensionamento da mesma vamos separar a explicação em 4 partes diferentes. Uma para cada rectangulo.
Antes de mais precisamos de adicionar 4 variáveis booleanas para nos devolver o estado de cada um dos quatro objectos tal como fizemos para o rectangulo anterior.
Parte 1 (canto inferior direito)
Para este canto não necessitamos de alterar a localização do objecto basta-nos alterar a largura e altura do mesmo conforme a distancia percorrida pelo rato.
Parte 2 (canto superior direito)
Neste canto temos que alterar a largura, a altura mas também temos que alterar a posição em relação ao topo do ecrã pois podemos redimensionar para cima.
Parte 3 (canto superior esquerdo)
No canto superior esquerdo temos que alterar todas as propriedades do objecto (tamanho, largura, posicionamento em relação ao topo e posicionamento em relação à esquerda).
Parte 4 (canto inferior esquerdo)
Para o último canto temos que alterar a posição em relação à esquerda, a altura e a largura do objecto.
A partir deste momento temos um objecto que podemos movimentar no ecrã e redimensionar. Obviamente existem outras formas para fazer este tipo de interacção com os objectos mas acho que esta forma é muito boa para uma pessoa que está a dar os primeiros passos no Silverlight.
O próximo tutorial terá um toque das redes sociais. Facebook?? Twitter? Quem sabe...
O maior evento de tecnologia da Microsoft já está em andamento. Este ano terá 3 dias!!! 20, 21 e 22 de Abril.
Mais de 40 oradores especialistas em todas as áreas de tecnologia. Aproveita e conhece as tecnologias do momento apresentadas pelos melhores.
Inscreve-te antes de 5 de Março e aproveita o desconto!
Gostas de pizza , jogos e de paródia?? Então o XNA Pizza Night é o evento certo para ti!
O XNA Pizza Night é um evento aberto a todos os estudantes, game developers, game designers, entusiastas ou amantes de videojogos. Consiste em criar um pequeno jogo ou demo com a tecnologia XNA e virem ao auditório do edifício da Microsoft em Lisboa dia 5 de Março de 2010 para jogarmos o vosso jogo. Os jogos mais votados pelos participantes vão receber inúmeros prémios.
PS: As pizzas e as bebidas ficam à conta da Microsoft. ;)
Para mais informações vejam o site do evento: http://gozoomin.com/pizzanight/default.aspx
Participem...
Num projecto recente tive a necessidade de criar um gadget em Silverlight que recebia informação textual de uma fonte externa ao Silverlight.
Aqui existiam algumas formas de o fazer:
- Através de um ficheiro xml
- Através de um webservice
- Através de uma div no HTML
- Entre outras...
Como nós queríamos manter o código simples escolhemos a terceira opção. Isto pode ser feito de uma maneira bastante simples.
O que eu fiz foi então o seguinte:
- Criei uma div no HTML com o conteúdo que pretendia passar para o Silverlight e escondi esta div
<div id="a_minha_div" style="display=none"> conteúdo </div>
- Na mainPage.xaml.cs acedi ao conteúdo da minha div
HtmlElement div = HtmlPage.Document.GetElementById("a_minha_div");
String conteudo = div.getProperty("innerHtml").toString();
Mais um pequeno tutorial com informação valiosa...pode dar muito jeito com coisas simples. Em casos mais complexos é aconselhável a utilização de javascript.
Talvez os mais informados já saibam mas para os que ainda não sabem estou a estagiar na Microsoft desde o inicio da semana e está a ser uma experiência absolutamente fantástica. Toda a gente me recebeu bastante bem e o ambiente é fantástico. A parte ainda melhor é que as minhas funções são na área do Silverlight e tecnologias web por isso estou a adorar. Ainda mais porque estou rodeado de pessoas com um nível de conhecimento a nível de tecnologia que me deixa de boca aberta.
É engraçado como nos podemos sentir tão diferentes dependendo do contexto em que nos encontramos. Eu vinha de um sítio onde era bastante bom no que fazia e agora estou num sitio onde muitas vezes me perco ao tentar acompanhar o raciocínio de certas pessoas. Mas foi a minha constante vontade em adquirir conhecimento que me colocou onde estou agora e por isso não podia estar em melhor lugar.
Vou dando notícias...
|
>Participe no grande evento web da Microsoft no Porto a 2 de Fevereiro de 2010!
O
WebDay traz-lhe as tendências e a inovação Web: o futuro das tecnologias
como o Silverlight, o Internet Explorer, Expression, ASP.NET e Windows Azure. 1
dia completo, com três tracks, 16 sessões e os melhores oradores nacionais. Terá
ainda a oportunidade de partilhar as melhores práticas com a Comunidade
Web. O Webday está desenhado para Web Developers, Criativos, Information
Architects, Designers Gráficos, profissionais de User Experience, Digital
Marketeers e. para todos os que partilham o interesse sobre o que o futuro da
Web nos trará. Esta é a oportunidade de fazer parte do futuro da Web! INSCREVA-SE
JÁ! O NÚMERO DE LUGARES É LIMITADO. |
Ultimamente tenho andado a explorar algumas capacidades do Silverlight 3 com as quais ainda não tinha tido qualquer tipo de contacto apesar de as achar bastante interessantes. Uma delas é o multitouch. Tenho que vos confessar que estou bastante impressionado! É uma feature muito interessante e com muito potencial em várias áreas de aplicação.
Para termos acesso a estas funcionalidades temos que ter o Windows 7 instalado no nosso PC e o PC tem que ter suporte para multitouch. A partir daí a nossa imaginação é o limite.
Neste post vou mostrar apenas um exemplo muito básico mas que mostra como podemos começar a desenvolver aplicações multitouch em Silverlight 3.
Para começar a utilizar as capacidades de multitouch temos que adicionar em qualquer parte da nossa aplicação o seguinte evento:
Touch.FrameReported += new TouchFrameEventHandler(Touch_FrameReported);
Atenção:
Ao contrário dos eventos do rato (MouseLeftButtonDown, MouseLeftButtonUp, ...), este evento é global. Ou seja, é ligado a toda a nossa aplicação e não pode ser aplicado apenas a um objecto.
A partir deste momento a nossa aplicação está pronta a receber mensagens de toque por parte do hardware. Este evento permite-nos ter acesso a vários métodos mas os principais e que aqueles que serão usados neste post são: GetPrimaryTouchPoint e GetTouchPoints.
O GetPrimaryTouchPoint devolve o primeiro ponto que foi tocado no ecrã numa possível sequência de toques. E o GetTouchPoints devolve uma colecção de todos os pontos que estão a ser pressionados.
Ambos os métodos devolvem objectos do tipo TouchPoint. Este obejecto permite-nos aceder a quatro valores.
- Position - Posição do toque em relação a um determinado offset. Se passarmos null ao chamar a função o valor devolvido é absoluto.
- Action - Existem três tipos de toque: Down, Move e Up. É bastante fácil perceber o que faz qualquer um destes eventos mas o evento Move não é tão trivial como parece. O evento Move está sempre a ser chamado mesmo que a posição do toque não seja alterada. Ou seja, existe um refresh constante deste evento.
- TouchDevice - É o ID único que o sistema operativo atribui ao dispositivo que está a servir para o toque.
- DirectlyOver - Devolve o objecto que está directamente no sítio pressionado.
Um pequeno exemplo de utilização é:
public MainPage()
{
InitializeComponent();
Touch.FrameReported += new TouchFrameEventHandler(Touch_FrameReported);
}
void Touch_FrameReported(object sender, TouchFrameEventArgs e)
{
TouchPointCollection points = e.GetTouchPoints(null);
TouchPoint primaryPoint = e.GetPrimaryTouchPoint(null);
if (null != primaryPoint)
{
if (primaryPoint.Action == TouchAction.Down)
e.SuspendMousePromotionUntilTouchUp();
switch (primaryPoint.Action)
{
case TouchAction.Down:
// fazer alguma coisa
break;
case TouchAction.Up:
// fazer alguma coisa
break;
case TouchAction.Move:
// fazer alguma coisa
break;
}
}
}
Com este pequeno exemplo estamos a aceder a todos os pontos que são pressionados no ecrã. Agora, e tal como disse no ínicio do post, o limite é a imaginação.
Criem e depois divulguem pois o conhecimento só serve de alguma coisa se o conseguirmos passar para as outras pessoas... ;)
Gostavas de desenvolver para a Microsoft Surface mas não tens uma? Agora já é possível!!
No passado mês de Novembro, no PDC 2009 foi lançado o Microsoft Surface Software Development Kit (SDK) Workstation Edition. Este SDK permite a qualquer pessoa desenvolver aplicações para a Surface sem que seja necessário ter uma. Para fazer o download basta seguir este link.
Experimentem, vale a pena...
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...
More Posts
Next page »