Kezdőlap > JavaScript, Windows 8 > Contact Picker – Windows 8 (JS)

Contact Picker – Windows 8 (JS)

2013. január 24. csütörtök Hozzászólás Go to comments

Ebben a feladatban a Windows Store alkalmazást készítünk, ahol egy ismerősünk adatait jelenítjük meg. Ehhez a ContactPickert fogjuk használni.

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

image 

A Visual Studio elkészíti a projekt szerkezetét. A body-ba írjuk a következő html kódot.

<div id="data" class="infobox-container">
   <div class="infobox">
       <h3><span>Kapcsolat információk</span></h3>
       <table>
           <tr>
               <td rowspan="3">
                   <img id="ProfileImage" width="52" height="52" src="images/unknow.jpg" />
               </td>
           </tr>
           <tr>
               <td>Név:</td>
               <td id="Name"></td>
           </tr>
            <tr>
               <td>Email:</td>
               <td id="Mail"></td>
           </tr>
       </table>
   </div>
</div>

Mint látható ez egy egyszerű div, amelynek a class tulajdonságát meghatároztuk (De azt még nem írtuk meg). A Div-ben van egy fejléc (h3) és egy táblázat. A táblázat három sorból és két oszlopból áll. A kép (img) vezérlőnek ugyan meghatároztunk egy képet, de az még nem a projektünk része. Így ha most elindítjuk az alkalmazást, akkor az alábbi felület fog majd fogadni. (Ami legalább nem túl szép, de csúnya.)

image

Ugyanúgy, mint egy weboldalnál a stílust itt is CSS-el határozzuk meg. A Solution Explorer-ben kattintsunk a css mappában lévő default.css fájlra. A fájlba írjuk az alábbi CSS kódot:

.infobox-container {
    margin: 0;
    padding: 0;
    width: auto;
    position:absolute;
    left:20px;
    top:30px;
    z-index:1;
}

.infobox {
    width: 250px;
    background: #424242;
    padding: 10px 5px 5px 5px;
    margin:10px;
    color: #fff;
    font-size: 90%;
    border-radius: 2px;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.55);
}

.infobox h3 {
    background: #3198dd;
    width: 270px;
    color: #fff;
    padding: 10px 5px;
    margin: 0;
    font-size: 160%;
    text-align: center;
    font-weight: bold;
    position: relative;
    left: -15px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.55);
}

 

img {
    margin-top:10px;
}

Ha ezzel megvagyunk, akkor még töltsük le az ismeretlen felhasználó fotóját. Innen: Link! Ezt a képet tegyük az images mappa alá! (Fontos, hogy a Solution-ünk része legyen! – Tehát a Solution Explorer-ben is megjelenjen!)

Indítsuk el az alkalmazást, és nézzük meg mi lett ennek a stílusnak az eredménye.

image

Mint látható ez már sokkal elegánsabb div. Ilyen formán ez az alkalmazás eladható. Most már csak ki kell választanunk, az ismerősünket és megjeleníteni ebben a div-ben. Ehhez egy ApplicationBar-t hozunk létre. (Lehetne egy gombot is feltenni a felületre, de ha lehet, használjuk mindig az ApplicationBar-t.) Az előző div alá tegyük a következő ApplicationBar-t.

(Az ApplicationBar létrehozásának mentetét az előző: Speciális Vezérlők írásban leírtuk)

<div id="appbar" data-win-control="WinJS.UI.AppBar">
    <button id="btnContact" data-win-control="WinJS.UI.AppBarCommand"
         data-win-options="{id:’pick’, label:’Kapcsolat’, icon:’people’}" />
</div>

Ennek az eredménye az alábbi ApplicationBar lesz:

image

Most már csak az üzleti logikát kell megírnunk JavaScriptben és kész is az alkalmazásunk. Az előző div element alá nyissunk egy script tagot. (Általában a html-hez tartozó js fájba célszerű. De az egyszerűség kedvéért, megadhatjuk inline módon is.)

A ContactPicker-re a Windows.ApplicationModel.Contracts–re lesz szükségünk. Azért, hogy könnyebben hivatkozzunk rá, ezt egy contacts nevezetű var-ba rakjuk. Ezt követően feliratkozunk a „Kapcsolat” gomb (btnSend) eseményére. (Ne feledjük jQuery-vel is megtehetnénk.) Az esemény törzsében meghívjuk a ContactPicker-t. Mivel most csak egy felhasználót akarunk kiválasztani ezért a pickSingleContactAsync metódust hívjuk meg. Ha ez rendben lezajlott (done), akkor lekérdezzük, ennek az eredményét. Azaz megjelenítjük a nevét, és ha van email címét a div-ben. Amennyiben nincs email címe az N/A felirat fog megjelenni. Felhívnám a figyelmet arra, hogy a kép megjelenítéséhez egy újabb metódust kell meghívnunk, mégpedig a getThumbnailAsync metódust. Ha sikerült elérni a képet, akkor elérjük a ProfileImage id-val rendelkező image elementet és a source (src) tulajdonságának átadjuk az eredményt. (Mint látható, egész különleges módon, ugyanis ennek a metódusnak az eredménye egy IRandomAccessStream.)

<script>
  var contacts = Windows.ApplicationModel.Contacts;
  var btn = document.getElementById(‘btnContact’);
  btn.addEventListener(‘click’, function () {
      var conPicker = new contacts.ContactPicker();
      conPicker.pickSingleContactAsync().done(function (e) {
          document.getElementById(‘Name’).textContent = e.name;
          var mailElement = document.getElementById(‘Mail’);
          if (e.emails.length > 0) {
              var mail = e.emails.getAt(0).value;
              mailElement.textContent = mail;
          }
          else {
              mailElement.textContent = "N/A";
          }
          e.getThumbnailAsync().then(function (e) {
              document.getElementById(‘ProfileImage’).src = URL.createObjectURL(e);
          });
      });
  });
</script>

Indítsuk el az alkalmazást, majd az ApplicationBar-n kattintsunk a „Kapcsolat” gombra. Ekkor megjelenik a ContactPicker, ahonnan kiválaszthatjuk egy (vagy több – Ha úgy állítjuk be) ismerősünket.

image

Miután kiválasztottuk az ismerősünket, a mi alkalmazásunkban az alábbi módon fog megjelenni.

image

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: