Úvod do technológie a tvorby aplikácií pomocou nástrojov ...download.microsoft.com/download/0/a/6/0a633751-793c-49cc-be8b-bf… · 5DGãHM UD] YLGLH " DNR GYDNUiW þtWD " Predstavovanie

Úvod do technológie a tvorby aplikácií pomocou nástrojov Microsoft Expression

ÚVOD..................................................................................................................................................................... 3

............................................................................................................... 4

? ................................................................................................................................... 7

........... 9

................................. 12

........................................ 13

.......................... 28

..................................... 31

.............. 44

............................ 55

............ 58

.......................... 58

.................................... 59

Microsoft® Silverlight™Úvod do technológie a tvorby aplikácií pomocou nástrojov Microsoft Expression

Úvod sa rozvíjajúcich projektov v dejinách udstva. Od jeho pôvodnej

ujú rozdiel medzi skom komforte. Jedným

z významných hrátrh prehliada

prehliada nú úrove prehliadarlight je kompletne postavený na vektorov

vybudovanú ve mi silnú pozíciu spolo nos Adobe so svojim produktom Flash (predtým Macromedia), v konkuren nom boji

Pri uvádzaní novej technológie postupovala firma Microsoft dos netradi s finálnou verziou Silverlight 1.0 predstavila aj alfa verziu 1.1. Zatiajazyk JavaScript, v pripravovanej verz .NET jazyky.

prezentácií vrátane multimediálnych na klientskych po ítavývoja mala táto technológia ozna o nazna uje, zámer Microsoftu prenies

as

Jedným zo základných pilierov Silverlightu je znauje popisova textový obsah, grafický bitmapový a vektorový obsah a multimediálny obsah. Jazyk

ná logika, to znamená obsluha udalostí (zavedenie stránky, zatla enie tla

nú logiku programovajazykoch

Pre vývoj prezenta nástroje z rodiny bu komplexný nástroj Microsoft Expression Studio, alebo

nej vrstvy) Microsoft Expression Design (návrh vektorovej a bitmapovej grafiky)

3Microsoft® Silverlight™


Predstavovanie technológie Silverlight by sme mohli za a tradi ne popisom architektúry, spôsobu implementácie a nazna

neme webovou televíziou, konkrétne Mediapreview TV:

Príklad prehrávania videa prostredníctvom Silverlightu

Ve t prezenta ného rozhrania nového opera

Simulátor opera

4



Silverlight Showcase

6

o budeme potrebova ?

Silverlight



8

Rodina nástrojov Microsoft Expression Microsoft v súvislosti s uvedením novej technológie Silverlight dal k dispozícii vývojárom produkty z rodiny Expresion. Vývojári si pod bukomplexný balík pre dizajnérov, tvorcov webov a grafiky pod názvom Microsoft Expression Studio, alebo jednotlivé asti, ktoré tento balík tvoria:

Microsoft Expression Web Microsoft Expression Blend Microsoft Expression Design Microsoft Expression Media

Microsoft Expression Web uje tvorbu kvalitných webových stránok, spí, preto

.

Microsoft Expression Blend je flexibilné a produktívne grafické vývojové prostredie. Pomáha pri tvorbe moderných a vizuálne prepracovaných aplikácií s interaktívnou podporou 3D zobrazovania a prehrávania multimédií. aj 3D zobrazením.

Microsoft Expression Design obsahuje podporu vektorovej a bitmapovej grafiky a obidve tieto oblasti spája v jednom prostredí. Ako príklad spojenia grafický návrh tla vektorové tla idlo do Windows Vista a zárove bitmapové tla idlo pre webovú aplikáciu. Tento nástroj je len sú as ou integrovaného balíka Expression Studio a pravdepodobne sa nebude dodáva samostatne.

Microsoft Expression Media je profesionálny katalogiza ný nástroj pre dávkové spracovanie, úpravy a prevody a hlavne pokro ilé vytváranie katalógov multimediálnych súborov. Podporuje viac ako sto

né profesionálne multimediálne formáty uje aj import konkuren ných katalógov multimediálneho obsahu.

Rodina nástrojov Microsoft Expression



Microsoft Expression Studioo

vizuálne prí

60 d na adrese :

Microsoft Expression Blend

