Připnuté weby: integrace plochy Windows 7 s IE9
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama

Připnuté weby: integrace plochy Windows 7 s IE9Připnuté weby: integrace plochy Windows 7 s IE9

 

Připnuté weby: integrace plochy Windows 7 s IE9

Google       Google       6. 6. 2011       8 778×

V prohlížeči Internet Explorer 9 je nově k dispozici funkce připnuté weby, pomocí které lze podle potřeby weby integrovat s plochou systému Windows 7. Pokud je funkce Připnuté weby pro web povolena, mohou uživatelé daný web připnout k hlavnímu panelu systému Windows 7 nebo přidat daný web na plochu či do nabídky Start.

Tato funkce umožňuje snadno získat přístup k oblíbeným webům a přidávat zástupce podobným způsobem jako u aplikací pro systém Microsoft Windows. Její využívání přitom znamená jen nízké náklady na vývoj, avšak nabízí robustní možnosti. Budete potřebovat jen několik málo tagů meta a znát jazyk JavaScript. Nebude nutné upravovat existující obsah ani atributy aktuálního webu.

Funkce připnutých webů jsou představeny na následujícím obrázku.

Obrázek 1: Funkce na hlavním panelu systému Windows 7, které může připnutý web využívat.

Systém Windows vygeneruje soubor zástupce s příponou WEBSITE pro každý připnutý web bez ohledu na to, zda je web připnut k hlavnímu panelu nebo přidán na plochu či do nabídky Start. Systém Windows přidruží adresu URL tohoto webu jako počáteční adresu URL konkrétního souboru s příponou WEBSITE a vytvoří na základě této adresy URL jedinečné AppID. AppID je sdíleno všemi okny a záložkami vytvořenými z dané instance Exploreru a umožňuje uživatelům nakládat se všemi záložkami a okny ke stejnému webu jako s jednou skupinou.

Když uživatel otevře vaše webové stránky z připnutého webu, zobrazí se vaše stránky s přizpůsobeným vzhledem, tzn. zobrazí se na nich vedle URL adresy v adresním řádku vámi zvolená ikona (favikona), navigační tlačítka se zobrazí ve zvolených barvách apod. – podle toho, jaké vlastní nastavení pro ně nakonfigurujete.

Okno připnutého webu automaticky spustí izolovanou instanci aplikace Internet Explorer, která běží ve zvláštním režimu. (Je potřeba zdůraznit, že podpůrné objekty prohlížeče a další panely nástrojů nejsou v tomto režimu aplikace povoleny.) Pokud dojde k chybě aplikace Internet Explorer používané k obecnému procházení webu, nebude to mít na tuto nezávislou instanci používanou pro připnuté weby vliv a běh této instance bude pokračovat standardním způsobem dál.

Rozhraní API připnutého webu a meta značky HTML popisované v tomto článku nabízejí možnosti úzké interakce uživatelů s těmito weby prostřednictvím konceptů pro stolní počítače známé zákazníkům, kteří používají nativní aplikace systému Windows. Následující části popisují běžná rozšíření, která tato rozhraní API nabízejí prostřednictvím připnutých webů:

  • Připnutí webu k hlavnímu panelu nástrojů
  • Přidání webové stránky do nabídky Start (nabídka Všechny programy)
  • Přidání webové stránky do nabídky Start pomocí rozhraní API připnutých webů
  • Přizpůsobení webové stránky spouštěné z připnutého webu
  • Definice úloh seznamu odkazů
  • Definice kategorie seznamů odkazů a přidání položek do této kategorie
  • Zobrazování překryvných ikon
  • Zobrazování tlačítek panelu nástrojů miniatur v náhledu miniatury
  • Nastavení blikání tlačítka na hlavním panelu v případě, že je nutný zásah uživatele
  • Rozlišení ikon
  • Zjišťování funkcí
  • Závěr

Připnutí webu k hlavnímu panelu nástrojů

Neexistuje způsob, jak web automaticky programově připnout na hlavní panel. U všech akcí připnutí je nutné, aby akci uživatel provedl ručně. Pokud chce uživatel web připnout k hlavnímu panelu, je nutné, aby provedl jednu z následujících akcí:

  • „Odtržení“ záložky a její přetažení na hlavní panel
  • Přetažení favikony z adresního řádku v aplikaci Internet Explorer na hlavní panel

Na následujícím obrázku s kopií obrazovky můžete vidět, jak uživatel oddělí záložku, pokud chce na hlavní panel připnout web CNN.

Obrázek 2: Uživatel klikne na záložku a přetažením ji oddělí od ostatních záložek v otevřeném prohlížeči.

Obrázek 3: Uživatel záložku přetáhne na hlavní panel a tím daný web připne k hlavnímu panelu.

Všimněte si, že po připnutí se vzhled webu změní podle nastavených možností přizpůsobení. Například tlačítka Zpět a Vpřed se zobrazí v barvě webu.

Obrázek 4: Připnutý web, který je přizpůsoben pomocí meta elementů integrovaných do webové stránky.

Je vhodné doporučovat uživatelům, aby záložky používali právě tímto způsobem, tzn. oddělili je od ostatních záložek, přetáhli na hlavní panel a používali jako připnuté weby. Například součástí následující ukázkové stránky z webu Internet Explorer 9 Test Drive je výzva. (Toto oznamování lze později dynamicky zakázat, přičemž lze pomocí metody msIsSiteMode otestovat, zda je vhodné to provést.)

Obrázek 5: Webová stránka zobrazí výzvu, aby bylo možné lépe poznat, že jde o web, který lze připnout na hlavní panel.

Přidání webu do nabídky Start (nabídka Všechny programy)

Například v případě aplikace Internet Explorer 9 mohou uživatelé do nabídky Start systému Windows přidat jakýkoli web pomocí příkazů nabídky (klikněte na nabídku Nástroje a potom klikněte na příkaz Přidat web do nabídky Start) nebo přetažením záložky na tlačítko Start. Web je potom uveden ve složce Všechny programy nabídky Start. Uživatel může tuto akci provést ručně nebo web může tuto funkci použít programově pomocí rozhraní API připnutého webu. Po přidání webu prostřednictvím vaší webové stránky nebo prohlížeče mohou uživatelé k dané webové stránce získat přístup z nabídky Start, stejně jako k nativní aplikaci běžící v systému Windows. Webové stránky spuštěné z nabídky Start budou nabízet stejné možnosti jako webové stránky, které jsou připnuty k hlavnímu panelu, jakmile pro ně pomocí vlastního kódu přizpůsobíte adresu URL, ikonu, název, popisek a barvy navigačních tlačítek, které jsou přidruženy k dané položce nabídky Start.

Na základě všech mechanismů navržených k přidání položky do nabídky Start se vygeneruje dialogové okno, které uživatele vyzve k potvrzení nebo zrušení operace, jak je vidět na následujícím obrázku s kopií obrazovky.

Obrázek 6: Dialogové okno, ve kterém uživatelé potvrdí, zda chtějí přidat položku do nabídky Start.

Přidání webové stránky do nabídky Start pomocí rozhraní API připnutých webů

Web můžete do nabídky Start přidat pomocí metody window.external.msAddSiteMode(). Rozhraní API lze aktivovat z libovolného elementu HTML pomocí jazyka JavaScript, jak je vidět v následujícím příkladu kódu:

<a onclick="window.external.msAddSiteMode();" href="#">Přidání webu</a>

To, zda byl web spuštěn jako připnutý web, lze zjistit zavoláním metody window.external.msIsSiteMode. Pokud bylo okno spuštěno jako připnutý web, vrátí metoda msIsSiteMode logickou hodnotu true. V opačném případě vrátí hodnotu false.

Přizpůsobení webové stránky spouštěné z připnutého webu

Pomocí meta elementů můžete pomocí následující syntaxe nastavit, jak se bude připnutý web zobrazovat po spuštění z umístění připnutého webu:

<meta name="name" content="content"/>

Hodnoty názvu a obsahu jsou popsány v následující tabulce:

Název

Obsah

application-name

Název zástupce. Pokud chybí, je místo něj použit název dokumentu.

msapplication-tooltip

Nepovinný text, který se zobrazuje jako popisek při přechodu myší na zástupce připnutého webu v nabídce Start systému Windows nebo na ploše.

msapplication-starturl

Kořenová adresa URL aplikace. Pokud chybí, je místo ní použita adresa aktuální stránky. Jsou povoleny pouze protokoly HTTP, HTTPS nebo FTP.

msapplication-navbutton-color

