Publicado por: euchuma | 16 outubro 2007

Tutorial 4 – Primeiro exemplo de projeto Silverlight no Visual Studio 2008

Tutorial 4 – Primeiro exemplo de projeto Silverlight no Visual Studio 2008

Download completo do exemplo

1- Para construirmos nosso exemplo vamos precisar ter instalado em nosso computador:- Microsoft Visual Studio 2008 beta 2
– Microsoft Silverlight Tools Alpha for Visual Studio 2008 beta 2
– E claro o plug-in Silvelight 1.1 Alpha

2- Abra o Visual Studio 2008 beta 2 vá no menu
File -> New -> Project -> Visual Basic -> Silverlight -> SilverLight Project e dê o nome testsilverlight para o projeto.

tutorial4_1.jpg
Figura: Criando um projeto Silverlight no Visual Studio 2008

3- Quando um novo projeto Silverlight é criado no Visual Studio 2008 ele cria automaticamente os seguintes arquivos:

3.a- Arquivo HTML: O Visual Studio dá o nome TestPage.html, esse arquivo serve como ponto de partida para o browser carregar o projeto Silvelight e também pode conter outros conteúdo junto com o Silverlight. Veja que ele faz referencia aos arquivos TestPage.html.js e Silverlight.js.

3.b- Arquivo TestPage.html.js: Esse arquivo javascript contém o método createSilverlight que é um modelo para chamar os métodos createObject ou createObjectEx definidos no Silverlight.js

3.c- Arquivo Silverlight.js: Esse arquivo javascript define os métodos createObject e createObjectEx que servem para inicializar o controle Silverlight além de fornecer recursos de instalação do Silvelight para o usuário caso ele não possua o Silverlight instalado.

3.d- Arquivo Page.xaml: Esse arquivo XAML é definido como o parametro “source” nos métodos createSilverlight ou createSilverlightEx e contém o contéudo da interface do projeto Silverlight.

3.e- Arquivo Page.xaml.vb: Esse arquivo VB ou C# serve para gerenciar em tempo de execução os eventos do projeto Silverlight. O código utiliza a mesma classe que foi definida no atributo x:Class do Page.xaml.

tutorial4_2.jpg
Figura: Arquivos do projeto Silverlight

4- Abra o arquivo Page.xaml e insira o seguinte código antes de </Canvas>:

<Canvas x:Name=”Button1″ Canvas.Top=”50″ Width=”100″ Height=”30″ Background=”Gray”>
    <TextBlock>
        <Run Text=”Enter mouse”></Run>
    </TextBlock>
</Canvas>

Esse código XAML nada mais é do que um Texto criado com o TextBlock e agrupado sozinho através do Canvas com o nome Button1.

tutorial4_3.jpg
Figura: Código XAML

5- Abra o Page.xaml.vb e insira o código após o End Sub:

    Private Sub Button1_MouseEnter(ByVal sender As Object, _
    ByVal e As System.Windows.Input.MouseEventArgs) Handles Button1.MouseEnter
        Dim buttonBrush As New SolidColorBrush
        buttonBrush.Color = Colors.Red
        Me.Button1.Background = buttonBrush
        Dim tb As TextBlock = Me.Button1.Children(0)
        tb.Text = “Mouse…”
    End Sub

    Private Sub Button1_MouseLeave(ByVal sender As Object, _
    ByVal e As System.EventArgs) Handles Button1.MouseLeave
        Dim buttonBrush As New SolidColorBrush
        buttonBrush.Color = Colors.Gray
        Me.Button1.Background = buttonBrush
        Dim tb As TextBlock = Me.Button1.Children(0)
        tb.Text = “Enter mouse”
    End Sub
   
Esse código representa as ações para os eventos MouseEnter e MouseLeave do Button1 declarado no XAML. Quando o cursor do mouse entra na área do texto o texto é alterado para “Mouse…” e a cor do fundo é alterada. E quando o cursor do mouse sai da área do texto o texto volta para “Enter Mouse” e a cor de fundo volta ao que era.

tutorial4_4.jpg
Figura: Código VB

6- Teste o projeto com menu Debug -> Start Without Debugging (Ctrl + F5), passe o mouse sobre o texto e veja o resultado 

tutorial4_5.jpg
Figura: Testando o projeto


Responses

  1. Ola Euclides tudo bom?
    li seu blog e achei muito interessante, ainda mais que fala sobre o que ando pesquisando que é o silverlight , blend e vs 2008.
    mas como sou curioso estou com uma dúvida enorme sobre como criar algo parecido com a tag html “<input type=text”, sei que tem como criar pois em minha pesquisa vi um site que tem alguns demos de silverlight onde desenvolveram um mini “visualstudio”.
    caso possa criar um tutorial sobre o assunto eu agradeço.
    parabens e boa sorte

  2. Carlos, em breve estarei colocando mais exemplos no blog e a sua sugestão também será incluída.

    Abraço

  3. Vi seu exemplo, muito pratico, me ajudou muito, ja que em 2008 vou passar a usar somente tecnologia Microsoft, vou substituir o Flash aonde eu sei muita coisa por Silverlight, e tambem vou passar de vb.net para C#, aliado a isso vou fazer talvez um curso de especialização em .Net,
    se você tiver alguma Empresa de treinamentos .Net eu ficarei grato…

  4. Olá Euclides, Boa tarde!
    Meu nome é Isaura, e estou começando a mexer com desenvolvimento.
    No começo deste tutorial você diz que é preciso baixar o Visual Studio 2008 beta 2.
    Mas agora não é mais versão beta já é Trial, gostaria de saber qual a versão do visual studio baixei o Visual Studio Web Developer 2008 Express. mas não funcionou nem o silverlight instalou…
    Seria o caso de baixar o Visual Studio Pro 2008?

  5. Sim, você deve utilizar o Visual Studio Professional 2008 Trial ao invés do Beta. O Visual Studio Web Developer não é recomendável utilizar para criar projetos Silverlight, pois mesmo sendo possível utilizá-lo, daria muito mais trabalho.
    Saudações

  6. Olá, como havia dito não conheço nada de desenvolvimento. A algumas semanas descobri ferramentas como visual studio, expression…
    O meu problema é: por onde posso começar? o que estudo primeiro para conhecer desenvoolvimento? tenho interesse em desenvolvimento WEB já aprendi o arroz e feijão do HTML.

  7. Olá,
    Existem 2 tipos de profissionais na área de WEB:
    – Os designers que criam os layouts
    – Os programadores que criam os sistemas
    Se você pretende ser um designer eu recomendo você começar a usar o Microsoft Expression Web.
    Se você pretende ser um programador, então recomendo você a usar o Visual Studio e fazer um curso de ASP.Net
    Saudações

  8. Olá Cesar,

    Infelizmente não conheço nenhuma empresa boa em treinamentos. Eu sou autodidata, e toda vez que tentei fazer um treinamento nunca gostei do resultado.
    Boa sorte nas novas tecnologias!
    Saudações

  9. […] SilverLight podem ser desenvolvidas dentro do próprio Visual Studio 2008, como podem ver neste tutorial o resultado. Inclusive, tem bastante coisa aqui no blog do Euclides Chuma. Será que ganha o […]


Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Categorias

%d blogueiros gostam disto: