Archive for december, 2013

Štatistiky mojich Windows 8 aplikácií za rok 2013

29. decembra 2013

Koniec roka je časom na bilancovanie. Za tento rok som vytvoril relatívne veľa aplikácií pre Windows 8 a 8.1. Niektoré na zákazku a niektoré ako cvičné príklady do knihy “Vývoj aplikácií pre Windows 8.1” ktorú som napísal pre vydavateľstvo Albatrosmedia (momentálne sa kniha prekladá do češtiny). Trh Windows 8 aplikácií je veľmi zaujímavé, niektoré aplikácie sú úspešné viac, iné menej. Najväčší úspech mala aplikácia Bluetooth analyzer 11 550 stiahnutí. Aplikácia umožňuje monitorovať Bluetooth komunikáciu s externými zariadeniami cez rozhranie RFCOMM. Využívajú ju hlavne nadšenci mikrokontrolérových dosiek Arduino, či Discovery ktorí si cez ňu ladia komunikáciu svojich udelátok Na základe mailov používateľov som vytvoril jej rozšírenú platenú verziu, ktorá umožňuje prepínať zobrazenie ASCII /HEX a umožňuje ukladať záznam komunikácie do súborov. Zaujímavé sú aj demografické štatistiky za posledný mesiac a u niektorých aplikácií aj priebeh sťahovania za celý rok

Bluetooth analyzer

http://apps.microsoft.com/windows/app/bluetooth-analyzer/e632b14b-268e-458b-99ee-7a6b858a72be

počet stiahnutí – 11 550

Bluetooth comm Pro

http://apps.microsoft.com/windows/app/bluetooth-comm-pro/96b1d06c-d86b-4e49-82c3-eaa22bc81f57

2.49 EUR počet stiahnutí – ešte nezverejnené (rating je k dispozícii s niekoľkodňovým oneskorením)

Slovenské aplikácie

http://apps.microsoft.com/windows/sk-SK/app/slovenske-aplikacie/a8cddde0-ddcb-4582-a0d3-8fd251113531

počet stiahnutí – 5 879

PC REVUE WinApp

http://apps.microsoft.com/windows/sk-sk/app/pc-revue-winapp/72901b65-612d-4d75-9c68-163b2d19108d

počet stiahnutí – ??? (publikované cez konto PC REVUE)

Pluska.sk Počasie

http://apps.microsoft.com/webpdp/app/8ec25cfe-9fb9-4333-8fa2-d06ecb5195b3

počet stiahnutí – ??? (publikované cez konto PLUS 7)

Múzeum PC

http://apps.microsoft.com/windows/sk-sk/app/muzeum-pc/d1e044e6-5355-4675-9326-8b3f28124cbc

počet stiahnutí – ??? (publikované cez konto PC REVUE)

Magnetic Compass

http://apps.microsoft.com/windows/app/magnetic-compass/62077e36-cd01-443a-a015-4a044d04e399

počet stiahnutí – 1 094

Ovládanie Windows 8.1

http://apps.microsoft.com/windows/app/ovladanie-windows-8-1/9664c57f-bc54-42bf-9647-5a88cc071a52

počet stiahnutí – 892

Videonávody Windows 8.1

http://apps.microsoft.com/windows/app/videonavody-windows-8-1/bf222a8b-3a5a-4298-b334-353a6613f11d

počet stiahnutí – 403

Tone Generator

http://apps.microsoft.com/windows/app/tone-generator/fbd10f09-0cb8-4103-a938-e358f2334996

počet stiahnutí – 629

Zákony

http://apps.microsoft.com/windows/app/zakony/75aa7a44-d082-4e26-9131-2be64779960d

počet stiahnutí – 391

Slovenské zastupiteľstvá

http://apps.microsoft.com/windows/sk-SK/app/slovenske-zastupitelstva/3ec6aaed-f974-4aa0-819c-4e420f620825

počet stiahnutí – 319

SpeakerClock

http://apps.microsoft.com/windows/app/speakerclock/b2eab202-7446-4905-bf22-4177119286e0

počet stiahnutí – 234

Digital Luxmeter

http://apps.microsoft.com/windows/app/digital-luxmeter/690476c1-33f6-4ffc-9424-b3090613f707

počet stiahnutí – 228

Chess Clock

http://apps.microsoft.com/windows/sk-sk/app/chessclock/d2da5cd0-822d-46c7-a57f-c18f87ba7752

počet stiahnutí – 197

Optical counter

http://apps.microsoft.com/windows/en-gb/app/optical-counter/f8c81467-fec6-474d-a034-3dd2a62875f4

počet stiahnutí – 144

Blog Brana Raca

http://apps.microsoft.com/windows/app/blog-branislava-raca/4f4808a8-12b1-4d76-bb40-94809fc2d703

počet stiahnutí – 140

Autoškola testy

http://apps.microsoft.com/windows/app/autoskola-testy/0042ff49-a68a-48cd-871f-747f561d3bb4

počet stiahnutí – 103

Exercise Dumbbell

http://apps.microsoft.com/windows/app/exercise-dumbbell/72a25702-39dc-4378-91b0-5df5a35b44e6

počet stiahnutí -51

Khanova aritmetika

http://apps.microsoft.com/windows/app/khanova-aritmetika/1cd3fafe-ebc1-4f5b-9a8b-eda106fe98cf

počet stiahnutí – 48

Khanova geometria

http://apps.microsoft.com/windows/app/khanova-geometria/6a3bd22e-5914-4b74-a8fa-8337bbbfcff2

počet stiahnutí – 48

Khanova algebra

http://apps.microsoft.com/windows/app/khanova-algebra/a2cc9a85-46c5-4d50-9b5f-7488e893ad99

počet stiahnutí – 46

Skúšky bezpečnostného zamestnanca

http://apps.microsoft.com/windows/app/skusky-bezpecnostneho/6ff06690-8c03-4ed3-85f6-95e164f62c53

počet stiahnutí – 39

Vyvojarske blogy

http://apps.microsoft.com/windows/app/vyvojarske-blogy/eb3864a5-faa3-4fe6-a318-ca91669e6865

počet stiahnutí – 33

2013 Štatistiky posledný mesiac

Bluetooth analyzer

http://apps.microsoft.com/windows/app/bluetooth-analyzer/e632b14b-268e-458b-99ee-7a6b858a72be



Bluetooth comm Pro

http://apps.microsoft.com/windows/app/bluetooth-comm-pro/96b1d06c-d86b-4e49-82c3-eaa22bc81f57



Slovenské aplikácie

http://apps.microsoft.com/windows/sk-SK/app/slovenske-aplikacie/a8cddde0-ddcb-4582-a0d3-8fd251113531



Magnetic Compass

http://apps.microsoft.com/windows/app/magnetic-compass/62077e36-cd01-443a-a015-4a044d04e399



Ovládanie Windows 8.1

http://apps.microsoft.com/windows/app/ovladanie-windows-8-1/9664c57f-bc54-42bf-9647-5a88cc071a52

Aplikácia bola pozastavená nakoľko som v dlaždici použil Windows logo. Problém som odstránil, čaká sa na schválenie



Videonávody Windows 8.1

http://apps.microsoft.com/windows/app/videonavody-windows-8-1/bf222a8b-3a5a-4298-b334-353a6613f11d


Tone Generator

http://apps.microsoft.com/windows/app/tone-generator/fbd10f09-0cb8-4103-a938-e358f2334996



Zákony

http://apps.microsoft.com/windows/app/zakony/75aa7a44-d082-4e26-9131-2be64779960d


Slovenské zastupiteľstvá

http://apps.microsoft.com/windows/sk-SK/app/slovenske-zastupitelstva/3ec6aaed-f974-4aa0-819c-4e420f620825


SpeakerClock

http://apps.microsoft.com/windows/app/speakerclock/b2eab202-7446-4905-bf22-4177119286e0


Digital Luxmeter

http://apps.microsoft.com/windows/app/digital-luxmeter/690476c1-33f6-4ffc-9424-b3090613f707



Chess Clock

http://apps.microsoft.com/windows/sk-sk/app/chessclock/d2da5cd0-822d-46c7-a57f-c18f87ba7752


Optical counter

http://apps.microsoft.com/windows/en-gb/app/optical-counter/f8c81467-fec6-474d-a034-3dd2a62875f4


Blog Brana Raca

http://apps.microsoft.com/windows/app/blog-branislava-raca/4f4808a8-12b1-4d76-bb40-94809fc2d703


Autoškola testy

http://apps.microsoft.com/windows/app/autoskola-testy/0042ff49-a68a-48cd-871f-747f561d3bb4



Exercise Dumbbell

http://apps.microsoft.com/windows/app/exercise-dumbbell/72a25702-39dc-4378-91b0-5df5a35b44e6



Khanova aritmetika

http://apps.microsoft.com/windows/app/khanova-aritmetika/1cd3fafe-ebc1-4f5b-9a8b-eda106fe98cf


Khanova geometria

http://apps.microsoft.com/windows/app/khanova-geometria/6a3bd22e-5914-4b74-a8fa-8337bbbfcff2


Khanova algebra

http://apps.microsoft.com/windows/app/khanova-algebra/a2cc9a85-46c5-4d50-9b5f-7488e893ad99



Skúšky bezpečnostného zamestnanca

http://apps.microsoft.com/windows/app/skusky-bezpecnostneho/6ff06690-8c03-4ed3-85f6-95e164f62c53



Vyvojarske blogy

http://apps.microsoft.com/windows/app/vyvojarske-blogy/eb3864a5-faa3-4fe6-a318-ca91669e6865


2013 Štatistiky celý rok

Väčšina aplikácii bola vypublikovaná koncom roku

Slovenské aplikácie

http://apps.microsoft.com/windows/sk-SK/app/slovenske-aplikacie/a8cddde0-ddcb-4582-a0d3-8fd251113531

Publikované 15.11.2013 , FREE

počet stiahnutí – 5 879


Slovenské zastupiteľstvá

http://apps.microsoft.com/windows/sk-SK/app/slovenske-zastupitelstva/3ec6aaed-f974-4aa0-819c-4e420f620825

Publikované 20.10.2013 , FREE

počet stiahnutí – 319


Blog Brana Raca

http://apps.microsoft.com/windows/app/blog-branislava-raca/4f4808a8-12b1-4d76-bb40-94809fc2d703

Publikované 15.11.2013 , FREE

počet stiahnutí – 140


Autoškola testy

http://apps.microsoft.com/windows/app/autoskola-testy/0042ff49-a68a-48cd-871f-747f561d3bb4

Publikované 23.10.2013, 1.19 EUR

počet stiahnutí – 103



Skúšky bezpečnostného zamestnanca

http://apps.microsoft.com/windows/app/skusky-bezpecnostneho/6ff06690-8c03-4ed3-85f6-95e164f62c53

Publikované 2.10.2013, 1.19 EUR

počet stiahnutí – 39



Siena – príklad vytvorenia Windows 8.1 aplikácie bez programovania IV.

26. decembra 2013

Inštalovanie a publikovanie aplikácie. Predpokladáme situáciu že máte v návrhovom prostredí Microsoft “Project Siena” vytvorenú a pomocou tlačidla Preview aj do značnej miery odladenú aplikáciu. Pred vami je finálna fáza. Vytvoriť inštalačný balíček, nainštalovať aplikáciu na lokálny počítač, dôsledne ju otestovať a v prípade že ste s fungovaním aplikácie spokojní, môžete ju publikovať do Windows obchodu.

Publikovanie zahájite pomocou položky menu na hornej aplikačnej lište File – Publish. Jediným krokom, ktorý je v tejto fáze potrebné urobiť je vytvoriť a nahrať obrázok, ktorý bude použitý na dlaždiciach vami vytváranej aplikácie a na úvodnej obrazovke SplashScreen. Impilicitne je tam ikonka so symbolom blesku.

Kliknutím na odkaz See app tile sizes si môžete pozrieť dynamické dlaždice všetkých veľkostí aj SplashScreen – obrázok ktorý sa zobrazí po spustení aplikácie po dobu jej inicializácie

Nezabudnite zaškrtnúť políčko Publish resources locally, aby sa k aplikácii pribalili aj údaje, obrázky a videá. Ak aplikácia využíva zdroje údajov na Internete, napríklad v lokalitách SharePoint, nechajte toto pole neoznačené.

Po aktivovaní tlačidla Publish zvoľte cestu kam chcete publikovať inštaláciu aplikácie. Znovu zdôrazňujeme že sa vytvorí inštalačný súbor, ktorý keď následne v desktope spustíte, nainštalujete Windows 8.1 aplikáciu na lokálny počítač, prípadne vytvoríte balíček, ktorý môžete publikovať do Windows obchodu. Najskôr označte voľby Install on this PC. V podadresári PublishedPackage sa vytvorí jednak inštalačný súbor InstallApp.exe a jednak zdrojovky aplikácie (HTML5 + JavaScript + CSS).

Aplikáciu dôkladne otestujte. Potom znovu spustite inštalačný program a označte voľbu Create an appx file for sharing. Skontrolujte publikačný certifikát a vytvorte APPX balíček, ktorý môžete uploadovať do Windows obchodu.

Vytváranie balíčka pre publikovanie vašej aplikácie do Windows.

Certifikát pre publikovanie aplikácie.

Siena – príklad vytvorenia Windows 8.1 aplikácie bez programovania III.

25. decembra 2013

Výber produktov z ponuky

Ponuková časť aplikácie je vytvorená, avšak aplikácia zatiaľ slúži len na prezentačné účely. Aby si používateľ mohol z ponúkaných možností vybrať, je potrebné vytvoriť virtuálny nákupný košík, v tomto prípade veľmi zjednodušený. Nebudeme riešiť objednávací proces (aplikácia využíva fiktívne údaje fiktívnej firmy), len v aplikácii zapamätáme, ktoré produkty si používateľ vybral a vložil ich do virtuálneho nákupného košíka.

Fungovanie aplikácie môžete kedykoľvek vyskúšať. Stačí na hornej aplikačnej lište aktivovať tlačidlo Preview situované úplne vpravo.

