Kezdőlap > JavaScript, Windows 8 > Windows 8 Csempék – JavaScript

Windows 8 Csempék – JavaScript

2013. január 28. hétfő Hozzászólás Go to comments

Ebben a feladatban a csempéket, a Windows Store alkalmazások egyik legfontosabb és legérdekesebb funkcióját ismerhetjük meg. A korábban bemutatott példákkal ellentétben itt most nem fogunk felhasználói felületet készíteni. Csak és kizárólag a csempék testreszabásával fogunk foglalkozni.

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 Studio 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 TileSample nevet, majd kattintsunk az OK gombra!

image

A Visual Studio elkészíti a projekt szerkezetét. A Solution Explorer-ben az images mappában találhatóak a projektünkhöz tartozó logók, ikonok és egyéb kép fájlok. A feladathoz előre el van készítve néhány kép fájl. Ezeket a képeket innen tölthetjük le.

A képek mérete fix. Figyeljünk rájuk, hogy mindig megfelelő méretű képet adjunk át a csempéknek!

Miután letöltöttük a zip fájlt, tömörítsük ki és dobjuk be a képeket az images mappába. (Drag and Drop módszerrel is történhet. – FONTOS, hogy a projektünk részei legyenek ezek a képek)

Az images mappának így kell kinéznie:

image

Mint látható, két extra kép is bele került ebbe a mappába. Az egyik a Widelogo.png a másik pedig a Budapest.jpg fájl.

Kattintsunk a package.appxmanifest fájlra. Itt többek között beállíthatjuk, az alkalmazásunk logóit, és egyéb alkalmazás specifikus beállításokat is. Mivel előzőleg felülírtuk a logókat így, már az új logók jelennek meg.

Kattintsunk a Wide Logo menüpontra és tallózzuk ki a Widelogo.png-t!

Kattintsunk a Splash Screen menüpontra és határozzuk meg a Splashscreen helyét, valamint adjuk meg a háttérszínét is. A háttérszín most egy világos kék szín legyen. (LightBlue)

image

Ha most elindítjuk az alkalmazást, akkor már egy olyan alkalmazásunk van, aminek van egy általános és egy széles ikonja is.

A Windows Store alkalmazások speciálisak, hisz ha nem használjuk őket, akkor nem fognak futni. (Ha az asztalon egy alkalmazást a tálcára helyezzük, akkor tovább fut.) Windows Store alkalmazások ilyenkor suspended állapotba kerülnek. Azaz, nem futnak a háttérben. A felhasználóval olykor kommunikálni kell, meg kell mutatnunk neki, hogy történt valami. Ehhez használhatjuk a push notification-t illetve a csempéket is. A csempéket a felhasználó mindig látja, és olvashatja a tartalmukat. A csempék módosítása alapból akkor történhet, ha az alkalmazás fut (gyakoribb eset) vagy ha nem fut, akkor egy Push Notificaton-nel jelezhetünk, hogy frissítse a csempe tartalmát. Ebben a példában mi most akkor módosítjuk a csempét, ha az alkalmazás fut.

Elég sokféle csempe létezik, ezek fajtáit az MSDN oldalon láthatjuk. Minden csempének van egy szerkezete, ami egy XML dokumentum. Az alábbi XML fájl a TileWideImageAndText01 sablon szerkezetét mutatja be.

<tile>
  <visual>
    <binding template="TileWideImageAndText01">
      <image id="1" src=""/>
      <text id="1"></text>
    </binding>
  </visual>
</
tile>

Ennek az eredménye a következő stílusú csempe lesz: (Értelemszerűen a képet és a szöveget határozzuk meg az XML dokumentumban)

image

Tulajdonképpen nincs más dolgunk, mint ezt az XML fájlt megszerkeszteni.

Nyissuk meg a js mappa alatt található default.js fájlt. Majd az args.setPromise után írjuk a következő sorokat. Először szükségünk lesz a Windows.UI.Notifications névtérre. Azért, hogy ezt a hosszú névteret ne kelljen újra és újra beírni helyezzük el egy var-ba. (Most kb. olyan funkció szolgál mint a C# nyelvben a using.)

var notifications = Windows.UI.Notifications;

A következő sorban meghatározzuk, hogy milyen csempe sablont (template-t) szeretnénk használni, majd ennek a template-nek az XML szerkezetét betöltjük. Ehhez a TileUpdateManager.getTemplateContent metódusát fogjuk használni, ami egy XML dokumentumot ad vissza. Mint látható először egy széles template-t választunk.

var wideTemplate = notifications.TileTemplateType.tileWideImageAndText01;
var tileXML = notifications.TileUpdateManager.getTemplateContent(wideTemplate);

Ez a sablon tulajdonképpen két részből áll. Van egy text és egy image elementje. Első körben módosítsuk a szövegét. Az alábbi módon:

var wideText = tileXML.getElementsByTagName(‘text’);
wideText[0].appendChild(tileXML.createTextNode(
"Devportal – Tanulmányi hét"));

Kiválasztottuk a text elementeket, majd az első (0) elementhez hozzáfüzzük a számunkra szükséges szöveget.

A kép hozzáadása hasonló képen történik, csak itt attribútumokat kell változtatunk. Ebben az esetben az src és az alt attribútumok kerülnek változtatásra. A képnek kisebbnek kell lennie mint 200 Kb-nál és a kép felbontása pedig maximum 1024×1024 lehet.

var wideImage = tileXML.getElementsByTagName("image");
wideImage[0].setAttribute("src", "ms-appx:///images/Budapest.jpg");
wideImage[0].setAttribute(
"alt", "Budapest");

Tulajdonképpen kész a csempénk sablonja. Ebből az XML dokumentumból nekünk egy TileNotification-t kell készítenünk. A TileNotification osztály ezt támogatja. Ennek az eredményét pedig át kell adnunk a TileUpdateManager-nek. Ezt az alábbi módon tehetjük meg.

var tileNotification = new notifications.TileNotification(tileXML);
notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);

Indítsuk el az alkalmazást, majd rögtön zárjuk is be. A kezdőképernyőn (Start menüben) láthatjuk az alkalmazásunk csempéjét. Állítsuk át szélesre csempét. (Ha még nem lenne az)

image

Ebben az esetben megjelenik az előzőleg beállított csempe.

image

Mivel a csempe nem csak széles lehet, ezért nekünk egy másik csempét is meg kell határoznunk. Ebben az esetben egy standard téglalap méretű csempét fogunk létrehozni. A módszer ugyan az, mint az előző esetben. Kiválasztunk egy sablont, majd annak XML-jét a számunkra megfelelő módon módosítjuk.

var squareTemplate = notifications.TileTemplateType.tileSquareText01;
var squareTileXml = notifications.TileUpdateManager.getTemplateContent(squareTemplate);
var squareText = squareTileXml.getElementsByTagName("text");
squareText[0].appendChild(squareTileXml.createTextNode("Devportal"));
squareText[1].appendChild(squareTileXml.createTextNode("Windows 8"));
squareText[2].appendChild(squareTileXml.createTextNode(
"Tanulmányi hét"));

Kész a második csempék XML-je. Ezt hozzáfűzzük az előzőhöz. De csak is a binding element-től! Majd ezt hozzá fűzzük az eredeti tileXML-hez. (WideTemplate XML-je)

var node = tileXML.importNode(squareTileXml.getElementsByTagName("binding").item(0), true);
tileXML.getElementsByTagName("visual").item(0).appendChild(node);

Ha most elindítjuk az alkalmazást, akkor mind széles mind standar méretű csempénk is frissíteni fogja a tartalmát a mi általunk meghatározott szöveggel és/vagy képpel

image  image

Teljes JavaScript kód:

var notifications = Windows.UI.Notifications;

 

var wideTemplate = notifications.TileTemplateType.tileWideImageAndText01;
var tileXML = notifications.TileUpdateManager.getTemplateContent(wideTemplate);
var wideText = tileXML.getElementsByTagName(‘text’);
wideText[0].appendChild(tileXML.createTextNode("Devportal – Tanulmányi hét"));

 

var wideImage = tileXML.getElementsByTagName("image");
wideImage[0].setAttribute("src", "ms-appx:///images/Budapest.jpg");
wideImage[0].setAttribute("alt", "Budapest");

var squareTemplate = notifications.TileTemplateType.tileSquareText01;
var squareTileXml = notifications.TileUpdateManager.getTemplateContent(squareTemplate);
var squareText = squareTileXml.getElementsByTagName("text");
squareText[0].appendChild(squareTileXml.createTextNode("Devportal"));
squareText[1].appendChild(squareTileXml.createTextNode("Windows 8"));
squareText[2].appendChild(squareTileXml.createTextNode("Tanulmányi hét"));

 

var node = tileXML.importNode(squareTileXml.getElementsByTagName("binding").item(0), true);
tileXML.getElementsByTagName("visual").item(0).appendChild(node);

var tileNotification = new notifications.TileNotification(tileXML);
notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);

Kategóriák:JavaScript, Windows 8 Címke: , ,
  1. Krisztián
    2013. június 20. csütörtök - 20:36

    Jó estét !
    az lehetséges hogy ezzel a technikával csinálok egy asztali alkalmazásnak csempét ?

    • 2013. június 21. péntek - 07:15

      Nem lehetséges. Csak Metro (Modern UI-os) alkalmazásoknál lehet interaktív csempéket készíteni. Klasszikus Windows alkalmazásnál a már megszokott ikonok állnak a rendelkezésre.

  2. SZL
    2013. október 31. csütörtök - 13:44

    Asztali alkalmazáshoz csempék: http://www.devcomponents.com/dotnetbar/
    bár ez nem ingyenes…

  1. 2013. január 31. csütörtök - 09:50
  2. 2013. január 31. csütörtök - 10:41

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: