AppBar ikonok használata klasszikus gombokon

Windows Store alkalmazásainkban könnyen készíthetünk látványos application bart, méghozzá részben annak köszönhetően, hogy a WinJS.UI.AppBarIcon objektumban kapunk készen 194 darab pofás Metrós ikont. Elég ennyit írnunk és a data-win-control attribútumnak köszönhetően a div és button elemek application bar-rá alakulnak:

<div id="appbar" data-win-control="WinJS.UI.AppBar">
  <button 
    data-win-control="WinJS.UI.AppBarCommand"
    data-win-options="{id:'cmdPrev', label:'Előző', icon:'previous'}"
    type="button">
  </button>
</div>

Az egyik izgalmas rész, hogy honnan jönnek az ikonok, mit jelent a previous a fenti példában? Nos az ikonok nevei a WinJS.UI.AppBarIcon objektumban találhatóak, aminek a tartalma a WinJS-hez tartozó ui.strings.js fájlból töltődik fel:

winjs-references

Ez a fájl egy klasszikus erőforrás fájl, ami kulcs-érték párokat tartalmaz. Az appbar ikonok így töltődnek fel (részlet):

"appBarIcons\\previous": "\uE100", // ? group:Media
"appBarIcons\\next":     "\uE101", // ? group:Media
"appBarIcons\\play":     "\uE102", // ? group:Media
"appBarIcons\\pause":    "\uE103", // ? group:Media
"appBarIcons\\edit":     "\uE104", // ? group:File
"appBarIcons\\save":     "\uE105", // ? group:File
"appBarIcons\\clear":    "\uE106", // ? group:File
"appBarIcons\\delete":   "\uE107", // ? group:File
"appBarIcons\\remove":   "\uE108", // ? group:File

Mit jelent a \uE100 érték? Az appbar azt használja ki, hogy a Segoe UI Symbol betűkészletben számos ikon található (írtam róla korábban), a megadott érték pedig a felhasználni kívánt karakter kódja:

appbar-icons-charmap

Valójában tehát az appbar ikonként nem képeket, hanem karaktereket jelenít meg, ami brilliáns megoldás, hiszen egyrészt gyorsabb, másrészt nem probléma az átméretezése.

Mindez gyönyörűen látszik DOM Explorerben, kivéve a lényeget, ugyanis a spéci karaktert a Visual Studio nem tudja megmutatni (ezért vannak a fenti kódban a kérdőjelek). Szerencsére Jamie Rodriguez készített egy pár soros programot, ami kilistázza az összes WinJS.UI.AppBarIcont.

Mivel az appbar ikon valójában a klasszikus <button> elem mutációja, ezért ezt a módszert mi is használhatjuk a saját kódunkban. Mindössze annyit kell tudnunk, hogy a karakterkódokra így hivatkozhatunk a markupban:

appbar-icons-single

Tehát &#x aztán a kód, végül pedig egy pontosvessző. Az eredmény pedig:

appbar-icons-custom

Persze az ikonok kicsit máshogy néznek ki egy szögletes gombon, mint egy karikában, ezért készítettem egy rövid kódot az összes ikon megjelenítéséhez:

for( var icon in WinJS.UI.AppBarIcon ) {
  var btn = document.createElement( 'button' );
  var hex = WinJS.Resources._getWinJSString( "ui/appBarIcons/" + icon )
                 .value.charCodeAt( 0 );
  btn.innerHTML = '{0} (&amp;#x{1};): &#x{1};'.format( icon, hex.toString( 16 ) );
  document.body.appendChild( btn );
}

Íme a teljes kép (katt a nagyobb változatért):

appbar-icons-all

Természetesen nem csak azokat a karaktereket használhatjuk, amik a WinJS.UI.AppBarIcon objektumban elérhetőek, hanem bármelyik betűtípus bármelyik karakterét, ami sokkal kényelmesebb, mint img elemek méretezésével és pozícionálásával küzdeni…

 

Technorati-címkék:
Reklámok

7 thoughts on “AppBar ikonok használata klasszikus gombokon

  1. Visszajelzés: WOWZAPP felkészülési anyagok « Balássy György szakmai blogja

  2. Bognár Adrián

    Tisztelt György!
    Köszönöm ezt a bejegyzést, hasznos lesz a továbbiakban. Két kérdésem lenne a témában, gondoltam megkérdezem Önt, hátha tud segíteni.
    A Charms bar keresőjében, vagy például a PDF olvasó keresőjében Windows 8-on az input mező mellett (vagy annak részeként?) van egy nagyító ikon, mely hasonlatos az itt is látott megoldáshoz. Ön szerint az az ikon az input mező egy beépített vezérlője, vagy csak egy sima submit gomb? Nem találtam sehol részletes leírást arról, hogy HTML5 nél milyen beépített graikai vezérlői lehetnek egy input tag-nek, mint pl a Clear button vagy password esetén a Eye ikon. A “Windows 8 fejlesztés lépésről lépésre” e-könyv ír róla pár sort a 162-163. oldalon, de további információt nem találtam a témában.
    Másik kérdésem lényege, hogy bizonyos weboldalakat (pl outlook) ha a kezdőképernyőre rögzítek, akkor a csempén a weboldal (statikus) ikonja is megjelenik. Gondolom a weboldal head részében kell valamilyen sor, ami tartalmaz egy ikon linket, de erről sem találtam sehol inormációt. Segítségét előre is köszönöm!
    Üdvözlettel: Bognár Adrián

    1. Balássy György Szerző

      Adrián, a “mitől néz így ki” kérdésre a legjobb választ a Visual Studio DOm Explorerével kaphatod, azzal pontosan kideríthető, milyen HTML elem és milyen CSS tulajdonságok alkotnak egy vezérlőt.

      A vezérlőknek vannak MS specifikus CSS tulajdonságaik, amik sajnos alig dokumentáltak, ez az oldal esetleg segíthet elindulni: http://msdn.microsoft.com/en-us/library/windows/apps/hh465498.aspx

      A weboldalak 144×144 pixel méretű PNG képet adhatnak meg az msapplication-TileImage meta tag-ben: http://blogs.msdn.com/b/ie/archive/2012/06/08/high-quality-visuals-for-pinned-sites-in-windows-8.aspx

      Remélem ez segít.

  3. apr

    Mi történik, ha a segoe ui symbol-t a power user a registry-be egy tisztességes fontra (tahomára) cseréli a font substitute registry beállításokkal? Vagy egy desktop téma teszi ezt?

    Nálam pontosan ez történt, clear type és minden font simítás nélküli témát használtam + font substitute-ot tahoma-val win7 alatt korábban.
    Win8 alatt is belőttem, majd megdöbbenve tapasztaltam, hogy login képernyőn(!) illetve a start screen-en megjelentek a klasszikus karakter helyettesítő négyzetek a képek helyett…

      1. apr

        Hát igen próbálkozik az ember, vagyunk pár millióan akiket zavar a clear type (mint szemüvegest, különösen ha bármi homályos egy tűéles lcd-n)
        Lehet, hogy extrém, de évek óta 8-as verdanát használok programozáshoz, szerencsére a vs nem simítja, csak a consola-nál van forced clear type.
        A win8 kicsit jobb (nekem) mert végre lebutították a clear typeot, sajnos csak a metro felületen. A win8 se lenne olyan “rossz”, ha teljesen kidobták volna a régi desktopot, és a start screen kapott volna alulra egy taskbart és start gombot, mindenki heppi lenne 🙂

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