Postup pri adaptácii aplikácie na Windows 8.1 (1. časť)

Po dvoch úvodných článkoch, v ktorých som naznačil tie črty Windows 8.1 ktoré by mali akceptovať aj staršie aplikácie určené pre Windows 8 ukážem praktický príklad migrácie Windows 8 na Windows 8.1. Najskôr ukážem problém na ktorý narazí Windows 8 aplikácia spustená vo Windows 8.1. Sú to nové pravidlá flexibilného rozdelenia obrazovky vo Windows 8.1,  https://novywindows.wordpress.com/2013/10/03/vyvoj-pre-windows-8-1-flexibilne-rozdelenie-obrazovky-medzi-aplikacie/

Séria obrázkov ilustruje spolunažívanie dvoch mojich aplikácií

  • Blog Branislava Ráca (vľavo)
  • Autoškola testy (vpravo)

Aplikácia Blog Branislava Ráca vľavo je v pripnutom režime kedy využíva pás obrazovky o šírke 320 pixelov

Aplikácia Blog Branislava Ráca vľavo má k dispozícii pás širší ako 320 pixelov, ale užší než 500 pixelov

Aplikácia Autoškola testy Ráca vpravo má k dispozícii pás širší ako 320 pixelov, ale užší než 500 pixelov

Posledné dva obrázky vyzerajú fakt zle. Takto budú vyzerať u používateľa vaše staré aplikácie ak ich neprerobíte na Windows 8.1 Pozornejší čitateľ si všimne ešte jeden rozdiel. Ak aplikácia beží v pripnutom móde, môžu znovu nastať dva stavy. Buď dokáže v takomto režime v úzkom okne s minimálnymi rozmermi 320 x 768 obrazových bodov aspoň čiastočne fungovať a vtedy môže zobrazovať buď len časť obsahu, prípadne tento obsah zobrazuje v inej forme. Napríklad miesto veľkých dlaždíc, či ikon dokumentov zobrazuje úsporný zoznam a podobne. To je prípad aplikácie Blog Branislava Ráca na prvom obrázku.

Ak je zobrazovacia plocha v pripnutom režime príliš malá aby aplikácia mohla fungovať, vtedy jej nezostane nič iné len zobraziť nejaký statický, alebo dynamický obrázok. To je prípad aplikácie Autoškola testy, kedy nemá zmysel aby aplikácia fungovala v úzkom páse.

Ideme prerobiť aplikáciu Blog Branislava Ráca do Windows 8.1. Vystačíme s implicitnou minimálnou šírkou 500 pixelov. Pripomíname že aplikácia pre Windows 8.1 môže vo svojom manifeste deklarovať, že podporuje menšiu šírku, minimálne 320 px, a motivovať používateľov aby si nechali na obrazovku aplikáciu vypisujúcu pre nich zaujímavé informácie. Braňo je síce dobrý bloger, ale na rozdiel od Twitteru, či Facebooku nemá zmysel mať túto aplikáciu stále pripnutú po strane obrazovky

Postup migrácie:

  1. Otvoríme projekt vytvorený vo VS 2012 vo Visual studiu 2013 (v čase písania príspevku vo verzzii RC).
  2. Vo Vlastnostiach projektu zmeníme parameter Target Platform Version na Windows 8.1. Zobrazí sa informačný dialóg a do počítača sa v prípade záujmu stiahne dokument Optimizing your migrated Windows 8 apps: building better experiences with Windows 8.1 (Step-by-step guidance for app builders)

Zmena cieľovej platformy

Informačný dialóg

Okrem pridania novej veľkej štvorcovej dlaždice urobíme v aplikácii dve zásadné úpravy

  1. Aplikáciu prerobíme tak, že bude využívať minimálnu šírku obrazovky 500 pixelov bez nutnosti zmeny zobrazenia. Pri šírke 320 pixelov pôvodná aplikácia zobrazovala zoznam blogových článkov nie pomocou prvku GridView, ale úspornejšie pomocou prvku ListView.
  2. Druhou zmenou bude nahradenie prvku SettingsFlyout z knižnice Callisto rovnomenným prvkom integrovaným priamo do Windows.UI.Xaml.Controls. Prvok sa používa na zobrazenie deklarácie ochrany osobných údajov

Pôvodné zobrazenie deklarácie ochrany osobných údajov cez Callisto

Zbavíme sa tým ošemetného problému. Ak niektorá stránka vašej aplikácie zobrazuje webový obsah prostredníctvom prvku WebView, ktorý je situovaný pri pravom okraji obrazovky dôjde pri zobrazení prvku SettingsFlyout z knižnice Callisto SDK k vizuálnemu konfliktu. Prvok WebView sa zobrazí tak, že prekryje obsah panelu vytvoreného pomocou objektu SettingsFlyout. Súvisí to z prekrývaním virtuálnych vizuálnych vrstiev (z-orders). Inými slovami, prvok SettingsFlyout sa zobrazí pod prvkom WebView. Riešením pomerne zložitým tohto problému vtedy bolo po dobu zobrazenia panelu nastavenia nahradiť dynamické okno WebView statickou kópiou – statickým obrázkom vyfarbeným cez objekt WebViewBrush. Takýto obrázok bude prekrytý prvkom SettingsFlyout

Postup obidvoch úprav popíšem v pokračovaní

Reklamy

Pridaj komentár

Zadajte svoje údaje, alebo kliknite na ikonu pre prihlásenie:

WordPress.com Logo

Na komentovanie používate váš WordPress.com účet. Odhlásiť sa / Zmeniť )

Twitter picture

Na komentovanie používate váš Twitter účet. Odhlásiť sa / Zmeniť )

Facebook photo

Na komentovanie používate váš Facebook účet. Odhlásiť sa / Zmeniť )

Google+ photo

Na komentovanie používate váš Google+ účet. Odhlásiť sa / Zmeniť )

Connecting to %s


%d bloggers like this: