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:
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:
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:
Tehát &#x aztán a kód, végül pedig egy pontosvessző. Az eredmény pedig:
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} (&#x{1};): &#x{1};'.format( icon, hex.toString( 16 ) );
document.body.appendChild( btn );
}
Íme a teljes kép (katt a nagyobb változatért):
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:
Windows 8