Silverlight 3.0 : Vývoj Silverlight 3.0 projektov v prostredí Visual Studio 2008 (alebo Visual Web Developer 2008 Express Edition)
Pre vývoj Silverlight 3 aplikácií v prostredí Visual Studio 2008, prípadne Visual Web Developer 2008 Express Edition je potrebné ich najskôr (ak už nemáte) doplniť o balíček SP1 a následne nainštalovať doplnok Silverlight Tools 3.0 pre Visual Studio 2008.
Inštalácia Silverlight Tools 3.0 pre Visual Studio 2008
Po nainštalovaní doplnku Silverlight Tools 3.0 pre Microsoft Visual Studio 2008 sú k dispozícii tri šablóny pre vývoj Silverlight aplikácií:
- Silverlight Application,
- Silverlight Class Library,
- Silverlight Navigation Application.
Šablóna projektu Silverlight Navigation Application sa od Silverlight Application líši tým, že projekt obsahuje aj hlavnú stránku aplikácie s navigačnými prvkami, ktorá umožňuje jednoduché a intuitívne prepínanie podstránok.
Ponúkané typy Silverlight projektov
Úvodná Silverlight 3.0 aplikácia v prostredí Visual Studio 2008
Vo väčšine publikácií venovaných začiatočníkom je aplikácia typu „Hello World“, ktorá po stlačení nejakého aktívneho prvku vypíše na obrazovku nejaký text, najčastejšie pozdrav. Aby sa začiatočníci pri čítaní tohto zborníku necítili ukrátení, bude aj tu jednoduchý príklad tohto typu aplikácie, no aby boli demonštrované vizuálne možnosti a interaktivita technológie Silverlight 3.0 bude projekt po stlačení tlačidla zobrazovať zadané meno a dátum vybraný pomocou grafického interaktívneho prvku typu kalendár.
Vytvorte nový projekt typu Silverlight Application, napríklad s názvom HelloSL3. Po výbere typu aplikácie nasleduje otázka ohľadne spôsobu spúšťania Silverlight aplikácie. Nakoľko ide o webovú aplikáciu odporúčame ponechať implicitnú možnosť pridať hosťovaciu stránku do projektu ASP.NET aplikácie.
Výber spôsobu hosťovania Silverlight aplikácie
Po voľbe základných parametrov, teda názvu projektu, jeho umiestnenia a programovacieho jazyka, modul vývojového prostredia nazývaný „Sprievodca vytvorením aplikácie“ vytvorí prázdnu šablónu aplikácie, čiže ľudovo povedané aplikáciu, ktorá zatiaľ nič nerobí a nič nezobrazuje. V prípade šablóny Silverlight Navigation Application sa vytvorí aj hlavná stránka aplikácie s navigačnými prvkami.
Zoznámenie sa s návrhovým prostredím
Po vytvorení projektu je pracovná plocha rozdelená na oblasť pre návrh v grafickom prostredí v hornej časti a okno pre zobrazenie XAML kódu v spodnej časti. Vpravo sú okná Solution Explorer a Properties. Vľavo môžete zobraziť okno Toolbox s ponukou prvkov pre grafický návrh.
Prostredie pre vývoj Silverlight aplikácie so zobrazeným oknom Toolbox (Visual Web Developer 2008 Express Edition)
UPOZORNENIE: V aktuálnej verzii Silverlight Tools 3.0 pre Visual Studio 2008 nie je k dispozícii grafický náhľad XAML stránok. Táto funkcionalita bude naplno implementovaná v ďalšej verzii Visual Studio 2010, možno na určitej úrovni funkcionality aj v ďalšej verzii Silverlight Tools 3.0 pre Visual Studio 2008.
XAML kód v súbore MainPage.xaml obsahuje definíciu pracovnej plochy:
<UserControl x:Class="HelloSL3.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
</Grid>
</UserControl>
V stránke je element Grid, ktorý umožňuje rozmiestňovanie prvkov na relatívne alebo v prípade potreby aj absolútne pozície a má podobné vlastnosti ako tabuľka na HTML stránke. Ak by ste sa v tejto verzii pokúsili pridať vizuálny prvok z okna Toolbox priamo na návrhovú plochu, neuspeli by ste. Prvky sa pridávajú priamo do XAML kódu. Pri zadávaní vlastností prvku je výhodné využiť črtu Intellisense, ktorá vám formou interaktívneho pomocníka ponúka názvy parametrov a kostru syntaxe pre ich zápis. Tento pomocník funguje nielen pre XAML a kľúčové slová a objekty programovacích jazykov, ale aj pre HTML dokumenty, ASP.NET tagy a podobne. Ako prvý pokus môžete zmeniť farbu pozadia.
Využitie Intellisense pre pridávanie a nastavovanie parametrov
Aby sa vám s prvkom Grid pri rozmiestňovaní vizuálnych prvkov lepšie pracovalo môžete si ho vhodne rozdeliť na riadky a stĺpce a pomocou nastavenia parametra ShowGridLines="True" nastaviť zobrazovanie mriežky:
<Grid x:Name="LayoutRoot" Background="FloralWhite" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="220"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75" />
<ColumnDefinition Width="325"/>
</Grid.ColumnDefinitions>
</Grid>
Prvé spustenie aplikácie
Po ukončení prvej etapy návrhu prezentačnej a aplikačnej vrstvy, v tomto príklade je vlastne len zobrazená mriežka tabuľky, nastala príležitosť pre prvé spustenie aplikácie. Pre tento účel slúži buď tlačidlo nástrojovej lišty v tvare zelenej šípky, alebo položka menu Debug | Start, prípadne klávesová skratka F5. O preklade a zostavení aplikácie získate prehľadný výpis v okne „Output“.
XAML kód bol preložený do „assembly“ súboru. Tento súbor má príponu „XAP“ a nachádza sa v podpriečinku projektu ...\ Bin.
Poznámka: Ak si „binárny“ XAP súbor pozriete binárnym editorom alebo prehľadávačom, zistíte, že prvé dva znaky „PK“ avizujú, že ide o ZIP archív. Ak si teda súbor s príponou XAP skopírujete do pomocného priečinka a premenujete jeho príponu na „ZIP“, môžeme z tohto archívu vybaliť dva súbory: AppManifest.xaml a SilverApp.dll.
Pri prvom spustení aplikácie vás vývojové prostredie upozorní, že v konfiguračnom súbore pre webové aplikácie nie je povolené ladenie. Ak chcete ladenie povoliť, čo samozrejme odporúčame, vytvorí vývojové prostredie lokálny súbor web.config, platný pre konkrétnu aplikáciu, v ktorom bude ladenie povolené.
Dialóg pre povolenie ladenia hosťujúcej ASP.NET aplikácie
Po spustení aplikácie bude aktivovaný samostatný webový listener, ktorý je integrálnou súčasťou vývojového prostredia. Jeho činnosť je indikovaná ikonou v pravom dolnom rohu obrazovky operačného systému (v blízkosti ikony času a ikony prepínania lokálnej klávesnice). Aktivovaním tejto ikony môžete kedykoľvek zistiť podrobnosti o parametroch tohto lokálneho webového servera. V informačnom dialógu sa dozvieme aký port, fyzický a virtuálny priečinok tento server používa a na akej URL adrese je prístupná konkrétna aplikácia.
Listener pre spustenie hosťujúcej ASP.NET aplikácie
Následne po spustení lokálneho webového listenera bude v jeho réžii spustená aplikácia samotná. URL adresu aplikácie je možné vložiť do iných prehľadávačov (Firefox, Chrome...).
Ak máte implicitne nastavený prehľadávač, budete v závislosti od jeho verzie požiadaní, aby ste prípadne povolili spúšťanie a zobrazovanie intranetových aplikácií.
Spustenie aplikácie
Návrh formulára pre interakciu s používateľom
Formulár bude obsahovať textové nápisy v prvkoch TextBlock, pole typu TextBox pre vstup textu a grafický prvok Calendar. Pre každý prvok je potrebné definovať jeho umiestnenie v rámci mriežky Grid, ktorá bude zabezpečovať relatívnu polohu prvkov voči sebe aj pri prípadnej zmene veľkosti okna. Postup návrhu je zrejmý z obrázku a výpisu XAML kódu.
Ešte raz zdôrazňujeme, že v prostredí Visual Studio 2008 prvky nepridávate na návrhovú plochu, ale na vhodné miesto XAML kódu do vnútra tagu <Grid>.
Aby bolo možné s obsahom prvkov pracovať v kóde, je potrebné prvky identifikovať podľa názvu, preto je ich potrebné v XAML kóde pomenovať. Pomenovať je potrebné prvky pre zadanie mena, kalendárový prvok a prvok pre vypísanie oznamu:
<Grid x:Name="LayoutRoot" Background="FloralWhite" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="220"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75" />
<ColumnDefinition Width="325"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Meno:" Grid.Row="0" Grid.Column="0"></TextBlock>
<TextBlock Text="Datum:" Grid.Row="1" Grid.Column="0"></TextBlock>
<TextBlock x:Name="TX1" Text="Oznam:" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"></TextBlock>
<TextBox x:Name="TB1" Text="Zadaj meno..." Grid.Row="0" Grid.Column="1" Width="150"
HorizontalAlignment="Left"></TextBox>
<controls:Calendar x:Name="CAL1"Grid.Row="1" Grid.Column="1"></controls:Calendar>
<Button Grid.Row="1" Grid.Column="1" Width="50" Height="25" HorizontalAlignment="Right"
Content="OK"></Button>
</Grid>
Návrh formulára aplikácie
Kód pre obsluhu udalostí
Každú aplikáciu tvorí aplikačná a prezentačná vrstva. Úlohou aplikačnej vrstvy je pracovať s údajmi a premennými a pripraviť údaje, ktoré sa zobrazia používateľovi. Úlohou prezentačnej vrstvy je výpis týchto údajov vo vhodnej forme. Keby ste aplikáciu v tejto fáze spustili, zobrazil by sa formulár pre zadávanie a zobrazovanie údajov, no po zatlačení tlačidla by sa nič nestalo. Aplikačný kód vlastne vdýchne aplikácii život.
Pre tlačidlo pridajte parameter Click. Po pridaní tohto parametra sa pridá do XAML kódu text Click =““. Medzi úvodzovky bude automaticky umiestnená položka kontextového menu pre vytvorenie obslužnej procedúry udalosti kliknutia na tlačidlo.
Pridanie odkazu na obslužný kód udalosti prvku
Kliknutím na túto položku bude vytvorené telo obslužnej procedúry, čiže jej prázdny kód. V súbore MainPage.xaml.cs bude kostra kódu procedúry pre obsluhu udalosti kliknutia na tlačidlo:
namespace HelloSL3
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
}
}
}
Kód po stlačení tlačidla vypíše text zadaný v poli meno a dátum vybraný cez kalendárový prvok. V kóde je ošetrená aj situácia ak dátum nie je vybraný:
private void Button_Click(object sender, RoutedEventArgs e)
{
string dateString;
if (CAL1.SelectedDate == null)
{
dateString = "";
}
else
{
dateString = CAL1.SelectedDate.ToString();
}
TX1.Text = "Hello " + TB1.Text + "\n" + "Datum: " + dateString;
}
Spustenie aplikácie
Projekt typu Silverlight Navigation Application
Projekt typu Silverlight Navigation Application obsahuje navigačnú stránku, pomocou ktorej je možné sa prepínať na ďalšie stránky projektu.
Silverlight aplikácia s navigačnou stránkou (Visual Web Developer 2008 Express Edition)
Novú stránku pridáte do projektu cez položku Add New Item, aplikovanú na priečinok Views a v rovnomennom dialógu vyberiete položku Silverlight Page.
Možnosti pridania novej entity do Silverlight aplikácie
Do kódu stránky pridajte nejaký grafický prvok, alebo text, aby ste ju po spustení aplikácie vedeli identifikovať:
<navigation:Page x:Class="SilverlightApplication2.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
d:DesignWidth="640" d:DesignHeight="480" Title="Page1 Page">
<Grid x:Name="LayoutRoot">
<TextBlock Text="Nová stránka" ></TextBlock>
</Grid>
</navigation:Page>
Nová XAML stránka
Aby sa stránka sprístupnila, je potrebné pridať prepojenie na hlavnú stránku Silverlight aplikácie MainPage.XAML. V našom prípade bol pridaný objekt HyperlinkButton a oddeľovací obdĺžnik:
<Grid x:Name="LayoutRoot" Style='{StaticResource LayoutRootGridStyle}'>
<Border x:Name='ContentBorder' Style='{StaticResource ContentBorderStyle}'>
<navigation:Frame x:Name='ContentFrame' Style='{StaticResource ContentFrameStyle}'
Source='/Home' Navigated='ContentFrame_Navigated'
NavigationFailed='ContentFrame_NavigationFailed'>
<navigation:Frame.UriMapper>
<uriMapper:UriMapper>
<uriMapper:UriMapping Uri='' MappedUri='/Views/Home.xaml'/>
<uriMapper:UriMapping Uri='/{pageName}'
MappedUri='/Views/{pageName}.xaml'/>
</uriMapper:UriMapper>
</navigation:Frame.UriMapper>
</navigation:Frame>
</Border>
<Grid x:Name='NavigationGrid' Style='{StaticResource NavigationGridStyle}'>
<Border x:Name='BrandingBorder' Style='{StaticResource BrandingBorderStyle}'>
<StackPanel x:Name='BrandingStackPanel' Style='{StaticResource
BrandingStackPanelStyle}'>
<ContentControl Style='{StaticResource LogoIcon}'/>
<TextBlock x:Name='ApplicationNameTextBlock'
Style='{StaticResource ApplicationNameStyle}'
Text='Application Name'/>
</StackPanel>
</Border>
<Border x:Name='LinksBorder' Style='{StaticResource LinksBorderStyle}'>
<StackPanel x:Name='LinksStackPanel'
Style='{StaticResource LinksStackPanelStyle}'>
<HyperlinkButton x:Name='Link1' Style='{StaticResource LinkStyle}'
NavigateUri='/Home' TargetName='ContentFrame' Content='home'/>
<Rectangle x:Name='Divider1' Style='{StaticResource DividerStyle}'/>
<HyperlinkButton x:Name='Link3' Style='{StaticResource LinkStyle}'
NavigateUri='/Page1' TargetName='ContentFrame' Content='moja stránka'/>
<Rectangle x:Name='Divider2' Style='{StaticResource DividerStyle}'/>
<HyperlinkButton x:Name='Link2' Style='{StaticResource LinkStyle}'
NavigateUri='/About' TargetName='ContentFrame' Content='about'/>
</StackPanel>
</Border>
</Grid>
</Grid>
Nová XAML stránka
Ak chcete využiť túto šablónu projektu , jedným z prvých krokov bude aj zmena názvu aplikácie. Je potrebné zmeniť atribút Text objektu ApplicationNameTextBlock z Application Name na vlastný názov. Moja super aplikácia.
Komplexný dizajn aplikácie je v súbore Styles.xaml. Tento súbor sa nachádza v priečinku Assets. Výpis je skrátený. Môžete skúsiť experimentovať so zmenou farieb, štýlu a podobne:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation">
<!-- ******MAIN PAGE STYLES****** -->
<!-- **************************** -->
<!-- Primary Color Brushes -->
<SolidColorBrush x:Key="NavigationBackgroundColorBrush" Color="#FF484848"/>
<SolidColorBrush x:Key="NavigationForegroundColorBrush" Color="#FFFFFFFF"/>
<SolidColorBrush x:Key="HighLightColorBrush" Color="#FF0097FC"/>
<SolidColorBrush x:Key="HoverHyperlinkForegroundColorBrush" Color="#FFEBF7FF"/>
<SolidColorBrush x:Key="HoverHyperLinkBackgroundColorBrush" Color="#FF747474"/>
<SolidColorBrush x:Key="BodyTextColorBrush" Color="#FF313131"/>
<!-- LayoutRoot Grid Style -->
<Style x:Key="LayoutRootGridStyle" TargetType="Grid">
<Setter Property="Background" Value="#FFFFFFFF"/>
</Style>
<!-- Content Border Style -->
<Style x:Key="ContentBorderStyle" TargetType="Border">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,0.045" StartPoint="0.5,0">
<GradientStop Color="#6FCCCCCC"/>
<GradientStop Color="#00CCCCCC" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="#FFFFFFFF"/>
<Setter Property="BorderThickness" Value="0,3,0,0"/>
<Setter Property="Margin" Value="0,42,0,0"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>
<!-- Content Frame Style -->
<Style x:Key="ContentFrameStyle" TargetType="navigation:Frame">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="58,15,58,15"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
...
Vývoj toho istého projektu v prostredí Expression Blend 3 a Visual Studio 2008
Moderná interaktívna webová aplikácia vzniká za intenzívnej spolupráce dizajnérov prezentačnej vrstvy aplikácie a vývojárov aplikačnej logiky. Keď návrhár predloží definitívny návrh ako by mala aplikácia vyzerať, začnú vývojári pracovať na implementácii tohto návrhu.
Vývojár sa pri implementácii návrhov dizajnéra riadi možnosťami prezentačnej vrstvy a návrhového prostredia, takže výsledná podoba niektorých ovládacích prvkov je iná než bola pôvodne navrhnutá. 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čené, že výsledná podoba aplikácie bude presne zodpovedať návrhu dizajnéra. V praxi to funguje tak, že dizajnér odovzdá svoj návrh vývojárskemu tímu v jazyku XAML a vývojársky tím do návrhu naprogramuje aplikačnú logiku.
Všimnite si, že kontextové menu XAML stránok obsahuje aj položku Open in Expression Blend...
Zmeny vykonané návrhovom prostredí Expression Blend 3 sú po upozornení následne akceptované aj v prostredí Visual Studio 2008 a naopak.
Späť na obsah