Kezdőlap > JavaScript, Windows 8 > Windows 8 JavaScript – Sepciális vezérlők

Windows 8 JavaScript – Sepciális vezérlők

2013. január 25. péntek Hozzászólás Go to comments

Ebben a feladatban a Windows Store alkalmazások speciális vezérlőit és lehetőségeit fogjuk megnézni. Olyan elemeket, mint az ApplicationBar vagy épp a Flyout. A feladat végén, pedig megnézzük azt, hogy jQuery-t, hogyan is használhatjuk egy Windows Store alkalmazásban.

Elő követelmények:

  • Operációs rendszer: Windows 8
  • Fejlesztői környezet: Visual Stúdió 2012 (Az Express változat is jó!)

Indítsuk el a Visual Stúdió 2012-t és kattintsunk a File -> New Project menüpontra! A JavaScript projekt sablonok közül válasszuk ki a Blank App sablont, és adjuk neki a JsSpecSample nevet, majd kattintsunk az OK gombra!

image

A Visual Studio elkészíti a projekt szerkezetét.

Nyissuk meg a default.html fájlt. Láthatjuk, hogy ez egy standard HTML fájl. Mi viszont most olyan funkciókkal fogjuk ellátni ezt a HTML fájlt amivel weben nemtalálkozunk. Első körben megismerkedünk az ApplicationBar-ral.

Az ApplicationBar az egyik legfontosabb Windows Store App vezérlő. Ugyanis ezen a felületen helyezzük el alkalmazásunk fontosabb parancsait. Ha lehetséges, minden funkciót ezen a felületen helyezzünk el! Bár lehetőségünk van a munkaterületen is gombokat és menü elemeket elhelyezni, amik valamilyen funkciót végeznek el, de ha ez nem feltétlenül fontos, próbáljuk meg ezeket a funkciókat az Applicationbar-on elhelyezni! Ez a menü a képernyő alján jelenik meg (Tetején is megjelenhet csak azt navigatiobar-nak hívjuk), ha jobb egérgombbal kattintunk vagy a megfelelő gesztikulációt végezzük el. Nézzük meg, hogy miként hozhatunk létre egy ilyen Applicationbar-t!

image

A body-ban hozzunk létre egy div-et. A divnek lesz egy speciális attribútuma, ami a data-win-control. Ezt webes felületen nem használjuk, hisz ez Windows Store specifikus. Ennek az értéke WinJS.UI.AppBar lesz. Ebben a div-ben egyszerű vezérlőket vezérlőket helyezhetünk el. Amelyeknek szintén lesz egy data-win-control attribútuma, aminek az értéke most a WinJS.UI.AppBarCommand lesz. A vezérlő finomhangolását a data-win-options attribútum segítségével tehetjük meg. Ehhez egy sima JavaScript objetre lesz szükségünk.

<div id="appbar" data-win-control="WinJS.UI.AppBar">
    <button id="btnMessage" data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id: ‘msg’, label: ‘üzenet’, icon: ‘mail’}" />
</div>

Figyeljük meg, hogy ebben az esetben egy Id-t, egy label-t és egy icon tulajdonságok határoztunk meg. (Az icon esetében a beépített ikonok közül választottunk egyet.)

Ha most elindítjuk az alkalmazást, és jobb egérgombbal kattintunk, a felületen akkor megjelenik az application bar egy darab gombbal.

image

Most, hogy kész az application bar szeretnénk is valamire használni. Például azt szeretnénk, hogy ha rákattintunk az üzenet gombra akkor egy ablak megjelenjen és bekérje tőlünk az üzenetet. Ezt persze több féle képen is megtehetjük, de nézzünk erre egy beépített módszert. A Body-n belül az ApplicationBar Div elementje után készítsünk egy újabb Div elementet. Ennek a Div elementnek is meghatározzuk a data-win-control attribútumát. Ebben az esetben ennek az értéke WinJS.UI.Flyout lesz. Majd ezen Div elementen belül hozzunk létre egy sima üzenet bekérő felhasználói felületet. Ebben lesz egy szöveg, egy textbox és egy button vezérlő. A Flyout tehát így fog kinézni.

<div id="flyoutmessage" data-win-control="WinJS.UI.Flyout">
     Üzenet tárgya:
     <br />
     <input type="text" id="txtMsg" />
     <br />
     <input type="button" id="btnSend" value="Küldés" />
</
div>

Ha most elindítanánk, az alkalmazást nem jelenne meg a Flyout. Ezt jelölnünk kell! Ebben az esetben pedig az ApplicationBar-on belül a gombnál fogjuk megtenni azt. Bár a Flyout-ot más vezérlőknél is használhatjuk, viszont nagyon szeret az ApplicationBar-ral együtt lenni. Így most mi is ezt tesszük. Egészítsük ki a gombunk data-win-options értékét az alábbi módon:

<div id="appbar" data-win-control="WinJS.UI.AppBar">
     <button id="btnMessage" data-win-control="WinJS.UI.AppBarCommand"
              data-win-options="{id: ‘msg’, label: ‘üzenet’, icon: ‘mail’, type: ‘flyout’, flyout:’flyoutmessage’}" />
</
div>

Ha most elindítjuk az alkalmazást, és rákattintunk az üzenet gombra akkor közvetlenül az application bar felet (Most jobb oldalt) megjelenik a Flyout.

image

Ezzel is elkészültünk. Viszont még semmit sem csinál, ez a kis alkalmazás. A feladatunk az volna, hogy ha rákattintunk a Küldés (btnSend) gombra akkor a textbox-ba beírt szöveg megjelenjen egy MessageDialog-ba.

Ehhez most már JavaScriptben kell kódot írnunk. Ezt több helyen is megtehetnénk. Akár a default.js fájlba is, de mi most az egyszerűség kedvéért inline módon a HTML dokumentumba fogjuk ezt elvégezni. A Flyout Div elementje alatt nyissunk egy script tagot és iratkozzunk fel a Küldés gomb (btnSend) eseményvezérlőjére. Majd az esemény törzsébe kérdezzük le, hogy mi az amit a felhasználó a textboxba írt. Ezt követően jelenítsük meg egy MessageDialog-ban (A fejlesztők nagyon szeretik az üzenet ablakokat feldobni, mert gyorsan és egyszerűen tudnak üzenetet küldeni a felhasználói felületre. Ez a lehetőség viszont Windows Store alkalmazásoknál nem így működik. MessageBox osztály nem létezik, helyette viszont van MessageDialog, ami a Windows.UI.Popups névtérben található. A MessageDialog használata valamivel összetettebb, mint a MessageBox-é, de cserébe sokkal többet nyújt a feljesztők számára, mint a MessageBox.)

A JavaScript kódunk most így fog kinézni:

<script>
     document.getElementById(‘btnSend’).addEventListener(‘click’, function () {
         var message = document.getElementById(‘txtMsg’).value;
         var mdialog = new Windows.UI.Popups.MessageDialog(message);
         mdialog.showAsync();
     });
</script>

Ha most elindítjuk az alkalmazást, és rákattintunk az üzenet gombra és beírunk egy tetszőleges szöveget a textboxba, majd rákattintunk, a Küldés gombra akkor megjelenik az üzenet. tehát az alkalmazásunk most már jól működik. Viszont jogosan merülhet fel a kérdés, hogy nem-e lehet valamilyen JavaScript library-t használni itt. Hiszen nagyon sokan akik a weben fejlesztenek használják a jQuery-t, az extJS-t vagy valamilyen más könyvtárat. A válasz azaz, hogy nyugodtan használjunk. Igaz lesznek különbségek, de nagyrészt mindent megtudunk majd oldani.

Nézzük meg az előző példát jQuery-vel. Kattintsunk a Solution Explorer-ben jobb egérgombbal a References menüpontra és válasszuk ki a Manage NuGet Packages… menüpontot.

image

A megjelenő ablakban a kereső mezőbe írjuk azt, hogy „jQuery”. Figyeljünk oda, hogy Online akarunk keresni! Ha megtaláltuk a jQuery-t kattintsunk az install gombra.

image

Ezt követően a Solutionün-ben egy Script mappa is belekerül, amiben az adott jQuery library kerül bele. Ahhoz, hogy ezt a dokumentumunknál használjuk, töltsük be. (Ez Drag and Drop módszerrel is történhet). A lényeg az, hogy a default.html fejlécbe ott legyen az alábbi sor:

<script src="Scripts/jquery-1.8.3.js"></script>

Ezt követően írjuk át a Script-ben található kódot „jQuerysre” az alábbi módon.

<script>
    $(‘#btnSend’).click(function () {
       var message = $(‘#txtMsg’).val();
       var mdialog = new Windows.UI.Popups.MessageDialog(message);
       mdialog.showAsync();
    });
</script>

Az eredmény tulajdonképpen ugyan az, mint előzőleg, csak épp jQuery-t használtunk ennek eléréséhez. Ami nagyrészt sokkal kényelmesebb, mint a sima JavaScript használat.

Reklámok
Kategóriák:JavaScript, Windows 8 Címke: ,
  1. Még nincs hozzászólás.
  1. 2013. január 31. csütörtök - 09:50

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s

%d blogger ezt kedveli: