Razvoj "bogatih spletnih rešitev" (RIA) s Silverlight-om

Razvoj "bogatih spletnih rešitev" (RIA) s Silverlight-om {Dušan Zupančič}

O predavatelju • Dušan Zupančič, Dušan Zupančič s.p. • MVP [ASP / ASP.NET] • Solid Quality Mentors • Avtenta.si (razvijalski tečaji)

AGENDA • Kaj je RIA? • Kaj je Silverlight? • Orodja

Kam gre ta svet?

Renesansa uporabniškega vmesnika • 1985 – 1995: Odjemalec/strežnik, uporabniški vmesnik, RAD • 1995 – 2005: Aplikacijski strežniki (middleware - DCOM/MTS/COM+, DNA, .NET) in integracija aplikacij (XML, SOAP, SOA, …) • 2005 – 2007: poudarek na uporabniškem vmesniku (RIA, povratek debelih odjemalcev – seveda povezanih s spletom, mobilne rešitve, …)

Renesansa uporabniškega vmesnika {Zakaj zopet tolikšno zanimanje za UV?} • PERCEPCIJA • Uporabniki verjamejo, da “UPORABNIŠKI VMESNIK JE APLIKACIJA” • Grd uporabniški vmesnik povezujejo s slabo rešitvijo in seveda temu primernim podjetjem • PRODUKTIVNOST • Slab uporabniški vmesnik napravi uporabnika manj produktivnega • Počasen uporabniški vmesnik: klikni in čakaj pomeni manjšo produktivnost • Slab design: iskanje bližnjic, zmeda, izogibanje

Rich Internet Application • Spletne rešitve, ki premorejo funkcionalnost značilno za Windows rešitve • Osnovne značilnosti: • Izvajajo se v spletnem brskalniku (ne potrebujejo namestitve) • Izvajajo se lokalno v varovanem okolju (sandbox) • Bogata uporabniška izkušnja, ki presega zmožnosti na strežniku generiranega HTML • Velik del aplikacijske logike se izvaja na odjemalcu

Interakcija Klasična spletna rešitev RIA

Kaj je Microsoft Silverlight? • WPF za splet • Podpira večino zmožnosti polnega WPF • Vektorska grafika • Animacijski podsistem • Multimedija (video, avdio) • Več na: http://www.silverlight.net/ Silverlight V1.1 Silverlight V1.0

Silverlight Security Sandbox • Vse Silverlight rešitve tečejo v peskovniku (Sandbox) • Aktivacijski model je enak kot za HTML strani– samo klik naURL • V brskalniku ni zvišanja uporabniških pravic (elevation) • Aplikaciji je preprečeno, da bi počela škodljive stvari • Silverlight prinaša dodatne zmožnosti: • Varen"isolated storage" • Kontrolnike za prenos

Programiranje s Silverlight

Orodja za izdelavo Silverlight rešitev • PopFly (zanimiva študija) • Expression Blend • Visual Studio

DEMO - PopFly

DEMO - Expression

Silverlight - arhitektura HTML DOMIntegration Framework Browser Host MS AJAX Library Controls DRM Media Inputs Integrated Networking Stack Media Editing Keyboard WMA MP3 Mouse Ink VC1 Layout .NET for Silverlight UI Core BCL DLR Data UI Framework Vector Text Extensible Controls CLR Execution Engine Generics Ruby LINQ Collections XLINQ Python Images Animation Application Services Networking XAML REST POX Presentation Core Legend Legend RSS JSON V1.1 V1.0 Installer

Kaj sestavlja Silverlight rešitev • Vedno: • HTML datoteko, ki gosti kontrolnik Silverlight (npr.: TestPage.html) • Javascript datoteke za nalaganje (Silverlight.js in TestPage.html.js) • Osnovno datoteko XAML in zbir (Aplikacija.xaml in Aplikacija.dll) • Opcija: • Dodatne knjižnice (naše ali kupljene) • Dodatni viri (npr. Raketa.XAML, …)

TestPage.html <html> <head> <script type=“text/javascript” src=“Silverlight.js”></script> <script type="text/javascript" src="TestPage.html.js"></script> </head> <body> <div id="SilverlightControlHost"> <script type="text/javascript"> createSilverlight(); </script> </div> </body> </html> • createSilverlight() poskrbi za nalaganje

CreateSilverlight.js // JScriptsourcecode //contains calls to silverlight.js, example below loads Page.xaml functioncreateSilverlight() { Silverlight.createObjectEx({ source: "Page.xaml", parentElement: document.getElementById("SilverlightControlHost"), id: "SilverlightControl", properties: { width: "100%", height: "100%", version: "1.1", enableHtmlAccess: "true" }, events: {} }); // Give the keyboard focus to the Silverlight control by default document.body.onload = function() { var silverlightControl = document.getElementById('SilverlightControl'); if (silverlightControl) silverlightControl.focus(); } }

Page.xaml <Canvas x:Name="parentCanvas" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="Page_Loaded" x:Class="SilverlightProject1.Page;assembly=ClientBin/SilverlightProject1.dll" Width="640" Height="480" Background="White" > <TextBlock x:Name="Label1" Text="Pozdrav" Width="163.443" Height="29.537" Canvas.Left="149" Canvas.Top="173" MouseLeftButtonUp="Label1Click" /> </Canvas> • Vsaka aplikacija ima vrhnji (root) XAML • Referencira zbir s kodo in vstopno točko razreda

Page.xaml.cs • “Code behind" za vrhnji XAML namespace SilverlightProject1 { public partial class Page : Canvas { public void Page_Loaded(object o, EventArgs e) { // Required to initializevariables InitializeComponent(); } public void Label1Click(object sender, MouseEventArgs e) { Label1.Text = "Kliknjeno!"; } } }

Demo – Visual Studio

Dogodki • Page_Loaded: prva priložnost za dinamično delo • MouseMove • MouseEnter • MouseLeave • MouseLeftButtonDown • MouseLeftButtonUp • KeyUp • KeyDown • GotFocus • LostFocus • Loaded

DEMO – Silverlight 1.1 Paint

ZAKLJUČEK • Silverlight predstavlja močno platformo za izgradnjo rešitev RIA • Na voljo je široka paleta orodij (VS, Expression) • Programski model 1.1 omogoča programiranje rešitev na brskalniku v znanem programskem jeziku (C#, VB.NET) • Komaj čakamo na izid 1.1 

Viri • www.silverlight.net • www.microsoft.com/silverlight • Msdn.microsoft.com/Silverlight

Zanimiva predavanja • SolidQ ASP.NET Core – 3.12. – 7.12. • SolidQ ASP.NET Advanced – 17.12. – 21.12. • SolidQ ASP.NET AJAX – 9.1. – 11.1.2008 • MOC 2541 Core Data Access with Microsoft Visual Studio 2005 – 28.1. – 30.1.2008 • MOC 2542 Advanced Data Access with Microsoft Visual Studio 2005 – 28.2. – 29.2.2008

Razvoj "bogatih spletnih rešitev" (RIA) s Silverlight-om