AspNet.sk     O súťaži HTML5     Výsledky súťaže HTML5     Pravidlá súťaže     Internet Explorer 9 - príručka pre vývojárov
Menu

Praktické cvičenia

Pripnutie webov na “taskbar” Windows 7 pomocou Internet Explorer-a


Ciele praktického cvičenia

Toto praktické cvičenie vás prevedie základnými krokmi ako pripraviť web na pripnutie do “taskbaru” Windows 7. Po dokončení cvičenia získate znalosti z týchto oblastí:

·         Vylepšenia pre pridanie website do menu “Štart”

·         Definovanie úloh kontextového menu (“jumplist“) “taskbaru”

·         Definovanie kategórií kontextového menu (“jumplist”) o ich rozšírenie o nové položky

·         Zobrazenie prekryvných ikon

·         Zobrazenie tlačidiel “taskbaru” s oknom náhľadu

 

Stručný popis

Internet Explorer 9 ponúka webovým vývojárom ľahkú cestu  na zaintegrovanie webov s plochou Windows 7. Táto nová vlastnosť nesie názov “pripnuté weby” (“pinned sites”) a umožňuje používateľom pripnúť web na “taskbar”, plochu alebo do “Štart” menu v Windows 7. Používatelia takto získajú priamy prístup k ich obľúbeným webom spôsobom, ktorý bežne používajú pre prístup k klientským Windows aplikáciam. 

Na “taskbar” môžete pripnúť akýkoľvek web bez jeho úpravy. Keď potom spustíte pripnutý web z “taskbaru” , otvorí sa v izolovanej inštancii Internet Explorer-a, ktorá použije farebnú škálu načítanú z “favicon” ikony webu. Weboví vývojári môžu vylepšiť pripnuté weby o kontextové menu, linky na úlohy, notifikačné ikony/prekryvy použitím nových elementov a API.

Predpoklady zvládnutia praktického cvičenia

·         Základné znalosti webového vývoja

·         Internet Explorer 9

·         Visual Web Developer 2010 Express s Serv.Pack-om 1

·         IIS Express

Viac informácií

Vývojárska príručka “Internet Explorer 9, HTML5 a CSS3” :
http://msdn.microsoft.com/sk-sk/dd727769

Zdrojové kódy

Scenár

V praktickom cvičení upravíte existujúci web tak, aby web po pripnutí na “taskbar” ponúkal používateľom “jumplist” a notifikácie prekryvom ikon.

Predpokladaný čas potrebný pre dokončenie praktického cvičenia

60 minút

Pomôcky

Použite klávesu F12 “vývojárske nástroje” zabudované do Internet Explorer-a 9, ktoré vám uľahčia ladenie s podporou “breakpoint-ov” a iné funkcie.

Cvičenie č.1 – Pripnutie webov

V tomto cvičení si preskúšate rôzne spôsoby, ktoré môže používateľ použiť na pripnutie webu do menu “Štart” a na “taskbar”. Pozrieme sa na to, ako môže webový vývojár pridať dodatočnú funkcionalitu viditeľnú v “taskbare” Windows 7.

Úloha č.1: Spôsoby pripnutia webu z Internet Explorer-a 9

1.       Rozbaľte priložený kód vzorového webu “Vývojársky portál” a otvorte ho v Visual Studiu 2010, prípadne v bezplatnom nástroji Visual Web Developer 2010 Express  cez menu “File/Open Website”. Hlavnou stránkou projektu je “default.htm”. (Visual Studio 2010 so Service Pack-om 1 alebo Visual Web Developer Express 2010 so Service Pack-om 1 sú vývojárske prostredia, ktoré vám pri písaní kódu poskytnú kontextové dokončovanie syntaxe, validáciu štýlov a kódu aj s podporou HTML5.)

2.       V okne Solution Explorer v Visual Studiu zobrazte kontextové menu projektu a vyberte z neho položku „Use IIS Express“.  

3.       Cez menu “Debug/Start Debugging” (alebo F5) spustite web v Visual Studiu alebo Visual Web Developer Express a potvrďte pritom vytvorenie a úpravu konfiguračného súboru webovej aplikácie  - “web.config”. Otvorí sa Internet Explorer-e 9.  

Upozornenie:  V nasledujúcich krokoch pri testovaní úprav vždy najskôr spustite web cez F5 alebo CTRL+F5, aby sa naštartoval IIS Express a web bol funkčný.    

4.       Kliknite na ikonu webu  v riadku s URL adresou a potiahnite ju na „taskbar“.

5.       Stlačte pravé tlačidlo myši nad práve pridanou ikonou na “taskbare” a všimnite si jej kontextovú ponuku.

6.       V okne Internet Explorer-a s vzorovým webom vyberte menu “Nástroje” (“Tools”) vpravo hore a zo zobrazeného menu vyberte “Súbor” (“File”)/”Pridať do menu Štart”(“Add site to Start menu”).

7.       Vyberte menu “Štart/Všetky programy” a všimnite si, že do zoznamu programov pribudol aj pripnutý web. 

8.       Vyberte pripnutý web z menu “Štart” a cez kontextové menu ho z ponuky odstráňte (cez menu “Odstrániť”- “Delete”).  Ak je web pripnutý aj na “taskbar”, z jeho kontextového menu zvoľte “Zrušiť pripnutie programu na panel úloh” (“Unpin this program from taskbar”). Nakoniec zatvorte okno internetového prehliadača.

 

Úloha č.2: Úprava webu pre jednoduchšie pripnutie na “taskbar”.

V tejto úlohe pridáte do webu skript a element na uľahčenie pripnutia webu na taskbar.

1.       Najskôr vytvorte tlačidlo, ktoré umožní používateľovi pripnúť web na “taskbar”. Otvorte v Visual Web Developer Express súbor “default.htm”. Vložte za riadok  “<!-- VLOŽTE KÓD PRE TLAČIDLO 'PRIDAŤ DO MENU START' -->” na konci súboru kód tlačidla pre pripnutie webu.

<button id="btnAddWebApp" onclick="addWebApp();">Pridať do menu Štart </button>

 

2.       Nasledujúci kód kontroluje, či web nebol otvorený z “taskbaru”. Ak nie, zobrazí sa tlačidlo umožňujúce pripnúť  web do menu “Štart”. Kód umiestnite do funkcie  initApp() v súbore “scripts\SitePin.js”.

/*------------------ INICIALIZACIA --------------------*/

function initApp() {

 

    if (window.external.msIsSiteMode()) {

        }

 

   else {

        var btnAddWebApp =
                 document.getElementById("btnAddWebApp");

        if (btnAddWebApp)

                 btnAddWebApp.style.display = 'block';

    }

}

 

3.       Potom vytvorte kód, ktorý zavoláte, keď používateľ klikne na tlačidlo “Pridať do menu Štart”.  Pridajte preto do funkcie “addWebApp” v  súbore “scripts\sitepin.js” nasledujúci kód.

 

/*--------------- PRIDANIE WEBU DO MENU START ----------------*/

 

 

function addWebApp() {

 

    // pridat do menu Start

    try {

        window.external.msAddSiteMode();

    }

    catch (ex) {

        // mod pripnuteho webu nie je podporovany.

    }

}

 

4.       Po uložení webu v Visual Web Developer Express potvrďte kombináciu kláves CTRL-F5. Otvorí sa Internet Explorer 9. Potvrďte v dolnej časti stránky tlačidlo “Pridať do menu Štart”.  V ďalšom dialógovom okne potvrďte “Pridať” (“Add”). Všimnite si, že web sa pridal do menu Štart.

5.       Zatvorte všetky okná Internet Explorer-a a otvorte web cez menu Štart. Hlavná stránka už nezobrazuje tlačidlo “Pridať do menu Štart”, pretože bola otvorená z módu “pripnutého” webu.

6.       Odstráňte pripnutý web z menu “Štart”.

Cvičenie č.2 – Pridanie kontextovej nápovedy a kontextového menu