Aby sme používateľovi umožnili označiť položku, pridáme do prvku Image Gallery prvok CheckBox. Stačí ho pridať v šablóne k jednému objektu a bude zobrazený pri všetkých položkách. Umiestnite ho v sposnej časti šablóny položky vľavo od jej názvu. Implicitne sa pri zaškrtávacom políčku zobrazí názov Option. Tento názov nebudeme potrebovať, preto ho vymažte.

K prvku CheckBox je potrebné definovať funkcionalitu – pridanie vybraného objektu do zoznamu, ktorý je fyzicky reprezentovaný programátorom dobre známym objektom typu Collection. Programátor by taktiež povedal, že bude programovať obsluhu udalostí, čiže zaškrtnutie prvku CheckBox, alebo zrušenie zaškrtnutia. V prostredí Siena nebudeme pochopiteľne nič programovať, ale budeme definovať obsluhu udalostí – čo sa stane po zaškrtnutí, alebo zrušení zaškrtnutia prvku CheckBox .

Kliknite na tlačidlo Behavior na spodnej lište a následne na tlačidlo OnChecked. Zapnite voľbu Collect. Aby mohol používateľ svoju voľbu aj korigovať, teda zrušiť definujte funkcionalitu Remove pre udalosť OnUnchecked. V tomto prípade odstráni aplikácia predtým vybraný objekt z kolekcie.

Zobrazenie vybraných produktov

Aby ste mohli zobraziť vybrané produkty, je potrebné vytvoriť a navrhnúť ďalšiu, v poradí už tretiu obrazovku aplikácie Screen3. Pridajte novú obrazovku a na nej postupom popísaným v predchádzajúcej stati prvok Back Arrows (nájdete ho v ponuke vizuálnych prvkov po kliknutí na dlaždicu Shapes). Ako akciu na udalosť OnSelected definujte navigáciu na obrazovku Screen2. Na obrazovku Screen3 môžete umiestniť vhodný titulok napríklad “Moje vybrané produkty”, “Môj nákupný košík” a podobne

Vráťte sa na Screen2 (obrazovka s videami a ponukou produktov). Označte zaškrtnutím aspoň dva produkty. Na obrazovku Screen3 pridajte vizuálny prvok Image Gallery with Caption, tentokrát v horizontálnom usporiadaní, aby sa čo najlepšie využila plocha obrazovky Screen3. Prvok je po kliknutí na tlačidlo Items na spodnej lište potrebné napojiť na kolekciu zákazníkom vybraných produktov Collection 1.

Pozorný čitateľ si určite všimol, že sme vyriešili navigáciu z obrazovky Screen3 späť na obrazovku Screen2. Ale ako sa používateľ dostane na obrazovku Screen3? Mohli by ste ho tam navigovať po každom označení produktu, ale to by bolo neprehľadné a z hľadiska filozofie prevádzkovateľa aplikácie e-shopu predať čo najviac aj nežiadúce. Po každom výbere produktu zákazníkovi by ho aplikácia odviedla od ďalšej ponuky a pripomínala by mu čo si už vybral. Lepším riešením bude tlačidlo na obrazovke Screen2 pomocou ktorého zákazník môže kedykoľvek nahliadnuť do svojho virtuálneho nákupného košíka.

Predtým by ste mali venovať pozornosť jednej zdanlivo bezvýznamnej drobnosti. Keď už riešite detaily týkajúce sa používateľskej skúsenosti a tieto detaily sú pre úspech rozhodujúce, mali by ste vyriešiť zastavovanie prehrávania videa pri navigácii na/z obrazovky Screen2. Na zapamätanie stavu využijeme kontextovú premennú ktorá uchováva obsah bez ohľadu na to, na ktorej obrazovke sa používateľ nachádza. Nazveme ju napríklad VideoPaused. Na základe obsahu tejto premennej sa video buď spustí alebo zastaví.

Na obrazovke Screen1 označte niektorý prvok z galérie obrázkov k videám a kliknite na tlačidlo OnSelect. Implicitne je definovaná akcia navigácie na obrazovku Screen2.

Navigate(Screen2, ScreenTransition!Fade)

Pridajte do volania procedúry Navigate tretí voliteľný (nepovinný) parameter pre nastavenie premennej VideoPaused na hodnotu false.

Navigate(Screen2, ScreenTransition!Fade, {VideoPaused: false})

Všimnite si malý žltý výstražný trojuholník, ktorý indikuje problém – nastavili ste hodnotu premennej, ktorú zatiaľ nevyužívate.

