Dokážeš to – návod. 3 část - Czech MSDN Blog - Site Home

Při příležitosti rozdávání myší a triček programátorským začátečníkům a hráčům her kteří se chtějí chvilku odreagovat je připraveno malé praktické cvičení. Praktický návod jak si vyzkoušet novinky Microsoft pro programátory a designéry a jak dostat triko nebo myšku. Podrobnosti o hlodavci a oblečku najdeš na www.dokazesto.cz

Po první části úkolu– Video stream pomocí Silverlight a druhé části - Webový Windows Live Messenger IM Control, se nyní koukneme na

Část třetí - 3D objekt v Silverlightu pomocí projektu Microsoft Popfly.

Úkolem bude „naklikat si“ interaktivní prostorový objekt typu Silverlight Carousel a ten umístit na svoji stránku.
V našem případě nebudeme využívat nějaký externí hosting ani Live Spaces či cokoli jiného ale umístíme a veřejně vystavíme na svoji finální soutěžní stránku v Popfly.com doméně.

Finální vystavená stránka bez jakýchkoli grafických úprav obsahující všechny tri komponenty pak může vypadat podobně jako ta naše: http://www.popfly.com/users/Dokazesto/Dokazesto

Microsoft Popfly

je web obsahující nástroje pro vytváření a sdílení vlastních webových stránek i aplikací pomocí mixování různých existujících komponent bez nutnosti psát kód a bez hlubokých technických znalostí v oblasti tvorby webu. Více o Popfly v češtině např. v tomto článku.

Popfly je typický představitel prostředí Web 2.0 - webu a on-line nástroje s komunitou uživatelů, možností sdílet projekty a dokonce mixovat obsah ostatních členů. Skládá se z nástroje pro vytváření nebo mixování aplikací či komponent a dále z prostředí jejich administrace, sdílení nebo publikování. Pro programátory, kteří chtějí dělat složitější věci, je navíc připraven add-in Popfly Explorer for Visual Studio and Visual Studio Express

Pro využití Popfly je třeba, stejně jako v přechozích aplikacích mít založené Live ID, kterým se lze odkudkoli přihlásit a zároveň založit svůj profil.

V Popfly můžeme vytvářet nebo upravovat:

Běžné HTML stránky
„Mashupy“ - mixy komponent
Bloky - a to vizuální či nevizuální
Datové zdroje.

Začněme přípravou veřejné webové stránky

Pokud nemáš nikde prostor pro své webové stránky kam bys umístil komponenty, využij Popfly a připrav si svoji vlastní webovou stránku. Create Stuff – Webpage:

Nyní je třeba stránku uložit (Save je vpravo nahoře) a pak veřejně vystavit : MyStuff – Projects – Share. Na linku Mash-out lze najít danou stránku, v našem případě to bylo http://www.popfly.com/users/Dokazesto/Dokazesto

Stránka pak může vypadat takto:

Vytvoření vlastní komponenty prostorového „kolotoče“ v Silverlight

Create Stuff – Mashup –Display a přetáhnout blok Carousel na plochu. … A je hotovo.

V Preview je pak vidět první náhled. Po klinutpí na symbol montážního klíče pak zdroj dat.
Nyní záleží pouze na kreativitě čím Carousel naplnit. Dobře funguje propojení s kostkou Image Scraper

Dalším typem je vytvoření vlastního zdoje dat (Data source)a propojení - naplnění carouselu udělat z něho.
Pro tento konkrétní cvičný případ si sahám na loga z našeho MS Webu.

V náhledu vše pak může vše vypadat takto:

Uložme opět pod nějakým jménem - na našem případě ""Kolotoc" a sdílejme veřejně.
Pozor pokud se aplikace skládá z dalších částí, jako v našem případě např. datasetu, je třeba veřejně nasdílet i tyto další části.

Pomocí Mash-Out dostaneme také kýžený IFRAME pro vložení na externí stránky.

<iframe style='width:100%; height:100%;' src='http://www.popfly.com/users/Dokazesto/Kolotoc.small' frameborder='no' allowtransparency='true'></iframe>

Štěpán Bechynský připravil video jak s Popfly pracovat a jak vložit IM Control.
Michal Neuwirth udělal video jak použít Popfly Explorer for Visual Studio a upravovat nebo vytvářet své vlastní komponenty.

Podklady resp. Výsledky jsou jsou na adresách http://www.popfly.com/users/Dokazesto/Obrazky - jednoduchý zdoj dat, http://www.popfly.com/users/Dokazesto/czcarousel počeštěný Carousel z videa Michala a výsledný projekt Štěpána http://www.popfly.com/users/Dokazesto/DigiGirlz%20Rulez%20Animace

Sestavme nyní vše dohromady

Nakonec dejme všechny tři IFRAME elementy které jsme zatím udělali, tj.:

Carousel s obrázky
Streamované video z Silverlight.live.com
Webový IM Control

do již připravené stránky http://www.popfly.com/users/Dokazesto/Dokazesto (nebo na libovolně jiný web)

V případě Popfly stačí na správné místo stránky vložit testově okopírované IFRAME řetězce a Popfly pozná, že se jedná o HTML a vše upraví.

Pozn. Do spaces.live.com je možné přidat tyto IFARAME elementy např. pomoci "Live Gadetu" SANDBOX HTML a do něho vložit element.
V menu Přizpůsobit - Přidat Moduly - Miniaplikace - Vybrat Webové miniaplikace - Filtrovat V angličtině - Přidat Sandbox ...

Ukázka bez formátování je na http://dokazesto.spaces.live.com/

Pokud je vše OK, stránka je určená k veřejnému sdílení a navíc je to Tvoje vlastní stránka s vlastními komponentamy (nikoli pouze okopírovaný příklad) nic nebrání k jejímu zařazení do reagistrace pro rozdávání myší a triček. Registrace bude funkční od 1.4 do 31.5.2008.