razvoj "bogatih spletnih rešitev" (ria) s silverlight-om
Post on 03-Feb-2016
88 Views
Preview:
DESCRIPTION
TRANSCRIPT
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 “UPORABNIŠKI
VMESNIK JE APLIKACIJA”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 na URL 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
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
createSilverlight() poskrbi za nalaganje
<html><html>
<head><head>
<script type=“text/javascript” src=“Silverlight.js”></script><script type=“text/javascript” src=“Silverlight.js”></script>
<script type="text/javascript" <script type="text/javascript"
src="TestPage.html.js"></script>src="TestPage.html.js"></script>
</head></head>
<body><body>
<div id="SilverlightControlHost"><div id="SilverlightControlHost">
<script type="text/javascript"><script type="text/javascript">
createSilverlightcreateSilverlight();();
</script></script>
</div></div>
</body></body>
</html></html>
<html><html>
<head><head>
<script type=“text/javascript” src=“Silverlight.js”></script><script type=“text/javascript” src=“Silverlight.js”></script>
<script type="text/javascript" <script type="text/javascript"
src="TestPage.html.js"></script>src="TestPage.html.js"></script>
</head></head>
<body><body>
<div id="SilverlightControlHost"><div id="SilverlightControlHost">
<script type="text/javascript"><script type="text/javascript">
createSilverlightcreateSilverlight();();
</script></script>
</div></div>
</body></body>
</html></html>
CreateSilverlight.js// JScript source code
//contains calls to silverlight.js, example below loads Page.xaml
function createSilverlight()
{
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();
}
}
// JScript source code
//contains calls to silverlight.js, example below loads Page.xaml
function createSilverlight()
{
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
Vsaka aplikacija ima vrhnji (root) XAML Referencira zbir s kodo in vstopno točko razreda
<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>
<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>
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 initialize variables
InitializeComponent();
}
public void Label1Click(object sender, MouseEventArgs e)
{
Label1.Text = "Kliknjeno!";
}
}
}
namespace SilverlightProject1
{
public partial class Page : Canvas
{
public void Page_Loaded(object o, EventArgs e)
{
// Required to initialize variables
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
KeyUpKeyUp
KeyDownKeyDown
GotFocusGotFocus
LostFocusLostFocus
LoadedLoaded
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
top related