Barva tlačítek ZpětVpřed v okně prohlížeče s připnutým webem. Platná je jakákoli barva podle jména nebo podle hexadecimální hodnoty definovaná v šablonách stylů úrovně 3 (CSS3). Další informace naleznete v článku Tabulka barev (stránka může být v angličtině). Pokud tento meta element chybí, bude se barva řídit barvou ikony zástupce.

msapplication-window

Počáteční velikost okna prohlížeče připnutého webu. Dílčí elementy obsahu uvádějí velikost jako číslo N, přičemž jednotlivé hodnoty jsou od sebe oddělené středníkem.

  • width=N (minimální hodnota je 800)
  • height=N (minimální hodnota je 600)

Poznámka: Uživatel může podle potřeby nastavit jinou hodnotu. Když uživatel změní velikost okna a pak instanci zavře, systém Windows zachová velikost okna nastavenou uživatelem.

V následujícím příkladu kódu se používají meta elementy k přizpůsobení zástupce připnutého webu pomocí vlastního popisku, počáteční adresy URL, počáteční velikosti okna a barvy navigačních tlačítek.

<meta name="application-name" content="Ukázková aplikace v režimu webu"/>
<meta name="msapplication-tooltip" content="Spuštění stránky v režimu webu"/>
<meta name="msapplication-starturl" content="http://example.com/start.html"/>
<meta name="msapplication-window" content="width=800;height=600"/>
<meta name="msapplication-navbutton-color" content="red"/>

Podle syntaxe existující webové stránky také můžete zadat favikonu, která se má používat:

<LINK rel="shortcut icon" type=image/x-icon href="http://host/favicon.ico">
<LINK rel=icon type=image/ico href="./favicon.ico">

Systém Windows se pokusí ze zadaného souboru načíst favikonu ve verzi 32×32. Pokud favikona v této velikost nalezena nebude, vloží systém Windows do obrázku dokumentu o rozměrech 32×32 favikonu rozměrů 16×16. Není-li žádná favikona zadána, systém Windows stejným způsobem použije ikonu aplikace Internet Explorer. Favikonu také může přepsat uživatel pomocí dialogového okna nastavení vlastností.

Definice úloh seznamu odkazů

Úlohy seznamu odkazů jsou akce specifické pro konkrétní aplikaci přizpůsobené pro daný web. Používáním úloh seznamů odkazů může web pro uživatele zpřístupnit nejčastěji používané příkazy. Úlohy seznamů odkazů byste měli definovat na základě funkcí webu a také na základě klíčových akcí, u kterých je pravděpodobnost, že je uživatel bude chtít na webu používat. Tyto úlohy poskytují sadu statických identifikátorů URI, ke kterým mohou mít uživatelé kdykoli přístup, a to i v případě, že neběží instance prohlížeče. Tyto úlohy také pro web nabízejí mechanismus, jak uživatelům nabízet nejčastější cílové stránky, a to i v případě, že uživatel váš web nenavštíví. Například aplikace pro webovou komunikaci by mohla zpřístupnit příkazy umožňující uživatelům rychle získat přístup ke kontaktům, složce s doručenou poštou a údajům v profilu.

Obrázek 7: Úlohy seznamů odkazů přidružené k webu pro komunikaci.

Ke všem úlohám seznamů odkazů lze získat přístup přímo pomocí cesty statické adresy URL, která je uložena v souboru s příponou WEBSITE. Úlohy se obvykle nebudou příliš často měnit. Přesto je lze aktualizovat, a to úpravou meta elementů na webové stránce. Změny se projeví, až uživatel příště připnutý web spustí, tzn. ne při jejich prvním načtení v prohlížeči.

Úlohy seznamu odkazů se definují pomocí HTML meta značek. Při přístupu k připnutému webu systém Windows tyto značky uloží do mezipaměti a použije je při instalaci. Adresy URL definované v úlohách mohou být i z jiné domény. Kód v následujícím příkladu definuje dvě úlohy seznamu odkazů na webové stránce: Úloha 1Úloha 2. Když uživatel klikne na možnost Úloha 1, okno připnutého webu spustí stránku Str.html. Podobně platí, že když uživatel klikne na možnost Úloha 2, okno připnutého webu spustí stránku Str2.html v doméně microsoft.com.