Obrazovku Screen2 na ktorej sa prehráva video zatiaľ môžete opustiť jediným spôsobom pomocou šipky v ľavom hornom rohu. Pre toto tlačidlo definujte príkaz pre aktualizáciu kontextu, kde nastavíte hodnotu premennej VideoPaused na hodnotu true. Príkaz UpdateContext bude pred príkazom Navigate. Príkazy sú oddelené stredníkom.

UpdateContext({VideoPaused: true});

Navigate(Screen1, ScreenTransition!Fade)

Keď už riešime navigáciu z obrazovky Screen2, pridajte pod galériu s ponukou produktov tlačidlo s vhodným označením napríklad nákupný košík. Pomocou tlačidla OnSelect definujte akciu – navigáciu na obrazovku Screen3.

Pridajte aj príkaz UpdateContext, rovnaký ako u tlačidla v ľavom hornom rohu.

UpdateContext({VideoPaused: true});

Navigate(Screen3, ScreenTransition!Fade)

Zostáva definovať správanie pre prvok VideoPlayer na obrazovke Screen2, aby sa prehrávanie / zastavovanie prehrávania videa riadilo podľa kontextovej premennej VideoPaused.

Teraz môžete aplikáciu vyskúšať pomocou tlačidla Preview na hornej aplikačnej lište.

Vo štvrtom zatiaľ poslednom príspevku venovanom návrhovému prostrediu Siena ukážeme inštaláciu vytvorenej aplikácie a jej publikovanie do Windows obchodu

Siena – príklad vytvorenia Windows 8.1 aplikácie bez programovania II.

24. decembra 2013

Návrh používateľského rozhrania aplikácie

Nakoľko sa jedná o nástroj určený aj ľuďom, ktorí dosiaľ neprogramovali, návod pre návrh používateľského rozhrania bude podrobný, krok za krokom. Kliknutím na tlačidlo so symbolom “+” v krúžku v pravom hornom rohu obrazovky sa zobrazí ponuka vizuálnych prvkov, pomocou ktorých môžete vytvárať používateľské rozhranie aplikácie.

Názov aplikácie

Začneme názvom aplikácie. Po spustení aplikácie by malo byť používateľovi okamžite jasné, ako sa aplikácie ovláda a čo je jej účelom. Preto odporúčame na úvodnú obrazovku aplikácie umiestniť návrh veľkým fontom. Pridajte prvok typu Label, do ktorého vložíte text – návrh aplikácie.

Všimnite si v dolnej časti na nástrojovej lište tlačidlo “Design” (symbol ceruzky v krúžku). Kliknutím na tlačidlo sa zobrazí ponuka funkcií pre úpravu dizajnu vybraného prvku. V prípade textového poľa môžete meniť typ písma, jeho veľkosť, farbu, zarovnanie, výplň a podobne.

Hlavná ponuka aplikácie

Pre hlavnú ponuku aplikácie, v tomto prípade kategorizáciu tovaru s výhodou využijeme tematické videá, ktoré sa viažu k jednotlivým kategóriám. Ponuku vizuálnych prvkov zobrazíte tlačidlom so symbolom “+” v krúžku, ktoré je pravom hornom rohu. Všimnite si, že ponuka vizuálnych prvkov využíva dva typy dlaždíc. Štvorcové pre samotné prvky a obdĺžnikové pre kategórie prvkov. V aktuálnej verzii Sieny sú dve obdĺžnikové dlaždice – Galleries, pre zobrazovanie kolekcie obrázkov a Shapes s ponukou geometrických a iných tvarov. Z ponuky vyberte Galleries. Zobrazí sa vám rozšírená ponuka pre zobrazenie kolekcie entít

Pre videá použijeme typ ImageGallery, ktorá zobrazuje obrázky priradené k videám. Prvým krokom bude napojenie vizuálneho prvku ImageGallery na zdroj údajov. Automaticky sa zobrazí dialóg v ktorom môžete vybrať tabuľku, na ktorú bude zdroj údajov napojený. V našom prípade je to tabuľka AWVideos. Upravte rozmery prvku ImageGallery, aby vyplnil na obrazovke čo najviac priestoru.

Obrazovka s konkrétnou ponukou

Kliknutím na tematický obrázok s motívom športu pre ktorý chce používateľ zobraziť ponuku tovaru by sa mal navigovať na samostatnú obrazovku aplikácie, ktorá bude ponúkať produkty určené pre vybraný typ športu. Preto vytvoríme ďalšiu obrazovku, V aplikačnom menu aktivujte funkciu Add Screen. Všimnite si, že na aplikačnej lište pribudla pre túto, zatiaľ prázdnu obrazovku sekundárna dlaždica.