nej

aj opa ne a ru ne

Microsoft Expression Blend 2

10

Vlastnos Silverlight 1.0 Silverlight 1.1



Architektúra Architektúra platformy Silverlight 1.0 je rozdelená na dve základné asti: Prezenta ná vrstva obsahuje

ského rozhrania, a interakciu renderovanie vektorovej a bitmapovej grafiky,

textový výstup, animácie a prezentáciu multimediálneho obsahu vo formáte WMA,VC1 a MP3. Interakcia om zahr

úrove aj DOM API (Document Object Model) pre Silverlight a XAML. Druhou vrstvou je ný komponent pre internetový prehliada .

vývojári javascript. V základe pracujú s nú prezenta nú

i

Architektúra prezenta nej vrstvy Silverlight

12

XAML XAML je nový druh zna kovacieho jazyka pre tvorbu aplika ného rozhrania. Jeho formát vychádza

populárne hovori ujú dynamicky reagova

prehliada ných

XAML ako sprostredkovate tímového vývoja

ou

nú vývojári pracova na ami

prezenta



ami prezenta nej vrstvy a návrhového prostredia

Naproti tomu ak je dizajnérov návrh vytvorený v takom prostredí a formáte, ktorý je podporovaný aj vývojovými prostrediami, je zaru návrhu

a vývojársky tím do návrhu naprogramuje aplika nú logiku

nej vrstvy aplikácie

uje spoluprácu návrhových nástrojov a vývojových prostredí

14

<Canvas xmlns="http://schemas.microsoft.com/client/2007"> <TextBlock FontSize="32" Text="Hello world" /> </Canvas>

<TextBlock FontSize="32" Text="Hello world" />

TextBlock t = new TextBlock(); t.FontSize = 32; t.Text = "Hello world";



Zobrazenie XAML aplikácie

- panely

Objekt Canvas

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="640" Height="480" Background="White" x:Name="Page" > <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill="Red" />

</Canvas>

16

Relatívna poloha plochy geometrického obrazca vo i ploche Canvas

je vo vnútri hlavnej (bielej) plochy vnorená ervená vnorená plocha Canvas. Vo vnútri vnorenej i

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="640" Height="480" Background="White" x:Name="Page" > <Canvas Canvas.Top="25" Canvas.Left="25" Width="250" Height="100" Background="Red">

<Ellipse Canvas.Top="10" Canvas.Left="25" Width="150" Height="75" Fill="Yellow" />

</Canvas>

</Canvas>



Vnorenie plochy Canvas

Prvky vektorovej grafiky uje definova základné geometrické obrazce a tvary, pomocou ktorých vytvárame a

dotvárame dizajn prezenta zo základných obrazcov:

<Rectangle /> <Ellipse /> <Line /> <Polygon /> <PolyLine /> <Path />

<Canvas ... <Rectangle Width="248" Height="199" Stroke="#FF000000" Canvas.Left="62"

Canvas.Top="66" Fill="#FFD5E82B"/> <Ellipse Width="312" Height="145" Fill="#FFE8552B" Stroke="#FF000000"

Canvas.Left="169" Canvas.Top="152"/> <Path Width="105.455" Height="74.457" Fill="#FFE8552B" Stretch="Fill"

Stroke="#FF000000" Canvas.Left="82.5" Canvas.Top="303.043" Data="M108,304 C105.14454,311.44459 102.18639,317.69524 101,326 99.624327,335.62971 93.71711,338 114,338 118.92263,338 158.76402,335.76402 137,314 124.23846,301.23846 130.06165,297.21526 111,319 102.26477,328.98312 93.599741,332.87353 83,341"/>

</Canvas>

18

Príklad vykreslenia prvkov vektorovej grafiky

Objekt Brush

uje definova tri druhy objektov Brush hy jedným farebným odtieäom

<Canvas ... <Rectangle Width="240" Height="136" Stroke="#FF000000" Canvas.Left="55" Canvas.Top="65"> <Rectangle.Fill> <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5"> <GradientStop Color="#FF000000" Offset="0"/> <GradientStop Color="#FFFFFFFF" Offset="1"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> </Canvas>



Prvok Brush

priebeh

