domingo, 16 de novembro de 2008

Conceitos do XAML (zãmeu) – Parte II

Neste artigo vou explicar mais detalhadamente alguns conceitos básicos do XAML. Este artigo é composto pelos seguintes itens:

  • Propriedades e Layout (parte I);
  • Containeres (este artigo);
  • Brushes;
  • Desenhos geométricos;

Containeres (Containers)

Em quase todos os artigos aparece o tal do container, mas afinal o quem são eles?

Bom. Os Containers são controles pais que podem conter filhos, ou seja, podem conter controles dentro deles, podendo ser ate mesmo outro container ou o mesmo. Por exemplo, dentro de um Canvas eu posso ter outro Canvas e dentro desse eu posso ter um StackPanel, independente da ordem ou tipo. Container agrupa controles e define a raiz do XAML em questão. Sendo assim todo controle XAML, como por exemplo, o Page.xaml, possui um controle raiz que deve ser um container, são eles: Canvas, StackPanel e Grid.

Canvas

O mais famoso dos containers. O controle Canvas possui a característica de posicionar os elementos em uma espécie de plano cartesiano, onde para seus controles filhos pode ser informada a posição em que serão desenhados, o X e o Y. Isso é definido pela attached property Canvas.Left e Canvas.Top respectivamente.

O xaml abaixo mostra como definir esta propriedade.

<UserControl x:Class="Blog_XamlBasics2.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Canvas x:Name="LayoutRoot" Background="White">
<Rectangle Fill="Green" Width="200" Height="100"
Canvas.Left="50"/>
<Rectangle Fill="Black" Width="200" Height="100"
Canvas.Left="100" Canvas.Top="180"/>
</Canvas>
</UserControl>

A figura abaixo mostra o design deste XAML.

image

StackPanel

O StackPanel possui a característica de orientar seus controles filhos através da propriedade Orientation, que pode ter os valores Horizontal e Vertical. O XAML abaixo mostra um StackPanel com alguns controles sendo orientado horizontalmente e verticalmente, sendo, um StackPanel dentro do outro.

<UserControl x:Class="Blog_XamlBasics2.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<StackPanel x:Name="LayoutRoot" Background="White">
<Rectangle Fill="Green" Width="100" Height="50"
Canvas.Left="50" Margin="0,10,0,0"/>
<Rectangle Fill="Black" Width="100" Height="50"
Canvas.Left="100" Canvas.Top="180"/>
<StackPanel Width="100" Height="160" Background="PeachPuff"
Orientation="Horizontal">
<Button Content="Clique" Width="50" Height="25" />
<Ellipse Fill="Blue" Width="50" Height="50"></Ellipse>
</StackPanel>
</StackPanel>
</UserControl>

(OBS: Por padrão o StackPanel recebe o valor Vertical na propriedade Orientation caso nenhum valor seja informado).

Abaixo uma figura ilustrando o design deste exemplo.

image

Se desejar deixar um espaço entre os controles basta mudar a propriedade Margin (Margem) dos controles filhos do StackPanel. A Propriedade Margin recebe um objeto Thickness que por sua vez recebe 4 valores sendo a quantidade de pixels que o controle se afastará dos vizinhos, na ordem esses 4 valores são respectivamente para a Esquerda (LEFT), Topo (TOP), Direita (RIGHT) e finalmente para Baixo (BOTTOM).

Já o valor Vertical da propriedade Orientation do StackPanel desenha seus controles verticalmente, um embaixo do outro.

(OBS.: A maioria dos controles que fazem parte do layout do Silverlight aceita a propriedade Margin).

Grid

O Grid foi adotado como controle container padrão no silverlight 2 (nas versões anteriores o container padrão era o Canvas) quando se cria um projeto, por exemplo. Este container traz muita facilidade na hora de estilizar o layout das páginas, pois utiliza o conceito de uma tabela (igual as tables no HTML) para desenhar os elementos filhos. Você pode tanto adicionar colunas como adicionar linhas e definir qual será sua largura (Width) e sua altura (Height) respectivamente.

O XAML e a figura abaixo mostra o Grid em ação.

<UserControl x:Class="Blog_XamlBasics2.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<Button Content="Clique Aqui!" Width="100"
Height="35" Canvas.ZIndex="1"/>
<Ellipse Fill="Red" Width="110" Height="40" />
</Grid>
</UserControl>

image


(OBS: Utilizamos o Canvas.ZIndex para posicionar o botão na frente do círculo, isso funcionaria se o XAML do círculo fosse escrito primeiro que o do botão).

Caso não queira linhas ou colunas na Grid você pode optar por não adicioná-las, o Grid entende que possui somente uma linha e uma coluna, ambas com 100% largura (Width) e altura(Height).