Skôr než navrhneme pre túto obrazovku dizajn, je potrebné vrátiť sa na úvodnú obrazovku a nadefinovať správanie sa aplikácie po zatlačení niektorej z dlaždíc. Pomocou tlačidla On Select na spodnej aplikačnej lište definujete akciu po zatlačení prvku. K dispozícii sú tri typy akcií: Navigate, Collect a Remove. Zvoľte možnosť Navigate a definujte, že navigovať sa bude na druhú obrazovku (Screen2). Všimnite si v dolnej časti možnosť voľby prechodového animovaného efektu pri prechode na inú obrazovku.

Fungovanie navigácie si môžete interaktívne vyskúšať tak, že na úvodnej obrazovke aplikácie kliknete na prvú dlaždicu. Zobrazí sa vám zatiaľ prázdna druhá obrazovka.

Na druhú obrazovku (Screen2) umiestnite prvok Video Player. Roztiahnite ho tak, aby pokrýval celú plochu obrazovky. Na ploche prehrávača je obrázok (poster) s tyrkysovo modrým pozadím, ktorý vám pomôže pri vizuálnom zakomponovaní prvku. Aby však pri prechode na druhú obrazovku tento poster na chvíľu nepreblikal, odporúčame ho odstrániť. Na aplikačnej lište aktivujte tlačidlo Image a vymažte implicitný poster Sample!PosterImage.

Následne definujte kľúčovú funkcionalitu prvku VideoPlayer, teda video, ktoré sa bude prehrávať. Na aplikačnej lište aktivujte tlačidlo Media. Vyberte voľbu Gallery1!Selected. Táto voľba definuje, že sa bude prehrávať video priradené cez zdroj údajov (excelovský dokument) k príslušnému obrázku v galérii. Ešte je potrebné zvoliť atribút VideoURL. Všimnite si, že týmto postupným označovaním volieb sme definovali cestu k zdrojovému videosúboru, ktorý sa bude prehrávať. Je v tvare Gallery1!Selected!VideoURL. Je to reťazec, ktorého jednotlivé čiastkové atribúty sú oddelené znakom výkričník.

Pre základnú funkcionalitu stránky, zatiaľ bez ponuky produktov musíte v ľavom hornom rohu definovať tlačidlo pre návrat na úvodnú obrazovku aplikácie. Bude to tlačidlo so symbolom šípky smerujúcej vpravo v krúžku. V ponuke vizuálnych prvkov vyberte položku Shapes. Následne sa zobrazí rozšírená ponuka tvarov. Vyberte prvok Back Arrow a umiestnite ho do ľavého horného rohu obrazovky Screen2. Pomocou tlačidla On Select na spodnej aplikačnej lište definujte akciu – v tomto prípade navigáciu na úvodnú obrazovku aplikácie Screen1

Po prípravných fázach na obrazovke Screen2 v ktorých sme definovali tematické video, ktoré sa bude prehrávať na pozadí a tlačidla pre navigáciu na úvodnú obrazovku vstupujeme do z hľadiska funkcionality najdôležitejšej fázy – zobrazenia ponuky produktov pre vybraný šport. Z ponuky Galleries vyberte položku Image Gallery with Caption. Všimnite si, že k dispozícii sú dva prvky s týmto názvom. Líšia sa usporiadaním obrázkov. V tomto prípade bude výhodnejší prvok s vertikálnym usporiadaním obrázkov. Napojte ho na zdroj údajov – v tomto prípade na tabuľku AWProducts. Premiestnite prvok k pravému zvislému okraju obrazovky, nakoľko vľavo by sa jednak musel deliť o priestor s tlačidlom pre navigáciu na úvodnú obrazovku, ale hlavne by prekrýval ústredný motív videa – postavu ktorá športuje v ľavej časti obrazovky.

Môžete upraviť šablónu, podľa ktorej sa budú obrázky projektov v galérii zobrazovať. V našom prípade budeme potrebovať upraviť výšku. Obrázkov aby sa nám ich na obrazovku vošlo viac. Vyberte galériu ako celok a na spodnej lište kliknite na tlačidlo Template Size. Zmeňte výšku šablóny napríklad na 200 pixelov. Obrázky by sa zobrazili neproporcionálne. Preto je potrebné vybrať ľubovoľný obrázok v galérii a nastaviť parameter Image Position, ktorý je implicitne nastavený na Fill na hodnotu Fit, aby sa zachovala horizontálna aj vertikálna mierka obrázkov. Následne môžete zúžiť šírku celého prvku Image Gallery with Caption.

Zdalo by sa, že aplikácia je hotová, ale zatiaľ je tu jeden problém. Bez ohľadu na vybraný druh športu sa zobrazí kompletná ponuka produktov, čiže lyžiarovi sa zobrazia aj horolezecké laná a potreby pre surfistov. Preto musíte medzi zdroj údajov, v tomto prípade tabuľku AWProducts a prvok Image Gallery zaradiť filter, ktorý vyberie len relevantné produkty.

Označte prvok Image Gallery a na spodnej lište kliknite na tlačidlo Data (úplne vľavo). Následne aktivujte tlačidlo Items a názov tabuľky v editačnom okne AWProducts nahradíme definíciou podmienky pre filter.

V našom prípade vyberieme produkty podľa vybraného športu a budú sa zobrazovať postupne počas prehrávania videa podľa atribútu ShowTime. Definícia filtra bude:

Filter(AWProducts, Sport = Gallery1!Selected!Sport && ShowTime < VideoPlayer1!Time)

Pri tvorbe filtra vám pomôže interaktívna inteligentná nápoveda, ktorá ponúka atribúty a operátory.

Zobrazovanie produktov môžete ešte vylepšiť pridaním utriedenia.

Sort(Filter(AWProducts, Sport = Gallery1!Selected!Sport && ShowTime < VideoPlayer1!Time), ShowTime, Descending)

Teraz môžete aplikáciu vyskúšať. Počas prehrávania videa sa budú postupne zobrazovať produkty.

Týmto krokom je prezentačná časť aplikácie zavŕšená. K funkcionalite e-shopu však ešte chýba ďalšia kľúčová funkcionalita – možnosť výberu produktov. To bude námetom ďalšieho príspevku.

Siena – príklad vytvorenia Windows 8.1 aplikácie bez programovania I.

23. decembra 2013

Aplikácia Microsoft “Project Siena” umožňuje vytvárať aplikácie pre Windows 8.1 aj na tabletoch s operačným systémom Windows RT 8.1, teda na zariadeniach využívajúcich architektúru ARM. Aplikáciu nájdete vo Windows obchode (viď predchádzajúci príspevok). Vytvorená aplikácia pobeží na zariadeniach všetkých Windows 8 architektúr, teda x86, x64 aj ARM. Ovládanie návrhového prostredia je štandardizované, podobne ako u iných Modern UI aplikácií. Hlavné menu sa aktivuje na dotykovej obrazovke nájazdom prsta zhora, alebo zdola smerom do stredu displeja, u klasického ovládania pravým tlačidlom myši.

Siena umožňuje využiť firemné, aj webové zdroje údajov, napríklad RSS kanály, zoznamy v službe SharePoint, Excel a Azure tabuľky, či služby REST. Tento obsah sa môže automaticky načítavať do vašej aplikácie a udržiavať ju tak neustále aktualizovanú. V prvej verzii aplikácie Project Siena, ktorú sme mali k dispozícii ešte táto funkcionalita automatického obnovovania údajov nebola implementovaná.

Filozofiou Siena pripomína podobné návrhové prostredie Windows Phone App Studio, ktoré umožňuje vytvorenie aplikácie pre platformu Windows Phone v štyroch jednoduchých krokoch taktiež bez nutnosti programovania.

Poďme si vyskúšať vytvoriť aplikáciu, typu e-shop, ku ktorej Microsoft dal na stiahnutie vzorový zdroj údajov, aj výukové video, ako aplikáciu vytvoriť

Príklad vytvorenia aplikácie pre e-shop

Na webe projektu Siena nájdete pripravené údaje vo formáte Excel a k nim priradené obrázky. http://technet.microsoft.com/en-us/dn494958. Je to veľmi zjednodušená ponuka fiktívnej firmy “Adventure Works” dodávajúcej športové potreby.

Kompletná databáza AdventureWorks je k dispozícii ako cvičná databáza pre SQL Server.

V prípravnej fáze je potrebné uložiť údaje tak, aby boli pre návrhové prostredie Microsoft “Project Siena” dostupné. Je potrebné si uvedomiť je sa nejedná o desktopovú, ale o Modern UI aplikáciu pre Windows 8.1 a takáto aplikácia má prístup len do niektorých priečinkov na hostiteľskom počítači, konkrétne sa jedná o priečinky Hudba, Obrázky a Video. Všetky zdroje, ktoré budete pri tvorbe aplikácie v návrhovom prostredí “Project Siena” využívať je potrebné najskôr premiestniť do týchto priečinkov. Dokument aplikácie Excel, ktorý poslúži ako zdroj údajov môžete umiestniť kamkoľvek, napríklad do priečinka Dokumenty

Aby sme to upresnili, jedná sa o dva druhy prístupov – s vedomím používateľa, čiže na jeho pokyn a prístup z podnetu aplikácie mimo používateľa . Používateľsky riadený prístup, kedy si používateľ cez FilePicker sám vyberie požadovaný priečinok sa uplatní pri napojení sa na zdroj údajov, v tomto prípade na dokument aplikácie Excel. Tento dokument preto môže byť kdekoľvek, napríklad na ploche, v priečinkoch Dokumenty, Prevzaté súbory a podobne. Znovu opakujeme, prístup k dokumentu sa deje na pokyn používateľa, s jeho vedomím. Do priečinkov Hudba, Obrázky a Video môže aplikácia pristupovať bez vedomia používateľa, v našom prípade si automaticky, podľa odkazov na súbory s obrázkami priradí obrázky k jednotlivým položkám.

Napojenie aplikácie na zdroj údajov

Ako prvý krok definujeme pre našu aplikácie zdroj údajov. Konkrétne sa jedná o dokument aplikácie Excel, ktorý sme predtým umiestnili do priečinka Dokumenty. Dokument obsahuje dve tabuľky AWVideos a AWProduct. Pri výbere označte, že chcete importovať obidve tabuľky

Údaje v tabuľke obsahujú odkazy na videá a obrázky. V našom fragmente jedného záznamu sme jednotlivé atribúty zobrazili pod sebou aby sa nám vošli na stránku.

Sport Rock    

PosterURL C:\Users\lubolacko\Pictures\SienaAssets\AdventureWorks\Videos\rockclimbing.jpg VideoURL VideoURL C:\Users\lubolacko\Pictures\SienaAssets\AdventureWorks\Videos\rockclimbing.mp4

Podobnú štruktúru má aj tabuľka produktov

Všimnite si atribút ShowTime. Určuje, kedy sa má obrázok daného produktu zobraziť. V originálnom dokumente sú odkazy na adresár C:\Users\Public\… V našom prípade sme upravili cestu do priečinku obrázkov používateľa lubolacko. Návrhové prostredie Siena údaje prepojí a zobrazí v tabuľke náhľady obrázkov. Odporúčame skontrolovať, či sa náhľady zobrazujú v obidvoch tabuľkách – AWVideos aj AWProducts. Tabuľky môžete prepínať pomocou prvku ComboBox vľavo pod fialovým záhlavím tabuľky náhľadov na dátový zdroj

Ak sa vám náhľady nezobrazia, skontrolujte, či sú v excelovskom dokumente správne cesty k priečinkom v ktorých sú obrázky a videá a či sú tieto priečinky prístupné.

Zobrazenie údajov dátového zdroja – tabuľka s odkazmi na videá

Zobrazenie údajov dátového zdroja – tabuľka s odkazmi na produkty

V budúcom pokračovaní ukážem návrh používateľského rozhrania

Vytvárajte Windows 8 aplikácie bez programovania

20. decembra 2013

Vo Windows obchode je k dispozícii nástroj Microsoft “Project Siena” http://apps.microsoft.com/windows/sk-sk/app/microsoft-project-siena/5ae47651-e8f3-4e41-aab7-e19ab1b80180

Tento zaujímavý nástroj umožňujúci vytvárať aplikácie bez programovania je zdarma. Primárne je určený pre marketingových špecialistov, analytikov, ale aj podnikateľov napríklad vo sfére obchodu, služieb stravovania, hotelierstva, ktorí môžu intuitívne vytvoriť aplikáciu prezentujúcu predmet ich podnikania. Napríklad aktuálnu ponuku služieb, voľné kapacity na ubytovanie, jedálny a nápojový lístok v reštaurácii a podobne. Návody a prezentačné video nájdete na http://technet.microsoft.com/en-us/dn518139

Aplikáciu intenzívne testujem a skúsenosti budem publikovať na tomto blogu.

 

Ako uložiť údaje do textového súboru

18. decembra 2013

V aplikácii monitorujúcej Bluetooth komunikáciu cez rozhranie RFCOMM som potreboval uložiť prijaté údaje do súboru v textovej podobe. Údaje má aplikácia v prvku typu TextBlock s názvom tbBajty.

S aplikačným manifestom v tomto prípade problém nie je, aplikácia ukladá údaje na podnet používateľa, nikdy nie z vlastnej iniciatívy a používateľ cez FilePicker vyberie lokalitu kam chce súbor uložiť.

Ukladanie som riešil v obsluhe tlačidla.

private
async
void btSave_Click(object sender, RoutedEventArgs e)

{


FileSavePicker savePicker = new
FileSavePicker();

savePicker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;

savePicker.FileTypeChoices.Add(“Plain Text”, new
List<string>() { “.txt” });

savePicker.SuggestedFileName = “BT_001”;


StorageFile file = await savePicker.PickSaveFileAsync();


if (file != null)

{


CachedFileManager.DeferUpdates(file);


await
FileIO.WriteTextAsync(file, tbBajty.Text);


FileUpdateStatus status = await
CachedFileManager.CompleteUpdatesAsync(file);


if (status == FileUpdateStatus.Complete)

tbStatus.Text = “File “ + file.Name + ” was saved.”;


else

tbStatus.Text = “File “ + file.Name + ” couldn’t be saved.”;

}


else tbStatus.Text = “Operation cancelled.”;

}