18
Jaana Metsamaa Silverlight TARTU 2008

Asp.Net Silverlight Loeng

Embed Size (px)

Citation preview

Page 1: Asp.Net Silverlight Loeng

Jaana MetsamaaSilverlight

TARTU 2008

Page 2: Asp.Net Silverlight Loeng

Mis on Silverlight?

erinevad platvormid

plugi-in

RIA

erinevad veebilehitsejad

Page 3: Asp.Net Silverlight Loeng

Arhitektuur

Page 4: Asp.Net Silverlight Loeng

Töövahendid

Page 5: Asp.Net Silverlight Loeng

http://www.silverlight.net/GetStarted

Page 6: Asp.Net Silverlight Loeng

Silverlight 2 rakenduse ülesehitus

HTML

<OBJECT>

Silverlight Page.xaml.cs

Page.xaml

App.xaml

App.xaml.cs

.XAP

Page 7: Asp.Net Silverlight Loeng

XAML (Extensible Application Markup Language)

<UserControl xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><Grid x:Name=“LayoutRoot”> <TextBlock x:Name="txt" FontSize="32" Text="Tere maailm!“ />

<Button x:Name=“nupp“ Content=“Vajuta“ Click=“meetod" /></Grid></UserControl>

Page.xaml

<UserControl xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><Grid x:Name=“LayoutRoot”> <TextBlock x:Name="txt" FontSize="32" Text="Tere maailm!“ />

<Button x:Name=“nupp“ Content=“Vajuta“ Click=“meetod" /></Grid></UserControl>

Page.xaml

Page 8: Asp.Net Silverlight Loeng

XAML (Extensible Application Markup Language)

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <TextBlock x:Name="txt" FontSize="32" Text="Tere maailm!" /></Canvas>

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <TextBlock x:Name="txt" FontSize="32" Text="Tere maailm!" /></Canvas>

TextBlock t = new TextBlock();t.FontSize = 32;t.Text = "Tere maailm!";

TextBlock t = new TextBlock();t.FontSize = 32;t.Text = "Tere maailm!";

=C#

Page 9: Asp.Net Silverlight Loeng

Kasutajaelemendidkujundid,nupud, pildid, videod, tekstikastid,

kerimisribad jms.

Page 10: Asp.Net Silverlight Loeng

Transformatsioonid ja animatsioonid

RotateTransform

ScaleTransform

SkewTransform

TranslateTransform

Page 11: Asp.Net Silverlight Loeng

Transformatsiooni lisamine

<TextBlock x:Name="txt" FontSize="32" Text="Tere maailm!">

<TextBlock.RenderTransform><ScaleTransform ScaleX="2" ScaleY="2"/>

</TextBlock.RenderTransform></TextBlock>

<TextBlock x:Name="txt" FontSize="32" Text="Tere maailm!">

<TextBlock.RenderTransform><ScaleTransform ScaleX="2" ScaleY="2"/>

</TextBlock.RenderTransform></TextBlock>

ScaleTransform st = new ScaleTransform();st.ScaleX = 2;st.ScaleY = 2;txt.RenderTransfrom = st;

ScaleTransform st = new ScaleTransform();st.ScaleX = 2;st.ScaleY = 2;txt.RenderTransfrom = st;

=

Page 12: Asp.Net Silverlight Loeng

Animatsiooni lisamine<TextBlock x:Name="txt" Text="tere" FontSize="32"> <TextBlock.Resources> <Storyboard x:Name="Kuma"> <DoubleAnimation x:Name="Animatsioon" Storyboard.TargetName="txt" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="00:00:05" /> </Storyboard> </TextBlock.Resources> </TextBlock>

<TextBlock x:Name="txt" Text="tere" FontSize="32"> <TextBlock.Resources> <Storyboard x:Name="Kuma"> <DoubleAnimation x:Name="Animatsioon" Storyboard.TargetName="txt" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="00:00:05" /> </Storyboard> </TextBlock.Resources> </TextBlock>

Animatsioon.Begin();Animatsioon.Begin();

Page 13: Asp.Net Silverlight Loeng

Stiilid ja mallid

<Style x:Key="stiil" TargetType="TextBlock"> <Setter Property="FontSize" Value="24" /> <Setter Property="Margin" Value="5" /> <Setter Property="Foreground"> <Setter.Value> <LinearGradientBrush> <GradientStop Color = "LightBlue" Offset="0"/> <GradientStop Color="SteelBlue“ Offset="1"/> </LinearGradientBrush> </Setter.Value> </Setter> </Style>

<Style x:Key="stiil" TargetType="TextBlock"> <Setter Property="FontSize" Value="24" /> <Setter Property="Margin" Value="5" /> <Setter Property="Foreground"> <Setter.Value> <LinearGradientBrush> <GradientStop Color = "LightBlue" Offset="0"/> <GradientStop Color="SteelBlue“ Offset="1"/> </LinearGradientBrush> </Setter.Value> </Setter> </Style><TextBlock x:Name=“txt“ Text="Hei" Style="{StaticResource stiil}“ /><TextBlock x:Name=“a2“ Text=“Tere" Style="{StaticResource stiil}“ />

<TextBlock x:Name=“txt“ Text="Hei" Style="{StaticResource stiil}“ /><TextBlock x:Name=“a2“ Text=“Tere" Style="{StaticResource stiil}“ />

Page 14: Asp.Net Silverlight Loeng

Databinding• Kasutajaliides paika ja andmete pärast muretseme

hiljem

Page 15: Asp.Net Silverlight Loeng

Publitseerimine• Nõuded veebiserverile samad, mis HTML lehele.

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

<param name="source" value="Veeebileht.xap"/>

</object>

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

<param name="source" value="Veeebileht.xap"/>

</object>

Page 16: Asp.Net Silverlight Loeng

Silverlight Streaming

http://silverlight.live.com

Silverlight Streaming parameetrid on

järgmised:

ruumi 10GB;

5TB andmesidemahtu;

Võimalus hostida rakendus tervikuna või

osadena.

Page 17: Asp.Net Silverlight Loeng

Plussid ja miinused+ Mac, Windwos, Linux, Nokia, Windows Mobile+ Teada-tuntud tehnoloogiad+ Laialt levinud videoformaadid+ Kiirus

- Mac arendusvahendid- Veebikaamera ning mikrofon- Mitte nii väga platvormi sõltumatu

Page 18: Asp.Net Silverlight Loeng

Tänan