V tomto cvičení pridáte pripnutému webu popis a kontextové menu, ktoré sa zobrazia, keď používateľ prejde nad ikonu webu na “taskbare” a po stlačení pravého tlačidlo myši nad ikonou webu na “taskbare”. Používateľom tak ponúknete popis webu a  jeho kontextové menu, ako keby používali štandardnú Windows 7 aplikáciu.

 

Úloha č.1: Špecifikovanie  popisu webu a pridruženej kontextovej nápovedy

 

1.       Pridajte do všetkých html stránok webu do bloku “head” pod riadok “<!-- VLOŽENIE ELEMENTU PRE PRIPNUTIE -->” nasledujúci kód:

<meta name="application-name" content="Vývojársky portál" />

<meta name="msapplication-tooltip"  content="Vývojársky portál, miesto s dôležitými informáciami" />

 

Zabezpečíte tým, že pri výbere ikony na “taskbare” sa zobrazí popis webu.

 

Úloha č.2: Pridanie položiek do kontextového menu cez elementy “meta”

V tomto kroku vylepšíte ponuku pripnutého webu o kontextové menu smerujúce priamo na rôzne podstránky webu. Pomocou “meta” elementov pridáte do kontextového menu 5 “preklikov”.

1.       Pridajte do všetkých html súborov nasledujúci blok kódu hneď pod riadky, ktoré ste pridali v predošlej úlohe.

<meta name="msapplication-task" content="name=Vývojársky portál – Nové položky;action-uri=nove.htm;icon-uri=./images/alert.ico"/>

<meta name="msapplication-task" content="name=Vývojársky portál - Blogy;action-uri=Default.htm;icon-uri=./images/1532_Flag_Blue.ico"/>

<meta name="msapplication-task" content="name=Vývojársky portál - Články;action-uri=clanky.htm;icon-uri=./images/1532_Flag_Red.ico"/>

<meta name="msapplication-task" content="name=Vývojársky portál - Videá;action-uri=videa.htm;icon-uri=./images/1532_Flag_Purple.ico"/>  

<meta name="msapplication-task" content="name=Vývojársky portál - Downloady;action-uri=downloady.htm;icon-uri=./images/1532_Flag_Green.ico"/>  

 

Úloha č.3: Otestovanie zmien

1.       Po uložení zmien webu v Visual Web Developer Express potvrďte kombináciu kláves CTRL-F5. Spustí sa Internet Explorer 9 a otvorí z webu stránku “default.htm”. Potvrďte tlačidlo “Pridať do menu Štart”. Web sa pridá do menu Štart.

2.       Rozbaľte menu “Štart” a umiestnite kurzor myši na položku “Vývojársky portál”. Zobrazí sa stručný popis webu.

3.       Rozbaľte pravým tlačidlom myši nad ikonou webu na “taskbare” kontextové menu webu a vyberte si z neho niektorú z nových položiek. Uistite sa, že “preklik” pracuje tak, ako má.

4.       Odstráňte pripnutý web z menu “Štart”. 

 

Cvičenie č.3 – Pridanie vlastnej kategórie a položiek do kontextového menu webu

V tomto cvičení pridáte do kontextového menu novú kategóriu “Vývojárske články”  s vlastnými položkami.

 

Úloha č.1: Pridanie vlastných položiek kontextového  menu do kategórie “Vývojárske články”

V tejto úlohe pridáte do webu funkciu, ktorá vytvorí  v kontextovom menu kategóriu a doplní do nej vhodné položky. Položky v kategórii “Vývojárske články” budú vystavované dynamicky a každá položka bude  prelinkovaná na článok podľa elementu s ID ‘contents-list’.   

1.       Vložte do funkcie “addLocalJumpList()” v súbore “scripts\SitePin.js”  nasledujúci kód. 

 

/*--------  PRIDANIE LOKALNYCH JUMPLIST POLOZIEK-----------*/

function addLocalJumpList() {

 

    var cl = document.getElementById("contents-list");

    if (cl) {

        var anchors = cl.getElementsByTagName("a");

        var titles = cl.getElementsByTagName("h3");

 

 

        // pridanie kategorie do jumplist-u. Vsimnite si,
        // zaroven sa zmaze existujuci jumplist.

        // Pridava sa typ aktualne vybranej stranky

        // (napr. Blog, Clanok atd.)

        window.external.msSiteModeCreateJumplist(

            cl.childNodes[1].innerHTML);

 

        // Pre kazdu polozku na stranke sa vytvori       

        // polozka s titulkou polozky a preklikom

        // na URL polozky

        for (cnt = 0; cnt < anchors.length; cnt++) {

         window.external.msSiteModeAddJumpListItem(

         titles[cnt]. innerText, anchors[cnt].href, favicon);

        }

        window.external.msSiteModeShowJumplist();

    }

    else {

        window.external.msSiteModeClearJumplist();

    }

}

 

 

Úloha č.2: Pridanie kódu na vloženie vlastného menu po vyvolaní udalosti “onFocus”.

V tejto úlohe spojazdníme funkciu “addLocalJumpList()” tak, aby sa zavolala po vyvolaní udalosti “onFocus”.  Spracovanie pridáme do fázy inicializácie stránky, ale len v móde pripnutého webu. Udalosť “onFocus” použijeme preto, aby sme sa uistili v tom, že zoznam v “jumplist-e” sa zmení, keď bude používateľ prepínať záložky stránok v IE9.

1.       Upravte funkciu “initApp()”  v súbore “scripts\SitePin.js” tak, že v nej ako handler udalosti  “onfocus” určíte funkciu  “initFocus()”.

/*------------------ INICIALIZACIA --------------------*/

function initApp() {

 

    if (window.external.msIsSiteMode()) {

 

                window.onfocus = initFocus;

 

    }

    else {

        var btnAddWebApp =
                 document.getElementById("btnAddWebApp");

        if (btnAddWebApp)

                 btnAddWebApp.style.display = 'block';

    }

}

 

function initFocus() {

 

    // pridanie kategorie a poloziek do kontextoveho menu

    addLocalJumpList();

 

}

 

Úloha č.3: Otestovanie zmien

1.       Po uložení zmien webu v Visual Web Developer Express potvrďte kombináciu kláves CTRL-F5. Spustí sa Internet Explorer 9 a otvorí z webu stránku “default.htm”. Potvrďte tlačidlo “Pridať do menu Štart”. V ďalšom dialógovom okne potvrďte “Pridať” (“Add”). Web sa pridá do menu Štart.   

2.       Prejdite na stránku, ktorá má vo svojom kóde element “contents-list” (napr. videa.htm, downloady.htm, clanky.htm).

3.       Stlačte pravé tlačidlo myši nad ikonou webu v “taskbare” a vyberte niektorú z nových položiek “jumplist-u” v novej kategórii. Presvedčte sa, že sa otvorí správna stránka. Ak stránka, na ktorú prejdete neobsahuje “content-list”, nova kategória sa v kontextovom menu nezobrazí.  

4.       Prejdite opäť na stránku “default.htm” (“blogy”),  stlačte pravé tlačidlo myši nad ikonou webu v “taskbare” a vyberte položku “Pripnutie programu na panel úloh” (“Pin this program to taskbar”).

 

Cvičenie č.4 – Notifikácia používateľov prekryvnými ikonami

V tomto cvičení použijete prekryvné ikony na notifikácie používateľov  (napr. o novom obsahu alebo o dokončení nejakej aktivity na pozadí).

 

Úloha č.1: Pridanie notifikačných ikon

Náš vzorový web používa časovače na simulovanie notifikácií. Potrebný kód je v súbore  “scripts\SimAlertGen.js”  a je naviazaný na linku “Generovanie vzorových upozornení”, ktorá je v dolnej časti prednastavenej stránky webu (“default.htm”). Keď na túto linku kliknete, časovače sa nastavia na volanie notifikačnej funkcie zo súboru “scripts\SitePin.js” za  8 sekúnd a potom znova po 10 sekundách.  Funkcia notify(), stránka nove.htm a súbor NewAlert.js obsahujú kód na simulovanie pridávania nových položiek na stránku “nove.htm” po každej notifikácii. Po kliknutí na linku generujúcu upozornenia musí stránka “default.htm” zostať otvorená na 18 sekúnd, aby sa generovali notifikácie.

  V tejto úlohe pridáte kód do notifikačnej funkcie, aby  notifikačná ikona prekryla ikonu webu na “taskbare”, a tým nás upozornila na nový obsah pridaný na web.

1.       Upravte funkciu notify() v súbore “scripts\SitePin.js” podľa nasledujúceho kódu.

/*------  UPOZORNENIA POMOCOU PREKRYVNEJ IKONY ------------*/

function notify() {

 

    // pridajte prekryvnu ikonu na upozornenie pouzivatela

    window.external.msSiteModeSetIconOverlay(alerticon,  

         'notify');

 

    // Nastavte premennu, pomocou ktorej poviete stranke

    // s novymi polozkami, co ma zobrazit.

    // Simulujete tym pridanie novych poloziek na stranku.

    window.localStorage.NewItems++;

}

 

 

Úloha č.2: Odstránenie notifikačných ikon

Súbor  “scripts\NewAlert.js”  obsahuje kód, ktorý ktorý zavolá  funkciu ClearAlertIcons() v súbore “scripts\SitePin.js”.  V tejto úlohe upravte funkciu tak, aby sa prekryvná ikona stratila, keď používateľ prejde na stránku s novým obsahom (“nove.htm”).

1.       Upravte funkciu  clearAlertIcons() v súbore “scripts\SitePin.js” podľa nasledujúceho kódu.

 

function clearAlertIcons() {

    // odstranenie prekryvnej ikony

    window.external.msSiteModeClearIconOverlay();

}

 

2.       Uložte všetky zmeny v kóde webu.

Úloha č.3: Otestovanie notifikačných ikon

Po každom kroku potvrďte v prehliadači aktualizáciu stránky, aby ste sa uistili, že máte zobrazený modifikovaný pohľad na stránky.

1.       Ak nie je web otvorený ako “pripnutý web”, otvorte ho v tomto mode potvrdením ikony na “taskbare”. ( Ikonu na “taskbare” nájdete iba vtedy, keď ste web pripli na “taskbar”. Ak ikonu na “taskbare” nemáte, zopakujte postup z úlohy č.1 z cvičenia č.1.) Prejdite do záložky “Blogy” (default.htm).

2.       Na začatie notifikačného cyklu, kliknite na text “Generovanie vzorových upozornení” v dolnej časti stránky. Akceptujte informáciu v dialógovom okne tlačidlom “OK”.

3.       Predtým, ako sa vygeneruje prvé upozornenie (zhruba po 8 sekundách), stlačte pravé tlačidlo myši na ikonou webu na “taskbare” a vyberte “Vývojársky portál – Nové položky”.

a.       Všimnite si, že na stránke nie sú žiadne nové položky

4.       Keď sa po 8 sekundách zobrazí prekryvná ikona a potom znova po ďalších 10 sekundách, stlačte pravé tlačidlo myši nad ikonou webu na “taskbare” a vyberte položku “Vývojársky portál – Nové položky”.

a.       Prekryvná ikona by sa mala odstrániť a na stránke bude s každým upozornením nová položka.

b.      Všimnite si, že aktualizácia už otvorenej stránky s novými položkami nezobrazí na stránke ďalšie položky.  Na dosiahnutie očakávaného chovania v našom simulovanom príklade musíte v kontextovom menu webu na “taskbare” znovu vybrať “Nové položky”.

5.       Zatvorte všetky otvorené záložky webu s výnimkou záložky obsahujúcej stránku “default.htm” (blogy).

 

Cvičenie č.5 – Pridanie vlastných tlačidiel do náhľadu na stránku

V tomto cvičení pridáte tlačidlá do miniatúrneho náhľadu na web, ktoré sa zobrazia pri umiestnení myši nad ikonu webu na taskbare, keď je otvorená v prehliadači niektorá stránka webu. Do každej zo stránok s videom pridáme tlačidlá, ktoré umožnia prehrávať/pozastaviť prehrávanie videa priamo z miniatúrneho okna náhľadu.

Úloha č.1: Úprava webu pre podporu MIME typu “video/mp4”

Webový server a aplikácia, ktorá hostuje HTML5 video, musí podporovať MIME typ obsahu “video/mp4”.  Preto je potrebné konfiguračný súbor aplikácie úpraviť.

1.       Otvorte súbor “web.config” cez Solution Explorer v Visual Studiu.

2.       Upravte obsah konfiguračného súboru podľa nasledujúceho kódu:

<?xml version="1.0"?>

<configuration>

  <system.webServer>

    <staticContent>

      <mimeMap fileExtension=".mp4" mimeType="video/mp4" />

    </staticContent>

  </system.webServer>

  <system.web>

    <compilation debug="true" targetFramework="4.0"/>

  </system.web>

</configuration>

 

 

 

Úloha č.2: Vytvorenie panelu s tlačidlami v okne náhľadu

1.       Upravte funkciu “btnPlayVideo()”  v súbore “scripts\SitePin.js” podľa nasledujúceho kódu.

 

/*-------------- TLACIDLA PRE OKNO NAHLADU---------------*/

var btnPlayVideo;

 

function addButtons() {

 

    video = document.getElementsByTagName('video')[0];

 

    if (video) {

 

        //Vytvorenie panela pre tlacidla.

        //Ak uz pre tuto session existuje,

        //nastavi sa spravna referencia pre tlacidlo.

        btnPlayVideo =     

               window.external.msSiteModeAddThumbBarButton(

                     'images/play.ico', 'Prehrať');

   }

}

 

Úloha č.3: Pridanie štýlu ikon pre tlačidlá

Pridanie štýlov nám umožní meniť ikonu tlačidla podľa stavu prehrávania videa.

1.       Upravte v súbore “scripts\SitePin.js” kód , ktorý sa nachádza po komentári “TLACIDLA PRE OKNO NAHLADU” podľa nasledujúceho vzoru.

/*------- TLACIDLA PRE OKNO NAHLADU  -----------------*/

var btnPlayVideo, stylePlay, stylePause;

 

function addButtons() {

 

    video = document.getElementsByTagName('video')[0];

 

    if (video) {

 

        //Vytvorenie panela pre tlacidla.

        //Ak uz pre tuto session existuje,

        //nastavi sa spravna referencia pre tlacidlo.

        btnPlayVideo =    

               window.external.msSiteModeAddThumbBarButton(

                     'images/play.ico', 'Play');

 

    // Nasledne pridame styly Pause a Play na prepinanie

    // medzi Play / Pause

 

    stylePause = window.external.msSiteModeAddButtonStyle(

      btnPlayVideo, 'images/Pause.ico', 'Pozastaviť');

 

     stylePlay = window.external.msSiteModeAddButtonStyle(

       btnPlayVideo, 'images/Play.ico', 'Prehrať');

  }

}

 

Úloha č.4: Nastavenie “handlerov” pre stlačenie tlačidla

V tejto úlohe vytvorené tlačidlo napojíme na funkciu “handlera”, ktorá sa zabezpečí prehrávanie a zastavovanie videa.

1.       Pokračujte v úpravách funkcie addButtons() podľa príkladu nižšie.

<…>

     stylePlay = window.external.msSiteModeAddButtonStyle(

                    btnPlayVideo,

                    'images/Play.ico',

                    'Prehrať');

 

        // Nastavenie funkcie, ktora sa postara o spracovanie

        // udalosti stlacenia tlacidla

        if (document.addEventListener) {

            document.addEventListener('msthumbnailclick',

            thumbnailclick, false);

        }

 

<…>

 

 

Úloha č.5: Zobrazenie tlačidiel v náhľade

V tejto úlohe zavoláme API na zobrazenie tlačidiel, ktoré sme pridali do okna náhľadu v predošlých úlohách.

1.       Pokračujte v úpravách funkcie addButtons() podľa príkladu nižšie.

<…>

        // Nastavenie funkcie, ktora sa postara o spracovanie

        // udalosti stlacenia tlacidla

        if (document.addEventListener) {

            document.addEventListener('msthumbnailclick',

            thumbnailclick, false);

        }

 

        // Nakoniec nastavime zobrazovanie tlacidiel v okne

        // nahladu

        window.external.msSiteModeShowThumbBar();

<…>

 

 

Úloha č.6: Vytvorenie funkcie na prepínanie štýlu tlačidiel

V tejto úlohe pridáte funkciu, ktorá podľa aktuálneho stavu tlačidla spustí prehrávanie videa alebo prehrávanie videa pozastaví.

1.       Upravte  funkciu “thumbnailclick(btn)” v súbore “scripts\SitePin.js” podľa nasledujúceho kódu.

function thumbnailclick(btn) {

 

    if (btn.buttonID == btnPlayVideo) {

        if (video.paused) {

            video.play();

            window.external.msSiteModeShowButtonStyle(

              btnPlayVideo, stylePause);

        }

        else {

            video.pause();

            window.external.msSiteModeShowButtonStyle(

              btnPlayVideo, stylePlay);

        }

    }

}  

 

Úloha č.7: Volanie funkcie “addButtons()” pri inicializácie aplikácie

V tejto úlohe dokončíte funkčnosť tlačidiel na webe tým, že pridáte volanie funkcie “addButtons()” do inicializačného kódu každej stránky webu.

1.       Úpravte funkciu “initApp()” v súbore scripts\SitePin.js” podľa nasledujúceho kódu.

/*------------------ INICIALIZACIA --------------------*/

function initApp() {

 

    if (window.external.msIsSiteMode()) {

 

        window.onfocus = initFocus;

 

        // Pridanie prekryvania prehravania a pozastavovania

        // videa

        addButtons();

    }

    else {

        var btnAddWebApp =

                    document.getElementById("btnAddWebApp");

        btnAddWebApp.style.display = 'block';

    }

}

 

2.       Uložte všetky zmeny v kóde webu.

 

Úloha č.8: Otestovanie funkčnosti tlačidiel v okne náhľadov

Pre otestovanie novej funkčnosti nemusíte znovu pripínať web na “taskbar” a potom jeho pripnutie znovu odstraňovať. Pri každom kroku počas testovania stačí aktualizovať stránku.

1.       Stlačte pravé tlačidlo myši v taskbare nad ikonou webu a z kontextového menu vyberte “Vývojársky portál – Videá”.  Na zobrazenej stránke potom vyberte druhú položku “Element HTML 5 video”.

2.       Umiestnite kurzor myši na “taskbare” nad ikonu webu, aby ste zobrazili okno náhľadu (miniatúru). Mali by ste v náhľade vidieť tlačidlo “Prehrať”.

3.       Potvrďte tlačidlo “Prehrať” a video sa začne prehrávať. Tlačidlo sa zmení na tlačidlo pre pozastavenie videa.

4.       Vyberte tlačidlo pre pozastavenie prehrávania.

5.       Vyberte z honého menu “video” stránky akúkoľvek linku a prejdite na inú stránku. Pri prechádzaní ďalšími stránkami webu sú tlačidlá v náhľade stále zobrazovanéna napriek tomu, že na pre tieto stránky nemajú žiadny význam. Toto správanie napravíme v nasledujúcom cvičení.

 

Cvičenie č.6 – Spracovanie stavu tlačidiel v náhľade

V tomto cvičení upravímeweb tak, aby sa tlačidlá v náhľade zobrazovali iba pre stránku s videami.

Úloha č.1: Skrytie panelu tlačidiel v náhľade pri opustení stránky

1.       Upravte funkciu “hideButtons()” v súbore “scripts\SitePin.js” podľa nasledujúceho kódu.

// Skrytie tlacidiel vzdy pri opusteni stranky.

