Bruno Sonnino : Silverlight

Você sabe o que é um Mashup?

bsonnino — Tue, 23 Jun 2009 12:47:00 GMT

Se você não sabe o que é um mashup, vale a pena saber: mashups são "misturas" de dados que permitem combinar dados de diversas fontes, criando uma visualização unica, resumida. Por exemplo, você pode pegar dados de clientes, com suas localizações e colocar "pins" no mapa, com indicações dos clientes. Ou você pode pegar dados estatísticos e plotar gráficos ou criar mapas que mostram a atividade no mundo.

Enfim, as oportunidades para criar um mashup são praticamente infinitas. A Microsoft criou um gerador de mashops, o PopFly creator, onde você pode criar seus blocos, que extraem os dados de diversas fontes e geram saídas diversas. Estes blocos são criados usando Javascript, isto é, não necessitam de nenhuma linguagem especial. Se você acha que pode ser complicado criar um bloco, não precisa se aventurar a tanto, no início: você pode usar os blocos criados por outras pessoas, que estão disponíveis e que, inclusive, podem ser alterados por você.

Para mostrar como é fácil criar um mashup, vamos fazer um. Para isso, vamos usar os blocos criados pelo meu filho Roberto e pelo Bruno Reis, que estão concorrendo na etapa mundial da ImagineCup 2009, na categoria Mashup, o KnoWorld. Os blocos criados por eles tem diversas funcionalidades. Por exemplo, o GapMinder extrai dados de diversos indicadores (você pode ter a lista completa em http://tinyurl.com/gap-ind) e disponibiliza-os em formato ano/valor ou país/valor, de maneira que você pode obter uma série temporal (quando quer ver a evolução de um indicador num país) ou espacial (quando quer ver a distribuição de um indicador no mundo, num determinado ano).

A partir daí, você pode plotar estes dados usando os blocos TimePlot (que mostra os dados, ligando-os a uma série de eventos), ou Google Charts (que plota um gráfico de barras, de linha, ou mesmo um mapa mundi colorido).

No meu caso, eu queria verificar a correlação entre o consumo de óleo no Brasil, com a emissão de CO2, para ver se há correspondência entre os dois indicadores. Fui até http://www.popfly.com/mashupcreator, dei meu login do passport e comecei a criar o mashup. Inicialmente, coloquei dois blocos GapMinder (basta teclar na caixa de pesquisa, que ele aparece). Configurei o primeiro GapMinder para a operação "getByCountry" e o indicador "Oil consumption". Selecionei o país Brasil. O segundo GapMinder foi configurado para o indicador "Total CO2 emissions (thousand tonnes)". Em seguida, coloquei dois blocos Filter. Estes blocos filtram os dados para as condições selecionadas. Como o GapMinder gera muitas informações, iremos filtrar os dados a partir de 1965, mostrando os dados de 5 em 5 anos. Em seguida, liguei a saída dos GapMinders aos Filters. Configurei os blocos Filter como

List: Source - GapMinder - Value: [entire TimeSeries object]
Condition: Custom - Value: x.year >= 1965 && x.year % 5 == 0

Finalmente, adicionei um bloco Google Charts e liguei a saída dos dois Filters à entrada do Google Charts. Configurei o Google Charts como

Operations: plotLineChart
X Values: Filter - Value: year
Y Values: Filter - Value: value
XValues2: Custom - Value: (deixar um espaço em branco para plotar o gráfico)
Y Values2: Filter(2) - Value: value
ShowImage: true

Pronto. Isto é tudo o que precisamos. O Mashup ficou como a figura abaixo

Aí é só executar o mashup e ver o resultado, como em:

Como vocês podem ver, o consumo de óleo corre em paralelo com a emissão de CO2. Se vocês quiserem ver o mashup, ele está em http://www.popfly.com/users/BSonnino/Oil%20consumption%20vs%20CO2%20Emission%20in%20Brazil

Como vocês podem ver, criar um mashup é muito fácil, já imaginaram as possibilidades?

Element Binding e 3D em Silverlight 3

bsonnino — Sun, 22 Mar 2009 18:24:00 GMT

A versão beta do Silverlight 3 foi lançada no Mix 2009 e trouxe diversas novidades. Entre elas estão o Element Binding e a possibilidade de simular 3D nas aplicações.

O Element Binding é um tipo de data binding já existente no WPF, mas que não tinha sido implementado no Silverlight 2. No Silverlight 2 podiamos fazer ligação da interface com os dados de uma classe interna, mas não podíamos ligar 2 as propriedades de dois elementos visuais. Por exemplo, se quiséssemos colocar um TextBlock e um Slider na janela e mostrar a posição do Slider no TextBlock, deveríamos criar uma classe no código e ligar os dados da classe aos dois componentes. O código ficaria assim:

Code behind:

namespace SL2Binding

{

public class Binder : INotifyPropertyChanged

{

private double posicao;

public double Posicao

{

get { return posicao; }

set

{

posicao = value;

if (PropertyChanged != null)

PropertyChanged(this, new PropertyChangedEventArgs("Posicao"));

}

#region INotifyPropertyChanged Members

public event PropertyChangedEventHandler PropertyChanged;

#endregion

}

public partial class MainPage : UserControl

{

public MainPage()

{

InitializeComponent();

}

XAML:

<UserControl x:Class="SL2Binding.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="clr-namespace:SL2Binding"

Width="400" Height="300">

<UserControl.Resources>

<local:Binder x:Key="binder" />

</UserControl.Resources>

</StackPanel>

</Grid>

</UserControl>

Embora isto funcione, é um pouco complicado: precisamos criar uma classe de ligação que implementa a interface INotifyPropertyChanged, declará-la no XAML e fazer data binding dos dois elementos com ela. Com a introdução do Element Binding no Silverlight 3, as coisas ficam muito mais fáceis: não precisamos implementar classes no código e o XAML fica muito mais simples:

<UserControl x:Class="SL2Binding.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

</StackPanel>

</Grid>

</UserControl>

Precisamos apenas de um binding do texto do TextBlock com o slider e temos exatamente o mesmo comportamento do código anterior.

Simultaneamente à introdução do Element Binding, o Silverlight 3 também trouxe, entre outras coisas, uma simulação de 3D. Não é um 3D real, mas é muito simples de usar e deve satisfazer as necessidades de grande parte dos usuários: o Silverlight 3 permite criar a projeção de um plano girá-la nos eixos X, Y ou Z. Por exemplo. Se tivermos uma janela como esta:

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<StackPanel Orientation="Horizontal" Grid.Row="4" Grid.Column="1" Margin="5"

HorizontalAlignment="Center" VerticalAlignment="Top">

</StackPanel>

</Grid>

Podemos girá-la usando o seguinte markup:

<Grid.Projection>

</Grid.Projection>

Estamos aqui indicando que queremos girar a grid em 30º ao redor do eixo Y. Ao executarmos o programa, temos a seguinte figura:

Note que, embora a figura esteja girada, ela é perfeitamente funcional. Da mesma maneira que giramos em torno do eixo Y, podemos ainda girar o plano em torno dos eixos X e Z. Os eixos estão dispostos como na figura abaixo:

Agora, podemos juntar as duas partes (Element Binding e 3D) fazer o painel girar na horizontal (rotação no eixo Y) com o uso de um slider, sem precisar usar código. Para isso, usamos o seguinte XAML:

<UserControl x:Class="SL3Plane.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.Projection>

</Grid.Projection>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<StackPanel Orientation="Horizontal" Grid.Row="4" Grid.Column="1" Margin="5"

HorizontalAlignment="Center" VerticalAlignment="Top">

</StackPanel>

</Grid>

<Slider Grid.Row="1" Width="150" Minimum="0" Maximum="180"

Value="{Binding ElementName=Projecao, Path=RotationY,

Mode=TwoWay}" />

</Grid>

</UserControl>

Demos um nome à projeção para poder fazer Binding com ela e colocamos um slider na página, para poder girar o plano. Ao executarmos o projeto, vemos que o slider gira o plano sem que haja a necessidade de escrever código. Porém, ao girar mais de 90º vemos um efeito indesejado: o 3D do Silverlight é apenas uma simulação e estamos vendo a frente do painel, invertida:

Mesmo assim, a tela continua funcional, podemos digitar nas caixas de texto normalmente. Com quase toda certeza, não é este efeito que você está procurando, e devemos dar um jeito nisso. Para simular o efeito 3D devemos ter dois painéis, um para a frente e outro para o fundo. Criamos então o painel do fundo e deixamos com visibilidade Collapsed, para que não seja mostrado:

<Grid x:Name="gridFundo" Background="Aquamarine" Visibility="Collapsed"

RenderTransformOrigin="0.5,0.5">

<TextBlock Text="Verso do painel" FontFamily="Tahoma"

FontSize="24"

HorizontalAlignment="Center" VerticalAlignment="Center"

RenderTransformOrigin="0.5,0.5">

<TextBlock.RenderTransform>

</TextBlock.RenderTransform>

</TextBlock>

</Grid>

Este painel contém apenas um TextBlock para exemplificar, mas poderíamos colocar aí qualquer componente (um exemplo seria simular uma ficha, mostrando a frente e o verso dos dados). Para fazer a troca dos painéis devemos usar code behind, ativado pelo evento ValueChanged do slider:

private double anguloAnt;

private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)

{

double anguloAtu = (sender as Slider).Value;

if ((anguloAnt < 90 && anguloAtu >= 90 ) ||

(anguloAnt > 90 && anguloAtu <= 90 ))

{

MostraGrids(anguloAtu);

}

anguloAnt = anguloAtu;

}

private void MostraGrids(double angulo)

{

if (angulo < 90)

{

gridFrente.Visibility = Visibility.Visible;

gridFundo.Visibility = Visibility.Collapsed;

}

else

{

gridFrente.Visibility = Visibility.Collapsed;

gridFundo.Visibility = Visibility.Visible;

}

Temos uma variável para guardar o ângulo atual. Quando o ângulo atual passa de 90º e o anterior é menor que 90º ou vice versa, mostramos uma grid e escondemos a outra. Temos que fazer um pequeno truque no painel de fundo: quando estamos girando em torno do eixo Y (rotação na horizontal), o painel do fundo fica invertido. Podemos solucionar isso aplicando uma transformação que inverte o painel:

<Grid x:Name="gridFundo" Background="Aquamarine" Visibility="Collapsed"

RenderTransformOrigin="0.5,0.5">

<Grid.RenderTransform>

</Grid.RenderTransform>

<TextBlock Text="Verso do painel" FontFamily="Tahoma" FontSize="24"

HorizontalAlignment="Center" VerticalAlignment="Center"

RenderTransformOrigin="0.5,0.5">

<TextBlock.RenderTransform>

</TextBlock.RenderTransform>

</TextBlock>

</Grid>

Desta maneira, mostramos o painel da frente e do verso usando os novos recursos de 3D e element binding do Silverlight 3.

Criando uma aplicação LOB com Silverlight e WCF

bsonnino — Sat, 21 Mar 2009 11:21:00 GMT

Meu artigo sobre criação de aplicativos LOB (Line of Business) com Silverlight foi publicado na revista .net Magazine número 60 (aliás, ele é o artigo de capa). Neste artigo, mostro como criar uma aplicação LOB usando o Silverlight e WCF.

Lá eu mostro como criar um serviço WCF que acessa os dados de um banco de dados usando Linq to SQL e um programa Silverlight que acessa este serviço. A aplicação mostra como pesquisar, incluir, editar ou excluir os dados. Além disso, mostro como fazer a mudança entre as páginas de uma aplicação Silverlight, mostrando a lista numa página e os detalhes em outra.

Enfim, se você quer saber como criar uma aplicação comercial usando Silverlight, vale a pena dar uma conferida no artigo.

Acessando dados com Silverlight

bsonnino — Wed, 11 Mar 2009 07:16:00 GMT

Uma das críticas mais comuns ao Silverlight é o fato que, embora a plataforma seja muito ampla e traga muitas facilidades para a criação de interfaces ricas para a Web, com o uso de videos, animações, controles, ele é apenas uma "carinha bonita, sem conteúdo".

Nada está mais longe da verdade que esta afirmação: o Silverlight é, na realidade uma plataforma completa, com acesso à rede, acesso a dados, podendo inclusive usar LINQ para acessar os dados. Como os programas rodam no browser, o acesso à máquina cliente é muito restrito, mas isto não quer dizer que não há a possibilidade de acessar dados externos: há sim, e as possibilidades são inúmeras: podemos acessar dados de um servidor através de um WebService, acessar serviços REST ou mesmo consumir feeds RSS, apresentando os resultados numa interface rica, semelhante à de uma aplicação Desktop utilizando WPF.

O livro Data-Driven Services with Silverlight 2 vem suprir a falta de referências que mostram o acesso a dados com Silverlight: enquanto a maior parte dos livros sobre Silverlight ensinam a criar programas com a nova tecnologia, mostrando a criação da interface visual, este livro passa superficialmente sobre a interface, concentrando-se no acesso a dados.

O primeiro capítulo mostra uma introdução aos novos recursos do Silverlight, como o LINQ ou as alterações na linguagem introduzidas com o C# 3.0. A partir do capítulo 2 é que realmente começa o livro: os capítulos 2, 3 e 4 dão uma visão bastante completa da ligação de dados (Data binding), indispensável para conectar o dado vindo de um serviço à interface. Em seguida, o livro entra no acesso a dados propriamente dito: o capítulo 5 é uma introdução a WCF e WebServices, mostrando a criação de serviços com WCF ou AsmX. Este capítulo mostra ainda como fazer chamadas "Crossdomain", que acessam serviços fora do domínio onde está situada a aplicação Silverlight: não há restrições para acesso a um serviço situado no mesmo domínio da aplicação Silverlight, mas o acesso a outros domínios é restrito e deve ser resolvido: muitas vezes, criamos um programa Silverlight e não conseguimos acessar os dados, devido a esta restrição. Aqui é mostrado como solucionar o problema de acesso entre domínios e como é possível debugar as requisições ao servidor.

O capítulo 6 mostra como serializar entidades usando o WCF. Usando o LINQ to SQL ou o LINQ to Entities, obtemos classes para acesso aos dados, mas estas estão restritas ao servidor. Este capítulo mostra como podemos serializar as entidades com o WCF e acessá-las no programa Silverlight, consumindo-as usando o LINQ to Objects.

Os capítulos 7, 8 e 9 falam sobre criação e consumo de serviços REST. Os serviços REST utilizam comandos HTTP (PUT, GET, DELETE, POST), podendo passar parâmetros para o serviço pela URL, o que facilita muito o uso do serviço, inclusive usando o browser, sem nenhum programa cliente específico. O capítulo 7 mostra como consumir serviços REST usando o WebClient e o HTTPWebRequest, inclusive usando múltiplas threads para obter os dados. O capítulo 8 mostra como consumir o serviço de acesso à Amazon, pesquisando livros na livraria virtual. Com a base deste capítulo, você pode inclusive estender a aplicação, criando um carrinho de compras no seu programa Silverlight. O capítulo 9 mostra a criação de um serviço REST e o assesso ao Twitter, criando um programa que permite acessar o serviço e postar mensagens, usando JSON ou mesmo XML para transferir os dados.

O capítulo 10 mostra o acesso a RSS feeds, usando a API de Syndication. Embora esta não esteja diretamente relacionada com o Silverlight, pois está disponível também no .net Framework completo, não vemos muitas referências a ela. Aqui temos uma visão clara de como usar esta API para acessar os dados de um RSS e apresentá-los em nossa aplicação. O último capítulo mostra o acesso a dados com o ADO.NET Data Services que, associado ao Entity Framework, facilita muito o acesso aos dados remotos.

Em resumo, este não é um livro para aprender Silverlight, há muitos bons livros para aprender esta tecnologia. Mas, se você já conhece Silverlight e quer saber como criar programas LOB, que não sejam apenas uma "carinha bonita", deve ter este livro em sua estante.

10K Smart Coding Challenge

bsonnino — Thu, 18 Dec 2008 18:43:00 GMT

Você quer ir ao Mix 2009, em Las Vegas, mas o dinheiro está curto? Bem, aqui está sua oportunidade de ir ao Mix, com entrada, hotel e mais $1500 no bolso: o concurso 10K Smart Coding Challenge: crie um programa Silverlight ou WPF com até 10K de código fonte e concorra a uma viagem ao Mix. O regulamento e os dados estão em http://2009.visitmix.com/MIXtify/TenKGallery.aspx

Boa Sorte!

Novos controles para Silverlight

bsonnino — Fri, 31 Oct 2008 13:37:00 GMT

O Silverlight vem ganhando grande atenção e a caixa de ferramentas disponível ao desenvolvedor também cresceu: se você quer novos controles, como treeview, gráficos ou mesmo uma caixa de edição com autocomplete, você pode baixar o Silverlight toolkt em http://www.codeplex.com/Silverlight

Alem dos vários controles disponíveis, o toolkit vem com diversos temas que podem ser usados em suas aplicações. Vale a pena dar uma olhada!

DataBinding no Silverlight

bsonnino — Wed, 30 Jul 2008 09:00:00 GMT

Ontem (29/07/2008), apresentei um WebCast no MSDN, sobre DataBinding com Silverlight. Nele apresentei os conceitos de ligação de dados com a interface de usuário, mostrando o novo compoenente DataGrid, ligando a dados locais e também a dados remotos, usando um serviço WCF que obtém os dados de um banco de dados usando LINQ to SQL.

Além disso, mostrei as interfaces INototyPropertyChanged and como usar um Converter para fazer a conversão no DataBinding. Se você se interessou, pode fazer o download da gravação em https://msevents.microsoft.com/CUI/WebCastEventDetails.aspx?culture=pt-BR&EventID=1032382850&CountryCode=BR (você se inscreve no evento para fazer o download).

O código fonte do que foi apresentado lá está no arquivo anexo.

Lançado o Beta 1 do Silverlight 2.0

bsonnino — Thu, 06 Mar 2008 12:24:00 GMT

Ontem, no Mix/08 foi lançado o Beta 1 do Silverlight 2.0. Esta tem muitas novidades sobre a versão anterior: novos controles (inclusive uma DataGrid), Data Binding, controles de layout, entre outros.

Vale a pena instalar o runtime da versão 2.0 em http://go.microsoft.com/fwlink/?LinkId=112012 para brincar um pouco com ele. Se quiser ver um pouco das novidades, veja o demo.

Gostou, quer mais? Instale o SDK em http://www.microsoft.com/downloads/details.aspx?FamilyId=E0BAE58E-9C0B-4090-A1DB-F134D9F095FD&displaylang=en e o Blend 2.5 em http://www.microsoft.com/expression/products/download.aspx?key=blend2dot5 e dê uma olhada nos tutoriais, vídeos e hands-on labs em http://silverlight.net e cheque os blogs do ScottGu aqui e aqui

Entrevista comigo no XAMLCast

bsonnino — Thu, 27 Dec 2007 11:10:00 GMT

Meu filho Roberto e o Rodrigo Kono criaram um podcast sobre WPF e XAML, que vale a pena conferir. Eles estão fazendo uma série de entrevistas com os palestrantes de WPF/Silverlight do TechEd e fizeram uma entrevista comigo, de 30 minutos. Vale a pena dar uma conferida em http://www.xamlcast.net

Vem aí o Silverlight 2.0

bsonnino — Fri, 30 Nov 2007 14:43:00 GMT

O Scott Guthrie anunciou que no início de 2008 deve ser lançado o Silverlight 2.0, com um monte de novas features:

Novos controles, como caixas de texto, checkboxes, tabcontrols e até uma grid
Controles de layout
Data binding
Suporte a rede, inclusive Cross Domain
Suporte a uma biblioteca de classes bastante completa, com suporte a Linq to XML e api para acesso ao DOM HTML

Esta nova versão deverá ser lançada no primeiro trimestre de 2008, com uma licença Go-Live, que possibilita a criação de projetos de produção, em conjunto com uma atualização para o Visual Studio 2008, de maneira a possibilitar a criação de projetos Slverlight com as diversas versões da ferramenta, inclusive as Express.

Fiquem ligados, porque pelo que está pintando, vai ser de arrasar!

Lançado o Silverlight 1.0

bsonnino — Wed, 05 Sep 2007 09:34:00 GMT

Se você ainda não conhece o Silverlight, vale a pena conhecer. O Silverlight é uma nova tecnologia para a Web, que permite fazer facilmente aplicações de conteúdo rico que pode ser usada em múltiplos browsers (IE, Firefox e Safari) e plataformas (Windows e Mac). Ele usa um subset do XAML do WPF e está disponível em duas versões: 1.0, que usa JavaScript como code-behind ou 1.1, que usa linguagens gerenciadas, como o C# ou o VB.net, além de IronPython, IronRuby ou mesmo Chrome. Além disso, permite um excelente streaming de mídia. Um bom exemplo está em http://silverlight.net/fox

A versão 1.0 acaba de ser lançada, em conjunto com o Expression Encoder, mais um componente da suíte de programas Expression, com o anúncios de que em breve devemos ter Silverlight para Linux. O projeto, chamado Moonlight, está sendo feito em parceria com a Novell e prevê o Silverlight para múltiplas distribuições do Linux rodando em FireFox, Konqueror ou Opera. Se você queria programar em C# para Linux, aguarde.

Tutoriais de WPF/Silverlight

bsonnino — Sun, 29 Jul 2007 12:56:52 GMT

Celso Gomes, um brasileiro que está trabalhando na Microsoft, em Redmond, na equipe do Expression Blend, é um designer de mão cheia, com trabalhos muito bonitos.

Ele criou um site com tutoriais de Silverlight e WPF, o NibblesTutorials, vale a pena conferir. Se você prefere os tutoriais em português, dê uma olhada aqui