silverlight 4 into

SILVERLIGHT 4.0 INSIGHTS

A tech overview & quick start

Alexandre Marreiros, 2011

Agenda Problema Intro Tools Demo XAML Layout Canvas StackPanel Grid


UserControls Blend Design & Logic Data Binding Behaviours Referencias Contactos

Problema Complexidade de

criação de aplicações RIA.

As frameworks tradicionais para a criação de aplicações RIA, estão tipicamente associadas a uma plataforma unica.


IntroAlexandre Marreiros, 2011

Intro É uma extensão à

plataforma .NET. É instalada através de

um plugin gratuito. É transversal a

diferentes browsers e plataformas

Pode ser definida como uma plataforma, para desenvolvimento de aplicações ricas para desktop, web e mobile.


Intro Originalmente chamava-

se WPF/Everywhere. É suportado por quase

todas as versõe dos sistemas operativos Windows e Macintosh OS.

Suportado por todos os browsers actuais.


Desenvolvido com o objectivo principal de trazer uma maior usabilidade e experiencia de utilização, a dispositivos mais fracos e à Web. Rapidamente se tem imposto também em aplicações LOB.

Tools

Visual Studio 2008 com SP1 ou superior ( pode ser a versão express).

Silverlight Tools para o Visual Studio.

Expression Blend.


DemoSilverlight App Visual Studio


Demo

Estrutura de ficheiros Silverlight App.XAML

MainPage.XAML

Assets e Views


Demo

O Silverlight é uma tecnologia compilavel.

Ao compilar uma aplicação silverlight obtemos um ficheiro do tipo XAP.


Demo <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">

<param name="source" value="ClientBin/SilverlightApplication2.xap"/>

<param name="onError" value="onSilverlightError" />

<param name="background" value="white" />

<param name="minRuntimeVersion" value="4.0.50826.0" />

<param name="autoUpgrade" value="true" />

<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">

<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>

</a>

</object>


XAML

Define uma hierarquia de objectos designada de object tree.

Cada nó da arvore pode ser decomposto em templates. A existencia da descrição visual da hierarquia de

objectos por meio de um ficheiro XAML, promove a interoperabilidade entre ferramentas de diferentes geneses.


Layout

Para disposição dos componentes que constituem a user interface do silverlight, é utilizado um metodo baseado em modelos de layout.

O sistema suporta a disposição de elementos sobre uma superficie de forma dinamica.


Layout

Cada superficie de layout é ela mesma um control. As superficies dinamicas para disposição dinamica de controlos mais comuns em silverlight são: Canvas. StackPanel. Grid.


CanvasAlexandre Marreiros, 2011

Ui element

Ui elementUi element

Ui element<Canvas> <Button Canvas.Top="50“ Canvas.Left="50" Content="Button 1" FontSize="18" Width="150" Height="45" /> <Button Canvas.Top="70" Canvas.Left="80" Canvas.ZIndex="99" Content="Button 3" FontSize="18" Width="150" Height="45" /> 5: </Canvas>

GridAlexandre Marreiros, 2011

Ui element

Ui element

<Grid ShowGridLines="True"> <Grid.RowDefinitions> <RowDefinition Height="60" /> <RowDefinition Height="60" /> <RowDefinition Height="60" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="175" /> <ColumnDefinition Width="175" /> <ColumnDefinition Width="175" /> </Grid.ColumnDefinitions> <Button Grid.Column="0" Grid.Row="0" Content="Button 1"/> </Grid>

StackPanelAlexandre Marreiros, 2011

Ui element

Ui element

Ui element

Ui element

Ui element

<StackPanel> <Button Margin="10" Content="Button 1" Width="150" Height="5" /> <Button Margin="10" Content="Button 2" FontSize="18“ Width="150" Height="45" /></StackPanel>

DemoSilverlight Layouts


User Interface

O silverlight disponibiliza a sua UI por intermedio de controlos.

Através da criação de USER CONTROLS é possivel criar componetes reutilizaveis.

Conceptualmente e a nivel de instanciação estes controlos são em tudo iguais aos do ASP.NET.


DemoSilverlight User Controls


BlendAlexandre Marreiros, 2011