Vamos criar um simples formulário de cadastro utilizando o container Grid para você ver como é simples e como muito parecido com o table do HTML. Primeiramente você define o Grid e algumas de suas propriedades como Background (Cor de fundo) e ShowGridLines (mostra a borda das colunas e linhas, muito utilizado para identificá-las).

<UserControl x:Class="Blog_XamlBasics2.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White"
ShowGridLines="True">
<!-- Content do Grid -->
</Grid>
</UserControl>

Após, é preciso definir as colunas, que nesse caso serão duas, uma para o rótulo do campo e a outra para o controle de entrada do campo, como por exemplo, o TextBox. O Grid possui uma coleção de colunas e linhas. Para adicionar uma coluna basta inserir um ColumnDefinition dentro da coleção de colunas, o Grid.ColumnDefinitions.

<UserControl x:Class="Blog_XamlBasics2.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White"
ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
</Grid>
</UserControl>

(OBS: para que as propriedades Width e Height representam um altura/largura de100% utiliza-se o valor "*")

A figura abaixo mostra o design deste layout.

image

Basta seguir o mesmo caminho para inserir linhas no Grid. Assim como para as colunas, o Grid possui uma coleção de linhas, o Grid.RowDefinitions. Dentro desta coleção basta adicionar um ou mais RowDefinition. O XAML abaixo mostra como fica o layout de nosso formulário.

<UserControl x:Class="Blog_XamlBasics2.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White"
ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
</Grid>
</UserControl>

A figura abaixo mostra a aplicação silverlight em execução.

image

Observe como a propriedade ShowGridLines do container Grid ajuda a visualizar o layout da aplicação.

Agora so nos resta adicionar os controles em nosso formulário.

Para ordenar os controles filhos do container Grid utiliza-se as propriedades Grid.Column (começa do valor 0 que é padrão) para especificar a coluna em que o determinado controle será posicionado e a propriedade Grid.Row (o mesmo de Grid.Column) que especifica a linha onde será apresentado no Grid.

O XAML abaixo mostra a aplicação completa.

<UserControl x:Class="Blog_XamlBasics2.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White"
ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

<!--COLUNA 0 - ROTULOS-->
<!--
Observe que não é preciso informar Gri.Column para a
primeira coluna pois o valor 0 já é padrão para todos
controles filhos de um controle container Grid. O mesmo
se aplica para Grid.Row.
-->
<TextBlock HorizontalAlignment="Right"
VerticalAlignment="Center"
Text="Nome:"/>
<!--Agora é preciso informar a linha (Grid.Row) dos controles-->
<TextBlock HorizontalAlignment="Right"
VerticalAlignment="Center"
Grid.Row="1" Text="Idade:"/>
<TextBlock HorizontalAlignment="Right"
VerticalAlignment="Center"
Grid.Row="2" Text="Email:"/>

<!--COLUNA 1 - CAMPOS-->
<!--
Agora é preciso informar a coluna (Grid.Column) para o
primeiro campo e para o restante informar tanto a coluna
quanto a linha(Grid.Row).
-->
<TextBox x:Name="txtNome" Width="200" Height="25"
Margin="5" HorizontalAlignment="Left"
Grid.Column="1"/>
<TextBox x:Name="txtIdade" Width="50" Height="25"
Margin="5" HorizontalAlignment="Left"
Grid.Column="1" Grid.Row="1"/>
<TextBox x:Name="txtEmail" Width="200" Height="25"
Margin="5" HorizontalAlignment="Left"
Grid.Column="1" Grid.Row="2"/>

<!--BOTÃO CADASTRAR-->
<Button x:Name="btnCadastrar" Width="100" Height="25"
HorizontalAlignment="Left" VerticalAlignment="Top"
Grid.Column="1" Grid.Row="3" Content="Cadastrar"
Click="btnCadastrar_Click"/>
</Grid>
</UserControl>

(OBS: Não esqueça de tirar a propriedade ShowGridLines do controle Grid)

Observe que adicionamos um Evento (EventHandler) no Click do botão Cadastrar para mostrar uma mensagem de sucesso simulando que o cadastro foi efetuado e apresentando os dados informados. Abaixo segue o código do evento de Click do botão.

private void btnCadastrar_Click(object sender, RoutedEventArgs e)
{
string cadastro = "O Cliente {0} do e-mail {1} e idade {2} " +
"foi cadastrado com sucesso!";

MessageBox.Show(string.Format(cadastro, txtNome.Text,
txtEmail.Text, txtIdade.Text));
}

As figuras abaixo mostram o programa em execução.

image

image

