Összejött pár apró tipp és trükk, melyek önmagukban nem töltenek ki egy blogbejegyzést, de adott esetben fontos lehet tudni ezekről a megoldásokról.
A következőkről lesz szó:
- Flash beágyazása az oldalba
- Szabványbarát doctype használata (IE6 quirks mode mellőzése)
- Reklámok kirakása (külső scriptek kimenetének kezelése)
- Térképek (Google/Yahoo/Live Maps) megjelenítése
- Profil nézetből Canvas nézetre navigálás
Flash beágyazása
Ha Flash-t szeretnénk betenni az oldalunkba, a legjobb megoldás a gadgets.flash.embedFlash használata lehet. A függvénynek meg kell adni annak a HTML elemnek az id-ját, ahova a Flash-t szánjuk, illetve kell egy <Require feature=”flash” /> is a fejlécbe.
Ha JavaScript-Flash kommunikációt szeretnénk, vagy egyéb Flash lehetőséget, akkor figyeljünk az átadott paraméterekre. Fontos még az is, hogy az embedFlash függvényt init után hívjuk meg.
A beágyazás tehát valahogy így fog működni:
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="iWiW Flash" author="DevBlogger" author_email="dev@iwiw.hu" height="600"> <Require feature="opensocial-0.8" /> <Require feature="flash" /> </ModulePrefs> <Content type="html"><![CDATA[ <script type="text/javascript"> function init() { gadgets.flash.embedFlash('http://videa.hu/flvplayer.swf?v=F0cKU2XjFGTy6VMX', 'videa', 8, { 'width': 750, 'height': 600, 'allowFullScreen': true, 'allowscriptaccess': 'always' }); } gadgets.util.registerOnLoadHandler(init); </script> <div id="videa"></div> ]]></Content> </Module>
DocType módosítás
A hivatalos OpenSocial szabvány szerint az iframe-en belüli HTML kód DOCTYPE nélkül töltődik be, vagyis úgynevezett quirks módban jelenik meg. Ezzel egy nagy gond van: IE6 alatt a doboz modell jelentősen eltér a szabványostól, ami megnehezíti egy minden böngészőben jól működő layout kivitelezését.
A megoldás egy a szabványon túllépő kiegészítés (ha minden igaz, az OpenSocial 0.9 valahogy megoldja ezt a kérdést, de szerettünk volna addig is valamilyen megoldást kínálni), miszerint hogyha a Content elemen belül teljes HTML írunk, akkor nem csak a BODY elemen belüli részt befolyásolhatjuk, hanem a teljes oldal kódját.
Vagyis ha át szeretnénk billenteni szabványos módba az IE6 alatt is a dobozmodellt, akkor a következőképpen kell eljárnunk:
<?xml version="1.0" encoding="UTF-8"?> <Module> <ModulePrefs title="DocType teszt" author="DevBlogger" author_email="dev@iwiw.hu"> <Require feature="opensocial-0.8" /> </ModulePrefs> <Content type="html" view="canvas, profile"><![CDATA[ <!DOCTYPE html> <html> <head> <title>Hello</title> </head> <body> Hello IE6 standards mode! </body> </html> ]]></Content> </Module>
Térképek
Térképek beszúrását igazán csak a Google nehezítette meg, mivel külön fejlesztői kulcsot kell kérnünk domainenként, de jöjjön egy példa a három legnagyobb térkép szolgáltatást illetően. További infókat az egyes szolgáltatások doksijaiban lehet találni.
A Google Maps-hez két kulcsra lesz szükségünk. Mindenekelőtt ezeket szerezzük be a Google Maps API oldalán. Ehhez az alkalmazásunk azonosítójára lesz szükség, ami egy többjegyű szám, pl: 123456789 (a sandboxban megnézhetjük) — a http://123456789.app.sandbox.iwiw.hu és a http://123456789.app.iwiw.hu domainekre kell kérnünk egy-egy kulcsot. Ha ezzel megvagyunk, a következő kód segítségünkre lehet (a kódba írjuk a kulcsokat bele a megfelelő helyre!):
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="Google Maps" author="DevBlogger" author_email="dev@iwiw.hu" height="400"> <Require feature="opensocial-0.8" /> </ModulePrefs> <Content type="html"><![CDATA[ <script type="text/javascript"> // kulcsok var GMapKeys = { "sandbox.iwiw.hu": "...fejlesztői.kulcs...", "iwiw.hu": "...fejlesztői.kulcs..." } // az aktuális kulcs kiválasztása var GMapKey = GMapKeys[opensocial.getEnvironment().getDomain()]; // egy új <script> elem létrehozása és felparaméterezése document.write('<scri'+'pt type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=' + GMapKey + '"></sc'+'ript>'); </script> <script type="text/javascript"> function init() { if (typeof GBrowserIsCompatible == 'function' && GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); } } // beindítjuk az alkalmazást gadgets.util.registerOnLoadHandler(init); </script> <div id="map" style="height: 400px;"></div> ]]></Content> </Module>
Yahoo! Maps esetén szintén kell kulcsot kérnünk, ám ez nem domainhez, hanem alkalmazáshoz kötött, így nem kell két külön kulcs a Homokozóhoz és az éles rendszerbe. Fejlesztéshez, kipróbáláshoz használhatjuk a YD-eQRpTl0_JX2E95l_xAFs5UwZUlNQhhn7lj1H kulcsot, de élesbe ezzel nem mehet az alkalmazásunk (mert letiltja a Yahoo! a térképet). A kulcsot a SCRIPT elem végére kell beírnunk:
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="Yahoo! Maps" author="DevBlogger" author_email="dev@iwiw.hu" height="400"> <Require feature="opensocial-0.8" /> </ModulePrefs> <Content type="html"><![CDATA[ <script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.8&appid=...fejlesztői.kulcs..."></script> <script type="text/javascript"> function init() { var map = new YMap(document.getElementById('map')); map.addTypeControl(); map.setMapType(YAHOO_MAP_REG); map.drawZoomAndCenter("Budapest", 3); } // beindítjuk az alkalmazást gadgets.util.registerOnLoadHandler(init); </script> <div id="map" style="height: 400px;"></div> ]]></Content> </Module>
Végül nézzük a Microsoft Virtual Earth / Live Maps megoldást, aholis nincs szükségünk kulcsra:
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="Live Maps" author="DevBlogger" author_email="dev@iwiw.hu" height="400"> <Require feature="opensocial-0.8" /> </ModulePrefs> <Content type="html"><![CDATA[ <script charset="UTF-8" type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us"></script> <script type="text/javascript"> function init() { var map = new VEMap('map'); map.LoadMap(); } // beindítjuk az alkalmazást gadgets.util.registerOnLoadHandler(init); </script> <div id="map" style="height: 400px;"></div> ]]></Content> </Module>
Reklámok beszúrása
Egy reklám blokkot (bannert) nem nehéz beszúrni, egy SCRIPT/NOSCRIPT párost lehet kapni az Origotól, amit a megfelelő HTML pozícióba betehetünk. Problémát okozhat viszont, hogy ha olyan oldalrészbe szeretnénk a reklámot megjeleníteni, ami induláskor még nem létezik, mert az alkalmazás futása során generáljuk, hozzuk létre. Ekkor az egyik lehetséges trükk az, hogy a generált HTML részbe bemásoljuk egy olyan helyről, amit induláskor hoztunk létre. Az alábbi kód ezt csinálja (egy egyszerű SCRIPT elemmel, nem konkrét bannerkóddal):
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="Hello iWiW" author="DevBlogger" author_email="dev@iwiw.hu"> <Require feature="opensocial-0.8" /> <Require feature="views" /> </ModulePrefs> <Content type="html"><![CDATA[ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript"> var App = { // ezt a függvényt hívjuk meg az alkalmazás betöltődésekor init: function() { var ad = document.getElementById("ad"); var contentAd = document.getElementById("content-ad"); contentAd.innerHTML = ad.innerHTML; } }; // az alkalmazás betöltődésekor meghívandó függvényt adjuk át, hasonlít a // weblapok onload függvényéhez gadgets.util.registerOnLoadHandler(App.init); </script> <div id="ad-container" style="display: none;"> <div id="ad"> <!-- a banner kódja --> <script>document.write("ad");</script> <!-- a banner kódja --> </div> </div> <div id="content"> <p>Ez lenne a generált tartalom.</p> <div id="content-ad">ide jön a reklám</div> <p>Itt a vége, fuss el véle.</p> </div> ]]></Content> </Module>
Canvas nézetre navigálás
Ha át szeretnénk navigálni a Canvas nézetre, akkor ehhez be kell töltenünk a views kiegészítést a fejlécben (<Require feature=”views” />), illetve a következő függvényt kell meghívni:
gadgets.views.requestNavigateTo(gadgets.views.getSupportedViews()["canvas"], {});
A kapcsos zárójelek között átadhatunk paramétereket is, melyeket a következő módon olvashatunk ki a Canvas nézetben:
var params = gadgets.views.getParams()
A profil oldali megjelenést célszerű úgy kialakítani, hogy a legfontosabb információkat gyűjtse össze, és kvázi a canvas nézet reklámjaként, funkcionális bannerként működjön - ehhez nyújthat segítséget az átnavigálás lehetősége.


Legutóbbi hozzászólások