.NET Microframework
Nem rég véget ért az ItFactory WPF tanfolyamom. A padsorok között volt egy kedves hallgató (Gál Mihály) aki már foglalkozott a .NET Microframeworkkel. Elég sok kis “kütyüje” van, és egy GHI-s tanulószetet kaptam kölcsönbe tőle. (Ez úton is köszönöm) Elég profi kis készülék, minden földi jóval el van látva amire egy kezdőnek szüksége lehet. Igaz azért elég húzós első befektetés. Kb 300$ körül van. Ami olyan 60-70 ezer jó magyar forint + postaköltség.
Szól elkezdtem vele, játszani. Mert hát ugye így akár a hűtőre vagy a mikrohullámú sütőre is írhatok programot. Bár eddig erre még nem volt ingerenciám.
Első körben kellet az SDK. Ezt innen lehet letölteni: https://netmf.codeplex.com/releases/view/81000
Fel is raktam gyorsan, a Visual Studio alatt meg is jelentek az új sablonok.
Van Windows alkalmazás, Console alkalmazás, class library. Szóval minden amire szükségünk lehet az elején. Meg is írtam egy hello worldot gyorsan. Kipróbáláshoz van egy “gyönyörű” emultáros is. Nem valami csajozós, de amire első körben szükség lehet arra elég.
Persze jó, hogy ha az embernek fizikai készüléke van, mert hát az mégis csak jobb. Rá is kötöttem USB-n a GHI-s készüléket. Néhány másodperc múlva már be is bootolt.
Próbáltam deployolni,de nem jött össze. Gondoltam is, hogy tuti kell még valami driver és akkor jó lesz. Meg is kerestem a GHI oldalán, letöltés után már ment is a deploy.
Itt volt az ideje valamit rajzolni is a kijelzőre!
public static void Main()
{
Bitmap LCD = new Bitmap(SystemMetrics.ScreenWidth,
SystemMetrics.ScreenHeight);
LCD.Clear();
int i;
for (i = 10; i < 250; i += 4)
{
//Memóriában rajzolunk
LCD.DrawLine(Colors.Green, 1, 10, i, i, 250);
}
LCD.Flush();
}
Az eredmény:
No ez is megvolt. Eljött a következő lépcsőfok. Nézzük mi az Windows Application. Igazából egy “ablakozó” rendszer, ami bizonyos tekintetben a WPF-re hajaz. Vannak it UIElementek, RoutedEventsek szóval nem volt annyira távoli a számomra. Az ablak elkészítése érdekes volt. Íme egy Hello World szintű Microframeworkos ablak:
public class Program : Microsoft.SPOT.Application
{
public static void Main()
{
Program app = new Program();
Window mainWindow = CreateWindow();
app.Run(mainWindow);
}
private static Window CreateWindow()
{
Window window = new Window()
{
Height = SystemMetrics.ScreenHeight,
Width = SystemMetrics.ScreenWidth,
Visibility = Visibility.Visible
};
Text title = new Text()
{
Font = Resources.GetFont(Resources.FontResources.NinaB),
TextContent = "Hello .NET Micro FW",
HorizontalAlignment = HorizontalAlignment.Center,
VerticalAlignment = VerticalAlignment.Center
};
window.Child = title;
return window;
}
}
Igazából nem volt bonyolult. Egy dologora kell figyelni, hogy a Text-nél a Fontot meg kell határozni, különben nem jelenik meg semmi. Én ebben az esetben most a Resources-hoz adtam, hozzá egy NinaB nevezetű fontot és azt töltöttem be.
Eredmény:
Konklúzió:
Ha .NET fejlesztő vagy akkor akár ilyen kis készülékekre is fejleszthetsz. Akkor akar a mikrosütőre is írhat alkalmazást.
Igaz ez nem kis befektetés, de szórakozásnak kiváló dolog. Akinek pedig több villamosmérnöki hajlama van az pedig még inkább fogja élvezni ezt az eszközt. Ha lesz időm még jelentkezek Microsoframework cikkekkel. Bár nem hiszem, hogy sokakat érdekelne, de azért csak leírom.
Windows Phone 8 – Telerik RadWindow Bug
Egy hobbi projektemhez a Windows Phone 8-as telerik vezérlőket használok. Igazából megvagyok vele elégedve. Nagyon látványos vezérlőket kapunk a telerik-től. Az ára is elég kellemes 99$ / év. Elég sok időt spórolnak meg nekem. Bár igaz utána kell keresni sokszor, hogy hogyan is működik egy-egy vezérlő. A dokumentáltsága elég szegényes pláne a WPF-es vagy az ASP.NET-es vezérlőkhöz képest.
Na de térjek a tárgyra. Egy RadWindow-ban (Ami am egy felturbózott popup) megszerettem volna jeleníteni egy Custom Controlt. Sikerült is minden. Szépen ment előre a projekt majd egyszer csak nem indult többé. Néztem, keresgéltem, hogy mi a répa lehet a baja. Egy jó 2 órát tuti elvett az életemből, mígnem rájöttem. A hiba akkor keletkezett, amikor a Custom Controlban Dependency Propertyket kezdtem el létrehozni. Még itt se volt baj, de Element Binding-gal kötöttem a UI elemekhez. Még ezzel sincs baj, csakhogy a UserControlt x:Name tulajdonságát én mindig root-ra állítom. Na is itt jött a gebasz. Ezt a szót ő nem szereti. Minden mást elfogad, csak a root nevet ne adjuk annak a user controlnak amit megakarunk a RadWindow-ban jeleníteni. És a legszebb, hogy akkor jár hibával ha az IsOpen (Boolean) tulajdonságot True-ra állítjuk, ami végül is logikus, de ilyenkor ArgumentExceptiont dob, miszerint az IsOpen nem lehet True.
Szóval szép kis hiba. Bár nem hiszem, hogy sokan használjátok, de mégis leírom, hátha valakinek valamikor jól jön, meg talán én se felejtem el.
Expression Web és Designe INGYEN
Nagy a felhajtás mostanság az Expression termékcsalád körül. Jönnek a hírek miszerint, csak a Blend lesz az új üdvöske és a többi termék fejlesztése hanyagolva lesz. Vagyis nem hanyagolva, de csak támogatás lesz ezekhez, vagy már az se. Az ember már nem is tudja követni, hogy akkor mit akarnak ezzel a temrékcsaláddal csinálni a Microsoftnál. Mindenestre van egy jó hírem (igaz már nem annyira újkeletű, de csak most tudtam leülni megírni). Az Expression Web és Designe terméket mostantól ingyenesek!
Az Expression Web-ben az egyik legjobb funkciója a SuperPreview. Fejlesztési szempontból annyira nem szeretem, de nem rossz eszköz. Alapvetően jobbnak tartom mint az Notepad++ -t, és Php fejlesztők is használhatják. Az Expression Designe egy fapados “illustrator” (jó nyílván nem az.) de egyszerűség kedvéért így a legkönyebb elképzelni, hogy mi is ez az eszköz. Most már ezt a terméket is ingyen kapjuk.
Szóval tessék letölteni és használni.
Letölés: http://www.microsoft.com/expression/
UI: ne tévesszen meg senkit, hogy a letöltendő fájl nevében ott a Trial szó. Ebben az esetben nem jelent semmit.
Windows 8 – JavaScript videók
A Devportal Tanulmányi hét videói és leírásainak gyűjteménye.
Geolokáció és Bing Maps – Leírás – Video letöltése
Grid Template – Szakácskönyv alkalmazás – Leírás – Video letöltése
Speciális vezérlők – Leírás – Video letöltése
ContactPicker – Leírás - Video letöltése
Csempék – Leírás – Video letöltése
Windows 8 kódgyűjtemény
Az elmúlt hetekben a Windows 8 kódgyűjtemény apróbb fejezeteit tettem fel a blogomba. A teljes jegyzetett is le lehet tölteni az alábbi linkről.
Remélem, tudja valaki majd haszonsítani.
Windows 8 Csempék – JavaScript
Ebben a feladatban a csempéket, a Windows Store alkalmazások egyik legfontosabb és legérdekesebb funkcióját ismerhetjük meg. A korábban bemutatott példákkal ellentétben itt most nem fogunk felhasználói felületet készíteni. Csak és kizárólag a csempék testreszabásával fogunk foglalkozni.
Elő követelmények:
- Operációs rendszer: Windows 8
- Fejlesztői környezet: Visual Stúdió 2012 (Az Express változat is jó!)
Indítsuk el a Visual Studio 2012-t és kattintsunk a File -> New Project menüpontra! A JavaScript projekt sablonok közül válasszuk ki a Blank App sablont, és adjuk neki a TileSample nevet, majd kattintsunk az OK gombra!
A Visual Studio elkészíti a projekt szerkezetét. A Solution Explorer-ben az images mappában találhatóak a projektünkhöz tartozó logók, ikonok és egyéb kép fájlok. A feladathoz előre el van készítve néhány kép fájl. Ezeket a képeket innen tölthetjük le.
A képek mérete fix. Figyeljünk rájuk, hogy mindig megfelelő méretű képet adjunk át a csempéknek!
Miután letöltöttük a zip fájlt, tömörítsük ki és dobjuk be a képeket az images mappába. (Drag and Drop módszerrel is történhet. – FONTOS, hogy a projektünk részei legyenek ezek a képek)
Az images mappának így kell kinéznie:
Mint látható, két extra kép is bele került ebbe a mappába. Az egyik a Widelogo.png a másik pedig a Budapest.jpg fájl.
Kattintsunk a package.appxmanifest fájlra. Itt többek között beállíthatjuk, az alkalmazásunk logóit, és egyéb alkalmazás specifikus beállításokat is. Mivel előzőleg felülírtuk a logókat így, már az új logók jelennek meg.
Kattintsunk a Wide Logo menüpontra és tallózzuk ki a Widelogo.png-t!
Kattintsunk a Splash Screen menüpontra és határozzuk meg a Splashscreen helyét, valamint adjuk meg a háttérszínét is. A háttérszín most egy világos kék szín legyen. (LightBlue)
Ha most elindítjuk az alkalmazást, akkor már egy olyan alkalmazásunk van, aminek van egy általános és egy széles ikonja is.
A Windows Store alkalmazások speciálisak, hisz ha nem használjuk őket, akkor nem fognak futni. (Ha az asztalon egy alkalmazást a tálcára helyezzük, akkor tovább fut.) Windows Store alkalmazások ilyenkor suspended állapotba kerülnek. Azaz, nem futnak a háttérben. A felhasználóval olykor kommunikálni kell, meg kell mutatnunk neki, hogy történt valami. Ehhez használhatjuk a push notification-t illetve a csempéket is. A csempéket a felhasználó mindig látja, és olvashatja a tartalmukat. A csempék módosítása alapból akkor történhet, ha az alkalmazás fut (gyakoribb eset) vagy ha nem fut, akkor egy Push Notificaton-nel jelezhetünk, hogy frissítse a csempe tartalmát. Ebben a példában mi most akkor módosítjuk a csempét, ha az alkalmazás fut.
Elég sokféle csempe létezik, ezek fajtáit az MSDN oldalon láthatjuk. Minden csempének van egy szerkezete, ami egy XML dokumentum. Az alábbi XML fájl a TileWideImageAndText01 sablon szerkezetét mutatja be.
|
<tile> |
Ennek az eredménye a következő stílusú csempe lesz: (Értelemszerűen a képet és a szöveget határozzuk meg az XML dokumentumban)
Tulajdonképpen nincs más dolgunk, mint ezt az XML fájlt megszerkeszteni.
Nyissuk meg a js mappa alatt található default.js fájlt. Majd az args.setPromise után írjuk a következő sorokat. Először szükségünk lesz a Windows.UI.Notifications névtérre. Azért, hogy ezt a hosszú névteret ne kelljen újra és újra beírni helyezzük el egy var-ba. (Most kb. olyan funkció szolgál mint a C# nyelvben a using.)
|
var notifications = Windows.UI.Notifications; |
A következő sorban meghatározzuk, hogy milyen csempe sablont (template-t) szeretnénk használni, majd ennek a template-nek az XML szerkezetét betöltjük. Ehhez a TileUpdateManager.getTemplateContent metódusát fogjuk használni, ami egy XML dokumentumot ad vissza. Mint látható először egy széles template-t választunk.
|
var wideTemplate = notifications.TileTemplateType.tileWideImageAndText01;
|
Ez a sablon tulajdonképpen két részből áll. Van egy text és egy image elementje. Első körben módosítsuk a szövegét. Az alábbi módon:
|
var wideText = tileXML.getElementsByTagName(‘text’); |
Kiválasztottuk a text elementeket, majd az első (0) elementhez hozzáfüzzük a számunkra szükséges szöveget.
A kép hozzáadása hasonló képen történik, csak itt attribútumokat kell változtatunk. Ebben az esetben az src és az alt attribútumok kerülnek változtatásra. A képnek kisebbnek kell lennie mint 200 Kb-nál és a kép felbontása pedig maximum 1024×1024 lehet.
|
var wideImage = tileXML.getElementsByTagName("image");
|
Tulajdonképpen kész a csempénk sablonja. Ebből az XML dokumentumból nekünk egy TileNotification-t kell készítenünk. A TileNotification osztály ezt támogatja. Ennek az eredményét pedig át kell adnunk a TileUpdateManager-nek. Ezt az alábbi módon tehetjük meg.
|
var tileNotification = new notifications.TileNotification(tileXML);
|
Indítsuk el az alkalmazást, majd rögtön zárjuk is be. A kezdőképernyőn (Start menüben) láthatjuk az alkalmazásunk csempéjét. Állítsuk át szélesre csempét. (Ha még nem lenne az)
Ebben az esetben megjelenik az előzőleg beállított csempe.
Mivel a csempe nem csak széles lehet, ezért nekünk egy másik csempét is meg kell határoznunk. Ebben az esetben egy standard téglalap méretű csempét fogunk létrehozni. A módszer ugyan az, mint az előző esetben. Kiválasztunk egy sablont, majd annak XML-jét a számunkra megfelelő módon módosítjuk.
|
var squareTemplate = notifications.TileTemplateType.tileSquareText01;
|
Kész a második csempék XML-je. Ezt hozzáfűzzük az előzőhöz. De csak is a binding element-től! Majd ezt hozzá fűzzük az eredeti tileXML-hez. (WideTemplate XML-je)
|
var node = tileXML.importNode(squareTileXml.getElementsByTagName("binding").item(0), true);
|
Ha most elindítjuk az alkalmazást, akkor mind széles mind standar méretű csempénk is frissíteni fogja a tartalmát a mi általunk meghatározott szöveggel és/vagy képpel
Teljes JavaScript kód:
|
var notifications = Windows.UI.Notifications;
var wideTemplate = notifications.TileTemplateType.tileWideImageAndText01;
var wideImage = tileXML.getElementsByTagName("image");
var squareTemplate = notifications.TileTemplateType.tileSquareText01;
var node = tileXML.importNode(squareTileXml.getElementsByTagName("binding").item(0), true);
var tileNotification = new notifications.TileNotification(tileXML); |
Windows 8 JavaScript – Sepciális vezérlők
Ebben a feladatban a Windows Store alkalmazások speciális vezérlőit és lehetőségeit fogjuk megnézni. Olyan elemeket, mint az ApplicationBar vagy épp a Flyout. A feladat végén, pedig megnézzük azt, hogy jQuery-t, hogyan is használhatjuk egy Windows Store alkalmazásban.
Elő követelmények:
- Operációs rendszer: Windows 8
- Fejlesztői környezet: Visual Stúdió 2012 (Az Express változat is jó!)
Indítsuk el a Visual Stúdió 2012-t és kattintsunk a File -> New Project menüpontra! A JavaScript projekt sablonok közül válasszuk ki a Blank App sablont, és adjuk neki a JsSpecSample nevet, majd kattintsunk az OK gombra!
A Visual Studio elkészíti a projekt szerkezetét.
Nyissuk meg a default.html fájlt. Láthatjuk, hogy ez egy standard HTML fájl. Mi viszont most olyan funkciókkal fogjuk ellátni ezt a HTML fájlt amivel weben nemtalálkozunk. Első körben megismerkedünk az ApplicationBar-ral.
Az ApplicationBar az egyik legfontosabb Windows Store App vezérlő. Ugyanis ezen a felületen helyezzük el alkalmazásunk fontosabb parancsait. Ha lehetséges, minden funkciót ezen a felületen helyezzünk el! Bár lehetőségünk van a munkaterületen is gombokat és menü elemeket elhelyezni, amik valamilyen funkciót végeznek el, de ha ez nem feltétlenül fontos, próbáljuk meg ezeket a funkciókat az Applicationbar-on elhelyezni! Ez a menü a képernyő alján jelenik meg (Tetején is megjelenhet csak azt navigatiobar-nak hívjuk), ha jobb egérgombbal kattintunk vagy a megfelelő gesztikulációt végezzük el. Nézzük meg, hogy miként hozhatunk létre egy ilyen Applicationbar-t!
A body-ban hozzunk létre egy div-et. A divnek lesz egy speciális attribútuma, ami a data-win-control. Ezt webes felületen nem használjuk, hisz ez Windows Store specifikus. Ennek az értéke WinJS.UI.AppBar lesz. Ebben a div-ben egyszerű vezérlőket vezérlőket helyezhetünk el. Amelyeknek szintén lesz egy data-win-control attribútuma, aminek az értéke most a WinJS.UI.AppBarCommand lesz. A vezérlő finomhangolását a data-win-options attribútum segítségével tehetjük meg. Ehhez egy sima JavaScript objetre lesz szükségünk.
|
<div id="appbar" data-win-control="WinJS.UI.AppBar"> |
Figyeljük meg, hogy ebben az esetben egy Id-t, egy label-t és egy icon tulajdonságok határoztunk meg. (Az icon esetében a beépített ikonok közül választottunk egyet.)
Ha most elindítjuk az alkalmazást, és jobb egérgombbal kattintunk, a felületen akkor megjelenik az application bar egy darab gombbal.
Most, hogy kész az application bar szeretnénk is valamire használni. Például azt szeretnénk, hogy ha rákattintunk az üzenet gombra akkor egy ablak megjelenjen és bekérje tőlünk az üzenetet. Ezt persze több féle képen is megtehetjük, de nézzünk erre egy beépített módszert. A Body-n belül az ApplicationBar Div elementje után készítsünk egy újabb Div elementet. Ennek a Div elementnek is meghatározzuk a data-win-control attribútumát. Ebben az esetben ennek az értéke WinJS.UI.Flyout lesz. Majd ezen Div elementen belül hozzunk létre egy sima üzenet bekérő felhasználói felületet. Ebben lesz egy szöveg, egy textbox és egy button vezérlő. A Flyout tehát így fog kinézni.
|
<div id="flyoutmessage" data-win-control="WinJS.UI.Flyout">
|
Ha most elindítanánk, az alkalmazást nem jelenne meg a Flyout. Ezt jelölnünk kell! Ebben az esetben pedig az ApplicationBar-on belül a gombnál fogjuk megtenni azt. Bár a Flyout-ot más vezérlőknél is használhatjuk, viszont nagyon szeret az ApplicationBar-ral együtt lenni. Így most mi is ezt tesszük. Egészítsük ki a gombunk data-win-options értékét az alábbi módon:
|
<div id="appbar" data-win-control="WinJS.UI.AppBar"> |
Ha most elindítjuk az alkalmazást, és rákattintunk az üzenet gombra akkor közvetlenül az application bar felet (Most jobb oldalt) megjelenik a Flyout.
Ezzel is elkészültünk. Viszont még semmit sem csinál, ez a kis alkalmazás. A feladatunk az volna, hogy ha rákattintunk a Küldés (btnSend) gombra akkor a textbox-ba beírt szöveg megjelenjen egy MessageDialog-ba.
Ehhez most már JavaScriptben kell kódot írnunk. Ezt több helyen is megtehetnénk. Akár a default.js fájlba is, de mi most az egyszerűség kedvéért inline módon a HTML dokumentumba fogjuk ezt elvégezni. A Flyout Div elementje alatt nyissunk egy script tagot és iratkozzunk fel a Küldés gomb (btnSend) eseményvezérlőjére. Majd az esemény törzsébe kérdezzük le, hogy mi az amit a felhasználó a textboxba írt. Ezt követően jelenítsük meg egy MessageDialog-ban (A fejlesztők nagyon szeretik az üzenet ablakokat feldobni, mert gyorsan és egyszerűen tudnak üzenetet küldeni a felhasználói felületre. Ez a lehetőség viszont Windows Store alkalmazásoknál nem így működik. MessageBox osztály nem létezik, helyette viszont van MessageDialog, ami a Windows.UI.Popups névtérben található. A MessageDialog használata valamivel összetettebb, mint a MessageBox-é, de cserébe sokkal többet nyújt a feljesztők számára, mint a MessageBox.)
A JavaScript kódunk most így fog kinézni:
|
<script> |
Ha most elindítjuk az alkalmazást, és rákattintunk az üzenet gombra és beírunk egy tetszőleges szöveget a textboxba, majd rákattintunk, a Küldés gombra akkor megjelenik az üzenet. tehát az alkalmazásunk most már jól működik. Viszont jogosan merülhet fel a kérdés, hogy nem-e lehet valamilyen JavaScript library-t használni itt. Hiszen nagyon sokan akik a weben fejlesztenek használják a jQuery-t, az extJS-t vagy valamilyen más könyvtárat. A válasz azaz, hogy nyugodtan használjunk. Igaz lesznek különbségek, de nagyrészt mindent megtudunk majd oldani.
Nézzük meg az előző példát jQuery-vel. Kattintsunk a Solution Explorer-ben jobb egérgombbal a References menüpontra és válasszuk ki a Manage NuGet Packages… menüpontot.
A megjelenő ablakban a kereső mezőbe írjuk azt, hogy „jQuery”. Figyeljünk oda, hogy Online akarunk keresni! Ha megtaláltuk a jQuery-t kattintsunk az install gombra.
Ezt követően a Solutionün-ben egy Script mappa is belekerül, amiben az adott jQuery library kerül bele. Ahhoz, hogy ezt a dokumentumunknál használjuk, töltsük be. (Ez Drag and Drop módszerrel is történhet). A lényeg az, hogy a default.html fejlécbe ott legyen az alábbi sor:
|
<script src="Scripts/jquery-1.8.3.js"></script> |
Ezt követően írjuk át a Script-ben található kódot „jQuerysre” az alábbi módon.
|
<script> |
Az eredmény tulajdonképpen ugyan az, mint előzőleg, csak épp jQuery-t használtunk ennek eléréséhez. Ami nagyrészt sokkal kényelmesebb, mint a sima JavaScript használat.
Contact Picker – Windows 8 (JS)
Ebben a feladatban a Windows Store alkalmazást készítünk, ahol egy ismerősünk adatait jelenítjük meg. Ehhez a ContactPickert fogjuk használni.
Elő követelmények:
- Operációs rendszer: Windows 8
- Fejlesztői környezet: Visual Stúdió 2012 (Az Express változat is jó!)
Indítsuk el a Visual Studio 2012-t és kattintsunk a File -> New Project menüpontra! A JavaScript projekt sablonok közül válasszuk ki a Blank App sablont, és adjuk neki a ContactPicker nevet, majd kattintsunk az OK gombra!
A Visual Studio elkészíti a projekt szerkezetét. A body-ba írjuk a következő html kódot.
|
<div id="data" class="infobox-container">
|
Mint látható ez egy egyszerű div, amelynek a class tulajdonságát meghatároztuk (De azt még nem írtuk meg). A Div-ben van egy fejléc (h3) és egy táblázat. A táblázat három sorból és két oszlopból áll. A kép (img) vezérlőnek ugyan meghatároztunk egy képet, de az még nem a projektünk része. Így ha most elindítjuk az alkalmazást, akkor az alábbi felület fog majd fogadni. (Ami legalább nem túl szép, de csúnya.)
Ugyanúgy, mint egy weboldalnál a stílust itt is CSS-el határozzuk meg. A Solution Explorer-ben kattintsunk a css mappában lévő default.css fájlra. A fájlba írjuk az alábbi CSS kódot:
|
.infobox-container {
.infobox {
.infobox h3 {
img {
|
Ha ezzel megvagyunk, akkor még töltsük le az ismeretlen felhasználó fotóját. Innen: Link! Ezt a képet tegyük az images mappa alá! (Fontos, hogy a Solution-ünk része legyen! – Tehát a Solution Explorer-ben is megjelenjen!)
Indítsuk el az alkalmazást, és nézzük meg mi lett ennek a stílusnak az eredménye.
Mint látható ez már sokkal elegánsabb div. Ilyen formán ez az alkalmazás eladható. Most már csak ki kell választanunk, az ismerősünket és megjeleníteni ebben a div-ben. Ehhez egy ApplicationBar-t hozunk létre. (Lehetne egy gombot is feltenni a felületre, de ha lehet, használjuk mindig az ApplicationBar-t.) Az előző div alá tegyük a következő ApplicationBar-t.
(Az ApplicationBar létrehozásának mentetét az előző: Speciális Vezérlők írásban leírtuk)
|
<div id="appbar" data-win-control="WinJS.UI.AppBar">
|
Ennek az eredménye az alábbi ApplicationBar lesz:
Most már csak az üzleti logikát kell megírnunk JavaScriptben és kész is az alkalmazásunk. Az előző div element alá nyissunk egy script tagot. (Általában a html-hez tartozó js fájba célszerű. De az egyszerűség kedvéért, megadhatjuk inline módon is.)
A ContactPicker-re a Windows.ApplicationModel.Contracts–re lesz szükségünk. Azért, hogy könnyebben hivatkozzunk rá, ezt egy contacts nevezetű var-ba rakjuk. Ezt követően feliratkozunk a „Kapcsolat” gomb (btnSend) eseményére. (Ne feledjük jQuery-vel is megtehetnénk.) Az esemény törzsében meghívjuk a ContactPicker-t. Mivel most csak egy felhasználót akarunk kiválasztani ezért a pickSingleContactAsync metódust hívjuk meg. Ha ez rendben lezajlott (done), akkor lekérdezzük, ennek az eredményét. Azaz megjelenítjük a nevét, és ha van email címét a div-ben. Amennyiben nincs email címe az N/A felirat fog megjelenni. Felhívnám a figyelmet arra, hogy a kép megjelenítéséhez egy újabb metódust kell meghívnunk, mégpedig a getThumbnailAsync metódust. Ha sikerült elérni a képet, akkor elérjük a ProfileImage id-val rendelkező image elementet és a source (src) tulajdonságának átadjuk az eredményt. (Mint látható, egész különleges módon, ugyanis ennek a metódusnak az eredménye egy IRandomAccessStream.)
|
<script> |
Indítsuk el az alkalmazást, majd az ApplicationBar-n kattintsunk a „Kapcsolat” gombra. Ekkor megjelenik a ContactPicker, ahonnan kiválaszthatjuk egy (vagy több – Ha úgy állítjuk be) ismerősünket.
Miután kiválasztottuk az ismerősünket, a mi alkalmazásunkban az alábbi módon fog megjelenni.
Grid Template – JavaScript (W8)
Ebben a feladatban egy szakácskönyv alkalmazást fogunk elkészíteni, ami egy távoli „szolgáltatástól” kérdezi le recepteket, majd egy táblázatos formában csoportosítva megjelenítjük a recept kategóriákat.
Elő követelmények:
- Operációs rendszer: Windows 8
- Fejlesztői környezet: Visual Studio 2012 (Az Express változat is jó!)
Mivel korábban csak Blank App sablont néztük meg, itt az ideje egy látványosabb sablont és közelebbről szemügyre venni.
Indítsuk el a Visual Studio 2012-t és kattintsunk a File -> New Project menüpontra! A javaScript projekt sablonok közül válasszuk ki a Grid App sablont, és adjuk neki a CookbookDemo nevet, majd kattintsunk az OK gombra!
A Visual Studio elkészíti a projekt szerkezetét. Láthatjuk, hogy a pages mappa alatt három html fájl van és mindegyik html fájlhoz tartozik egy ugyanolyan nevű JavaScript (js) és CSS (css) fájl is.
Indítsuk el az alkalmazást (F5). Ebben az esetben már lesznek példa adataink. Igaz csak lorem ipsum példa szövegek, valamint szürke és fekete fehér képek egy ListView-ban. Ez nem túl látványos, de példa adatnek pont tökéletes.
Ha egy téglalapra kattintunk, akkor betöltődik egy részeletesebb nézet, de ugyanőgy csak példa adatokat tartalmaz. Első körben ezen szeretnénk változtatni.
Első lépésként változtassuk meg az alkalmazásunk nevét. A CookbookDemo helyet jelenjen meg a Devportal Cookbook. Ehhez nyissuk meg a groupedItems.html fájlt és a header szekcióban található <h1>-es címet írjuk át Devportal Cookbookra.
|
<h1 class="titlearea win-type-ellipsis">
|
Ez egyszerű volt. De jó volna ha a szürke téglalapok helyet valamilyen kép és szöveg jelenjen meg.
Az alkalmazások nagyon sokszor egy külső adatforrásból származó adatokat jelenítenek meg. Igaz a Windows store alkalmazások közvetlen módon nem tudnak adatbázishoz (MSSQL, MySQL, Oracle stb) csatlakozni. Viszont egy WCF vagy más webszolgáltatáshoz könnyedén. A vissza érkező adatt pedig lehet XML, MTOM, RSS, JSON és egyébb más közkedvelt webes formátumok.
Ez az alkalmazást is ezt fogja most bemutatni. Igaz ebben az esetben csak egy statikus fájl fogja ezt számunkra szolgáltatni amit korábben a Devportal.hu szerverén helyeztem el. A fájl itt tekinthető meg. A fájl tartalmbából.
|
{ "backgroundImage" : https://devportal.hu/SHOT/images/Chinese/Chinese_2_600_C.jpg,
… |
Látható, hogy egy egyszerű szerkezetű JavaScript tömb amiben több objektum helyezkedik el. Ezt szeretnénk megjeleníteni!
Ehhez nyissuk meg a js mappa alatt található data.js fájlt! A korábban látot példa adatokat itt hozza létre a sablon.
Ebben a fájlban töröljük a generateSampleData funkciót. Ha közelebről szemgyre vesszük ezt a funkciót itt hozta létre a példa adatokat az alkalmazás.
function generateSampleData() { }
Mivel most „valós” adatokat fogunk megjeleníteni ezért ezt törülnünk kell. Ezenkívűl még a TÖRÖLJÜK a generateSampleData forechet! A többi funkciót ne töröljük mert szükség van rá!
|
generateSampleData().forEach(function (item) {
|
Ehelyet a funkció helyet hívjuk meg a WinJS.xhr funkcióját az alábbi módon!
|
WinJS.xhr({ url: "https://devportal.hu/SHOT/Recipes.txt" }).then(function (xhr) {
|
Ha most elindítjuk az alkalmazást már a megfelelő eredményt látjuk.
Már majdnem jó a groudpedItems.html, de ha észrevesszük van néhány hely ahol az undifined szöveg jelenik meg, ami rontja az összképet. Nézzük meg, hogy mi lehet a hiba.
Nyissuk meg a groupedItems.html fájlt és keressük ki az
|
<div class="itemtemplate" data-win-control="WinJS.Binding.Template"> |
Figyeljük meg, hogy az itemtemplatenél a kép a backgroundImage-hez van kötve. Ezzel nincs is baj, hisz ha megnézzük a Recipes.txt fájlt akkor ott van benne ez az elem. Viszont title és subtitle nincs benne. A <h4> -es data-win-bind –ot írjuk át title –ről shortTitle-re! (Figyeljünk a kis és a nagybetűkre!) Feladatunk szempontjából a <h6>-os sor nem releváns így azt töröljük.
|
<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
|
Most már ez nagyjából kész is, de még egy picit furán néznek ki a képek. Nézzük meg, hoogy hogyan módosítsuk egy-egy elem stílusát.
Nyíssuk meg groupedItems.css fájlt! Navigáljunk el a .groupeditemspage .groupeditemslist .item –hez és a kép méretét módosítsuk 240px *320px –re. Majd a sort is csökentsük például 48px-re.
|
.groupeditemspage .groupeditemslist .item {
|
Ezt követően, ha most elindítjuk, az alkalmazást már a helyes megjelenítést kapjuk. Láthatjuk, hogy az adatokat és a képeket az alkalmazás egy távoli szerverről tölti le.
Ha egy elemet kiválasztunk és meg szeretnénk nézni a részleteit ugyanúgy, mint korábban néhány helyen az undifined szót találjuk. Csak úgy mint korábban a template-tel van a baj, ugyanis olyan elemre hivatkozik ami nem létezik. Ahhoz, hogy ezt megoldjuk módosítanunk, kell a groupDetail.html és az itemDetail.html templatejeit is. Ez már önnálló feladat.
Geolokáció és a Bing Maps – JavaScript
Ebben a feladatban egy olyan Windows Store alkalmazást fogunk elkészíteni, amiben lekérdezzük, a jelenlegi pozíciónkat majd ezt megjelenítjük a Bing Maps térképszolgáltatása segítségével. Az alkalmazást JavaScriptben fogjuk megírni.
A megjelenő New Project ablakban a jobb oldali oszlopban válasszuk ki a JavaScript Windows Store element. A sablonok (template) közül pedig most a Blank App templatet fogjuk használni. A Solution neve legyen most BingMapsApp. Ha ez meg van, kattintsunk az OK gombra!
Miután a Visual Studio betöltötte a sablont, a referenciák közzé vegyük fel a Bing Maps-ot. A Solution Explorerben (alapértelmezés szerint jobb felső sarok) kattintsunk a Referneces-re jobb egérgombbal és válasszuk, ki az Add Reference menüpontot.
A megjelenő ablakban válasszuk ki a Bing Maps for JavaScript-et. (Abban az esetben, ha a Bing Maps for JavaScript nem jelenik meg ellenőrizzük, hogy a Bing Maps SDK for Windows Store apps-t megfelelően telepítettük.) (Legyen mellette kipipálva) Kattintsunk az OK gombra.
Amint hozzáadtuk a Bing Maps for JavaScriptet megjelenik a referenciák között.
Nyissuk meg a default.html dokumentumot a Visual Studio-ban. láthatjuk, hogy ez egy egyszerű HTML5 dokumentum, amibe néhány script (WinJS) már előre be van töltve. Mivel a Bing Maps SDK komponenseire is szükségünk lesz, ezért ezt is töltsük be. Ehhez mindösszesen csak fogd és vidd (Drag and Drop) módszerrel dobjuk fel a referenciát. Ezt a HEAD tagba célszerű elhelyezni. (A sorrendiség számít!)
|
<head> |
A body-hoz adjunk egy Div-et melynek neve legyen az, hogy map.
|
<body> |
A js mappához adjunk hozzá egy új JavaScript fájlt. Ebben a JavaScript fájlban a Bing Maps specifikus funkciókat fogjuk elhelyezni. A js mappán kattintsunk, jobb egérgombbal majd válasszuk, ki az Add -> New Item menüpontot.
A megjelenő ablakban válasszuk ki a JavaScript File-t. Ennek a neve legyen most a mapManager.js, majd kattintsunk, az Add gombra!
Ekkor a Visual Studio betölti mapManager.js fájl, ami egy üres fájl. Ahhoz, hogy a WinJS API-jait el tudjuk érni úgy, hogy van IntelliSense a Referencies közül dobjuk ide (Drag and Drop) a base.js és a UI.js
A mapControl.js első két sora így fog kinézni.
|
/// <reference path="//Microsoft.WinJS.1.0/js/base.js" /> |
Ezt követően készítsünk egy névteret a WinJS segítségével. Bár a JavaScriptben alapból nincs névtér, de korábban is trükközéssel ezt meglehetett oldani. A WinJS ugyan ezt csinálja csak egyszerűbben. A WinJS.Namespace.define segítségével létrehozhatunk egy névteret, majd egy JavaScript objektumot. A JavaScript objektum három funkciót és egy publikus adattagot fog tartalmazni.
|
(function () { WinJS.Namespace.define("MapControl",
addPushpin: function (latitude, longitude) { }
}); |
Az initMap a térkép inicializálását fogja elvégezni. A getMyPosition-ben a jelenlegi pozíciónkat állapítjuk meg, míg az addPushpin segítségével egy gombostűt helyezünk el a térképpen. De kezdjük az initMap-pal.
Az initMap-ban létrehozunk egy mapOption objektumot. Ennek az objektumnak négy eleme lesz.
- credentials: A bingmapsportal adott API Key-t itt kell megadnunk
- center: A térkép középpontja. (Jelen esetben Budapest)
- mapTypeId: a térkép típusa. Jelen esetben utca térkép.
- zoom: a közelítés mértéke. Minél nagyobb a szám annál közelebb van az adott pont.
|
initMap: function () { try {
map = new Microsoft.Maps.Map(document.getElementById(‘map’), mapOption);
} catch (e) { |
A mapOption meghatározása után létrehozunk egy új Map-ot. (A map változót korábban létrehoztuk. Figyeljük meg az előző ábrát!) A map létrehozásánál meg kell mondanunk azt az elementet amiben megakarjuk jeleníteni a térképet. Ebben az esetben egy ’map’ nevű div. A második paraméter pedig a mapoption amit korábban létrehoztunk.
Ezt a műveletet egy try catch blokba helyeztük. Abban az esetben, ha hiba történik, egy MessageDialog (Üzenet párbeszédablak) jelenik meg. Figyeljük meg, hogy hozhatunk létre MessageDialogoka!
Az alkalmazást még ne indítsuk, el mivel még nem működne! Ahhoz, hogy működjünk először a default.html-be töltsük be az előzőleg elkészített javasciprt fájlt. (Itt is csak úgy, mint korábban a Drag and Drop módszer működik. A sorrend fontos!)
|
<link href="/css/default.css" rel="stylesheet" /> |
Ezt követően nyissuk meg a default.js fájlt és az onactivated-nél közvetlenül az args.setPromise után töltsük be a Microsoft.Maps.loadModule segítségével a Microsoft.Maps.Map –ot. Figyeljük meg, hogy a második paraméternél a callback arra az initMap-ra hivatkozik, amit mi a MapControl névtérnél definiáltunk.
|
app.onactivated = function (args) { if (args.detail.kind === activation.ActivationKind.launch) { |
Most már elindíthatjuk az alkalmazást (F5). Elindítani a Visual Studio toolbarjáról is tudjuk.
- Local Machine: helyi gépünkre telepíti az alkalmazást
- Simulator: Egy szimulációs környezetbe. (Több funkció tesztelhető. Multitocuh, elforgatás stb)
- Remote Machine: Távoli gépre is telepíthetünk.
Ebben az esetben a Local Machine ajánlott, de dönthetünk máskép is.
Ha mindent jól csináltunk, akkor, most már megjelenik a Bing Maps térképe.
A térkép megjelent itt az ideje megállapítanunk, hogy hol is vagyunk. Ehhez először az alkalmazásunknak meg kell mondanunk, hogy ez az alkalmazás bizony el fogja érni a lokáció meghatározásához szükséges eszközt vagy eszközöket.
Kattintsunk a package.appxmanifest fájlra. A Capabilities fülön pipáljuk be a Location –t. Ezzel jelezzük, hogy az alkalmazásunk ezt az erőforrást használni fogja.
A getMyPosition-nál fogjuk lekérdezni, hogy hol vagyunk, de az addPushpin –nál fogjuk megjeleníteni. A getMyPositionben ha megkaptuk a szélességi és hosszúsági fokokat fogjuk az addPushpint megírni. Így ennek függvényében először az addPushpin funkciót írjuk meg.
Itt tulajdonképpen csak egy Location-t hozunk létre, aminek az addPushpint latitude és longitude paramétereit adjuk át. Ezt követően egy pushpin-t hozunk létre aminek átadjuk ezt a locationt. A pushpint pedig átadjuk a map entites speciális tömbjének a push funkció segítségével. Bonyolultnak hangozhat, de nem azt.
Írjuk hát meg az addPushpin-t:
|
addPushpin: function (latitude, longitude) { |
Ezt követően pedig már megírhatjuk a getMyPosition funkciót.
|
getMyPosition: function () { |
Itt létrehozunk egy Windows.Devices.Geolocation.Geolocator objektumot, majd meghívjuk a getGeopositionAsync funkcióját. Figyeljünk rá, hogy aszinkron! Ezt követően egy elegáns .then meghívásával azt mondjuk, hogy ha sikerült megkapni a koordinátákat, akkor a MapControl.addPushpin metódusát meghívjuk és átadjuk a számára szélességi és hosszúsági fokokat.
Még annyit kell tennünk, hogy ez működjön is, hogy az initMap –nál a map létrehozása után meghívjuk a MapControl.getMyPosition funkcióját. Tegyük hát meg!
|
…
|
Most már mindennel készek vagyunk, indítsuk el az alkalmazást! Az első indulásnál az alkalmazásunk megkérdezi a felhasználótól, hogy engedélyezi-e megállapítani a felhasználó jelenlegi pozícióját. (A pozíció pontossága ip címből, wierless adatokból, és ha a készülék támogatja, akkor a GPS eszköz által nyújtott információkból adódhat. Legegyszerűbb esetben a várost fogja megmondani.)
Turóczy Attila szakmai blogja 
