624

MS Popfly - Vytváříme vlastní blok pro mashup

autor Lukáš Kouřil | publikováno 1. prosince 2007

Přestože je Popfly, které je určeno k vytváření Silverlightových doplňků v podobě mashupů zaměřeno na neprogramátory,tak i programátor si zde může příjít na své. Sice pouze v Javascriptu, ale i přesto se s Popfly rozhodně nudit nemusí.

Pomocí Popfly lze velice jednoduše vytvářet mashupy (Silverlightové doplňky), které lze nejen vložit do vlastních, již existujících webových stránek, přidat do blogu na Windows Live Spaces, ale také exportovat jako Sidebar Gadget (skutečně to možné je a funguje to na jednoduchém principu, kdy gadget slouží pouze pro zobrazení mashupu, který je uložen na webu www.popfly.ms). Mimo to, je možné i vytvářet celé webové stránky.

Vytváření mashupů probíhá skládáním bloků, které mají vždy nějakou dílčí funkci a jejich vzájemným propojováním, čímž dojde k předávání dat z jednoho bloku do druhého. Tímto způsobem můžeme propojit i několik bloků do jednoho mashupu. Bloků je opravdu velká spousta, a to nejen originálních od Microsoftu, ale i od dalších uživatelů Popfly.

Co však dělat, když potřebuji blok, který zatím nikdo neudělal? Není nic jednoduššího, než si jej napsat. Postačí k tomu základní znalost Javscriptu a trocha XML - pro programátora žádný problém. Ze softwarových nástrojů nutně nepotřebujeme nic. Jednoduché editory Javascriptu a XML, dokonce i se základní podporou Intellisense, jsou obsaženy na webu Popfly. Přesto bych doporučil použít nějaký "vyspělejší" nástroj, třeba v podobě Visual Studia.

Pojďme tedy na to.

Budeme vytvářet multifunkční blok, který bude zobrazovat aktuální počasí. Blok bude mít vstupní textový parametr, který bude specifikovat kód města, pro které budeme zjišťovat počasí. Výstupem budou dvě hodnoty, zeměpisná šířka a zeměpisná délka města (např. pro zobrazení města na mapě). Samotný blok bude zobrazovat aktuální předpověď v html podobě.

Ke zjišťování počasí je použit rss kanál Yahoo! Weather.

Po příhlášení na web Popfly vybereme Create Stuff -> Block.

Každý blok je reprezentován objektem napsaným v Javascriptu a jeho popisem v XML. Nejdříve vytvoříme samotný blok a poté jej "zdokumentujeme" jazykem XML.

V tuto chvíli se přepneme na záložku Block Code.

Jak jsem již psal, každý blok má podobu objektu, začneme tedy tím, že si vytvoříme definici třídy bloku. 

function weatherBlock() 
{
}  

Tím jsme vytvořili třídu bloku. Nyní však musíme dopsat metody, které budou sloužit pro komunikaci s blokem. Půjde o jednu metodu, která bude přebírat parametr kód města a vracet objekt, který zobrazí počasí v html kódu a vrátí geografickou polohu města.

Pozn.: Přestože jsou následující výpisy kódu vztaženy k třídě weatherBlock, nezapisují se do těla této třídy, ale zvlášť (stále pod sebe). 

weatherBlock.prototype.GetWeather = function(locationId) 
{
    // připojení k rss Yahoo! Weather a vrátí objekt s rss
    rssDoc = new Connect(locationId);
    var rssObj = rssDoc.documentElement;
    var titleNode = rssObj.getElementsByTagName('title')[0].childNodes[0].text;
    // jestliže existuje předpověď pro zadané město vrátí objekt s rss
    if (titleNode.indexOf("Error") == -1)
        return new Location(rssDoc); 
};

 Teď si napíšeme třídu pro objekt Connect, který zjistí rss pro zadané město. 

function Connect(locationId) 
{
    var ID = locationId;
    // c - stupně Celsia, f - Fahrenheity
    var units = "c";
    var rssDoc = environment.getXml("http://weather.yahooapis.com/forecastrss?p=" + ID + "&u=" + units);
    return rssDoc; 
}

 V tuto chvíli budeme programovat velkou třídu pro objekt Weather, který z rss feedu zjistí údaje o počasí. 

