Blog o programowaniu w Silverlight i nie tylko.: Ping pong with html and Silverlight 2.0 RTW

W moim kolejnym artykule, chciałem Wam pokazać, jak w łatwy sposób odwoływać się do elementów kodu html z poziomu aplikacji Silverlight i na odwrót. Działanie aplikacji w połączeniu z Silverlightem zaprezentowałem na podstawie prostej "gry" ping pong. Z jednej strony gra kod html, a z drugiej Silverlight. Gracz ma 8 sekund na wciśnięcie przycisku, po tym czasie gra się niby kończy. Punktów nie ma, zasad nie ma, a wszystko dlatego, że jest to przykład do nauki a nie grania!

Ponieważ kod jest już nawet duży, to omówię tylko wybrane sposoby na odwołanie się do znaczników html, a po szczegóły implementacyjne odsyłam Was do kodu źródłowego aplikacji.

Aby Silverlight mógł zawołać html

Żeby odwołać się do elementu w kodzie html, najłatwiej nadać mu znacznik "id". Choć możemy to zrobić także przeszukując potomków w drzewie HtmlDocument Najpierw stwórzmy obiekt reprezentujący kod html, w którym umieszczona jest nasza aplikacja Silverlight 2.0:

HtmlDocument _htmlDocument = HtmlPage.Document;

, gdzie HtmlPage
pochodzi z System.Windows.Browser;

HtmlPage dostarcza informacji nie tylko o stronie html, z klasy tej dowiemy się także jakiej przeglądarki używamy:

HtmlPage.BrowserInformation.Name,

i czy np. mamy włączone ciasteczka:

HtmlPage.BrowserInformation.CookiesEnabled

Aby znaleźć elementy w kodzie html, daj my na to jakis div: <div id="szukajMnie" /> wystarczy wyszukać w elemencie HtmlDocument.

HtmlElement _div = _htmlDocument.GetElementById("szukajMnie");

Warto sprawdzić przed użyciem czy otrzymany _div nie jest nullem, bardzo często się to zdaża (wiem, w kodzie demo nie sprawdzam ale się spieszyłem ;) ).

Na wyszukanym elemencie możemy zrobić dowolną operację, zmienić mu style, właściwości, usunąć wcześniej wprowadzone parametry itd.

_div.SetStyleAttribute("color", "#FF0000");

Ustawienia działają błyskawicznie i dają dużo nowych możliwości.

Aby html mógł zawołać Silverlighta

Tutaj nasze możliwości są troszkę mniejsze, choć wszystko da się zrobić poprzez małe work-around.

Jeżeli chcemy aby coś z poziomu kodu html wywołało metodę w kodzie Silverlight-a, to powinniśmy w kodzie html dodać znaczniki <form>, a w nich tagi <input> o typie "button", czyli jednym słowem, przyciski.

<form action="">

</form>

Weźmy sobie taki przycisk jak powyżej. Skoro chcemy, aby mógł coś zmienić w aplikacji SL należy podpiąć mu Eventa.

_htmlDocument.GetElementById("htmlButton ").AttachEvent("onclick", new
EventHandler<HtmlEventArgs>(this.OnHtmlButtonClick));

Dalej postępujemy jak ze zwykłym wywołaniem. Jako przykład podam zmianę koloru we wszystkich znacznikach <p>:

publicvoid OnHtmlButtonClick(object sender, HtmlEventArgs args)
{
ScriptObjectCollection htmlElements = _htmlDocument.GetElementsByTagName("p");
foreach (HtmlElement h1Element in htmlElements)
     {
         h1Element.SetStyleAttribute("color", "#FFFF00");
     }
}