Clicando no botão Cadastrar...

image

Obrigado e até a próxima.

sábado, 15 de novembro de 2008

Silverlight Toolkit

Faz algum tempo que este projeto, open-source, está disponível para download no codeplex. O Silverlight toolkit é uma coleção de controles, componentes e utilitários que facilitam a vida do desenvolvedor e designer na plataforma silverlight. São muitos controles, desde gráficos, styling, layout, entrada de usuário.

Silverlight-Toolkit_w

Foto de alguns controles.

ControlsPPC

Acesse o site e fique por dentro desse pacote de facilidades que está ajudando o silverlight crescer mais ainda!

No blog do Jesse Liberty já possui muitos posts a respeito do controle mais fascinante do Toolkit, o AutoCompleteBox.
http://silverlight.net/blogs/jesseliberty/archive/2008/11/03/autocompletebox-control-worker-threads.aspx
(Obs.: Em inglês)

O Toolkit é open-source e você pode explorar como os controles foram desenvolvidos, lembrando que tudo foi desenvolvido com o silverlight e disponibilizado as DLL dos controles para que possamos adicioná-los em nossos projetos silverlight.

Logo estarei publicando artigos de como trabalhar com esses controles, por enquanto, estou arranjando tempo para terminar os artigos básicos para todos começarem a desenvolver nessa plataforma que só cresce!

sexta-feira, 7 de novembro de 2008

Conceitos do XAML (zãmeu) - Parte I

Primeiramente gostaria de pedir desculpas pela demora para postar novos artigos, estou tendo muito problema com formatação dos códigos, perco mais tempo formatando do que fazendo o artigo. Desculpas também pelos erros de português.

Neste artigo vou explicar mais detalhadamente alguns conceitos básicos do XAML (lê-se zãmeu, no português ajeitado ;D). Este artigo é composto pelos seguintes itens:

  • O XAML;
  • Propriedades e Layout;
  • Containeres;
  • Brushes;
  • Desenhos geométricos;
O XAML

Não podemos viver sem a definição concreta do XAML. Então ai está ;D.

O XAML (sigla de eXtensible Application Markup Language) foi criado pelo Microsoft e é a base do WPF (Windows Presentation Foundation) para criar interfaces de usuário (UI) ricas de forma muito simples e rápida. É uma linguagem declarativa baseado em XML. Você pode criar controles, nomeá-los, modificar propriedades de layout, enfim, produzir a UI. Ela separa a UI da lógica da aplicação através dos arquivos code-behind (os .cs, caso use C# como linguagem de programação). O mais importante é que o XAML representa a instanciação dos objetos na lógica da aplicação, isso é, o código conhece os controles criados dentro de um arquivo .xaml (conhecidos como managed objects). Com isso temos facilidades como depuração do projeto e acesso aos objetos da UI. Outra vantagem muito importante é que a estrutura do XAML permite não só separar a lógica do design como as duas profissões, o programador e o designer.

Propriedades e Layout

A maioria dos elementos que fazem parte do layout do Silverlight possui propriedades sendo elas próprias dos controles, herdadas de uma classe pai ou as chamadas "attached properties" que significa propriedades "amarradas". As Attached Properties são propriedades globais, muitas vezes modificam a apresentação de um controle que a utiliza. No exemplo abaixo, temos o XAML do Page.xaml (como criar projetos Silverlight utilizando Visual Studio 2008).

<UserControl x:Class="BlogXamlBasics.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Canvas x:Name="LayoutRoot" Background="White">
<Button Content="Clique aqui!"
Width="100" Height="50"
Canvas.Left="100" Canvas.Top="5" />
</Canvas>
</UserControl>
Como pode notar, um caso bem comum de attached properties é a propriedade Canvas.Left ou Canvas.Top que define em que ponto o botão no XAML acima será desenhado. Estas propriedades não pertencem ao botão, ela é uma Attached property, uma variável global. Supondo que o não fosse o Canvas o container de Page.xaml e sim um Grid, por exemplo, esta propriedade não seria considerada, pois o botão não está dentro de um Canvas.

A apresentação dos controles XAML segue o estilo em camadas, o último controle aparece na frente dos outros caso esteja-os sobrepondo/cobrindo. O XAML abaixo mostra este exemplo, a figura 1 mostra a aplicação em execução.

<UserControl x:Class="BlogXamlBasics.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Canvas x:Name="LayoutRoot" Background="White">
<Rectangle Fill="Green" Width="100" Height="100"
Canvas.Top="50" Canvas.Left="150"/>
<Rectangle Fill="Red" Width="100" Height="100"
Canvas.Top="90" Canvas.Left="200"/>
</Canvas>
</UserControl>



Note que o retângulo vermelho esta cobrindo o verde, podemos mudar esta situação com a attached property Canvas.ZIndex, o controle com essa propriedade que possuir maior valor será visível acima de todos os outros. Já esta propriedade, ela pode ser considerada para outros controles containers como o Grid. Para que o retângulo verde sobreponha o vermelho basta definir o XAML de Page.xaml como mostrado abaixo.

<UserControl x:Class="BlogXamlBasics.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Canvas x:Name="LayoutRoot" Background="White">
<Rectangle Fill="Green" Width="100" Height="100"
Canvas.Top="50" Canvas.Left="150"
Canvas.ZIndex="1"/>
<Rectangle Fill="Red" Width="100" Height="100"
Canvas.Top="90" Canvas.Left="200"/>
</Canvas>
</UserControl>

A figura abaixo mostra a aplicação em execução.


O Silverlight dispõe de inúmeras propriedades, não só attached properties, que constroem e estilizam interfaces de usuário (User Interfaces, UI), abaixo, coloquei algumas das mais utilizadas e para que servem.

Opacity (Opacidade)

Como o próprio nome já diz esta propriedade define a opacidade de um elemento. Seu valor pode ser atribuído de 0 (totalmente transparente) até 1 (totalmente opaco).

Cursor

Esta propriedade define a um determinado elemento qual cursor será visível quando o mouse pairar sobre ele. Supondo que vamos colocar um Cursor no botão do XAML abaixo. A lista de cursores possíveis está abaixo do XAML.

<Button Cursor="Hand" Content="Clique Aqui!" Width="100"
Height="50" Canvas.Left="50" Canvas.Top="50"/>


  • Arrow;
    arrow cursor
  • Default – Nenhum cursor de preferência, utiliza o cursor do controle pai, se definido;
  • Hand – Normalmente utilizado em links;
    hand cursor
  • IBean – Normalmente utilizado para seleção de texto;
    i-beam cursor
  • None – Sem cursor;
    no cursor
  • Wait – Indica estado de espera e/ou processamento;
    wait cursor
HorizontalAlignment e VerticalAlignment

Com essas propriedades podemos alinhar os elementos nos seguintes estilos:

Para a propriedade HorizontalAlignment temos:

  • Center - Centraliza o elemento em relação ao seu container;
  • Left - Posiciona o elemento na parte esquerda do container;
  • Right - Posiciona o elemento na parte direita do container;
  • Stretch - Faz com que o elemento preencha toda a parte horizontal do container;
e para a propriedade VerticalAlignment temos:
  • Bottom - Posiciona o elemento na parte inferior do container;
  • Center - Posiciona o elemento no centro do container, imagine um plano cartesiano e os eixos X e Y onde, para VerticalAlignment, o posicionamento é feito no eixo Y;
  • Stretch - Faz com que o elemento preencha toda a parte vertical do container;
  • Top - Posiciona o elemento na parte superior do container;

OBS.: Quando digo container me refiro ao controle que reside outro(s) controle(s), não sendo obrigatório os controles Canvas, StackPanel ou Grid.

Continua no próximo episódio... ;D


sábado, 1 de novembro de 2008

Silverlight Hello World - não podia faltar

Um blog sem hello world não é um blog. O cara já começa com Avançado, assim não dá. ;D

Primeiramente quero dizer que estava pensando em um estilo diferente de "Hello World", vou mostrar diferentes maneiras de se criar um hello... oO. Cada um utilizando um recurso diferente do silverlight 2. Nos próximos posts vou focar nos conceitos básicos de controles e XAML, depois partir para animação. Então, aqui vai.

Crie uma aplicação silverlight, dei um nome de blogHelloWorld1, você pode dar um nome que deseja. Clique em OK para criar o projeto. Ao fazer isso, uma janela aparece perguntando se deseja criar uma aplicação WEB para residir sua aplicação silverlight, isso é explicado na seção Estrutura das aplicações Silverlight, assim como os arquivos gerados. Clique em OK novamente para criar a aplicação WEB. O Visual studio deve criar os arquivos e a aplicação vai parecer a figura abaixo.


Containers / Recipientes

No silverlight os controles são apresentados dentro de containers, que também são controles. Na versão 2 do silverlight podemos contar com alguns destes recipientes. O Grid, o StackPanel e o Canvas que tinha desde a versão 1 do silverlight. No próximo post estarei mostrando particularidades de cada um destes 3 controles. Mas para você não ficar na dúvida, basicamente o grid utiliza o recurso de linhas e colunas para formatar o layout de sua aplicação, já o StackPanel apresenta seus controles filhos de 2 formas diferentes, horizontalmente e verticalmente. O canvas por sua vez renderiza seus controles como se estivessem em um plano cartesiano, sendo X seu Width (Largura) e Y seu Height (Altura).
Por padrão, o Grid é o controle container que vem na Page.xaml, então, criaremos os controles dentro dele.

Propriedades dos controles

As propriedades dos controles silverlight tem um formato parecido com o ASP.Net porque é baseado em XML, mas para quem está bem acostumado com os controles WEB vai notar muitas diferenças. Por exemplo, todo controle ASP.Net possui um identificador chamado ID que é obrigatório, no silverlight podemos atribuir um identificador á um controle usando X:Name="abc", que não é obrigatório. A classe FrameworkElement prove uma API para todo controle que participa do layout do silverlight. Para exemplificar, abra o código fonte do controle Page.xaml no projeto silverlight, o arquivo Page.xaml.cs. Este código possui um método construtor da classe, nesse caso, o Page, e este possui um método InitializeComponent() que é basicamente encarregado por inicializar os controles que a página possui. Insira o código abaixo, que mostra como deve ficar o Construtor Page.

public Page()
{
InitializeComponent();


Button btn = new
Button();
btn.Name =
"Hello_abc";


Rectangle rect = new
Rectangle();
rect.Name =
"Hello_def";


FrameworkElement fnBtn = btn as
FrameworkElement;

FrameworkElement fnRect = rect as
FrameworkElement;


MessageBox.Show(fnBtn.Name + "\n" + fnRect.Name);
}

Como pode ver a classe FrameworkElement entende que o controle button, que herda de System.Windows.Controls e que Rectangle, que hera de System.Windows.Shapes são controles que fazem parte do layout do silverlight.

Eventos

Os eventos de controles no silverlight 2 é muito parecido com o que estamos acostumados em qualquer linguagem de programação, assim como com o C# no ASP.Net. Controles possuem propriedades e eventos. Eventos ocorrem basicamente numa interação de usuário, um Click de um botão, ou por questões da lógica do programa em si. Futuramente falarei melhor a respeito de eventos.

Vamos implementar um segundo exemplo no click de um botão, para apresentar um Olá Mundo/Hello World em um outro controle. Se desejar criar outro projeto para este segundo exemplo fique à-vontade, continuarei neste mesmo projeto. No controle Page.xaml crie os seguintes controles mostrado no XAML abaixo.

Podemos definir eventos para controles de 2 maneiras, via código, criando um EventHandler para o evento ou no próprio XAML, que o evento é definido igual as propriedades, colocando o nome do evento para o qual deve apontar. A primeira maneira é mostrado no código abaixo.

this.btnHelloWorld.Click += new RoutedEventHandler(btnHelloWorld_Click);

Quando terminar de digitar o ".Click +=", pressione TAB 2x para que crie automaticamente o EventHandler do Click do botão, o código abaixo mostra como deve ficar.

private
void btnHelloWorld_Click(object sender, RoutedEventArgs e)
{

throw
new
NotImplementedException();
}

A segunda maneira é mais simples ainda, no XAML do controle, basta definir o evento Click. (OBS: Apague o exemplo acima, se não o código vai possuir 2 EventHandler para um mesmo evento).


Clique em <New Event Handler> na janelinha que apareceu como mostra a figura acima, para criar no código o evento para o Click deste botão. Para ir até o evento no código clique com o botão direito no Click já preenchido com o nome do evento criado, aparecerá um menu, então clique em Navigate to Event Handler como mostra a figura abaixo.


No código de Page.xaml, o arquivo Page.xaml.cs, no evento Click do botão insira o seguinte código.

private
void btnHelloWorld_Click(object sender, RoutedEventArgs e)
{

if (lblHelloWorld.Text != "Hello World!")
lblHelloWorld.Text =
"Hello World!";

else
lblHelloWorld.Text = "Dinovo não!";
}

Execute o projeto silverlight e veja como funciona! As 3 figuras abaixo mostra a aplicação silverlight em execução. Espero que tenham gostado e até a próxima.


Obrigado,
Danillo.

terça-feira, 28 de outubro de 2008

Estrutura das aplicações Silverlight

Aqui estarei explicando o que faltou da criação de um projeto silverlight no visual studio e um poco da estrutura dessas aplicações.

1º - Criação do projeto

Crie um projeto silverlight (Mostrado na seção Introdução, no final). Ao dar um nome desejado e criar o projeto, a seguinte tela é exibida.

image

Não se assuste! Quando criamos um projeto vazio, o visual studio pergunta que tipo de projeto WEB desejamos adicionar na mesma solution junto com o projeto silverlight, basta selecionar, ASP.NET WebSite ou ASP.NET Web Application Project. Adotarei o ASP.Net Application project como mostra na figura, mas nada impede de escolher o tipo que desejar.
Após escolher o tipo de aplicação Web a ser adicionado junto com o projeto silverlight, clique em ok e aguarde até que o Visual Studio (VS) termine de carregar o novo projeto.

Pronto! A nossa aplicação silverlight está criada, junto com a web app que vai renderizar nosso projeto silverlight. A figura abaixo mostra a estrutura de arquivos da aplicação silverlight.

image

O visual studio por padrão cria 1 diretório chamado ClientBin, 2 arquivos de página (um .aspx e o outro .html) e um arquivo javascript chamado Silverlight.js na aplicação WEB, já na aplicação silverlight estarei mostrando abaixo, detalhadamente, seguido dos arquivos criados no projeto web, acima listados.

  • AppManifest.xml - É gerado no momento em que você compila o projeto/solução. Se o projeto silverlight possuir qualquer depêndencia em tempo de execução, como por exemplo controles customizados, as referências para estas depêndencias são gravadas neste arquivo.
  • App.xaml e App.xaml.cs - É criado no momento que se cria o projeto silverlight. Geralmente usado para armazenar informações globais de sua aplicação silverlight. Contém as declarações para o funcionamento e comportamento de sua aplicação. O seu arquivo de código (code behind), o App.xaml.cs, contém as declarações para o Application_Startup e Application_Exit, que tratam o momento em que a aplicação silverlight é iniciada e finalizada, respectivamente.
  • Page.xaml e Page.xaml.cs - Prove a página padrão/inicial para sua aplicação. Isso é definido no code behind do App.xaml, no evento Application_Startup:
    this.RootVisual = new Page();
    Este arquivo possui seu code behind, assim como o .aspx nas aplicações ASP.Net também possuem seu code behind, que é uma classe chamada Page, por isso o código acima define uma nova instância dessa classe como sendo o RootVisual, ou melhor dizendo, a página inicial/raiz. O arquvio Page.xaml possui o seguinte XAML:

    image
    obs: por questões de formatação tive que inserir uma imagem para o xaml acima .

    O XAML (Extensible Application Markup Language) é uma linguagem baseada no XML e é utilizada para definir aspectos visuais em sua aplicação. User Interfaces, animações, mídia, controles, desenhos geométricos, etc.

    Note que o recipiente (container) do arquivo do XAML de Page é um UserControl, note que nele é definido o x:Class que por sua vez aponta para a namespace do projeto seguido do nome da classe, nesse caso, Page. Os atributos xmlns e xmlns:x são utilizados para validação do XAML. Enfim é definida a largura e altura, Width e Height respectivamente, do controle. Posteriormente vem o Grid, que também é um controle do tipo container, que será tratado junto de outros controles deste tipo em outro post.

Já a aplicação web possui alguns arquivos também criados pelo visual studio que são explicados abaixo:

    • TestPage.aspx - Na verdade o nome desse arquivo possui o prefixo com o nome da aplicação. Ele possui o controle silverlight apontado para a aplicção silverlight nesta solução e contém tudo que precisa para rodar a aplicação silverlight do ASP.Net. Lembre-se que o silverlight não tem nenhuma dependência na parte do servidor. O ASP.Net oferece alguns controles que lhe permite "hostear" (isso não existe no dicionário) o silverlight no browser.

      Note que esta página possui dois controles asp.net, o primeiro um ScripManager que trata o fluxo do javascript na página e o segundo, o silverlight control, que gera as scripts para criação do controle do silverlight em execução. No silverlight 2 temos essa facilidade se comparado com a versão 1, onde tinhamos que "hostear" o controle silverlight na mão nas páginas, utilizando java script e muito remédio pra dor de cabeça.
    • Arquivo XAP - Um simples tipo de zip/rar que contém os recursos utilizados para contrução da aplicação silverlight, como o XAML. O plug-in faz o download deste arquivo para a maquina do cliente e renderiza seu contúdo no browser. Este arquivo fica dentro da pasta ClientBin, dentro da aplicação WEB. Caso não tenha nenhum arquivo, basta compilar a solução (build) e o arquivo é gerado. Caso o arquivo ja exista, este é substituido.

    Bom, a partir deste conteúdo podemos começar com o HelloWorld no próximo post, que vou aprofundar mais nos conceitos do XAML.

    Obrigado,
    Danillo.

segunda-feira, 27 de outubro de 2008

Avançado - Recuperando Session, appSetting, etc no Silverlight

Aguns dias atrás estava procurando uma forma de recuperar dados que no silverlight não é possível, tais como, session, appSetting (WebConfig), cache, etc. pois trabalha "fora do contexto" de uma aplicação ASP.NET.

Hoje existem várias maneiras de fazer com que sua aplicação silverlight converse com sua aplicação Web, como initParams, entre outros. Mas essas formas não resolvem nosso problema de acessar o conteúdo descrito acima. Uma maneria muito simples que encontrei depois de muita pesquisa foi utilizar recursos do web service.

Primeiro de tudo, quando estamos trabalhando com silverlight, a maneira mais utilizada de trazer dados de um banco para a aplicação é utilizando Web Services (em muitos casos WCF, que é a tecnologia que adotaremos), mas Web Services não servem só para isso, podemos recuperar dados do Web Config, Sessions, etc. Aqui vai um exemplo.

No arquivo de código do web service (WCF) criei a seguinte operação:

[OperationContract]
public string GetAppSetting(string nome)
{
    string result = ConfigurationManager.AppSettings[nome];
    if (result != null)
       return result;
    return string.Empty;
}


Nesta operção wcf estou retornando o valor do appSetting que se encontra no webConfig/AppSetting, claro, se existir, senão retorna uma string vazia.

Na aplicação silverlight basta eu chamar esta operação no web referenceque aponta para o Web Service que à possui. Lembra-se que toda requisição no Silverlight é assíncrona, então esta também será. Sendo assim preciso definir um método/delegate que representa o momento em que a requisição é completada, que possui um object "sender" e um args "e", no nosso caso o GetAppSettingCompletedEventArgs que tem a propriedade result, que nada mais é o retorno da operação wcf definida no web service, neste exemplo, uma string. Abaixo, no load de uma página silverlight, chamo a operação.

void Page_Loaded(object sender, RoutedEventArgs e)
{
   
ServiceClient clientWS = new ServiceClient();
   
//Defino o método completed desta requisição, ou seja,
  
 //quando a operação recuperar o valor no
    //Web Service(WS)
    //este evento é disparado
    clientWS.GetAppSettingCompleted += new EventHandler   <GetAppSettingCompletedEventArgs>(clientWS_GetAppSettingCompleted);   
//Executa a operação
    clientWS.GetAppSettingAsync("AlgumaAppSetting");
}

(OBS: Para definir um EventHandler mais facilmente basta utilizar o "+=" depois 2x TAB para que o visual studio crie pra você, no exemplo acima, após digitar clientWS.GetAppSettingCompleted,
digite o + (mais) seguido do = (igual) e pressione 2x TAB)


O Evento de load da página acima envia a requisição pro WS e define EventHandler apontando para um método que representa o evento de quando a requisição wcf é completada, retornando o valor. Abaixo mostra este EventHandler.

void clientWS_GetAppSettingCompleted(object sender,
   
GetAppSettingCompletedEventArgs e)
{
    //Trata se possuir erro
    if (e.Error == null)
    {
       MessageBox.Show(e.Result);
    }
    else
       MessageBox.Show(e.Error.Message);       
}

Agora basta executar o projeto e ver como funciona, o mesmo pode ser aplicado para retornar Sessions, neste caso a operação wcf retornaria um object, entre outras propriedades do Configuration e HttpContext (No caso de session, HttpContext.Current).

domingo, 26 de outubro de 2008

Introdução - Instalação

Bom, antes de começar com os posts, gostaria de estar explicando como proceder com as instalações e versões que vou utilizar para a construção de aplicações em silverlight 2.

Utilizarei o Microsoft Visual Studio 2008 SP 1/.Net 3.5 e a linguagem C# para criação dos projetos em silverlight 2. O Silverlight 2 não vem instalado por padrão no visual studio, é preciso baixar o plug-in e as tools (ferramentas) que permite o visual studio criar projetos para a versão final do silverlight 2. (Nada inpede de utilizar o Visual Web Developer Express, que é a versão gratuita do visual studio p/ desenvolvimento ASP.NET)

No site da silverlight (http://silverlight.net/), na seção get started, possui vários tutoriais assim como os arquivos necessários para instalação, mas como ninguem tem tempo pra ficar procurando, aqui vai os arquivos na ordem certa de instalação:

1º - Silverlight tools for visual studio 2008: Habilita o visual studio p/ criação de projetos silverlight 2.
2º - Expression blend 2 e o seu SP1: Utilizado para fazer layouts, animação, etc. trabalhando com a criação de XAML para suas aplicações. Você simplesmente desenha o que desenha e ele transforma isso em XAML.

É isso, muita coisa não? ;D
Agora para criar um novo projeto silverlight, basta entrar no visual studio 2008, criar um novo projeto, como mostra a figura abaixo

Quando o popup de projetos abrir basta selecionar o menu silverlight, selecionar o tipo de projeto Silverlight Application dar um nome ao projeto, e clicar em OK, como mostra a figura abaixo.

sábado, 25 de outubro de 2008

O que é o silverlight?

Não é possível escapar. Preciso deixar claro o que é silverlight. Então aqui vai:

silverlight é a nova tecnologia da Microsoft para criação de aplicações ricas na web, melhor dizendo, muito próximo do que pode e não pode ser feito em desktop, que todo programador conhece, é tudo mais fácil se for comparar. O que tenho lido em alguns livros dedicados a ensinar silverlight é a tal “User experience” (experiência de usuário).

User experience

A experiência de usuário é basicamente o objetivo de muitas tecnologias que estão no mercado. Mas afinal, o que o usuário quer?

Simples, os usuários querem aplicações mais rápidas, bonitas, fáceis de usar. Mostrar ao usuário o que ele procura. A internet cresceu muito rápida, a expectativa dos usuários também. Por que não apresentar vídeos, imagens, mídia? Essa é a web em 2008, e tende a crescer nos próximos anos. Enfim, o objetivo destas tecnologias, como o silverlight, é facilitar a vida dos designers e programadores facilitarem a vida do usuário. 

Silverlight é um plug-in para o browser que renderiza uma linguagem baseada em texto chamada XAML, isso facilita sites de pesquisa, como o Google, procurar sites feitos em silverlight. O silverlight também é cross-browser/cross-plataform. Isso significa que o silverlight funciona no IE 5.5 +, Firefox 1+, Mozilla 1+, Safari, Windows Vista, Windows XP SP2+, Windows Server 2003+, Mac OS X 10.4.8+. Suporta apresentação de formatos mídia em WMV, WMA e MP3 sem precisar que o cliente instale codecs para suportar esses formatos, por exemplo, se um usuário do Mac OS entrar em um site silverlight que tenha um vídeo em WMV ele não precisa ter o Media Player instalado. É a nova geração de aplicações ricas e interativas para a Web e também para dispositivos móveis (móbile). Ele pode ser programado usando as linguagens  .Net como C# ou VB e também outras linguagens, as “dynamic languages” com  Python e Ruby. Você pode utilizar no silverlight muito do que é possível com as linguagens .net.

O silverlight se integra com aplicações web já existentes, incluindo ASP.NET ou ASP.NET AJAX. Silverlight suporta AJAX sendo que todas suas requisições são assíncronas.  No modelo padrão das aplicações web está o CSS/DHTML, no modelo desktop XAML (WPF) e o .Net framework, já no modelo de aplicações web com o plug-in do silverlight todas essas tecnologias são suportadas, permitindo o desenvolvimento de aplicações robustas para web. A figura abaixo mostra o modelo de apresentação e programação para web.


Algumas Características

 - Formatos de mídia:

            VWM, WMA e MP3. Lembra-se que o cliente não precisa ter o software para ver/escutar estes tipos de mídia;

 - Plug-in fácil de instalar:

            O plug-in do silverlight possui mais ou menos 4mb e em alguns segundos é instalado na máquina cliente, o windows update já adicionou o plug-in do silverlight 2, então todos os usuários que fazem atualizações já possuem o plug-in instalado;

- Multi-Linguagem:

            Suporte várias linguagens, sendo elas .net (C# e VB) e linguagens dinâmicas (Ruby e Python);

- Integração com aplicações ASP.NET;

- Isolated Storage (Armazenamento isolado);

            Permite armazenamento de dados local para o cliente que está acessando um site em silverlight, caso esta funcionalidade tenha sido implementado neste site. Por exemplo, supondo que você tenha um site de pesquisa de vídeos e precisa armazenar as pesquisas realizadas pelo usuário, para que posteriormente ele possa ter acesso à o que ele pesquisou. Você não precisa modelar um banco etc. e tal para tal feito. Este conteúdo é armazenado no computador do cliente que acessa a aplicação silverlight, e possui um limite de 1mb, somente para armazenar pequenas coisas.

- LINQ;

- etc.

Abaixo uma lista de sites interessantes que utilizam silverlight:

http://www.mojaveexperiment.com/ (Muito bom, se você se sente desmotivado, vale a pena ver);

http://www.microsoft.com/servers/sql/2008/sqlserverenergy/en/us/default.aspx (Site do SQL Server 2008, muito bom também);

http://www.kbb.com/KBB/PerfectCarFinder/PhotoEdition.aspx (Loja de carros. Procure qualquer um, ótima qualidade);

Entre outros, de uma olhada em:

http://silverlight.net/showcase