No więc, dziś otrzymałem powyższe pytanko od jednego z czytelników. Ponieważ chciałem odpisać na nie jak najsumienniej, to wyszedł z tego co raz to dłuższy tekst, aż ewaluował do rozmiaru artykułu, w którym to opiszę krótko, jak można na dwa sposoby dodać aplikację Silverlight na stronie html bloga w blogger.com i nie tylko.
Otóż moje dwa najlepsze sposoby na umieszczenie aplikacji, to:
- Zagnieżdżenie aplikacji w iframe,
- Użycie Live Control
Zanim rozpocznę opisywanie metod, powiem tylko, że mowa o edycji kodu html na blogger.com do którego najłatwiej dostać się poprzez wybranie "Dostosuj" na stronie bloga, a następnie przez Układ -> Edytuj kod HTML. Na tej stronie zobaczymy pełny kod html używany do generowania strony bloga. Tu też będziemy wprowadzać zmiany.
IFrame
Iframe zna chyba każdy i jest to najłatwiejszy sposób na umieszczenie aplikacji Silverlight na stronie html. W ten oto sposób został zamieszczony powyższy nagłówek na blogu. Kod który za to odpowiada, to:
..kod html...
<body>
<div id='outer-wrapper'>
<iframe frameborder='0' scrolling='no'
src='http://silverlight.services.live.com/invoke/81369/Blog%20Header/iframe.html'
style='position:absolute; width:1024px; height:350px; left: 115px; z-index: 10; '/>
<div id='wrap2' style='position:absolute; width: 842px; z-index: 20; left: 100px; top: 260px; '>
… reszta kodu html
Zwróć uwagę na ustawiony "style" na "position:absolute". Nagłówek ma to do siebie, że się nie przemieszcza, a więc może być na samej górze na stałe. Parametr "z-index" ustawiam na 10 dla nagłówka, a dla pozostałej części tekstu ustawiam 20, dzięki czemu nagłówek jest przykryty contentem z bloga.
Live Control
Live Control jest drugą opcją wymienioną na stronie http://silverlight.live.com, możemy ją znaleźć zaraz po wgraniu aplikacji (Upload application) "Add this Application to a Web Page " -> "Method 2: Use a Live Control". To co należy zrobić, to dodać linki do dwóch plików javascript oraz atrybut do taga <html> :
<html xmlns:devlive=http://dev.live.com ….inne parametry…>
…kod html…
<script src='https://controls.services.live.com/scripts/base/v0.3/live.js' type='text/javascript'/>
<script src='https://controls.services.live.com/scripts/base/v0.3/controls.js' type='text/javascript'/>
</head>
<body >
<div>
<devlive:slscontrol silverlightVersion='2.0' src='/81369/Blog Stopka/'/>
</div>
…kod html…
A więc dodałem atrybut do tagu html (xmlns:devlive=http://dev.live.com) oraz dwa pliki javascript (live.js i controls.js). Aby umieścić aplikację wystarczył wpis <devlive:slscontrol …/>. W wyżej wymieniony sposób mam umieszczoną stopkę na stronie bloga. Zaletą tego rozwiązania jest to, że aplikacja jest traktowana jak element strony, nie musi być na stałe umieszczona przez style, np. dzięki temu moja stopka na stronie jest zawsze na końcu artykułu.
Pozdrawiam
Jacek Ciereszko
.png)
2 komentarze:
ok tak hciałem zrobić.
Ale jest tam zawsze coś takiego
src='http://silverlight.services.live.com/invoke/81369/Blog%20Header/iframe.html'
to chyba oznacza że zawartość tego komponentu jest gdzieś przechowywana. Zapytam -gdzie, jak tam dodać i czy można. Może są jakieś inne miejsca gdzie można dodać moje source? (sory może to banalne pytania ale pierwszy raz chcę coś publicznie postawić)
Tak, możesz trzymać samemu aplikacje, ja mam np. jedno z dem na: http://wpierdalaj.pl/blog/PingPong/HtmlPingPongWithASPTestPage.html
Wrzucam to do iframe i działa tak samo jak to z silverlight.services.live.com....
Zaletą trzymania samemu htmli jest to, że masz do nich pełny dostęp, co umożliwia Ci np. komunikację z elementami html na stronie.
Ten html to plik strony (html) + plik xap (plik aplikacji). Najłatwiej jest skopiować ze stworzonego projektu z katalogu Client Bin w/w 2 pliki.
Pozdro,
JAcek C.
Prześlij komentarz