Ö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