<META name="msapplication-task" content="name=Úloha 1;action-uri=http://host/Str1.html;icon-uri=http://host/icon1.ico"/>
<META name="msapplication-task" content="name=Úloha 2;action-uri=http://microsoft.com/Str2.html;icon-uri=http://host/icon2.ico"/>

Okno připnutého webu otevře všechny úlohy uvnitř vlastní záložky v aktuálním okně připnutého webu. Pokud neexistuje žádná instance prohlížeče, je vytvořena nová. Web může definovat maximálně pět úloh. Relativní adresy URL v poli action-uri jsou překládány během instalace pomocí identifikátoru URI stránky, která obsahuje informace meta.

Meta elementy představující úlohy lze prostřednictvím webů kdykoli aktualizovat. Změny úloh seznamu odkazů se projeví při příštím spuštění webu.

Definice kategorie seznamů odkazů a přidání položek do této kategorie

Prostřednictvím kategorií seznamů odkazů lze koncovým uživatelům pro weby zpřístupňovat dynamické informace. Položky lze přidat do vlastní kategorie z libovolné webové stránky ve stejné doméně. Položky seznamu odkazů v rámci vlastní kategorie jsou vizuálně odděleny od úloh seznamu odkazů a uživatel v nich může podle potřeby jednotlivé položky odstranit nebo zachovat. Když uživatel klikne na položku seznamu odkazů z připnutého webu, okno připnutého webu zobrazí tuto položku na zvláštní záložce stejné instance prohlížeče, z jaké je připnutý web. Položky seznamu odkazů v seznamu kategorií však nepředstavují způsob, jak odesílat příkazy zpět do vaší aplikace a zabránit navigaci. Jsou to odkazy na cíle, které mají uživatele nasměrovat na identifikátor URI.

Pomocí kategorií seznamů odkazů můžete uživatelům nabídnout přístup ke kontextovým informacím v podobě cílů nebo akcí. Cíle lze používat k přístupu k souborům, dokumentům nebo adresám URL. Položky v kategoriích představují adresy URL s kontextem specifickým pro konkrétního uživatele. Ty by mohly zahrnovat stránku profilu na webu sociální sítě nebo například rozhlasovou stanici na webu s datovým proudem hudby. Uživatelé mohou k prostředkům získat přístup přímo kliknutím na odkazy na položky. Může jít například o takové akce, jako je navštívení webu, zobrazení historie apod. Váš web také může použít vlastní kategorii k upozorňování uživatelů, například může jít o oznámení o nově přijatých e-mailech, o přátelích, kteří jsou nyní online, či oznámení blížící se schůzky. Další výhodou vlastních kategorií je to, že jsou uchovávány v seznamu odkazů po uzavření instance prohlížeče. Uživatelé tak mají k dispozici kontextový mechanismus pro přístup k informacím webu v době, kdy není spuštěn prohlížeč.

Na následujícím obrázku s kopií obrazovky vidíte, jak aplikace Microsoft Office Outlook Web Access používá vlastní kategorii Oznámení k zobrazení nadcházející události scrum. Když uživatel klikne na oznámení scrum, aplikace Internet Explorer otevře novou záložku ve stejné instanci prohlížeče, jakou používá připnutý web, a zobrazí informace o události.

Obrázek 8: Vlastní oznámení v aplikaci Outlook Web Access

Správa vlastních kategorií je rozdělena do několika fází:

  1. Vytvoření kategorie: Nejprve voláním metody msSiteModeCreateJumplist vytvořte vlastní kategorii s popiskem. Kód v následujícím příkladu vytvoří vlastní kategorii s názvem Seznam1. Metodu msSiteModeCreateJumplist je třeba volat minimálně jednou, než bude možné použít některou z dalších metod v tomto postupu.
    window.external.msSiteModeCreateJumplist('Seznam1');

    Poznámka: Popisek kategorie je viditelný až v okamžiku, kdy kategorie obsahuje nejméně jednu položku. Při vytvoření druhé kategorie je nahrazena existující kategorie.

  2. Vytvoření položek: Přidejte položky do seznamu v paměti (položky ještě nejsou zobrazeny). Příklad v následujícím kódu vytvoří pomocí metody msSiteModeAddJumpListItem tři položky seznamu: Polozka 1, Polozka 2Polozka 3. První parametr určuje název položky. Druhý parametr určuje adresu URL, která má být použita při výběru položky. Třetí parametr určuje ikonu, která má být použita při zobrazení položky v seznamu.

    window.external.msSiteModeAddJumpListItem('Polozka 1', 'http://host/Polozka1.html', 'http://host/images/polozka1.ico');
    window.external.msSiteModeAddJumpListItem('Polozka 2', 'http://host/Polozka2.html', 'http://host/images/polozka2.ico');
    window.external.msSiteModeAddJumpListItem('Polozka 3', 'Polozka3.html', 'images/polozka3.ico');
  3. Zobrazení seznamu: Zobrazíte seznam v paměti pro seznam odkazů. Po volání metody msSiteModeShowJumplist systém Windows okamžitě aktualizuje seznam v paměti v seznamu odkazů.

    window.external.msSiteModeShowJumplist();
  4. Vymazání seznamu: Vymažte položky ve vlastním seznamu. Po volání metody msSiteModeClearJumplist systém Windows okamžitě odebere položky ze seznamu odkazů.

    window.external.msSiteModeClearJumplist();