Design & LogicAlexandre Marreiros, 2011

Design Development

Presentation Logic

Data BindingAlexandre Marreiros, 2011

Objecto .NETMecanismo de Binding

Objecto .NET

Data Binding

O silverlight disponibiliza mecanismos de binding. Através das propriedades dos controlos; Através de XAML.<TextBlock Text=“{Binding codeBind, Mode= OneWay” />

Efectuando o binding de colections sobre data sources

<ListBox ItemSource=“{Binding countryCollection, Mode=OneWay}”/>


Data Binding de objectosAlexandre Marreiros, 2011

XAML<grid x:name=“CustomerGrid”><TextBlock x:Name=“Customer”.../></grid>

C#CustomerClass cust = getCustomers();Customer.Text = cust.CustomerText;...

XAML<grid x:name=“CustomerGrid”><TextBlock x:Name=“Customer” Text=“@Binding CustomerText ”.../></grid>

C#CustomerClass cust = getCustomers();CustomerGrid.DataContext = cust;...

O Objecto Source deverá efectuar a implementação da propriedade INotiFyPropertyChanged

DemoSilverlight Binding Objects


Data Binding através da rede

O Silverlight disponibiliza a capacidade de Binding de DataSources externas ao servidor. Todo o Binding é Assincrono; Acessos Cross Domain carecem de

autorização, ou relações de confiança. São fontes de dados validas:

XML, JSON,RSS, WCF services



Existem dois objectos distintos na plataforma silverlight destinados ao processamento de pedidos na rede: WebClient

WebRequest



WebClient


Void GetNetworkData(){WebClient wc = new WebClient();Uri req = new URI (“http://sapo.pt/noticias.htm”);wc.DownloadStringComplete += Processing();wc.DownloadStringAsync(req);

}

http://sapo.pt/noticias.htm



WebRequest


Void GetNetworkData(){ WebRequest wr = WebRequest.Create (“http://sapo.pt/noticias.htm”); wr.BeginGetRequestStream(reqStream,wr);}Void reqStream(IAsyncResult ar){ WebRequest wr = (WebRequest)ar.AsyncState; Stream st = wr.EndGetRequestStream(ar); wr.BeginGetResponse(ProcessResponse,wr);}Void ProcessResponse(IAsyncResult ar){ //cria Web Request novamente //processamento do pedido}





XML parsing: Efectuado recorrendo aos objectos da plataforma .Net XMLReader, document ou Linq to XML.

JSON: Recorrendo ao DataContractJsonSerializer do .net

RSS: Efectuando o parsing do stream através de parser próprio.SyndicationFeed feed = SyndicationFeed.Load(stream)



Os pedidos CrossDomain so podem ser atendidos se o servidor o permitir.

Por omissão os serviços Silverlight são considerados not trusted.

Para saber mais sobre esta questão http://msdn.microsoft.com/en-us/library/cc197955(v=vs.95).aspx

Workaround: Criar no servidor onde correra a aplicação silverlight um serviço que instancia o serviço remoto e que será consultado pelo silverlight.


Behaviours

Eventos;

Trigers;

Actions;

Behaviours;


DemoIteracting with silverlight controls


ReferenciasAlexandre Marreiros, 2011

• http://Silverlight.Net;

• Programming C# 4.0: Building Windows, Web, and RIA Applications for the .NET 4.0 Framework (Animal Guide), Livro o’reilly

• Pro Silverlight 4 in C# by Matthew MacDonald;

• http://timheuer.com/blog/articles/getting-started-with-silverlight-development.aspx, Tim Heuer Blog;

http://silverlight.net/

http://www.amazon.com/Programming-4-0-Building-Applications-Framework/dp/0596159838/ref=sr_1_15?ie=UTF8&qid=1309247561&sr=8-15



http://www.amazon.com/Pro-Silverlight-4-Matthew-MacDonald/dp/1430229799/ref=sr_1_1?ie=UTF8&qid=1309247561&sr=8-1

http://timheuer.com/blog/articles/getting-started-with-silverlight-development.aspx



Contactos


Email: [email protected]: @alexmarreiros

Feel free to ask

mailto:[email protected]

silverlight 4 into

Technology