silverlight 4 into
DESCRIPTION
The slides of a recent workshop i gave to a freeler group about Silverlight 4.0.Language portugueseTRANSCRIPT
SILVERLIGHT 4.0 INSIGHTS
A tech overview & quick start
Alexandre Marreiros, 2011
Agenda Problema Intro Tools Demo XAML Layout Canvas StackPanel Grid
Alexandre Marreiros, 2011
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.
Alexandre Marreiros, 2011
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.
Alexandre Marreiros, 2011
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.
Alexandre Marreiros, 2011
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.
Alexandre Marreiros, 2011
DemoSilverlight App Visual Studio
Alexandre Marreiros, 2011
Demo
Estrutura de ficheiros Silverlight App.XAML
MainPage.XAML
Assets e Views
Alexandre Marreiros, 2011
Demo
O Silverlight é uma tecnologia compilavel.
Ao compilar uma aplicação silverlight obtemos um ficheiro do tipo XAP.
Alexandre Marreiros, 2011
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>
Alexandre Marreiros, 2011
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.
Alexandre Marreiros, 2011
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.
Alexandre Marreiros, 2011
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.
Alexandre Marreiros, 2011
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
Alexandre Marreiros, 2011
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.
Alexandre Marreiros, 2011
DemoSilverlight User Controls
Alexandre Marreiros, 2011
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}”/>
Alexandre Marreiros, 2011
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
Alexandre Marreiros, 2011
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
Alexandre Marreiros, 2011
Data Binding através da rede
Existem dois objectos distintos na plataforma silverlight destinados ao processamento de pedidos na rede: WebClient
WebRequest
Alexandre Marreiros, 2011
Data Binding através da rede
WebClient
Alexandre Marreiros, 2011
Void GetNetworkData(){WebClient wc = new WebClient();Uri req = new URI (“http://sapo.pt/noticias.htm”);wc.DownloadStringComplete += Processing();wc.DownloadStringAsync(req);
}
Data Binding através da rede
WebRequest
Alexandre Marreiros, 2011
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}
Data Binding através da rede
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)
Alexandre Marreiros, 2011
Data Binding através da rede
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.
Alexandre Marreiros, 2011
Behaviours
Eventos;
Trigers;
Actions;
Behaviours;
Alexandre Marreiros, 2011
DemoIteracting with silverlight controls
Alexandre Marreiros, 2011
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;