skriptovanie a udalosti myši

skriptovanie a udalosti

Silverlight vám dovoľuje spúšťať Javasript-ový kód ak nastane udalosť, ako načítanie objektu, alebo kliknutie myši na objekt. Takýto skript sa nazýva "event handler" (zachytávač udalosti).

K nadefinovaniu event handlera (zachytávača udalosti) nasledujte tri kroky.

1. Vo vašom XAML súbore pridajte nasledujúci atribút objektu, ktorý bude spúšťať vašu funkciu.

   nejakáUdalosť="mojaFunkcia"

   ...kde nejakáUdalosť je udalosť, na ktorú chcete zareagovať a mojaFunkcia je názov funkcie, ktorá obslúži túto udalosť.

2. Definute funkciu vo vašom JavaScript-ovom súbore. (Pre informácie o nastavení JavaScript-ového súboru navštívte tento odkaz - vytvorenie Silverlight projektu.)

Teraz vyskúšajte ukážku. V Silverlight-e, všetky Canvas (plátno) a elementy tvarov majú udalosť nazvanú MouseLeftButtonDown (stlačenie ľavého tlačítka myši), ktorá nastane, keď užívateľ stlačí ľavé tlačítko myši dole, pokiaľ ukazovateľ myši je nad elementom.  Napíšete zachytávač udalostí (event handler) pre túto udalosť, ktorý využíva JavaScript-ovú alert (výstraha) funkciu k vytvoreniu dialógového okna.

[hide XAML]

<Canvas Height="300" Width="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Background="transparent"
   MouseLeftButtonDown="helloworld">
   
  <TextBlock Text="click
          me"  FontSize="50"/>
</Canvas>

[hide JavaScript]

function helloworld()
            { alert("hello world");
            } 

[hide] [restart]

Nemusíte špecifikovať parametre, keď deklarujete funkciu event handlera (zachytávača udalostí). Ale ak parametre špecifikujete, prvý parameter - sender (odosielateľ), je element, ktorý spustil udalosť. Druhý parameter - args (argumenty), je objekt, ktorý obsahuje dáta o udalosti. Avšak, nie všetky udalosti budú prenášať špecifické informácie o udalosti v args; častejšie hodnota tohto parametra je null a nie je vhodná pre váš event handler (zachytávač udalostí).

nastavovanie vlastností

Môžete nastavovať vlastnosti objektov Silverlight-u využitím JavaScript-u. Ak vlastnosť získa hodnotu, ktorá je textový reťazec, alebo číslo, môžete ju nastaviť normálne v JavaScript-e. Ak vlastnosť získa objekt Silverlight-u a je typovo konvertovateľný, ako napríklad SolidColorBrush alebo Point, môžete nastaviť hodnotu použitím textového reťazca. Ináč musíte použiť metódu createFromXaml k inštanciovaniu novej hodnoty vlastnosti.

Nasledujúca ukážka registruje pre udalosť MouseLeftButtonDown (stlačenie ľavého tlačítka myši) objektu Canvas. V event handler-i (zachytávači udalostí), parameter sender poskytuje prístup ku objektu Canvas. Ukážka nastaví vlastnosť Background (pozadie) objektu Canvas na červenú a zobrazí aktuálnu hodnotu vlasnosti Height (výška).

[hide XAML]

<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Background="Transparent"
   MouseLeftButtonDown="changecolor">
   
  <TextBlock Text="click
          me"  FontSize="50"/>
</Canvas>

[hide JavaScript]

