Monthly Archives: November 2012

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:
Advertisements

Hogyan kerülhet az alkalmazásom a Windows Áruház címoldalára?

Az MSDN-ben van egy Az alkalmazás értékesítése c. fejezet (a magyar verziónál jelenleg bővebb az angol!), ahol sok hasznos információt találhatunk arról, hogyan fog megjelenni az alkalmazásunk a Windows Áruházban. Arról viszont egy szót sem szólnak, hogy mi kell ahhoz, hogy az alkalmazásunk a kiemelt (Spotlight) kategóriába kerüljön.

Ez szándékos, mert ezzel is megpróbálják elejét venni a visszaéléseknek. Te is megvennéd még tízszer a fizetős alkalmazásodat, ha már csak annyi kellene, hogy a címlapra kerülj, nem? Ezért ne is nagyon számítsunk arra, hogy a jövőben az algoritmust nyilvánosságra fogják hozni…

Azért mégis íme néhány ötlet, ami segíthet:

Az alkalmazás közzétételekor a Description lépésben mindenképp adjuk meg a címlapra kerülő képeket a Promotional images rovatban, ezek nélkül ugyanis esélyünk sincs oda kerülni. Összesen négyféle méretben tudunk PNG képeket feltölteni:

promotional-images

Nem kell mindet megadnunk, de kevesebb képpel csak csökkentjük az esélyeinket. Ha csak egyetlen képet adunk meg, az legyen a 414×180 képpont méretű.

A második tipp, hogy az alkalmazás legyen kidolgozott. A legegyszerűbb alkalmazásnak is több esélye van a címlapra kerülni, ha a készítésekor odafigyelünk a részletekre, mint egy bonyolultabb (talán hasznosabb), de összecsapott alkalmazásnak. Az alap X ikonnal ne is reménykedjünk:

apps-with-no-icon

Végül pedig figyeljünk oda a visszajelzésekre. Nem csak az Értékelések oldalon kaphatunk a felhasználóktól visszajelzéseket, hanem az Áruház maga is gyűjt statisztikákat arról, hogy hogyan teljesít az alkalmazásunk, amiknek a részleteit megtekinthetjük bejelentkezés után az Irányítópulton.

 

Technorati-címkék: ,