<Canvas ... <Rectangle Width="200" Height="150" > <Rectangle.Fill> <RadialGradientBrush> <RadialGradientBrush.GradientStops> <GradientStop Color="Red" Offset="0" /> <GradientStop Color="Black" Offset="1" /> </RadialGradientBrush.GradientStops> </RadialGradientBrush> </Rectangle.Fill>

</Rectangle> </Canvas>

Transformácie . Prostredníctvom XAML

ov bude

20

<Canvas ... <TextBlock Text="Hello World"> <TextBlock.RenderTransform> <RotateTransform Angle="15" /> </TextBlock.RenderTransform>

</TextBlock> </Canvas>

Pooto nie <RotateTransform /> objektu

Silverlight 1.0 aplikácia v prostredí Microsoft Expression Blend 2



Ponukový dialóg, ktorý sa zobrazí po spustení aplikácie Microsoft Expression Blend

plánujeme vytvára projekty tohto typu.

Vytvorenie projektu v prostredí Microsoft Expression Blend

Súbory tvoriace projekt iato sa s akých súborov sa

projekt skladá.

Kreslenie.csprojprojekt pozostáva, prilinkovávaných objektoch a o nastavení niektorých parametrov.

22

<Project ToolsVersion="3.5" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003"> <PropertyGroup> <Configuration Condition="'$(Configuration)'==''">Debug</Configuration> <DefaultClrNameSpace>Kreslenie</DefaultClrNameSpace> <AssemblyName>Kreslenie</AssemblyName> <OutputPath>bin\$(Configuration)\</OutputPath> <ApplicationVersion>1.0.0.*</ApplicationVersion> <ApplicationRevision>0</ApplicationRevision> <ExpressionBlendCreationVersion>2.0.1077.0</ExpressionBlendCreationVersion> <OutputType>Library</OutputType> <RootNamespace>Kreslenie</RootNamespace> <StartPageUrl>Default.html</StartPageUrl> ... </PropertyGroup> <Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" /> <ItemGroup> <Content Include="Default.html" /> <Content Include="Default_html.js"> <DependentUpon>Default.html</DependentUpon> </Content> <Content Include="Page.xaml.js"> <DependentUpon>Page.xaml</DependentUpon> </Content> <Content Include="Silverlight.js" /> <Page Include="Page.xaml" /> </ItemGroup> </Project>

Default.html

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Kreslenie</title>

<script type="text/javascript" src="Silverlight.js"></script> <script type="text/javascript" src="Default_html.js"></script> <script type="text/javascript" src="Page.xaml.js"></script> <style type="text/css"> .silverlightHost { height: 480px; width: 640px; } </style> </head>

<body> <div id="SilverlightControlHost" class="silverlightHost"> <script type="text/javascript"> createSilverlight(); </script> </div> </body> </html>



default_html.js - JavaScriptový kód na pozadí hlavnej stránky. Obsahuje kód funkcie

<div id="SilverlightControlHost" class="silverlightHost"> <script type="text/javascript"> createSilverlight(); </script> </div>

sa aktivuje pri zavádzaní stránky. .

function createSilverlight() { var scene = new Kreslenie.Page(); Silverlight.createObjectEx({ source: "Page.xaml", parentElement: document.getElementById("SilverlightControlHost"), id: "SilverlightControl", properties: { width: "100%", height: "100%", version: "1.0" }, events: { onLoad: Silverlight.createDelegate(scene, scene.handleLoad) } }); }

if (!window.Silverlight) window.Silverlight = {};

Silverlight.createDelegate = function(instance, method) { return function() { return method.apply(instance, arguments); } }

Page.xaml

a podobne.

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="640" Height="480"

24

Background="White" x:Name="Page" > </Canvas>

Page_xaml.js

if (!window.Projekt1) window.Projekt1 = {};

Projekt1.Page = function() {}

Projekt1.Page.prototype = { handleLoad: function(control, userContext, rootElement) { this.control = control; // Sample event hookup: rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown)); },

// Sample event handler handleMouseDown: function(sender, eventArgs) { // The following line of code shows how to find an element // by name and call a method on it. // this.control.content.findName("Timeline1").Begin(); } }

Silverlight.js

Grafický návrh jednoduchého objektu



Pracovná plocha nástroja Microsoft Expression Blend sa dá prepnú

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="640" Height="480" Background="LightBlue" x:Name="Page" > </Canvas>

a obd

<Canvas ... <Rectangle Width="156" Height="121" Fill="#FFFFFFFF" Stroke="#FF000000" Canvas.Left="161" Canvas.Top="80"/> > </Canvas>

- Project - Properties

-

26

Zmena farby obd

<Canvas ... <Rectangle Width="156" Height="121" Fill="#FFAC5050" Stroke="#FF000000" Canvas.Left="161" Canvas.Top="80"/> > </Canvas>

<Canvas ... <Rectangle Width="156" Height="121" Stroke="#FF000000" Canvas.Left="161" Canvas.Top="80"> <Rectangle.Fill> <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5"> <GradientStop Color="#FF000000" Offset="0"/> <GradientStop Color="#FFEEA3A3" Offset="1"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> </Canvas>

Otestovanie aplikácie



Otestovanie aplikácie

Spracovanie udalostí

avého tla vek na ploche ahko identifikova

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="640" Height="480" Background="Yellow" x:Name="Page" MouseLeftButtonDown="KlikNaCanvas" > </Canvas>

if (!window.VideoPlay) window.VideoPlay = {};

VideoPlay.Page = function() {

28

}

VideoPlay.Page.prototype = { handleLoad: function(control, userContext, rootElement) { this.control = control; // Sample event hookup: rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown)); }, // Sample event handler handleMouseDown: function(sender, eventArgs) { // The following line of code shows how to find an element by name and call a method on it. // this.control.content.findName("Timeline1").Begin(); } }

function KlikNaCanvas() { alert("Bolo kliknuté na plochu Canvas"); }



function KlikNaCanvas(sender, args) { sender.background = "blue"; }

Obsluha udalostí pri nahrávaní stránky

<Canvas ... <Rectangle Width="313" Height="222" Fill="White" Stroke="Black" Canvas.Left="76" Canvas.Top="118" Loaded="rct_load"/> </Canvas>

function rct_load(sender, args) { sender.Fill = "Yellow"; }

Práca s objektami v JavaScripte

function rct_load(sender, args) { sender.Fill = "Yellow"; }

<Rectangle x:Name="obdlznik1" Width="313" Height="222" Fill="White" Stroke="Black" Canvas.Left="76" Canvas.Top="118" />

30

Aby sme mohli inicializova nejakú akciu explicitne, potrebujeme nejaký ovládací prvok. Nako ko

ich definova napríklad pomocou bloku textu.

<TextBlock Width="102" Height="23" Canvas.Left="76" Canvas.Top="375" TextWrapping="Wrap" MouseLeftButtonDown="akcia"> <Run Text="Akcia"/> </TextBlock>

V metóde, ktorú aktivujeme zatla ením tla idla nebudeme pracova s tla idlom, ale s obd

function akcia(sender, args) { sender.findName("obdlznik1").Fill = "Yellow"; }

Animáciaova , preco animácia

Rozpohybované veci na seba upriamujú pozornos a mnohé postupy, princípy a podobne sa dajú nejaký objekt,

,

<Rectangle x:Name="obdlznik" Width="200" Height="100" Fill="Yellow" Stroke="Black" StrokeThickness="5" Canvas.Left="50" Canvas.Top="50"/>

vodorovný pohyb objektu. Technicky povedané, potrebujeme meni hodnotu

táto zmena prejavila ako animácia, musí by napríklad na za

<Canvas.Resources> <Storyboard x:Name="animacia" Storyboard.TargetName="obdlznik" Storyboard.TargetProperty="(Canvas.Left)"> <DoubleAnimation RepeatBehavior="Forever" To="300"/> </Storyboard> </Canvas.Resources>

Ak by sme spustili aplikáciu v tomto okamihu, obd ,nako ko sme animáciu zatia e neriadime. Aby sme mohli animáciu objektu riadi na objekt referenciu. Následne vytvoríme metódy pre inicializovanie základných riadiacich



<TextBlock x:Name="tbStart" Width="72" Height="24" Canvas.Left="20" Canvas.Top="448" Text="START" TextWrapping="Wrap" Foreground="Green" MouseLeftButtonDown="start"/>

<TextBlock x:Name="tbStop" Width="72" Height="24" Canvas.Left="80" Canvas.Top="448" Text="STOP" TextWrapping="Wrap" Foreground="Red" MouseLeftButtonDown="stop"/>

<TextBlock x:Name="tbPause" Width="72" Height="24" Canvas.Left="140" Canvas.Top="448" Text="PAUZA" TextWrapping="Wrap" Foreground="Black" MouseLeftButtonDown="pauza"/>

function start(sender, args) { sender.findName("animacia").begin(); }

32

function stop(sender, args) { sender.findName("animacia").stop(); }

function pauza(sender, args) { sender.findName("animacia").pause(); }

.

Vytvorenie animácie v grafickom návrhovom prostredí

Pomocou tla

<Path Width="428.105" Height="107.187" Fill="#FF50B137" Stretch="Fill" Canvas.Left="21.5" Canvas.Top="90.341" Data="M27,392 C388,155 802,397 414,394 26,391 27,392 27,392 z"/>



a v

a

<Canvas.Resources> <Storyboard x:Name="Timeline1">

<PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0]. (PathFigure.StartPoint)"> <SplinePointKeyFrame KeyTime="00:00:01" Value="129.238,88.7829247322082"/> <SplinePointKeyFrame KeyTime="00:00:02" Value="102.238,209.782"/> </PointAnimationUsingKeyFrames> ...

</Storyboard> </Canvas.Resources> <Path Width="460.907" Height="209.782" Fill="#FF50B137"

34

Stretch="None" Canvas.Left="-9.238" Canvas.Top="23.218" x:Name="path"> <Path.Data> <PathGeometry> <PathFigure IsClosed="True" StartPoint="30.7383561812547,172.264120521994"> <BezierSegment Point1="315.298093466867,-66.9676271962378" Point2="641.635299107431,177.311203807189" Point3="335.792700584391,174.282953836072"/> BezierSegment Point1="29.95010206135,171.254703864955" Point2="30.7383561812547,172.264120521994" Point3="30.7383561812547,172.264120521994"/> </PathFigure> </PathGeometry> </Path.Data> </Path>

vlastnos

Pod

tla idlá, tla

<Canvas MouseLeftButtonDown="start" Canvas.Left="20" Canvas.Top="20"> <Rectangle Stroke="Black" Height="40" Width="60" RadiusX="5" RadiusY="5"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="White" Offset="0.0" /> <GradientStop Color="Green" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Canvas.Left="5" Canvas.Top="5">START</TextBlock> </Canvas>



i

36

Silverlight .NET aplikácia v prostredí Microsoft Expression Blend 2

Default.html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>DotNet1</title> <script type="text/javascript" src="Default_html.js"></script> <script type="text/javascript" src="Silverlight.js"></script> <style type="text/css"> .silverlightHost { height: 480px; width: 640px; } </style> </head>

<body> <div id="SilverlightControlHost" class="silverlightHost"> <script type="text/javascript"> createSilverlight(); </script> </div> </body> </html>

Page.xaml

<Canvas xmlns="http://schemas.microsoft.com/client/2007"



xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="640" Height="480" Background="White" xmlns:DotNet1="clr-namespace:DotNet1;assembly=ClientBin/DotNet1.dll" x:Class="DotNet1.Page;assembly=ClientBin/DotNet1.dll" x:Name="Page" > </Canvas>

Page.xaml.cs

using System; using System.IO; using System.Windows; using System.Windows.Controls; using System.Windows.Media;

namespace DotNet1 { public partial class Page : Canvas { public Page() { this.Loaded += this.Page_Loaded; }

private void Page_Loaded(object sender, EventArgs args) { // Required to initialize variables. Needs to be done from loaded event so FindName works properly. InitializeComponent();

// Insert code required on object creation below this point. } } }

Kód na pozadí XAML stránky, alebo

<Canvas ... > <TextBlock Width="270" Height="57" Canvas.Left="99" Canvas.Top="118" Text="TextBlock" TextWrapping="Wrap" x:Name="Sprava"/> </Canvas>

38

Návrh prezenta

private void Page_Loaded(object sender, EventArgs args) { InitializeComponent(); // Insert code required on object creation below this point. Sprava.Text = "Hello World!"; }

Build project: DotNet1.sln, Targets: Build __________________________________________________ Project "C:\!@-Knihy 2007\Zborník Silverlight\Priklady\DotNet1\DotNet1.sln" (Build target(s)):

__________________________________________________ Project "C:\!@-Knihy 2007\Zborník Silverlight\Priklady\DotNet1\DotNet1.sln" is building "C:\!@-Knihy 2007\Zborník Silverlight\Priklady\DotNet1\DotNet1.csproj" (default targets):

DotNet1 -> C:\!@-Knihy 2007\Zborník Silverlight\Priklady\DotNet1\ClientBin\DotNet1.dll The build has successfully completed.



Zobrazenie aplikácie v okne webového prehliada a

Silverlight aplikácia pre prehrávanie videa

videa

<Canvas ... <MediaElement x:Name="Keyboard_wmv" Width="1024" Height="768" Source="Keyboard.wmv" Stretch="Fill"/> </Canvas>

doplni

40

Aplikácia pre prehrávanie videa

ne prehráva

Ur



dolného rohu plochy, pod prvok pre prehrávanie videa. Do XAML kódu, ktorý vznikol vizuálnym návrhom enia avého tla

a

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="640" Height="480" Background="White" x:Name="Page" > <MediaElement AutoPlay="False" x:Name="Keyboard_wmv" Width="611" Height="436" Canvas.Top="8" Source="Keyboard.wmv" Stretch="Fill" Canvas.Left="8" /> <TextBlock x:Name="tbPlay" Width="72" Height="24" Canvas.Left="22" Canvas.Top="448" Text="Play" TextWrapping="Wrap" Foreground="#FF29F22E" MouseLeftButtonDown="play"/> <TextBlock x:Name="tbStop" Width="80" Height="24" Canvas.Left="128" Canvas.Top="448" Text="Stop" TextWrapping="Wrap" MouseLeftButtonDown="stop" Foreground="#FFF82820" /> </Canvas>

42

Aby aplikácia fungova , musíme kód deklarovaných procedúr doplni

function play(sender, eventArgs) { var slc = document.getElementById("SilverlightControl"); var me = slc.content.findName("Keyboard_wmv"); me.Play(); }

function stop(sender, eventArgs) { var slc = document.getElementById("SilverlightControl"); var me = slc.content.findName("Keyboard_wmv"); me.Stop(); }

,

a prehrávanie videa



Silverlight ako klie

ubovo

44

Aby sme ukázali výhody technológie Silverlight, budeme vytvárachceli prezentova ilo by nám vytvoriklasickú ASP.NET stránku a nepotrebovali by sme k tomu technológiu Silverlight.

aautomaticky po na

<Canvas.Triggers> <EventTrigger RoutedEvent ="Canvas.Loaded"> <BeginStoryboard> <Storyboard x:Name="Timeline1"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="animacia" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/> <SplineDoubleKeyFrame KeyTime="00:00:05" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </EventTrigger> </Canvas.Triggers>

Pomocou animácie budeme meni v adnos plochy.

as.

<TextBlock x:Name="lbKurz" Canvas.Left="10" Canvas.Top="10" FontSize="24" FontWeight="Bold" Foreground="Gray" Text="Kurz:" TextWrapping="Wrap"/> <TextBlock x:Name="lbMena" Canvas.Left="100" Canvas.Top="8" FontSize="24" FontWeight="Bold" Foreground="Blue" Text="GBP Ve ká Británia" TextWrapping="Wrap"/>

V adne

ktoré obsahuje sú nevidite né V etape návrhu odporú ame nastavimáme preh ad o tok kde budú jednotlivé údaje

<Canvas Opacity="1" x:Name="canvas1" Width="600" Height="150" Canvas.Left="10" Canvas.Top="50"> <TextBlock x:Name="lbNakup" Width="205" Height="59" FontFamily="Tahoma" FontSize="48" FontWeight="Bold" Foreground="Orange" Text="Nakup" TextWrapping="Wrap" Canvas.Left="100" Canvas.Top="10"/> <TextBlock x:Name="lbPredaj" Width="205" Height="59" FontFamily="Tahoma" FontSize="48" FontWeight="Bold" Foreground="Blue" Text="Predaj" TextWrapping="Wrap" Canvas.Left="100" Canvas.Top="80"/> </Canvas>



<TextBlock x:Name="lbNakup"...

<TextBlock x:Name="lbPredaj"...

46

Vo vývojovom prostredí Visual Studio 2005 alebo v novej verzii 2008, prípadne vo Visual Web Developeri

using System; using System.Linq; using System.Web; using System.Web.Services; using System.Web.Services.Protocols; using System.Xml.Linq;

[WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. // [System.Web.Script.Services.ScriptService] public class Service : System.Web.Services.WebService { public Service () {

//Uncomment the following line if using designed components //InitializeComponent(); }

[WebMethod] public string HelloWorld() { return "Hello World"; } }

public string HelloWorld() { return "Hello World "+ DateTime.Now.ToString(); }

trojpísmenový

[WebMethod] public double DajKurzNakup(string sMena) { switch (sMena) { case "EUR": return 32.8; break; case "USD": return 23.1; break; case "GBP": return 52.2; break; default: return 1.0; break;



} }

<?xml version="1.0" encoding="utf-8" ?> <double xmlns="http://tempuri.org/">23.1</double>

Vytvorenie ASP.NET stránky generujúcej XAML dokument

48

Pridanie ASP.NET stránky do projektu

ko sa jedná as



asti (súbor

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpravyXAML.aspx.cs" Inherits="UpravyXAML" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> </div> </form> </body> </html>

a súbor s oddeleným kódom

using System; using System.Data; using System.Configuration; using System.Collections; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using System.Xml.Linq;

50

public partial class UpravyXAML : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) {

} }

Do sekcie deklarácie menných priestorov pridáme referencie na menné priestory prepojenia pracujúce s elementmi XML dokumentu.

using System.Xml; using System.Xml.XPath;

XAML stránku budeme upravovaV tejto metóde na

protected void Page_Load(object sender, EventArgs e) { XmlDocument xmlDoc = new XmlDocument(); xmlDoc.Load(Server.MapPath("Page.xaml")); }

jednoduchos

//string sMena = Request.Params["MENA"]; string sMena = "GBP"; localhost.Service kurz = new localhost.Service(); string sKurzNakup = kurz.DajKurzNakup(sMena); string sKurzPredaj = kurz.DajKurzPredaj(sMena);

Aby sme mohli otestova

<form id="form1" runat="server"> <div> <asp:Label ID="lbNakup" runat="server" Text="Label"></asp:Label> <br /> <asp:Label ID="lbPredaj" runat="server" Text="Label"></asp:Label> </div> </form>

bude

protected void Page_Load(object sender, EventArgs e) { XmlDocument xmlDoc = new XmlDocument(); xmlDoc.Load(Server.MapPath("Page.xaml")); //string sMena = Request.Params["MENA"]; string sMena = "GBP"; localhost.Service kurz = new localhost.Service(); double dKurzNakup = kurz.DajKurzNakup(sMena); double dKurzPredaj = kurz.DajKurzPredaj(sMena);

lbNakup.Text = dKurzNakup.ToString();



lbPredaj.Text = dKurzPredaj.ToString(); }

protected void Page_Load(object sender, EventArgs e) { string sMena = "GBP"; localhost.Service kurz = new localhost.Service(); double dKurzNakup = kurz.DajKurzNakup(sMena); double dKurzPredaj = kurz.DajKurzPredaj(sMena);

XmlDocument xmlDoc = new XmlDocument(); xmlDoc.Load(Server.MapPath("Page.xaml")); string strXPath = "";

XmlNamespaceManager mng = new XmlNamespaceManager(new NameTable()); mng.AddNamespace("d", "http://schemas.microsoft.com/client/2007"); mng.AddNamespace("x", "http://schemas.microsoft.com/winfx/2006/xaml");

strXPath = "//d:TextBlock[@x:Name='lbNakup']"; XmlNode xNodeN = xmlDoc.SelectSingleNode(strXPath, mng); xNodeN.Attributes["Text"].Value = dKurzNakup.ToString();

strXPath = "//d:TextBlock[@x:Name='lbPredaj']"; XmlNode xNodeP = xmlDoc.SelectSingleNode(strXPath, mng); xNodeP.Attributes["Text"].Value = dKurzPredaj.ToString();

Response.ContentType = "text/xml"; Response.Write(xmlDoc.InnerXml); }

52

Chybové hlásenie pri spustení aplikácie

Preto musíme zo stránky UpravyXAML.aspx odstráni

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpravyXAML.aspx.cs" Inherits="UpravyXAML" %>

ik od cie a. Zobrazí sa nám obsah XAML , i boli placeholdery správne nahradené



<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="640" Height="480" Background="White" x:Name="Page"> <Canvas.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded"> <BeginStoryboard> <Storyboard x:Name="Timeline1"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="canvas1" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0" /> <SplineDoubleKeyFrame KeyTime="00:00:05" Value="1" /> </DoubleAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </EventTrigger> </Canvas.Triggers> <TextBlock x:Name="lbKurz" Canvas.Left="10" Canvas.Top="10" FontSize="24" FontWeight="Bold" Foreground="Gray" Text="Kurz:" TextWrapping="Wrap" /> <TextBlock x:Name="lbMena" Canvas.Left="100" Canvas.Top="8" FontSize="24" FontWeight="Bold" Foreground="Blue" Text="GBP Ve ká Británia" TextWrapping="Wrap" /> <Canvas Opacity="0" x:Name="canvas1" Width="470" Height="150" Canvas.Left="10" Canvas.Top="50"> <TextBlock x:Name="lbNakup" Width="205" Height="59" FontFamily="Tahoma" FontSize="48" FontWeight="Bold" Foreground="Orange" Text="52,2" TextWrapping="Wrap" Canvas.Left="100" Canvas.Top="10" /> <TextBlock x:Name="lbPredaj" Width="205" Height="59" FontFamily="Tahoma" FontSize="48" FontWeight="Bold" Foreground="Blue" Text="53,2" TextWrapping="Wrap" Canvas.Left="100" Canvas.Top="80" /> </Canvas> </Canvas>

<script type="text/javascript" src="Silverlight.js"></script>

<script type="text/javascript"> Sys.Silverlight.createObjectEx({ source: "http://localhost:49267/KurzWS/UpravyXAML.aspx" parentElement: document.getElementById("SilverlightControlHost"), id: "SilverlightControl", properties: {width: "100%", height: "100%", version: "1.0"}, events: {onLoad: null} }); </script>

54

<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> </script>

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Aktualny kurz</title> <script type="text/javascript" src="Silverlight.js"></script> </head> <body> <div id='SilverlightControlHost'> <script type="text/javascript"> Sys.Silverlight.createObjectEx({ source: "http://localhost:49267/KurzWS/UpravyXAML.aspx" , parentElement: document.getElementById("SilverlightControlHost"), id: "SilverlightControl", properties: {width: "100%", height: "100%", version: "1.0"}, events: {onLoad: null} }); </script> </div>

</body> </html>

Expression Encoder



56

Pracovná plocha nástroja Expression Encoder po naimportovaní videosúboru

Proces kódovania spustíme bu pomocou tlapomocou skrátenej vo na

konto na Live ID (vi ).

obsahova tieto riadky:

<SilverlightApp> <version>1.0</version> <loadFunction>StartWithParent</loadFunction> <jsOrder> <js>MicrosoftAjax.js</js> <js>BasePlayer.js</js> <js>PlayerStrings.js</js> <js>player.js</js> <js>StartPlayer.js</js> </jsOrder> </SilverlightApp>

http://silverlight.live.com súbory

a



Po zatvorení projektu sa informácie o

<?xml version="1.0" encoding="utf-16"?>  <JobFile Version="1.0"> <Job OutputDirectory="C:\Users\Luboslav Lacko\Documents\Expression\Expression Encoder\Output"> <MediaFiles> <MediaFile Source="C:\b\Keyboard.wmv" VideoProfile="Streaming420" AudioProfile="AudioMediumQuality" /> </MediaFiles> </Job> </JobFile>

Silverlight Streaming by Windows Live

ovakos

Silverlight versus Flash

a

písa

vek

58

Záverom inov na ceste k dizajnovo bohatým a interaktívnym

oraz viac smerova k 3D