Rozhraní API připnutého webu ve vlastní kategorii vždy zobrazí maximálně 20 položek. Pokud do kategorie přidáte více než dvacet položek, jsou dříve přidané položky odstraněny. Rozhraní API připnutého webu nebudou duplikovat existující položku, ale duplicitní položka bude přesunuta do horní části seznamu. V některých případech může systém maximální počet zobrazovaných položek omezit. Záleží to na různých faktorech, například na volbách uživatele, rozlišení zobrazení a velikosti písma. Pokud není dostatek místa k zobrazení všech položek ve všech kategoriích, jsou položky shora dolů ořezávány.

Weby jsou zodpovědné za udržování stavu kategorií a za přidávání a odebírání položek v kategoriích. Váš web se navíc může zaregistrovat pro událost, která je aktivována, když uživatel odebere položku z vlastní kategorie, a to pomocí jednoho z následujících listenerů:

document.addEventListener('mssitemodejumplistitemremoved', removed, false);
document.attachEvent('onmssitemodejumplistitemremoved', removed);

Listener vygeneruje zpětné volání k delegování s parametrem URL:

function removed(url) { … }

Když uživatel odebere položku ze seznamu odkazů, systém Windows nemůže zachytit ani předat událost prostředí zpět webu. Událost je proto uměle vygenerována instancí aplikace Internet Explorer, ve které běží připnutý web, poté, co uživatel přidá položku seznamu odkazů a web zavolá metodu msSiteModeShowJumplist. Událost je vygenerována pouze v případě, že existují položky, které byly odstraněny uživatelem před tím, než je web vložil zpět. Tím je vytvořen nesoulad mezi reprezentací seznamu odkazů v paměti a skutečnou sadou položek v seznamu odkazů. Po aktivaci události synchronizují rozhraní API připnutého webu reprezentaci seznamu odkazů se skutečnými položkami seznamu odkazů.

Jakákoli stránka ve stejné doméně může upravit informace o kategorii seznamu odkazů pomocí rozhraní JavaScript API.

Zobrazování překryvných ikon

Aplikace systému Windows mohou uživatele informovat o oznámeních a o stavu zobrazením překryvné ikony přes tlačítko aplikace na hlavním panelu. Překryvnou ikonu k tlačítku připnutého webu na hlavním panelu přidá metoda msSiteModeSetIconOverlay. Překryvné ikony pomáhají upozornit na web, pokud okno připnutého webu není vidět, například pokud je okno prohlížeče minimalizováno nebo blokováno jiným oknem. Pomocí překryvných ikon lze uživatele informovat o důležitých informacích, o dlouhodobém stavu (například stavu sítě a online stavu) nebo upozorňovat uživatele na nové e-maily. Je třeba pamatovat na to, že neustálá změna překryvných ikon a animací může mít negativní dopad na vnímání přívětivosti prostředí uživatelem.

Systém Windows zobrazuje překryvné ikony v pravém dolním rohu tlačítka na hlavním panelu, nicméně hlavní panel musí být ve výchozím režimu, kdy se na něm zobrazují velké ikony. Jinak se na tlačítcích překryvné ikony zobrazovat nebudou. Překryvné ikony se nezobrazují, pokud web není spuštěn nebo pokud není spuštěn jako připnutý web. Překryvné ikony lze zobrazit z libovolné webové stránky ve stejné doméně. Web navíc může použít více překryvných ikon, aniž by předtím vždy vymazal předchozí. Systém Windows však překryvné ikony při mazání odebírá počínaje naposledy přidanou ikonou. To implikuje pořadí mazání: poslední zobrazená ikona je zároveň první ikona, která bude odebrána. Na následujícím obrázku s kopií obrazovky můžete vidět, jak aplikace Outlook Web Access pomocí překryvné ikony v podobě zvonku oznamuje uživateli, že se přiblížil čas události.

Obrázek 9: Překryvná ikona v aplikaci Outlook Web Access

Kód v následujícím příkladu používá k přidání překryvné ikony overlay1.ico na tlačítko na hlavním panelu a k přidání popisku s řetězcem „Překryvná ikona 1“ metodu msSiteModeSetIconOverlay.

window.external.msSiteModeSetIconOverlay('http://host/images/overlay1.ico', 'Překryvná ikona 1');

Překryvnou ikonu lze odebrat zavoláním metody msSiteModeClearIconOverlay.

window.external.msSiteModeClearIconOverlay();

Zobrazování tlačítek panelu nástrojů miniatur v náhledu miniatury

U nativních aplikací systému Windows uživatel pracuje s tlačítky panelu nástrojů miniatur na hlavním panelu, aniž by musel obnovit či aktivovat okno webu. Připnutý web může využívat stejnou funkci konkrétní webové stránky. Každé tlačítko představuje příkaz, který lze na webové stránce spustit. Uživatelé mohou tímto způsobem ovládat webovou stránku i v případě, že je minimalizovaná, aniž by ji bylo nutné aktivovat. Na následujícím obrázku s kopií obrazovky můžete vidět, jak webová stránka s více videoklipy používá tlačítka panelu nástrojů miniatur k ovládání přehrávání, pozastavení a výběru videí, aniž by uživatel musel přímo na danou stránku přejít.

Obrázek 10: Tlačítka panelu nástrojů miniatur k ovládání videa

Na panelu nástrojů miniatur lze zobrazit maximálně sedm tlačítek. Vzhledem k omezenému místu, ve kterém lze miniatury zobrazit, a také ke stále se měnícímu počtu zobrazovaných miniatur, nemají aplikace garantovánu přesnou velikost panelu nástrojů. Pokud je k zobrazení jen málo místa, je zobrazení tlačítek na panelu nástrojů zprava oříznuto. Aplikace by proto s příkazy přidruženými k tlačítkům měla nakládat podle priority, aby bylo zajištěno, že ty, které budou mít nejvyšší prioritu, budou nalevo, a proto u nich bude existovat menší pravděpodobnost oříznutí.

Když uživatel klikne na tlačítko na panelu nástrojů, je webové stránce vrácena událost se specifickým ID ke zpracování. Tyto události jsou přiřazeny k doméně, která události vytvořila. Tlačítka lze vytvářet, zobrazovat, skrývat, povolovat nebo zakazovat. Také lze změnit jejich obrázek.

Tlačítka panelu nástrojů miniatur jsou nejprve definována v paměti a teprve potom jsou zobrazena. Kód v následujícím příkladu vytvoří pomocí metody msSiteModeAddThumbBarButton tři tlačítka na panelu nástrojů miniatur, přičemž předá adresu URL zdrojového souboru ikony v prvním parametru a popisek (nepovinně) ve druhém parametru. Metoda vrátí ID, které se používá systémem, když je vygenerována událost kliknutí na tlačítko na panelu nástrojů miniatur.

btn1 = window.external.msSiteModeAddThumbBarButton('http://host/images/tlacitko1.ico', 'Tlačítko 1');
btn2 = window.external.msSiteModeAddThumbBarButton('http://host/images/tlacitko2.ico', 'Tlačítko 2');
btn1 = window.external.msSiteModeAddThumbBarButton('http://host/images/tlacitko3.ico', 'Tlačítko 3');

Události generované, když uživatel klikne na tlačítko na panelu nástrojů miniatur, můžete zachytávat přihlášením k odběru události msthumbnailclick pomocí obslužné rutiny událostí. Kód v následujícím příkladu registruje obslužnou rutinu události, obslužná_rutina1 ke zpracování všech událostí generovaných tlačítky na panelu nástrojů miniatur.

document.addEventListener('msthumbnailclick', obslužná_rutina1, false);
…
function handler1 (btn) {
         alert ("addeventlist:thumbnail btn id" + btn.buttonID);
}

Po nadefinování můžete vytvořit instanci tlačítka pouze jednou, a to pomocí metody msSiteModeShowThumbBar.

window.external.msSiteModeShowThumbBar();

Pomocí metody msSiteModeUpdateThumbBarButton můžete nastavit stav a viditelnost tlačítka po vytvoření instance tlačítka. Kód v následujícím příkladu vytvoří tlačítko1 jako zakázané a zobrazené, tlačítko2 jako povolené a zobrazené a tlačítko3 jako povolené, ale skryté.

window.external.msSiteModeUpdateThumbBarButton(tl1, false, true);
window.external.msSiteModeUpdateThumbBarButton(tl2, true, true);
window.external.msSiteModeUpdateThumbBarButton(tl3, true, false);

Změny stavu tlačítka se projeví okamžitě, nicméně změny jeho viditelnosti se projeví až po aktualizaci okna náhledu miniatury.

Můžete definovat a implementovat alternativní styly, aby byly dynamicky nahrazovány informace o tlačítku, které je již zobrazeno na panelu nástrojů miniatur. Nejdříve definujte nový styl. Pomocí metody msSiteModeAddButtonStyle definujte alternativní obrázek ikony a popisek pro uvedené tlačítko. Každý styl obsahuje náhradní obrázek a novou hodnotu popisku. Kód v následujícím příkladu definuje styl1 pro tl1 (tlačítko 1) pomocí nového obrázku a popisku.

style1 = window.external.msSiteModeAddButtonStyle(tl1, 'http://host/images/style1.ico', 'styl1');

Potom použijte definované styly pro již zobrazená tlačítka pomocí metody msSiteModeAddButtonStyle. Příklad v následujícím kódu aplikuje dříve definovaný styl1 pro tl1 (tlačítko 1).

window.external.msSiteModeShowButtonStyle(tl1, styl1);

Váš web by měl skrýt tlačítka panelu nástrojů miniatur, když uživatel přejde mimo doménu webu nebo přejde na jiné stránky. Podobně platí, že by měly weby vytvořit novou instanci těchto tlačítek a zviditelnit je, když se uživatel na stránku vrátí.

Při vytváření instancí těchto tlačítek by neměl web volat metodu msSiteModeShowThumbBar u stejné instance, ve které došlo k výjimce. Tato metoda by měla být minimálně volána tak, aby byl kolem ní blok s příkazem try/catch. Tím bude zajištěno, že tlačítka budou fungovat i poté, co budou obnoveny jejich instance a budou znovu zviditelněna. Pro tento scénář můžete volat metodu msSiteModeAddThumbBarButton vícekrát, aby byla vaše proměnná znovu inicializována s nezbytnými ID, která budou použita v obslužné rutině události ke zpracování události. Bude tak zaručeno, že metoda msSiteModeAddThumbBarButton vždy vrátí ID stejného tlačítka. To umožňuje opakovaně používat logiku zpracování události nezávisle na jakékoli navigaci mimo stránku.

Nastavení blikání tlačítka na hlavním panelu v případě, že je nutný zásah uživatele

V některých případech bude potřeba uživatelům oznámit, že web vyžaduje interakci, aby bylo možné pokračovat v úloze nebo ji dokončit. Pomocí metody msSiteModeActivate lze iniciovat blikání ikony připnutého webu na hlavním panelu. Tuto interakci například použijte, když uživatel musí zadat svá pověření, po dokončení stahování nebo v případě, že se s uživatelem pokusí komunikovat jiný uživatel.

K aktivaci stavu volejte metodu msSiteModeActivate.

window.external.msSiteModeActivate();

Ikona bude nejprve blikat (maximálně 20 krát) a potom tlačítko na hlavním panelu zůstane rozsvíceno trvale. Po interakci uživatele s webem systém Windows obnoví tlačítko na hlavním panelu do neblikajícího stavu.

Rozlišení ikon

Připnuté weby používají ikony na několika místech: cíle seznamu odkazů, tlačítko na hlavním panelu, tlačítka náhledu miniatury a překryvné ikony. Soubory ikon musí obsahovat zastoupení následujících velikostí:

  • Doporučeno: 16×16, 32×32, 48×48
  • Optimálně: 16×16, 24×24, 32×32, 64×64

Ve standardní konfiguraci bude mít ikona na hlavním panelu velikost 32×32, cílová ikona seznamu odkazů bude mít velikost 16×16, tlačítka náhledu miniatury budou mít velikost 16×16 a překryvné ikony budou mít velikost 16×16. Obrázek v levém horním rohu okna prohlížeče připnutého webu obsahuje určenou favikonu velikosti 24×24. Používání různých souborů s příponou ICO z favikony webu k reprezentování akcí nebo cílů u položek seznamu odkazů a úloh pomůže uživatelům rychleji identifikovat úlohy, které chtějí vyloučit.

Zjišťování funkcí

Pomocí zjišťování funkcí můžete ověřit, zda prohlížeč podporuje připnuté weby. Kód v následujícím příkladu je vyhodnocen jako True, pokud je funkce v prohlížeči podporována:

if (window.external.msIsSiteMode) {
    // Kontrola, zda byl web spuštěn z připnutého webu
    if (window.external.msIsSiteMode())
    {
        // TRUE
    }
    else
    {
        // FALSE
    }
} 

Poznámka: Aplikace Internet Explorer 9 Beta vyžaduje, aby volání k testování rozhraní API probíhalo v bloku příkazu try/catch takto:

try {
     if(window.external.msIsSiteMode()) { }
     else {}
}
catch(e) { }

Závěr

Používáním připnutých webů mohou uživatelé integrovat své oblíbené weby s plochou, nabídkou Start a hlavním panelem systému Windows 7 podobným způsobem jako při spouštění spustitelného kódu aplikací v systému Windows. Při používání rozhraní API připnutého webu mohou vaše webové stránky rozšířit integraci s plochou a nabízet uživatelům informace, oznámení a upozornění, aniž by uživatelé museli zobrazit okno prohlížeče. Připnuté weby navíc podporují využívání možností vašeho webu na hlavním panelu a podporují také přizpůsobení připnutých webů.

Funkce připnutého webu, která umožňuje uživatelům prohlížeče Internet Explorer 9 připnout web na hlavní panel systému Windows 7 jako aplikaci, je dnes k dispozici již přibližně miliardě uživatelů.

V Česku jí využívají například služby Seznam.cz, Aukro.cz, Csfd.cz, Email.cz, Mapy.cz, Morefinanci.cz, Nova.cz, Play.cz nebo Recepty.cz. I nová verze webu Programujte.com jí využívá.

Více informací najdete na speciální stránce http://buildmypinnedsite.com/.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

2 názory  —  2 nové  
Hlasování bylo ukončeno    
2 hlasy
Google
(fotka) Israel HilerioAutor je programový manažer týmu aplikace Internet Explorer.

Nové články

Obrázek ke článku Nová česká vzdělávací služba Hacker Academy nabízí kurzy hackingu

Nová česká vzdělávací služba Hacker Academy nabízí kurzy hackingu

Kdo z Vás někdy neměl chuť proniknout do tajuplného světa hackerů a prozkoumávat neznámá zákoutí kyberprostoru? Po zhlédnutí filmu s hackerskou tématikou se toto stalo snem nejednoho teenagera. Cesta vedoucí k prvním úspěchům je ovšem velice dlouhá a složitá a jen málokdo má dostatek trpělivosti aby vydržel a do tajemného světa hackerů nakonec skutečně proniknul.

Obrázek ke článku Jak v Nette nastylovat formulář pomocí Latte maker

Jak v Nette nastylovat formulář pomocí Latte maker

Nette Framework formuláře mají pro Latte šablony definovaná vlastní makra, díky nimž je vykreslování formulářových prvků velmi jednoduché a přímočaré. To ale jen do doby, než chcete např. všem tlačítkům specifikovat vlastní html třídy (např. pro stylování pomocí Bootstrap). Jak na to, si ukážeme v dnešním článku.

Obrázek ke článku Webhosting u Active 24 – levný i multi

Webhosting u Active 24 – levný i multi

Jaká je nabídka webhostingu u ACTIVE 24 v roce 2014? Přední český webhoster nabízí 2 cenově dostupné varianty pro webhosting 1 webu nebo dvojici multihostingových balíčků, kam lze umístit více webových prezentací či aplikací.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032014 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý