Kezdőlap > JavaScript, Windows 8 > Grid Template – JavaScript (W8)

Grid Template – JavaScript (W8)

2013. január 23. szerda Hozzászólás Go to comments

Ebben a feladatban egy szakácskönyv alkalmazást fogunk elkészíteni, ami egy távoli „szolgáltatástól” kérdezi le recepteket, majd egy táblázatos formában csoportosítva megjelenítjük a recept kategóriákat.

Elő követelmények:

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

Mivel korábban csak Blank App sablont néztük meg, itt az ideje egy látványosabb sablont és közelebbről szemügyre venni.

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 Grid App sablont, és adjuk neki a CookbookDemo nevet, majd kattintsunk az OK gombra!

image

A Visual Studio elkészíti a projekt szerkezetét. Láthatjuk, hogy a pages mappa alatt három html fájl van és mindegyik html fájlhoz tartozik egy ugyanolyan nevű JavaScript (js) és CSS (css) fájl is.

image

Indítsuk el az alkalmazást (F5). Ebben az esetben már lesznek példa adataink. Igaz csak lorem ipsum példa szövegek, valamint szürke és fekete fehér képek egy ListView-ban. Ez nem túl látványos, de példa adatnek pont tökéletes.

image

Ha egy téglalapra kattintunk, akkor betöltődik egy részeletesebb nézet, de ugyanőgy csak példa adatokat tartalmaz. Első körben ezen szeretnénk változtatni.

Első lépésként változtassuk meg az alkalmazásunk nevét. A CookbookDemo helyet jelenjen meg a Devportal Cookbook. Ehhez nyissuk meg a groupedItems.html fájlt és a header szekcióban található <h1>-es címet írjuk át Devportal Cookbookra.

<h1 class="titlearea win-type-ellipsis">
    <span class="pagetitle">Devportal Cookbook</span>
</
h1>

Ez egyszerű volt. De jó volna ha a szürke téglalapok helyet valamilyen kép és szöveg jelenjen meg.

Az alkalmazások nagyon sokszor egy külső adatforrásból származó adatokat jelenítenek meg. Igaz a Windows store alkalmazások közvetlen módon nem tudnak adatbázishoz (MSSQL, MySQL, Oracle stb) csatlakozni. Viszont egy WCF vagy más webszolgáltatáshoz könnyedén. A vissza érkező adatt pedig lehet XML, MTOM, RSS, JSON és egyébb más közkedvelt webes formátumok.

Ez az alkalmazást is ezt fogja most bemutatni. Igaz ebben az esetben csak egy statikus fájl fogja ezt számunkra szolgáltatni amit korábben a Devportal.hu szerverén helyeztem el. A fájl itt tekinthető meg. A fájl tartalmbából.

{ "backgroundImage" : https://devportal.hu/SHOT/images/Chinese/Chinese_2_600_C.jpg,
    "directions" : "Crumble the bread mix it with the egg add salt to it. Cover each 2 shrimps with the mix hit a pan pour the souce to the pen fry the balls in the pan. Simply mix all ingredients by hand. 
    "favorite" : false,
    "group" : { "backgroundImage" : https://devportal.hu/SHOT/images/Chinese/chinese_group_detail.png,
        "description" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet tempus libero vitae feugiat. Proin justo velit",
        "groupImage" : https://devportal.hu/SHOT/images/Chinese/chinese_group.png,
        "key" : "Chinese",
        "rank" : "",
        "recipesCount" : 6,
        "shortTitle" : "Chinese",
        "title" : "Chinese"
      },
    "ingredients" : [ "8 Shrimp",
        "2 peices of Bread",
        "1 Egg",
        "Salt",
        "1/8 teaspoon Black pepper"
      ],
    "key" : 1001,
    "preptime" : 45,
    "rating" : 3,
    "shortTitle" : "Breaded shrimp balls",
    "tileImage" :
https://devportal.hu/SHOT/images/Chinese/Chinese_2_150_C.jpg,
    "title" : "Breaded shrimp balls with hoisin sauce"
  },

Látható, hogy egy egyszerű szerkezetű JavaScript tömb amiben több objektum helyezkedik el. Ezt szeretnénk megjeleníteni!

Ehhez nyissuk meg a js mappa alatt található data.js fájlt! A korábban látot példa adatokat itt hozza létre a sablon.

Ebben a fájlban töröljük a generateSampleData funkciót. Ha közelebről szemgyre vesszük ezt a funkciót itt hozta létre a példa adatokat az alkalmazás.

function generateSampleData() { }

Mivel most „valós” adatokat fogunk megjeleníteni ezért ezt törülnünk kell. Ezenkívűl még a TÖRÖLJÜK a generateSampleData forechet! A többi funkciót ne töröljük mert szükség van rá!

generateSampleData().forEach(function (item) {
    list.push(item);
});

Ehelyet a funkció helyet hívjuk meg a WinJS.xhr funkcióját az alábbi módon!

WinJS.xhr({ url: "https://devportal.hu/SHOT/Recipes.txt&quot; }).then(function (xhr) {
var items = JSON.parse(xhr.responseText);
items.forEach(function (item)
{
    list.push(item);
});
});

Ha most elindítjuk az alkalmazást már a megfelelő eredményt látjuk.

image

Már majdnem jó a groudpedItems.html, de ha észrevesszük van néhány hely ahol az undifined szöveg jelenik meg, ami rontja az összképet. Nézzük meg, hogy mi lehet a hiba.

Nyissuk meg a groupedItems.html fájlt és keressük ki az

<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
    <div class="item">
        <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
        <div class="item-overlay">
            <h4 class="item-title" data-win-bind="textContent: title"></h4>
            <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
        </div>
    </div>
</
div>

Figyeljük meg, hogy az itemtemplatenél a kép a backgroundImage-hez van kötve. Ezzel nincs is baj, hisz ha megnézzük a Recipes.txt fájlt akkor ott van benne ez az elem. Viszont title és subtitle nincs benne. A <h4> -es data-win-bind –ot írjuk át title –ről shortTitle-re! (Figyeljünk a kis és a nagybetűkre!) Feladatunk szempontjából a <h6>-os sor nem releváns így azt töröljük.

<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
    <div class="item">
        <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
        <div class="item-overlay">
            <h4 class="item-title" data-win-bind="textContent: shortTitle"></h4>
        </div>
    </div>
</
div>

image

Most már ez nagyjából kész is, de még egy picit furán néznek ki a képek. Nézzük meg, hoogy hogyan módosítsuk egy-egy elem stílusát.

Nyíssuk meg groupedItems.css fájlt! Navigáljunk el a .groupeditemspage .groupeditemslist .item –hez és a kép méretét módosítsuk 240px *320px –re. Majd a sort is csökentsük például 48px-re.

.groupeditemspage .groupeditemslist .item {
   -ms-grid-columns: 1fr;
   -ms-grid-rows: 1fr 48px;
    display: -ms-grid;
    height: 240px;
    width: 320px;
}

Ezt követően, ha most elindítjuk, az alkalmazást már a helyes megjelenítést kapjuk. Láthatjuk, hogy az adatokat és a képeket az alkalmazás egy távoli szerverről tölti le.

image

Ha egy elemet kiválasztunk és meg szeretnénk nézni a részleteit ugyanúgy, mint korábban néhány helyen az undifined szót találjuk. Csak úgy mint korábban a template-tel van a baj, ugyanis olyan elemre hivatkozik ami nem létezik. Ahhoz, hogy ezt megoldjuk módosítanunk, kell a groupDetail.html és az itemDetail.html templatejeit is. Ez már önnálló feladat.

Advertisements
Kategóriák:JavaScript, Windows 8 Címke: , ,
  1. Mészáros Balázs
    2013. március 10. vasárnap - 22:20

    Ezt hogy lehet átírni rss feed megjelenítéséhez?

  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: