WinJS címkéhez tartozó bejegyzések

Tetszőleges kiterjesztés megadása fájl mentésekor

Windows 8 alatt a File Open Picker dialógusablaknak viszonylag egyszerűen megadhatjuk, hogy tetszőleges típusú fájlt kiválaszthat a felhasználó, egyszerűen használjuk a szokásos csillagot:

var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
openPicker.fileTypeFilter.replaceAll(["*"]);

Ha azt szeretnénk, hogy a felhasználó tetszőleges kiterjesztéssel menthesse el a fájlt, a fentiek alapján megpróbálkozhatunk ezzel:

var savePicker = new Windows.Storage.Pickers.FileSavePicker();
savePicker.fileTypeChoices.insert("Tetszőleges", ["*"]);

Ám ez hibára vezet:

0x80070057 – JavaScript runtime error: The parameter is incorrect.

WinRT information: This file picker does not allow the all files extension.

No, ez pech. Szerencsére van megoldás, írjuk ezt:

savePicker.fileTypeChoices.insert("Tetszőleges", ["."]);
Technorati-címkék: ,,,
Reklámok

WinJS trükkök: Access is denied hiba egymásba ágyazott üzenet ablakoknál

A WinJS trükkök sorozat korábbi epizódjaiban megismerkedtünk az üzenet ablakok és a hozzájuk tartozó egyedi gombok létrehozásával. A tanultak alapján meg is írhatjuk az alábbi kódunkat, ami két MessageDialog ablakot jelenít meg egymás után:

var dlg = new MessageDialog( 'Első üzenet' );

dlg.commands.append( new UICommand( 'Bezár', function() {
  new MessageDialog( 'Második üzenet' ).showAsync().then( function() {
    // Itt csinálunk valami hasznosat...
  } );
} ) );

dlg.showAsync();

Ezzel a kóddal csak az a gond, hogy irgalmatlanul elszáll, méghozzá a legapróbb hibaüzenet nélkül. Debug módban futtatva az alkalmazást már látszik, hogy egy Access is denied kezeletlen kivétellel van dolgunk:

MessageDialog-Access-denied

Megvan a hiba? Ha nincs, akkor érdemes lehet megnézni a WinJS Trükkök sorozat mai epizódját, amiből nem csak az ok, hanem az is kiderül, hogyan lehet megszabadulni tőle:

(720p, teljes képernyős nézet ajánlott)

 

Technorati-címkék: ,,,,

WOWZAPP felkészülési anyagok

wowzapp2012November 10-én, most szombaton kerül megrendezésre Budapesten (is) a WOWZAPP 2012 egy napos Windows 8 alkalmazásfejlesztő maraton. A rendezvény reggel 8 órakor kezdődik, és a helyszíne az ELTE IK déli tömbje (változás a korábban meghirdetetthez képest!) Akad még néhány szabad hely, lehet bátran jelentkezni.

Az elmúlt hónapokban írtam pár cikket Windows 8 fejlesztés témában, melyek hasznosak lehetnek szombaton:

Windows Áruház

Fejlesztés JavaScriptben

Eszközök

Windows 8 telepítés

 

Sok sikert minden résztvevőnek!

 

Technorati-címkék: ,,,

WinJS Toolkit – JavaScript Toolkit for Windows 8

Ha JavaScriptben készítesz Windows 8 alkalmazásokat, akkor érdekes lehet számodra a WinJS Toolkit projekt, amit nemrég raktam ki a CodePlexre:

https://winjstoolkit.codeplex.com/

A WinJS Toolkit JavaScript osztályokat és függvényeket tartalmaz, amelyek segítségével egyszerűbben készíthetők Windows Store alkalmazások HTML5-CSS3-JavaScript környezetben. A közvetlenül futtatható kód mellett a projektben Visual Studio sablonok is vannak, amelyekkel gyorsabban hozhatjuk létre az alkalmazásunk néhány tipikus elemét. A projekt célja természetesen a fejlesztés gyorsítása a gyakori kódrészletek félkészre sütött tálalásával.

A projekt jelenleg nagyon korai fázisban van, egyelőre mindössze néhány függvény és sablon található benne, de még a héten ki akartam publikálni, hogy a WOWZAPP résztvevőknek legyen idejük megismerkedni vele még szombat előtt. Bár a projekt éppen hogy csak megszületett, már így is sokat segíthet, akár a szombati eseményről van szó, akár éles projektről.

Jelenleg az alábbiak találhatók a projektben:

Bővítő metódusok

  • String.format prototype

WinJSTK osztály

  • WinJSTK.isConnected() függvény: Lekérdezhető, hogy van-e éppen internet kapcsolat.
  • WinJSTK.composeMailAsync() függvény: E-mail küldést kezdeményezhetünk vele a felhasználó nevében.

Eszközök

  • Sablon WinJS osztályhoz
  • Sablon névjegy (about) beúszó ablakhoz
  • Sablon adatvédelmi nyilatkozat (privacy policy) beúszó ablakhoz

Kérlek segíts, hogy a projekt híre még időben minél többekhez eljusson. Ha Twitterezel, akkor kérlek a #WinJSTK hashtaget használd.

Természetesen minden visszajelzésnek, ötletnek örülök, és mivel közösségi projektről van szó, bátran csatlakozz a projekthez és add hozzá a saját kódodat!

 

Technorati-címkék: ,,

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:

JavaScriptes Windows Store alkalmazások teljesítményelemzése

A Windows Áruházban közzétett alkalmazásoknak megfelelően gyorsnak kell lenniük, különben elutasíthatják őket az alábbi követelményre hivatkozva:

3.8 Az alkalmazásnak meg kell felelnie a teljesítményre vonatkozó alapvető követelményeknek a kis teljesítményű számítógépeken
Az alkalmazásnak legfeljebb 5 másodperc alatt el kell indulnia
Az alkalmazás felfüggesztése legfeljebb 2 másodpercet vehet igénybe

Mindennek a tesztelésére sajnos nem elég az Windows Application Certification Kit, az ugyanis a teljesítménnyel kapcsolatban csak minimális teszteket futtat. Szerencsére JavaScriptben írt alkalmazások esetén használhatjuk a Windows 8 SDK-ban található Performance Analyzer for HTML5 Apps segédprogramot. A Visual Studio telepítése után ez az alkalmazás nem lesz kivezetve a Start képernyőre, tehát kézzel kell elindítanunk a C:\Program Files\Windows Kits\8.0\bin\<platform>\AppPerfAnalyzer mappából a appperfanalyzer_js.exe-t. Ilyen gyönyörű (?) modern (?) a felülete (az eredeti élményért katt a képre a teljes méretért):

appperf-start

A Please select an app to analyze listából ki kell választanunk az alkalmazásunkat (de kiválaszthatjuk a Microsoft alkalmazásait is Mosolygó arc), ami után már rákattinthatunk a Let’s Get Started gombra. Az Advanced gombra kattintva kicsit testreszabhatjuk, hogy milyen teszteket akarunk futtatni:

appperf-advanced

Az indítás után egy 8 lépéses varázslón vezet végig az alkalmazás, ahol minden egyes lépésnél részletes útmutatót kapunk a teendőkről:

appperf-step

A megadott időket vegyük komolyan, különben nem lesz elég adatunk az elemzéshez. A végeredmény egy bőséges HTML formátumú jelentés számokkal és grafikonokkal, amit a C:\Users\<felhasználónév>\AppData\Local\Microsoft\HTML5AppAnalyzer\Traces mappában találunk.

A teszt az alábbi területeket érinti:

  • Activation time
  • UI responsivemess
  • Layout passes
  • Synchronous XMLHttpRequest on UI thread
  • Image scaling
  • Memory footprint
  • Runtimer broker memory reference set
  • Memory leaks
  • Idle state CPU usage
  • Successful suspend
  • Memory reduction when suspended
  • App memory growth
  • Runtime broker memory growth

Érdemes tehát kipróbálni, sokat tudhatunk meg az alkalmazásunk viselkedéséről. A JavaScriptes alkalmazások teljesítményével kapcsolatban itt találhatók további ajánlások angolul: http://msdn.microsoft.com/en-us/library/windows/apps/hh465194.aspx

WinJS trükkök: üzenet ablakok egyedi gombokkal

A WinJS trükkök sorozat legutóbbi részében megtanultuk, hogyan készíthetünk egyszerű üzenet ablakokat, ha JavaScript nyelven készítünk Windows Store alkalmazásokat. A mai epizódban kicsit mélyebbre ásunk, több gombot teszünk az ablakra, testreszabjuk a felirataikat, beállítjuk a gyorsbillentyűket és természetesen egyedi eseménykezelőket is írunk hozzájuk.

Mint ahogy az üzenet ablakot sem “message box”-nak hívják Windows Store alkalmazások esetén, hanem “message dialog”-nak, a gomb se button, sőt még a gomb paramétereit is máshogy hívják az új platformon. Az alábbi videóból kiderül, hogyan:

(720p, teljes képernyős nézet ajánlott)

Ha tetszett és érdekel a folytatás, lájkold, vagy értékeld, hogy tudjam. Köszi!

 

Technorati-címkék: ,,,,