function hideButtons() {

    window.external.msSiteModeUpdateThumbBarButton(btnPlayVideo, false, false);

}

 

2.       Úpravte funkciu “addButtons()” v súbore “scripts\SitePin.js” podľa nasledujúceho kódu.

  // Nakoniec nastavime zobrazovanie tlacidiel v okne           

  // nahladu

        window.external.msSiteModeShowThumbBar();

 

        window.onunload = hideButtons;

    }

}

 

 

 

Úloha č.2: Opätovné zobrazenie tlačidiel pri otvorení stránky

V predošlej úlohe sme skryli tlačidlá v náhľade pri opustení stránky, čím ale vznikol nový problém.  Panel tlačidiel je vytvorený raz počas “session”, takže keď zmeníme stav tlačidiel na “skryté”, zostanú v s týmto nastavením až do resetovania “session”. Ak po skrytí tlačidiel v jednej “session” otvoríme stránku s videom, tlačidlá pre prehrávanie videa sa už neobjavia. V nasledujúcom kroku toto neželané chovanie odstránime.

1.       Upravte funkciu “addButtons()” v súbore “scripts\SitePin.js” podľa nasledujúceho kódu.

        //Vytvorenie panela pre tlacidla.

        //Ak uz pre tuto session existuje,

        //nastavi sa spravna referencia pre tlacidlo.        btnPlayVideo = window.external.msSiteModeAddThumbBarButton(

                 'images/play.ico', 'Prehrať');

 

        // Nastavenie vlastností “enabled” a “visible” na “true”

        // ak bol panel tlacidiel v tejto session deaktivovany

        window.external.msSiteModeUpdateThumbBarButton(

                   btnPlayVideo, true, true);

 

    // Nasledne pridame styly Pause a Play na prepinanie

    // medzi Play / Pause

        stylePause = window.external.msSiteModeAddButtonStyle(

             btnPlayVideo, 'images/Pause.ico', 'Pozastaviť');

 

 

Uložte úpravy webu.

Úloha č.3: Otestujte aktualizovanú funkčnosť tlačidiel v okne náhľadov

Pre otestovanie novej funkčnosti nemusíte znovu pripínať web na “taskbar” a potom jeho pripnutie znovu odstraňovať. Pri každom kroku počas testovania stačí aktualizovať stránku.

1.       Stlačte pravé tlačidlo myši v taskbare nad ikonou webu a z kontextového menu vyberte “Vývojársky portál – Videá”.  Na zobrazenej stránke potom vyberte druhú položku “Element HTML 5 video”.

2.       Umiestnite kurzor myši na “taskbare” nad ikonu webu, aby ste zobrazili okno náhľadu (miniatúru). Mali by ste v náhľade vidieť tlačidlo “Prehrať”.

3.       Potvrďte tlačidlo “Prehrať” a video sa začne prehrávať. Tlačidlo sa zmení na tlačidlo pre pozastavenie videa.

4.       Vyberte tlačidlo pre pozastavenie prehrávania.

5.       Stlačte pravé tlačidlo myši v taskbare nad ikonou webu a z kontextového menu vyberte “Vývojársky portál – Články”.

6.       Všimnite si, že tlačidlo “Prehrať” v okne náhľadu je dostupné iba pre stránku s videom .

 

Súhrn

 V tomto praktickom cvičení ste upravili web tak, aby poskytoval po pripnutí na “taskbar” Windows 7 komfortné rozšírenia - kontextové menu (“jump list“) s vlastnými kategóriami a položkami, notifikácie vo forme prekryvných ikon a interaktívne tlačidlá na ovládanie videa na stránke priamo z minietúrneho okna náhľadu. Internet Explorer 9 ponúka podporou “pripnutia webov” na “taskbar” webovým vývojárom ľahkú cestu ako zaintegrovať ich weby s plochou Windows 7.

   

 

Copyright © 2002 - 2011 CHASTIA s.r.o., Igor Stanek
Portál je hostovaný na serveroch firmy Quantasoft - www.qsh.sk.