function changecolor(sender, args) {
    sender.background = 
            "red";
    
    alert("Height
        is " + sender.Height);
}

[hide] [restart]

nastavovanie pripojených vlastností

K nastaveniu hodnoty pripojenej vlastnosti, ako napríklad Canvas.Top, v Javascript-e, použite nasledujúcu syntax.

....kde názovPripojenejVlastnosti je názov pripojenej vlastnosti, ktorú chcete nastaviť.

Nasledujúca ukážka nastavuje vlastnosť Canvas.Top objektu TextBlock na 70, keď je stlačené ľavé tlačítko myši.

[hide XAML]

<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Background="Transparent">
    
  <TextBlock Text="click
          me"  FontSize="50" 
     MouseLeftButtonDown="changelocation" />
</Canvas>

[hide JavaScript]

function changelocation(sender, args) {
    
    sender["Canvas.Top"] 
            = 70;
}

[hide] [restart]

spoločné udalosti myši

Objekty UIElement poskytujú množstvo rôznych udalostí myši, ktoré môžete obsluhovať: MouseLeftButtonDown (stlačenie ľavého tlačítka myši), MouseLeftButtonUp (pustenie ľavého tlačítka myši), MouseEnter (vyvolaná, keď myš prejde ponad element), MouseLeave (odchod myši), a MouseMove (vyvolaná, keď myš prejde vnútrom elementu).  Udalosti myši majú objekt "args" ktorý poskytuje pozíciu x a y myši, keď nastala udalosť, ktorú typicky referencujete v zachytávači pre udalosti myši.

Nasledujúca ukážka využíva každú z týchto udalosti myši na modifikáciu vzhľadu Elipsy.

[hide XAML]

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   
  <Ellipse x:Name="e1" MouseMove="e1Move"
      MouseEnter="e1Enter" MouseLeave="e1Leave"
      MouseLeftButtonDown="e1Down" MouseLeftButtonUp="e1Up"
      Height="100" Width="100" Canvas.Left="80" Canvas.Top="30"
      Stroke="Black" StrokeThickness="10" Fill="LightBlue"/>
</Canvas>

[hide JavaScript]

function e1Enter(sender, args) {
    sender.stroke = "red";
}

function e1Leave(sender, args) {
    sender.stroke = "black";
}

function e1Down(sender, args) {
    sender.fill = "Green";
}

function e1Up(sender, args) {
    sender.fill = "LightBlue";
}

function e1Move(sender, args) {
    sender.fill = "yellow";
}

[hide] [restart]

Ďalšou veľmi užitočnou udalosťou pre programovanie v Silverlight-e je udalosť Loaded (načítaný). Obvykle registrujete handlery (zachytávače) pre túto udalosť s deklaráciou v root elemente, ale Loaded môže byť špecifikovaná na akomkoľvek UIElement, nie iba na roote. Udalosť Loaded poskytuje dobrú možnosť k aplikovaniu akýchkoľvek posledných zmien pred zobrazením vášho Silverlight obsahu. Nasledujúca ukážka využíva zachytávač udalosti Loaded k zmene vlastnosti Fill (výplň) objektu Elipsa z Modrej na Červenú.

[hide XAML]

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Ellipse Loaded="ellipse_loaded"
     Height="200" Width="200" 
     Canvas.Left="30" Canvas.Top="30"
     Stroke="Black" StrokeThickness="10" Fill="LightBlue"/>
</Canvas>

[hide JavaScript]

function ellipse_loaded(sender, args) {
    sender.Fill = 
            "Red";
}

[hide] [restart]

pomenovanie objektov a ich získavanie

Predchádzajúce ukážky využívali Javascript-ové zachytávače udalostí k modifikovaniu objektov, ktoré spôsobili udalosť, ale čo sa stane, ak chcete použiť metódy, alebo nastaviť vlastnosti iného objektu ako je sender (spúšťač udalosti)? Silverlight elementy poskytujú metódu nazvanú FindName (nájdi meno), ktorá vám umožňuje získať Silverlight objekty z akejkoľvek súradnicovej sústavy v rámci obsahu Silverlight. K použitiu FindName k získaniu objektu, musíte najprv špecifikovať atribút x:Name (alebo atribút/vlastnosť Name, ktorá je v podstate ekvivalentná) k pomenovaniu objektu, keď ho deklarujete v XAML.

Nasledujúca ukážka mení vlastnosť Fill (výplň) objektu Elipsa, keď je stlačené ľavé tlačíko myši ponad jej rodiča - Canvas. Keď Canvas vyvolá udalosť, funkcia changeEllipseColor je zavolaná s odosielateľom - Canvas. Funkcia zavolá metódu sender.findName() k získaniu objektu nazvaného myEllipse a nastaví jeho vlastnosť Fill (výplň) na Červenú.

[hide XAML]

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Background="Transparent"
   MouseLeftButtonDown="changeEllipseColor">
    
  <TextBlock Text="click
          me"  FontSize="50"/>
  <Ellipse x:Name="myEllipse" 
    Height="200" Width="200" 
    Canvas.Left="30" Canvas.Top="80"
    Stroke="Black" StrokeThickness="10" Fill="LightBlue"/>
</Canvas>

[hide JavaScript]

function changeEllipseColor(sender, args) {
    sender.findName("myEllipse").Fill = "red";
}

[hide] [restart]

dynamické vytváranie Silverlight objektov

Môžete použiť metódu CreateFromXaml k vytvoreniu nového Silverlight objektu v JavaScript-e. Ale predtým ako môžete použiť metódu CreateFromXaml, musíte získať referenciu k inštancii Silverlight plug-in.

• Ak už máte referenciu k akémukoľvek Silverlight objektu, môžete použiť metódu GetHost k získaniu referencie k inštancii plug-inu, na ktorom beží.
• Inak použite metódu document.getElementById k získaniu inštancie plug-inu.

Nasledujúca ukážka vytvorí nový objekt Elipsa a pridá ho do Canvas-u každý raz, keď je stlačené ľavé tlačítko myši. Nezabudnite, i keď pridávate viacero objektov ak kliknete viac ako jedenkrát, uvidíte stále iba jednu elipsu. Je to preto, lebo všetky elipsy vyzerajú rovnako a sú nakreslené na sebe.

[hide XAML]

<Canvas Width="300" Height="300"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="Transparent"
    MouseLeftButtonDown="createEllipse">
    
  <TextBlock Text="click
          for circle"  FontSize="40"/>
</Canvas>

[hide JavaScript]

function createEllipse(sender, args) {
    
    var slControl = sender.getHost();
    var e = 
        slControl.content.createFromXaml(
            '<Ellipse Height="200" Width="200" Fill="Blue"/>');
    var canvas = sender;
    canvas.children.Add(e);
}

[hide] [restart]

Nezabudnite, že JavaScript vyžaduje od vás umiestnenie textových reťazcov na jednom riadku, inak kombinujete viac reťazcov použitím operátora +.  Tiež nezabudnite na použitie oboch, jednoduchých úvodzoviek (') a dvojitých úvodzoviek (") v XAML reťazci <Ellipse>. Začiatok a koniec JavaScript-ového reťazca s jednoduchými úvodzovkami vám umožňuje použiť dvojité úvodzovky pre hodnoty v reťazci XAML, alebo obrátene. Preto sa uistite, že máte správny počet jednoduchých a dvojitých úvodzoviek v reťazci.

dynamické vytváranie Silverlight objektov manipuláciou s reťazcami XAML

Predchádzajúca ukážka zobrazila jeden potenciálne nežiaduci bočný efekt pridávania toho istého XAML na stránku viac ako jedenkrát. Ak chcete pridať objekty pomocou XAML, je žiadúce nejako zmeniť toto XAML každý raz. Môžete to urobiť pomocou úpravy reťazca XAML tesne pred každým volaním.

Nasledujúca ukážka vytvára nový objekt Elipsa a pridá ho do Canvas-u každý raz, keď ľavé tlačítko myši je stlačené, ale vždy sa zmenia tri vlastnosti objektu Elipsa, aby ste mohli vidieť, že sú tu reálne viaceré objekty pridané na stránku.

[hide XAML]

<Canvas Width="300" Height="300"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="Transparent"
    MouseLeftButtonDown="createEllipse2">
    
  <TextBlock Text="click
          for Lots of circles"  FontSize="20"/>
</Canvas>

[hide JavaScript]

var opacitychange = 1;
var canvastop = 0;
var canvasleft = 0;
function createEllipse2(sender, args) {
    
    var slControl = sender.getHost();
    xamlstring = '<Ellipse Height="10" Width="10" Fill="Red"';
    xamlstring += " Opacity = '" + (opacitychange-=0.1) + "'";
    xamlstring += " Canvas.Left = '" + (canvasleft+=15) + "'";
    xamlstring += " Canvas.Top = '" + (canvastop+=15) + "'";
    xamlstring += "/>";
    var e = slControl.content.createFromXaml(xamlstring);
    var canvas = sender;
    canvas.children.Add(e);
}

[hide] [restart]

interaktívne ovládanie animácií

Môžete použiť event handlery ku ovládaniu animácií. Priraďte meno objektu Storyboard, ktorý chete ovládať a potom môžete použiť jeho begin, Stop, Pause, a Resume metódu k jeho interaktívnemu ovládaniu. Ak nechcete, aby objekt Storyboard začal automaticky, musíte to deklarovať skôr ako vo vnútri EventTrigger.

[hide XAML]

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   
  <Canvas.Resources>

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

  </Canvas.Resources>
  
  <Ellipse x:Name="e1"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="30">
    <Ellipse.Fill>
      <RadialGradientBrush GradientOrigin="0.75,0.25">
        <GradientStop Color="White" Offset="0.0" />
        <GradientStop Color="Black" Offset="0.5" />        
      </RadialGradientBrush>    
    </Ellipse.Fill>
  </Ellipse>
  
  <Canvas MouseLeftButtonDown="animation_stop" Canvas.Left="20" Canvas.Top="60">
    <Rectangle Stroke="Black" 
       Height="40" Width="40" RadiusX="5" RadiusY="5">
      <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.75,0.25">
          <GradientStop Color="Orange" Offset="0.0" />
          <GradientStop Color="Red" Offset="1.0" />        
        </RadialGradientBrush>
      </Rectangle.Fill>       
    </Rectangle>
    <TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock> 
  </Canvas>
  
  <Canvas MouseLeftButtonDown="animation_pause" 
     Canvas.Left="70" Canvas.Top="60">
    <Rectangle Stroke="Black" 
       Height="40" Width="50" RadiusX="5" RadiusY="5">
      <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.75,0.25">
          <GradientStop Color="Yellow" Offset="0.0" />
          <GradientStop Color="Orange" Offset="1.0" />        
        </RadialGradientBrush>
      </Rectangle.Fill>       
    </Rectangle>
    <TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock> 
  </Canvas>
  
  <Canvas MouseLeftButtonDown="animation_begin" Canvas.Left="130" Canvas.Top="60">
    <Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
       Height="40" Width="50">
      <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.75,0.25">
          <GradientStop Color="LimeGreen" Offset="0.0" />
          <GradientStop Color="Green" Offset="1.0" />        
        </RadialGradientBrush>
      </Rectangle.Fill>
    </Rectangle>
    <TextBlock Canvas.Left="5" Canvas.Top="5">begin</TextBlock> 
  </Canvas>
</Canvas>

[hide JavaScript]

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

function animation_pause(sender, args) {
    sender.findName("animation").pause();
}

function animation_begin(sender, args) {
    sender.findName("animation").begin();
}

[hide] [restart]

použitie metódy getElementById k vytvoreniu, alebo získaniu objektu

Ak píšete skript, ktorý nie je obsluhovaný pomocou udalosti Silverlight (ako napríklad event handler HTML), nebudete mať parameter sender, ktorý poskytuje prístup k metóde FindName, alebo GetHost. V tomto prípade môžete použiť document.getElementById() k nájdeniu plug-inu Silverlightu, potom použite tento plug-in k zavolaniu metódy FindName.

Nasledujúca ukážka využíva metódu document.getElementById() k nájdeniu inštancie plug-inu Silverlight pomenovanej sl9. Potom použije metódu FindName k získaniu inštancie plug-inu Silverlight pomenovanej myEllipse a zmení jej vlastnosť Fill (výplň) na červenú.

[hide XAML]

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Background="Transparent"
   MouseLeftButtonDown="changeEllipseColor2">
   
  <TextBlock Text="click
          me"  FontSize="50"/>
  <Ellipse x:Name="myEllipse" 
    Height="200" Width="200" 
    Canvas.Left="30" Canvas.Top="80"
    Stroke="Black" StrokeThickness="10" Fill="LightBlue"/>
</Canvas>

[hide JavaScript]

function changeEllipseColor2() {
    var sl9 = document.getElementById("sl9");
    sl9.content.findName("myEllipse").fill = "red";

}

[hide] [restart]

V predchádzajúcej ukážke, sl9 je HTML DOM ID inštancie plug-inu Silverlight, ktorú ste vytvorili v rodičovskom HTML súbore, keď ste zavolali metódu Silverlight.createObject(), tak ako je to popísané v dokumente čast 1: vytvorenie Silverlight projektu.

        // Retrieve the div element you created in the previous step.
        var mySilverlightPluginHost = document.getElementById("sl9Host");
        createMySilverlightPlugin();

        Silverlight.createObject(
             "sl9.xaml", 
             sl9Host, 
             "sl9",
             {
                  width:'300', 
                  height:'300', 
                  inplaceInstallPrompt:false, 
                  background:'#D6D6D6', 
                  isWindowless:'false', 
                  framerate:'24', 
                  version:'1.0'},
             {onError:null, onLoad:null},
             null);

čo ďalej?

Ďalšia časť ukážkové komponenty popisuje ako vytvoriť základné komponenty.