De când nu am mai scris în blog, multe s-au mai întâmplat. Academic Tour 3.0, o excursie de două zile în afara graniţelor, etc.. Şi după cum zicea şi Lucian, Academic Tour-ul a fost singurul lucru din ultima perioada care a reînviat în mine nişte sentimente de mult adormite.
Însă în exact în ziua prezentărilor din Galaţi, s-a întâmplat un lucru important pentru dezvoltatorii atraşi de WPF/E. Noul release de WPF/E (deja în versiune BETA) a fost botezat Microsoft Silverlight, sub sloganul "Light up the web". (de asemenea, a fost şi un poster, despre care acum nu prea se mai vorbeşte. Lee Brimelow a scos post-ul, dar poza a rămas). Toate blogurile (adică multitudinea de bloguri citite de mine) vuiesc de noul concurent al tehnologiei deţinute acuma de Adobe.
Lucrurile de bază referitoare la crearea aplicaţiilor Silverlight nu s-au schimbat major de la ultimul meu post despre acest subiect. Însă valul de capabilităţi adăugate şi de servicii oferite de Microsoft este absolut copleşitor.
Am să vorbesc astăzi desper Silverlight Streaming. Pentru cititorii mei care au fost şi la prezentările de la Academic Tour, mai ţineţi minte ce zicea Todi şi (la unele prezentări) cu mine despre serviciile care acompaniază şi completează un soft? Exact despre asta este vorba.
Windows Live oferă acum un serviciu de hosting al aplicaţiilor multimedia bogate într-un mod cross-platform (Windows - Mac, nu vă impacientaţi, eventual lasaţi un mail lui Miguel de Icaza ), bazat pe streaming.De asemenea, oferă şi un mod elegant de management al acestor aplicaţii, atât printr-un admin panel în mod web, cât şi printr-un API destul de uşor de digerat. Pe deasupra, se mai aruncă în joc şi 4 giga spaţiu gratuit pentru acest lucru (da, PATRU GIGA, plus streaming de până la 700 Kbps).
Haideţi să vedem despre ce e vorba într-un mod hands-on.
În primul rând, pentru a beneficia de acest serviciu, trebuie să aveţi un Live ID. Sper că nu este asta o problemă. După nişte formalităţi, avem un cont de Silverlight Streaming. Ce înseamnă asta? Înseamnă un account ID, şi un account key. Care-i faza? Account ID este public, account key este private (şi poate fi regenerat oricând). Sună cunoscut? Avem nevoie de aceste două valori în invocarea aplicaţiilor noastre folosind API-ul pus la dispoziţie.
Voi încerca să fac o mică aplicaţie care rulează un film, o voi pune pe Silverlight Streaming şi voi încerca să explic pas cu pas despre ce este vorba.
1. Naşterea unei aplicaţii Silverlight
O voi lua de la capăt cu un tutorial despre cum se face o aplicaţie Silverlight.
Prima dată scriem un fişier html. Gol. Adică să aibă head şi body.
Acum vom adăuga referinţe la Silverlight.js şi createSilverlight.js. Primul fişier poate fi găsit aici, şi este la fel la toate proiectele. De menţionat este că dacă aruncaţi o privire în codul javascript, veţi vedea că acesta se ocupă cu partea de cross-platform. Al doilea fişier poate fi creat şi apoi lăsat gol. Vom reveni mai târziu asupra lui. Adăugarea acestor două referinţe face ca fişierul HTML să arate cam aşa:
<
html>
<head>
<title>Salut LuminaArgintie</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="createSilverlight.js"></script>
</head>
<body>
</
body>
</html>
Apoi, în body, se introduc referinţele la controrul Silverlight în sine:
<
div id="mySilverlightControlHost">
</div>
şi
<
script type="text/javascript">
var parentElement = document.getElementById("mySilverlightControlHost");
createMySilverlightControl();
</script>
Acum, revenim la fişierul createSilverlight.js şi scriem în el funcţia următoare:
function createMySilverlightControl()
{
Sys.Silverlight.createObject(
"myxaml.xaml", // Source property value.
parentElement, // DOM reference to hosting DIV tag.
"mySilverlightControl", // Unique control ID value.
{ // Control properties.
width:'300', // Width of rectangular region of
// control in pixels.
height:'300', // Height of rectangular region of
// control in pixels.
inplaceInstallPrompt:false, // Determines whether to display
// in-place install prompt if
// invalid version detected.
background:'#D6D6D6', // Background color of control.
isWindowless:'false', // Determines whether to display control
// in Windowless mode.
framerate:'24', // MaxFrameRate property value.
version:'0.9' // Control version to use.
},
{
onError:null, // OnError property value --
// event handler function name.
onLoad:null // OnLoad property value --
// event handler function name.
},
null); // Context value -- event handler function name.
}
Cred că este destul de bine comentat şi nu are rost să detaliez.
Scriem (în Blend, normal) un fişiser XAML care să conţină un canvas cu un control media şi 3 butoane pentru controlul playblack-ului. Fişierul se poate găsi aici. Apoi, se scriu funcţiile care fac handling pe evenimentele definite în acest xaml (tot în fişierul createSilverlight.js):
function media_stop(sender, args) {
sender.findName(
"media").stop();
}
function media_pause(sender, args) {
sender.findName(
"media").pause();
}
function media_begin(sender, args) {
sender.findName(
"media").play();
}
Eu am pus acolo un filmuleţ cu un hamster. De fapt e hamsterul prietenei mele. Îl cheamă "hamster" dar răspunde la orice.
2. Împachetarea
Trebuie rearanjate fişierele în directoare, ca şi cum ar fi pe un webserver. Adică:
SampleProject.xaml
clips\hamster.wmv
js\SampleProject.js
js\Silverlight.js
Bineînţeles, cu modificările de câi corespunzătoare în fişierele anterior create.
Acum, scriem un manifest. Acesta arată ceva de genul:
<
SilverlightApp>
<source>SampleProject.xaml</source>
<width>400</width>
<height>300</height>
<jsOrder>
<js>js\Silverlight.js</js>
<js>js\SampleProject.js</js>
</jsOrder>
<onLoad>
createMySilverlightControl
</onLoad>
</SilverlightApp>
Partea cu jsOrder nu prea contează decât în cazul în care avem vreo dependenţă între fişiere.
Chestia importantă este că renunţăm la fişierul html care hosta aplicaţia, şi mutăm funcţia de creare a obiectului Silverlight în manifest în tag-ul onLoad.
Acum împachetăm totul (înafară de fişierul html) într-o arhivă .zip şi facem un upload aici.
Şi nu mai rămâne decât să...
şi să ne uităm la hamsterul meu/prietenei mele cum aleargă pe pat. În mod streaming. Proiectul (.zip-ul) se află aici. Încercaţi şi voi (4 GIGA!!!!).
Şi acuma ca un feedback extrem de negativ celor din echipa Internet Explorer, take a look at this:
În Firefox merge, în IE nu. Pentru că IE are o problemă mai veche referitoare la oleaca de js. Ca să vezi treabă.
Mda..
3. References
Bineînţeles, serviciul poate fi apelat şi programatic, documentaţie aici.
Detaliile serviciilor puse la dispoziţie aici, plus condiţii, licenţiere, drepturi, etc....
Pentru cei care nu au înţeles nimic de aici, şi vor să ştie de ce Silverlight, read this.
FAQ.
Avem şi o comunitate (ce repede se mişcă unii oameni).
Şi pentru ca lucrurile să se mişte cu o viteză ameţitoare, citesc acum că la MIX s-a discutat despre Silverlight Alpha 1.1 (Jesus) care suportă un fel de Dynamic Language Runtime ce permite utilizarea unor limbaje gen Phyton, Java şi Ruby. Slow down, guys. Acestă versiune de Silverlight este exact ce ziceam eu mai demult despre subsetul .NET Framework... etc.. managed.. packaging.. ştiţi voi. Documentaţie aici.
Şi cireaşa de pe tort este o versiune de Blend pentru Silverlight: Blend 2, care arată este exact ceea ce menţionam eu că trebuie într-un post anterior când editam un xaml în Blend şi apoi trebuia să sap prin el să elimin elementele care nu erau suportate de WPF/E pe vremea aia. Acum avem un IDE pentru Silverlight.
Şi în sfârşit, ca să ne mai descreţim frunţile, să vedem cum a ajuns Microsoft la aşa un nume (Silverlight):
| 10. |
GrayLuminosity (close, but there was just something not quite right about it) |
| 9. |
AJAX - Asynchronous JavaScript And XAML (turns out that acronym was already taken) |
| 8. |
David (Bill Gates vetoed that one himself) |
| 7. |
non-Windows Presentation Foundation |
| 6. |
Windows Technology Foundation (usually shortened to WTF, of course) |
| 5. |
MicroMedia Player (a lightweight web alternative to Media Player) |
| 4. |
Microsoft Light New User Experience (shortened to LINUX) |
| 3. |
Microsoft 2.0 (big 800lb gorilla? Us? No, we’re your friendly neighborhood Web 2.0 startup) |
| 2. |
Redlight (“Roxanne… ♫ …you don’t have to wear that dress tonight…”) |
| 1. |
Microsoft Windows Presentation Foundation Live Rich Client ActiveX Player R2 Ultimate Edition Service Pack 1 CTP (or WPFLRCAPR2UESP1CTP for short) |
Prea tare. De aici le-am luat.
Pe final, aş vrea să vă invit la Summer <Web /> 2.007, pe 12-13 mai, unde voi ţine o prezentare despre Silverlight.
Technorati tags: WPF, Stiri, tutorials