Tag Archives: WinJS

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

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

WinJS trükkök: egyszerű üzenet ablakok

Nem árulok el újdonságot mikor azt mondom, hogy JavaScriptben lehet Windows 8 alkalmazást fejleszteni. Hogy egy programozónak célszerű-e C# helyett JavaScriptet választani, az más kérdés, de az tény, hogy vannak olyan feladatok, amik egyszerűbben oldhatók meg JavaScriptben.

Sajnos az is tény, hogy kezdetben nem túl produktív JavaScriptben Metros alkalmazást készíteni, mert a WinJS dokumentáció (is) elég minimális. Ezért elhatároztam, hogy indítok egy sorozatot, amiben sorra veszem azokat a feladatokat, amikbe előbb-utóbb mindenki belefut. Miután az ember látja készen a megoldást, már pofonegyszerűnek tűnik, de anélkül?

Vegyük csak azt az egyszerű feladatot, hogy dobj fel egy üzenetablakot WinJS-ben! Előre szólok, hogy a hagyományos alert nem megy. És a jól megszokott MessageBox osztály sem létezik. Hát akkor?

Íme a bevezető a message dialogok világába:

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

Ha érdekel a sorozat, nyomj egy Like-ot, hogy én is tudjam. Köszi!

 

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

Ingyenes e-book: Programming Windows 8 Apps with HTML, CSS, and JavaScript

windows8-js-ebook-coverKorábban említettem, hogy a Microsoft Press júniusban kiadott egy ingyenesen letölthető előzetest Kraig Brockschmidt Programming Windows 8 Apps with HTML, CSS, and JavaScript című könyvéből, ami a maga mindössze 4 fejezetével is elég jó forrásnak számított azok számára, akik JavaScriptben akartak Metro stílusú Windows 8 alkalmazást készíteni. Nemrég megérkezett a folytatás, a második előzetesben már 12 fejezetet kapunk. Íme az újdonságok:

  • Chapter 5: Collections and Collection Controls
  • Chapter 6: Layout
  • Chapter 7: Commanding UI
  • Chapter 8: State, Settings, Files and Documents
  • Chapter 9: Input and Sensors
  • Chapter 10: Media
  • Chapter 11: Purposeful Animations
  • Chapter 12: Contracts

Az első előzetes 158 oldalas volt, a második már 537, és mire az október végi Buildre elkészül mind a 17 fejezet, súlyos mű válik belőle.

A második előzetes ingyenesen letölthető:

Akit nem érdekel ilyen mélyen a téma, vagy csak most vág bele a Windows 8 programozásba, annak a Beginning Windows 8 Application Development könyvet tudom ajánlani a Wrox kiadótól. Ebben körülbelül 70 oldal foglalkozik a JavaScriptes Windows 8 programozással, hasonló témákat érintve, mint az MS Press könyve, természetesen kevésbé mélyen tárgyalva. fog Bár ez a könyv hivatalosan csak jövő héten jelenik meg, már előrendelhető az Amazonnál.

 

Technorati-címkék: ,,