|
Conteúdo
Requisitos Necessários
Iniciando a aplicação
Conhecendo a estrutura do projeto
Conhecendo o Xaml
Requisitos Necessários
Para desenvolver aplicações Silverlight como usado neste artigo, você irá precisar instalar as seguintes ferramentas:
Microsoft Visual Studio 2008 + SP1;
Microsoft Silverlight 3 tools ;
Microsoft Expression Blend 3 + SkecthFlow;
Silverlight toolKit – opcional.
Estas ferramentas estão disponíveis no site: Silverlight
Iniciando a aplicação
Com todos os requisitos instalados, abra o Visual Studio 2008, File->New->Project, será apresentada a caixa de diálogo, e então, em tipos de projeto escolha Silverlight, note também na parte superior direita se o .Net Framework 3.5 está selecionado, escolha Silverlight Application, e forneça o nome de PrimeiraAplicacao, conforme você pode visualizar na Figura 01.
Figura 01- Projeto em Silverlight
Ao pressionar o botão “OK” uma segunda tela é apresentada, então selecione as opções conforme mostrada na Figura 02.
Figura 02 - Opções de Projeto
Conhecendo a estrutura do projeto
Na Solution Explorer, note que a Solution possui o projeto Silverlight e a aplicação Web. A aplicação Web irá armazenar o projeto Silverlight no contexto de uma página em ASPX ou HTML. A Figura 03 apresenta a solution explorer.
O Visual Studio gerou automaticamente duas páginas de teste. Então, clique na página PrimeiraAplicaçãoTestPage.aspx, e análise o código.
Figura 03 – Estrutura do projeto
O código apresentado na Listagem 01 está contido nas páginas ASPX e HTML.
|
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/PrimeiraAplicacao.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="3.0.40624.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object>
|
Listagem 01 – Código contido nas páginas ASPX e HTML
A tag object permite fazer as configurações necessárias para que o projeto Silverlight seja executado na página. O param utilizando a propriedade name permite enviar informações para o projeto silverlight. Observa-se então, o name com o valor “source”, que esta tag contém o atributo value com endereço de um arquivo Xap. Este arquivo Xap é apenas um arquivo zip com um nome diferente, ele contém o AppManifest.xaml ,Dlls, Imagens, entre outras coisas para que o projeto silverlight seja executado, ou seja todo o seu projeto Silverlight fica dentro deste arquivo.
Conhecendo o Xaml
O XAML é uma linguagem declarativa baseada no XML, a qual defini os aspectos visuais das aplicações, de forma simples e rápida, ou seja nela você pode incluir animações, vídeos, áudios, gráficos, controles, e muito mais.
No projeto Silverlight, selecione a página MainPage.xaml. Na primeira linha do código XAML, a tag UserControl contém todas as diretivas necessárias para a execução da sua aplicação. Já a tag Grid (Controle de layout) pode ser trocada por outro tipo de controle, como por exemplo, um Canvas, StackPanel, entre outros.
Agora, crie um botão e um TextBlock, como traz a Listagem 02.
|
<UserControl x:Class="PrimeiraAplicacao.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot" Background="Beige" Width="640" Height="480">
<Button x:Name="btnSilverlight" Height="30" Width="100" Content="Clique aqui!"></Button>
<TextBlock x:Name="txtSilverlight" Text="Olá" Height="30" Width="200" Margin="100,100,10,10"></TextBlock>
</Grid>
</UserControl>
|
Listagem 02 – Código Xaml
Com o botão criado, é necessário adicionar o evento click, para isso adicione o atributo Click, conforme a Listagem 03.
|
<UserControl x:Class="PrimeiraAplicacao.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot" Background="Beige" Width="640" Height="480">
<Button x:Name="btnSilverlight" Height="30" Width="100" Content="Clique aqui!" Click="btnSilverlight_Click"></Button>
<TextBlock x:Name="txtSilverlight" Text="Olá" Height="30" Width="200" Margin="100,100,10,10"></TextBlock>
</Grid>
</UserControl>
|
Listagem 03 – Adicionando evento click
Com o mouse sobre o Click, clique com o botão direito do Mouse, vá a Navigate to Event Handler. E adicione o código conforme descrito na Listagem 04.
|
namespace PrimeiraAplicacao
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
private void btnSilverlight_Click(object sender, RoutedEventArgs e)
{
txtSilverlight.Text = "Minha primeira aplicação";
}
}
}
|
Listagem 04 – Adicionando código para evento clique
Pressione F5 para executar a aplicação.
A Figura 04 mostra o resultado.
Figura 4.0 - Resultado
obrigada e até o próximo artigo.
|