function Weather(rss) 
{
    this.weather = new Array();
    // popisek předpovědí
    this.Title = function()
    {
        return rss.getElementsByTagName('item')[0].childNodes[0].text;
    } 
    this.weather[0] = rss.getElementsByTagName('item')[0].childNodes[0].text;
    // latitude
    this.Lat = function()
    {
        return rss.getElementsByTagName('item')[0].childNodes[1].text;
    }
    this.weather[1] = rss.getElementsByTagName('item')[0].childNodes[1].text;
    // longitude
    this.Lon = function()
    {
        return rss.getElementsByTagName('item')[0].childNodes[2].text;
    }
    this.weather[2] = rss.getElementsByTagName('item')[0].childNodes[2].text;
    // odkaz na podrobnou předpověď
    this.Link = function()
    {
        return rss.getElementsByTagName('item')[0].childNodes[3].text.match("http://xml.+html|http://weather.+html");
    }
    this.weather[3] = rss.getElementsByTagName('item')[0].childNodes[3].text.match("http://xml.+html|http://weather.+html");
    // čas
    this.Time = function()
    {
        return rss.getElementsByTagName('item')[0].childNodes[4].text;
    }
    this.weather[4] = rss.getElementsByTagName('item')[0].childNodes[4].text;
    // popis situace
    this.Condition = function()
    {
        return rss.getElementsByTagName('item')[0].childNodes[5].getAttribute('text');
    }
    this.weather[5] = rss.getElementsByTagName('item')[0].childNodes[5].getAttribute('text');
    // teplota
    this.Temp = function()
    {
        return rss.getElementsByTagName('item')[0].childNodes[5].getAttribute('temp');
    }
    this.weather[6] = rss.getElementsByTagName('item')[0].childNodes[5].getAttribute('temp');
    // shrnutí
    this.Desc = function()
    {
        return rss.getElementsByTagName('item')[0].childNodes[6].text;
    }
    this.weather[7] = rss.getElementsByTagName('item')[0].childNodes[6].text
    // adresa obrázku
    this.Img = function()
    {
        return this.Desc().match("http.+gif");
    }
    this.weather[8] = this.weather[7].match("http.+gif");
    // vše v poli
    this.GetWeather = function(i)
    {
        return this.weather[i];
    }
} 

Teď nám ještě zbývá napsat poslední třídu pro objekt Location, který slouží jako výstup z bloku a její metodu. 

function Location(rssDoc) 
{
    // vytvořím objekt weather
    var currWeather = new Weather(rssDoc);
    // naformátujeme html
    this.html = '<div style="font-size: 10px; border: 1px solid red; margin: 10px; padding: 10px; width: 200px;">';
    this.html += currWeather.Title() + '<br/>';
    this.html += currWeather.Desc();
    this.html += '</div>'; 
    // výstup
    this.Latitude = currWeather.Lat().toString();
    this.Longitude = currWeather.Lon().toString();
}

 Přestože primárně slouží bloky jako mezičlánky a většinou se nepoužívají pro zobrazování, můžeme je samozřejmě použít i pro html výstup. To se však nedělá přímo z objektu, který slouží jako výstup, ale přes pomocnou funkci. 

Location.prototype.toString = function() 
{
    return this.html.toString();
}; 

Tím máme hotový celý blok v Javascriptu. Úplně na konec je ještě potřeba vytvořít popis bloku v XML.

Na webu Popfly se přepneme na záložku Block description. 

<?xml version="1.0" encoding="utf-8" ?> 
<block class="weatherBlock">
  <operations>
    <operation name="GetWeather">
      <description>Pocasi pro dnesni den</description>
      <inputs>
        <input name="locationId" required="false" type="string">
          <description>id mista</description>
          <defaultValue>EZXX0002</defaultValue>
          <constraints />
        </input>
      </inputs>
      <outputs>
        <output isArray="false" type="custom" object="Location"/> 
      </outputs>
    </operation>
  </operations>
  <objects>
    <object name="Location">
      <field name="Latitude" type="string" isArray="false"/>
      <field name="Longitude" type="string" isArray="false"/>
    </object>
  </objects>
</block>

 V elementu block nastavíme odkaz na třídu v Javascriptu a definujeme metody objektu pro vstup a výstup. V tomto případě jde pouze o jednu vstupní metodu GetWeather. Do elementu description doplníme její popis a specifikujeme parametry. U metody GetWeather to je parametr locationId, který je typu string a není povinný (protože uvádíme defaultní hodnotu - EZXX0002). Rovněž zde také nezapomeneme na výstupní metodu Location. Protože tato metoda vrací vlastní objekt, je typ nastaven na custom. Podoba objektu, který slouží jako výstup je definována v sekci objects.

Tímto je celý blok hotový a zbývá jej pouze uložit a vyzkoušet. Pro uložení klikneme v pravém horním rohu na Save a doplníme jméno bloku. Teď již můžeme blok používat jako každý jiný pro vytváření mashupů. Buď jej můžeme použít samostatně pouze k zobrazování počasí v html a vstup zadávat přímo přes vlastnost bloku, nebo k němu můžeme na vstup připojit blok User Input, který bude sloužít pro zadání města. Rovněž je možné na výstup z bloku připojit např. blok Virtual Earth a zobrazovat pozici města na mapě.

Pozn.: kód města můžete zjistit např. zde.

Jak sami vidíte, vytváření vlastních bloků není nic těžkého a jistě si jejich psaním užijete spoustu zábavy při dlouhých zimních večerech.

 

Zdroje:

Microsoft Popfly
http://www.popfly.ms

Popfly Block SDK
http://www.popfly.ms/Help/PopflyBlockSDK.zip

Yahoo! Weather
http://developer.yahoo.com/weather/