Programování objektů typu HTML

Objekt typu HTML může obsahovat libovolnou aplikaci napsanou v HTML5. Aby vše správně fungovalo na tabletech a telefonech se systémem iOS i Android, je potřeba dodržet několik pravidel. A také pro vás máme několik rad.

Co je nutné dodržet

Triobo neumožňuje nahrávat na distribuční servery stromovou strukturu. Veškeré soubory, které hodláte použít, tedy musejí ležet přímo ve složce článku (případně ve složce jiného článku stejného vydání).

Triobo při publikování na distribuční server nahrává jen ty zdroje, které jsou reálně použit. Jelikož není možné zjistit, které soubory skutečně využíváte, je nutné řádně všechny označit. Použijte v nastavení rozvržení tlačítko Povinné soubory a vyberte vše, co vaše HTML aplikace používá (obrázky, zvuky, písma apod.)

Spouštění stránky a komunikace se systémem Triobo

Vaše aplikace se může přednačítat dříve, než ji čtenář uvidí. Proto může pro vás být důležité, aby se některé funkce spustily teprve v okamžiku, kdy se článek objeví čtenáři na displeji. Stejně tak někdy můžete potřebovat vědět, kde jsou uloženy soubory jiného článku, nebo vyvolat animaci objektu nebo přepnout variabilní objekt.

Pro správnou funkci umístěte do svého kódu objekt trioboAPI (kód naleznete níže). Objekt je nutné inicializovat voláním trioboAPI.init();

V kódu se dále musí vyskytovat funkce startPage() – ta bude vyvolána při zobrazení stránky. Funkci můžete ponechat prázdnou.

Objekt trioboAPI můžete využít k vykonání akce ve stránce, nebo k získání informace od systému Triobo. Použijte trioboAPI.call(název_operace, parametry_operace, funkce_pro_zpracování_výsledku);

Příklad:

var prefix, myImageSrc;
trioboAPI.call("getFolderOfArticleId","12345",function(x){
  prefix=x;
  myImageSrc=prefix+"image.png";
});

Tímto způsobem do globální proměnné prefix uložíte cestu k souborům článku s identifikátorem 12345 a můžete jej tak použít třeba pro odkazování na obrázek.

Pokud některá operace má více parametrů, jsou odděleny středníkem. K dispozici jsou následující operace:

• goToArticleId – přejde na článek daný jeho ID
• goToArticleNumber – přejde na článek daný pořadím
• animateObjectId – animuje objekt daný jeho ID, za středníkem následuje způsom animace: 0=do normálního stavu, 1=do alternativního stavu, 2=přepnout mezi normálním a alternativním stavem
• switchObjectID – přepne objekt daný jeho ID, za středníkem následuje typ přepnutí (0=na další, 1=na předchozí, 2=na první, 3=na poslední, 4=na konkrétní stav), za dalším středníkem označení stavu
• getFolderOfArticleID – do zadané funkce vrátí prefix složky souborů článku daného jeho ID
• getFolderOfArticleNumber – do zadané funkce vrátí prefix složky souborů článku daného jeho pořadím

Ukládání dat do lokální paměti tabletu/telefonu

Pro mnoho aplikací je důležité zapamatovat si údaje. Běžně se používá objekt localStorage, který ale nefunguje na všech verzích Androidu správně, navíc často není společný pro všechny články (a není tak možné z článku A načítat hodnoty uložené v článku B). Tyto nedostatky řeší objekt storage, který můžete do své aplikace vložit (viz dále). Ihned jej inicializujte pomocí storage.init()

K dispozici dále máte tři metody:

• storage.get(key) – vrátí hodnotu danou klíčem key, případně vrátí hodnotu null, pokud klíč není definován
• storage.set(key, value) – pro klíč key uloží hodnotu value, pokud již klíč existuje, je jeho hodnota přepsána
• storage.remove(key) – odebere klíč key (metoda proběhne bez chyby i pokud klíč key neexistuje)

Kód

Objekt trioboAPI:

var trioboAPI={
  lastCall:null,
  call:function(fn,pars,backCall){
    if (backCall) trioboAPI.lastCall=backCall;else trioboAPI.lastCall=null;
    parent.postMessage(fn+";"+pars,"*");
  },
  init:function(){
    addEventListener('message',function(e){
      if (e.data=='trioboStartPage') {
        startPage();
      } else {
        if (trioboAPI.lastCall) trioboAPI.lastCall(e.data);
        trioboAPI.lastCall=null;
      }
    },false);
  }
}

Objekt storage:

var storage={
  LS:false,
  ok:false,
  badLS:true,
  lsFail:false,
  init:function(){
    try {
      if (LocalStorage) storage.LS=true;
      LocalStorage.setItem('TrioboPokus',1);
      var pokus=LocalStorage.getItem('TrioboPokus');
      LocalStorage.removeItem('TrioboPokus');
      if (pokus==1) {
        storage.badLS=false;
      } else {
        storage.LS=false;
      }   
    } catch(e) {
      storage.LS=false; 
    }
    if (!storage.LS) {
      try {
        localStorage.setItem('TrioboPokus',1);
        localStorage.removeItem('TrioboPokus');
        storage.ok=true;
      } catch(e) {
        storage.ok=false;
        storage.lsFail=true;  
      }
    }
  },
  set:function(key,value){
    if (storage.LS) LocalStorage.setItem(key,value);
    else if (storage.ok) localStorage.setItem(key,value);
  },
  get:function(key){
    if (storage.LS) return LocalStorage.getItem(key);
    else if (storage.ok) return localStorage.getItem(key);
  },
  remove:function(key){
    if (storage.LS) LocalStorage.removeItem(key);
    else if (storage.ok) localStorage.removeItem(key);
  }
}