setembro 4th, 2010O que é o Silverlight

Silverlight é um plugin multibrowser e multiplataforma para o desenvolvimento de aplicações RIA e para facilitar a integração com media. Ele reuniu as capacidades de aplicações desktop, aplicações web, funcionalidades do servidor e do cliente, desenvolvimento com linguagens scripts ou orientada a objetos.

O que devemos ter em mente é que o Silverlight é mais do que simplesmente um container para executar aplicações ricas e interativas na web. O silverlight é uma plataforma para desenvolvimento de aplicações, cross-plataforma e cross-browser.

No silverlight o conteúdo é declarado utilizando o XAML. O XAML é um arquivo XML onde é possível declarar elementos visuais da interface, incluindo animações.

O Silverlight contém um subset do .Net Framework que inclui bibliotecas e componentes para integração de dados, networking, controles WPF e CLR (Common Language Runtime). Isso permite que desenvolvamos as nossas aplicações utilizando as linguagens mais comuns em .Net, VB.Net e C#, compiladas.

Não é necessário ter o .Net Framework instalado no cliente ou no servidor. Apenas o plug-in do silverlight é necessário.

Para mais informações sobre Rich Internet Application, veja: http://en.wikipedia.org/wiki/Rich_Internet_application

Exemplos de aplicações em silverlight:

HARD ROCK – MEMORABILIA

image

 Calculadora interessante

image

 Microsoft Health

image

 

Experience IIS Smooth Streaming

image

 Out of Browser

image

Mais exemplos em http://www.silverlight.net/community/samples/silverlight-samples/.

Olá, pessoal esse é uns dos primeiros POST’s que estarei fazendo aqui na FlexDev sobre Silverlight e tecnologias .NET, meu nome é Rodrigo da Silva Brito e trabalho na flexdev desde abril de 2009, comecei a trabalhar com desenvolvimento de sistemas em 2004 na TreinaSoftware, trabalhava com Visual Basic 6, MySQL e o grande e famoso Microsoft Access. Em 2006 comecei a estudar .NET e C#, me apaixonei por C# e estou até hoje nessa caminhada de estudos. No momento estou terminando o bacharelado em ASTI (Análise de Sistemas e Tecnologias da Informação) pelo Centro Paula Souza – FATEC Ourinhos, e escrevendo a minha monografria sobre frameworks de persistência. Possuo um blog do qual estou ressuscitando, você pode acessá-lo através do seguinte endereço http://rodrigobrito.wordpress.com. Agora vamos ao que interessa!

Para começarmos você vai precisar ter instalado em sua máquina o Microsoft Visual Studio 2010. Neste artigo estarei utilizando a versão Premium, precisaremos também do Microsoft Silverlight 4 Tools for Visual Studio 2010 que é um pré requisito para desenvolver aplicações em Silverlight 4 e aplicações Ria Services através do Visual Studio 2010. Precisaremos também do Microsoft Expression Blend® 4 Release Candidate (RC).

1. Inicie o Microsoft Visual Studio 2010

2. No menu File passe o mouse sobre New, e então selecione New Project

clip_image002

3. A caixa de diálogo New Project será exibida

clip_image004

4. Em Installed Templates no lado esquerdo da janela selecione Visual C# e então selecione Silverlight. Selecione Silverlight Application e verifique se na caixa de seleção superior está selecionado o .NET Framework 4. Em Name colocaremos o nome de nossa aplicação no caso FirstSilverlightApplication e então click em OK.

5. Na caixa de diálogo New Silverlight Application desselecione Host the Silverlight application in a new Web site e em Silverlight Version verifique se Silverlight 4 está selecionado e então click em OK.

clip_image006

6. Após clicado em OK você terá uma tela como esta.

 clip_image008

Criando Controles

Os controles podem ser adicionados a aplicação usando o ToolBox do Visual Studio ou editando o texto XAML diretamente no editor XAML.

1. Selecione o controle TextBlock e o arraste a MainPage.xaml.

A. Altere a propriedade Text do controle para Contatos.

B. Altere o tamanho da fonte do controle para 14, através da propriedade FontSize.

C. Deixe a fonte em negrito através da propriedade FontWeight selecionando Bold.

2. Selecione o controle Border e o arraste a MainPage.xaml, altere a propriedade CornerRadius para 5.

clip_image010

3. Arraste o controle Grid para dentro do controle Border, então resete as propriedades Height e Width do Grid.

clip_image012

4. Arraste controles TextBlock e TextBox para dentro do controle Grid de forma que a página fique conforme a figura abaixo.

clip_image014

Como você já deve ter percebido, todas as mudanças feitas através da ToolBox Properties são refletidas instantaneamente no código XAML. Veja abaixo o código XAML referente ao controles TextBlock e TextBox que adicionamos dentro do grid.

 <Grid>
         <TextBlock Height="20" HorizontalAlignment="Left" Margin="6,9,0,0" VerticalAlignment="Top" Width="74" Text="Nome:" TextAlignment="Right" />
         <TextBox Height="23" HorizontalAlignment="Left" Margin="86,6,0,0" Name="txtNome" VerticalAlignment="Top" Width="282" />
         <TextBlock Text="Empresa:" Height="20" HorizontalAlignment="Left" Margin="6,37,0,0" VerticalAlignment="Top" Width="74" TextAlignment="Right" />
         <TextBlock Text="Cargo:" Height="20" HorizontalAlignment="Left" Margin="6,66,0,0" VerticalAlignment="Top" Width="74" TextAlignment="Right" />
         <TextBlock Text="E-mail:" Height="20" HorizontalAlignment="Left" Margin="6,94,0,0" VerticalAlignment="Top" Width="74" TextAlignment="Right" />
         <TextBlock Text="Telefone:" HorizontalAlignment="Left" Margin="6,123,0,107" Width="74" TextAlignment="Right" />
         <TextBlock Text="Observações:" Height="20" HorizontalAlignment="Left" Margin="0,149,0,0" VerticalAlignment="Top" Width="80" TextAlignment="Right" />
         <TextBox Height="23" HorizontalAlignment="Left" Margin="86,35,0,0" Name="txtEmpresa" VerticalAlignment="Top" Width="282" />
         <TextBox Height="23" HorizontalAlignment="Left" Margin="86,64,0,0" Name="txtCargo" VerticalAlignment="Top" Width="282" />
         <TextBox Height="23" HorizontalAlignment="Left" Margin="86,92,0,0" Name="txtEmail" VerticalAlignment="Top" Width="282" />
         <TextBox Height="23" HorizontalAlignment="Left" Margin="86,121,0,0" Name="txtDDI" VerticalAlignment="Top" Width="41" />
         <TextBox Height="23" HorizontalAlignment="Left" Margin="133,121,0,0" Name="txtDDD" VerticalAlignment="Top" Width="41" />
         <TextBox Height="23" HorizontalAlignment="Left" Margin="180,121,0,0" Name="txtTelefone" VerticalAlignment="Top" Width="188" />
         <TextBox Height="95" HorizontalAlignment="Left" Margin="86,149,0,0" Name="txtObservacoes" VerticalAlignment="Top" Width="282" />
 </Grid>

5. Aumente o tamanho da página “Height” e arraste dois controles Button, botões Salvar e Cancelar. Altere as suas propriedades Content e Name respectivamente.

clip_image018

Imagem da página criada:

clip_image020

Código XAML completo da página:

<UserControl x:Class="FirstSilverlightApplication.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:DesignHeight="328" d:DesignWidth="400" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

    <Grid x:Name="LayoutRoot" Background="White">
        <TextBlock Height="28" HorizontalAlignment="Left" Margin="12,12,0,0" VerticalAlignment="Top" Width="120" Text="Contatos" FontSize="14" FontWeight="Bold" />
        <Border BorderBrush="Silver" BorderThickness="1" Height="252" HorizontalAlignment="Left" Margin="12,36,0,0" Name="border1" VerticalAlignment="Top" Width="376" CornerRadius="5">
            <Grid>
                <TextBlock Height="20" HorizontalAlignment="Left" Margin="6,9,0,0" VerticalAlignment="Top" Width="74" Text="Nome:" TextAlignment="Right" />
                <TextBox Height="23" HorizontalAlignment="Left" Margin="86,6,0,0" Name="txtNome" VerticalAlignment="Top" Width="282" />
                <TextBlock Text="Empresa:" Height="20" HorizontalAlignment="Left" Margin="6,37,0,0" VerticalAlignment="Top" Width="74" TextAlignment="Right" />
                <TextBlock Text="Cargo:" Height="20" HorizontalAlignment="Left" Margin="6,66,0,0" VerticalAlignment="Top" Width="74" TextAlignment="Right" />
                <TextBlock Text="E-mail:" Height="20" HorizontalAlignment="Left" Margin="6,94,0,0" VerticalAlignment="Top" Width="74" TextAlignment="Right" />
                <TextBlock Text="Telefone:" HorizontalAlignment="Left" Margin="6,123,0,107" Width="74" TextAlignment="Right" />
                <TextBlock Text="Observações:" Height="20" HorizontalAlignment="Left" Margin="0,149,0,0" VerticalAlignment="Top" Width="80" TextAlignment="Right" />
                <TextBox Height="23" HorizontalAlignment="Left" Margin="86,35,0,0" Name="txtEmpresa" VerticalAlignment="Top" Width="282" />
                <TextBox Height="23" HorizontalAlignment="Left" Margin="86,64,0,0" Name="txtCargo" VerticalAlignment="Top" Width="282" />
                <TextBox Height="23" HorizontalAlignment="Left" Margin="86,92,0,0" Name="txtEmail" VerticalAlignment="Top" Width="282" />
                <TextBox Height="23" HorizontalAlignment="Left" Margin="86,121,0,0" Name="txtDDI" VerticalAlignment="Top" Width="41" />
                <TextBox Height="23" HorizontalAlignment="Left" Margin="133,121,0,0" Name="txtDDD" VerticalAlignment="Top" Width="41" />
                <TextBox Height="23" HorizontalAlignment="Left" Margin="180,121,0,0" Name="txtTelefone" VerticalAlignment="Top" Width="188" />
                <TextBox Height="95" HorizontalAlignment="Left" Margin="86,149,0,0" Name="txtObservacoes" VerticalAlignment="Top" Width="282" />
            </Grid>
        </Border>
        <Button Content="Cancelar" Height="23" HorizontalAlignment="Left" Margin="93,294,0,0" Name="btnCancelar" VerticalAlignment="Top" Width="75" />
        <Button Content="Salvar" Height="23" HorizontalAlignment="Left" Margin="12,294,0,0" Name="btnSalvar" VerticalAlignment="Top" Width="75" />
    </Grid>
</UserControl>

Nos próximos artigos de Silverlight estaremos complementando essa pequena aplicação, iremos criar o Grid para a listagem de contatos, botões de inclusão, edição e deleção. Utilizaremos WCF para acesso aos dados.

O WCF para quem não conhece é um poderoso framework para a criação de aplicações orientadas a serviço.

Até o próximo artigo!


© 2008 Softwares para Automação Comercial e Desenvolvimento de Software Personalizado | iKon Wordpress Theme by TextNData | Powered by Wordpress | rakCha web directory Clicky Web Analytics