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.

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.

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:
  
  
  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.

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).

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.

O que é o silverlight?

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

O 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

Bem vindo

Bem vindo a todos os interessados em conhecer a nova tecnologia da microsoft, o silverlight, que já esta em sua versão 2 final. O objetivo deste blog é mais técnico, então não entrarei muito em detalhes sobre os competidores do silverlight e qual é a melhor tecnologia do mercado, etc. Estarei dedicando este blog para os que desejam começar a criar aplicações em silverlight 2 com exemplos, tutoriais e o "Mão na massa" onde vou postar um passo a passo criando um projeto silverlight  para determinado fim e aprendizado.

Para quem acompanhar os posts deste blog, utilizaremos o Visual Studio 2008 com a linguagem C#. Vamos focar na utilização das novas tecnologias que o .Net 3.5 possui, como o LINQ, WCF, etc., e o próprio silverlight.

Só para lembrar, vou dedicar alguns e outros posts para layout em silverlight 2, animações, etc. Então, tanto programadores quanto designers poderão acompanhar este blog.

Obrigado a todos e bom estudo!

;D