Archive for október, 2013

Komunikácia cez Bluetooth

30. októbra 2013

Windows 8.1 aplikácia môže pre prístup k zariadeniam cez Bluetooth používať nové API rozhrania API RFCOMM a GATT (Generic Attribute Profile). Tieto rozhrania dokážu komunikovať cez Bluetooth BR / EDR aj cez Bluetooth LE. Bluetooth zariadenia, či už klasické, alebo “smart” sa musia najskôr zistiť a spárovať cez rozhranie Nastavenie počítača (Počítače a zariadenie> Zariadenie> Pridať zariadenie) Až potom budú prístupné cez Bluetooth WinRT API.

Informácie o svojom zariadení, alebo o všeobecnej triede zariadení musíte pridať do aplikačného manifestu napríklad pre ľubovoľné zariadenie podporujúce RFCOMM:

<Capabilities>

<m2:DeviceCapability Name=”bluetooth.rfcomm”>

<m2:Device Id=”any”>

<m2:Function Type=”name:serialPort” />

</m2:Device>

</m2:DeviceCapability>

</Capabilities>

 

Pre overenie komunikácie si môžete napísať jednoduchú aplikáciu, ktorá bude prijímať dáta z externého zariadenia, napríklad Bluetooth GPS, prípadne Bluetooth modulu pripojeného k vašej hobby konštrukcii na báze mikrokontroléru. Pod názvom Bluetooth analyzer je dostupná vo Windows store http://apps.microsoft.com/windows/app/bluetooth-analyzer/e632b14b-268e-458b-99ee-7a6b858a72be

V príklade popisujem používateľské rozhranie triviálneho, ale funkčného príkladu, ktorý prijíma bajty z RFCOMM cez Bluetooth pozostáva z dvoch prvkov – ComboBoxu pre výber zariadenia a prvku TextBlock pre výpis prijatých znakov.

<StackPanel Orientation=”Vertical” Margin=”120,10,0,0″ Grid.Row=”1″>

<ComboBox x:Name=”cbZariadenia” Header=”Bluetooth RF comm zariadenia”

PlaceholderText=”Vyber zariadenie…” ItemsSource=”{Binding}”

HorizontalAlignment=”Left” VerticalAlignment=”Top”

Width=”400″ Height=”70″

SelectionChanged=”cbZariadenia_SelectionChanged” />

<TextBlock x:Name=”tbStatus” Text=”čakám na výber zariadenia”

FontSize=”24″ Width=”400″ Height=”40″ HorizontalAlignment=”Left”/>

<ScrollViewer x:Name=”scrollViewer” Height=”300″ Width=”600″

HorizontalAlignment=”Left”>

<TextBlock x:Name=” tbBajty” TextWrapping=”Wrap” />

</ScrollViewer>

</StackPanel>

 

Fungovanie objasnia fragmenty kódu Procedúra BtInit sa volá v metóde LoadState. Úlohou metódy je získať informácie o pripojených Bluetooth zariadeniach podporujúcich RFCOMM.

private StreamSocket _socket = new StreamSocket();

private string _buffer = string.Empty;

 

public List<cZariadenia> lZariadenia = new List<cZariadenia>();

public List<string> lNazvyZariadeni = new List<string>();

 

private async void BtInit()

{

Windows.Devices.Enumeration.DeviceInformationCollection zariadenia

= await Windows.Devices.Enumeration.DeviceInformation.FindAllAsync( RfcommDeviceService.GetDeviceSelector(RfcommServiceId.SerialPort));

 

foreach (var zar in zariadenia)

{

cZariadenia zz = new cZariadenia();

zz.id = zar.Id;

zz.name = zar.Name;

lZariadenia.Add(zz);

string ss = zz.name;

lNazvyZariadeni.Add(ss);

}

cbZariadenia.DataContext = lNazvyZariadeni;

}

 

Samozrejme, dal by sa napojiť ComboBox priamo na zoznam zariadení, osobitný zoznam názvov bol zavedený z dôvodu možnosti neskoršej konverzie technokratických názvov na používateľské.

Výber zariadenia, ktoré chcete použiť a inicializovat je v obsluhe udalosti SelectionChanged. Samotná inicializácia je v metóde InitBtDevice().

private void cbZariadenia_SelectionChanged(object sender,

SelectionChangedEventArgs e)

{

string sNazov;

string sID = “”;

ComboBox cb = (ComboBox)sender;

if (cb.SelectedItem != null)

{

sNazov = cb.SelectedItem.ToString();

 

//najdem id

foreach (cZariadenia oo in lZariadenia)

{

if (oo.name == sNazov) sID = oo.id;

}

 

//ak som nasiel vybrane zariadenie inicializujem

if (sID.Length > 1) InitBtDevice(sID);

}

}

 

private async void InitBtDevice(string sID)

{

RfcommDeviceService service = await RfcommDeviceService.FromIdAsync(sID);

_socket.Control.KeepAlive = true;

_socket.Control.NoDelay = true;

await _socket.ConnectAsync(service.ConnectionHostName,

service.ConnectionServiceName);

await WaitForData(_socket);

}

 

V asynchrónnej procedúre, ktorá prijíma dáta môžete v cvičnom príklade použiť aj rekurzívne volanie procedúry aby sa po prijatí znaku čakalo na ďalší znak.

 

async private Task WaitForData(StreamSocket socket)

{

try

{

byte[] bytes = new byte[1];

await socket.InputStream.ReadAsync(bytes.AsBuffer(), 1,

InputStreamOptions.Partial);

string str = System.Text.Encoding.UTF8.GetString(bytes, 0, bytes.Length);

_buffer += str;

tbBajty.Text = _buffer;

}

catch (Exception e){}

finally

{

WaitForData(socket);

}

}

 

Predchádzajúca procedúra síce funguje, ale oveľa lepšie riešenie je čakanie na udalosť ktorú vyvolá prijatie znaku. V druhom príklade ukážeme inicializáciu komunikácie využívajúcej sockety. V reálnej aplikácii by ste samozrejme použili konštrukciu Try…catch

private async void ConnectToServiceAsync(IUICommand command)

{

DeviceInformation serviceInfo = (DeviceInformation)command.Id;

this.State = BluetoothConnectionState.Connecting;

connectService = RfcommDeviceService.FromIdAsync(serviceInfo.Id);

rfcommService = await connectService;

if (rfcommService != null)

{

//Vytvorenie socketu

socket = new StreamSocket();

connectAction = socket.ConnectAsync(rfcommService.ConnectionHostName,

rfcommService.ConnectionServiceName );

await connectAction;

writer = new DataWriter(socket.OutputStream);

reader = new DataReader(socket.InputStream);

Task listen = ListenForMessagesAsync();

this.State = BluetoothConnectionState.Connected;

tbStatus.Text = “Connection succesfull”;

}

}

 

Procedúra čakajúca na znaky:

private async Task ListenForMessagesAsync()

{

while (reader != null)

{

uint sizeFieldCount = await reader.LoadAsync(1);

//socket zatvoreny skor nez sa nacitali data

if (sizeFieldCount != 1) return;

byte[] bytes = new byte[1];

reader.ReadBytes(bytes);

string str = System.Text.Encoding.UTF8.GetString(bytes, 0, bytes.Length);

tbBajty.Text += str;

}

}

Do mozaiky skladačky použiteľnej aplikácie chýba už len procedúra na vyslanie znaku.

public async Task<uint> SendMessageAsync(string message)

{

uint sentMessageSize = 0;

if (writer != null)

{

uint messageSize = writer.MeasureString(message);

writer.WriteByte((byte)messageSize);

sentMessageSize = writer.WriteString(message);

await writer.StoreAsync();

}

return sentMessageSize;

}

Bluetooth1.png

Obrázek 8.x: Príklad používateľského rozhrania aplikácie na monitorovanie sériovej komunikácie cez Bluetooth RFCOMM. Pripojené je externé GPS zariadenie

Reklamy

Ako využiť magnetický senzor vo Windows 8.1 aplikácii

22. októbra 2013

Moderné tablety a konvertibilné zariadenia pod taktovkou operačného systému Windows 8.1 sú vybavené širokou paletou senzorov – spravidla kompasom, akcelerometrom, gyroskopom, meračom osvetlenia, náklonomerom a systémom pre určovanie polohy. Náklonomer a akcelerometer má v tabletoch veľmi dôležitú funkciu, umožňuje nielen zistenie aktuálnej orientácie prístroja (na výšku, či na šírku), ale nakoľko tablet nemá žiadne kurzorové tlačidlá ani nijaký ekvivalent joysticku využíva sa naklápanie prístroja veľmi často aj na ovládanie hier.

Ak zariadenie príslušný senzor nepodporuje, je potrebné v aplikácii túto skutočnosť ošetriť a deklarovať to aj v špeciálnych požiadavkách pre aplikáciu vo Windows obchode.

Kompas

Aplikácie typu “kompas” využívajú polovodičový senzor na meranie poľa. Pomocou tohto senzora je možné určiť orientáciu zariadenia voči severu, teda severnému magnetickému pólu. Na prezentovanie sa najčastejšie používa kruhová stupnica vo vnútri ktorej je obrázok tzv. magnetického kríža, ktorý prehľadne ukazuje hlavné svetové strany. Na otáčanie kruhu využijeme s výhodou animáciu – rotáciu obrázku tak aby stupnica ukazovala správnu hodnotu voči pevnému bodu.

MainPage.xaml

<Grid HorizontalAlignment=”Left” VerticalAlignment=”Top” Grid.Row=”1″>

<Grid.RowDefinitions>

<RowDefinition Height=”*”/>

<RowDefinition Height=”100″/>

</Grid.RowDefinitions>

 

<Grid.Resources>

<Storyboard x:Name=”Storyboard”>

<DoubleAnimation x:Name=”daAnim”

Storyboard.TargetName=”RotateImage”

Storyboard.TargetProperty=”(UIElement.RenderTransform)

.(RotateTransform.Angle)”

From=”0″ To=”360″ Duration=”00:00:1.000″ />

</Storyboard>

</Grid.Resources>

 

<Canvas Width=”450″ Height=”450″ Margin=”20″ Grid.Row=”0″>

<Polyline Points=”215,-20, 235,-20 225,0 215,-20″

Stroke=”red” StrokeThickness=”2″ />

<Image x:Name=”RotateImage” Stretch=”Uniform” Width=”450″ Height=”450″

Source=”Assets/kompas1.png” RenderTransformOrigin=”0.5, 0.5″>

<Image.RenderTransform>

<RotateTransform Angle=”0″ />

</Image.RenderTransform>

</Image>

</Canvas>

<StackPanel Orientation=”Horizontal” Grid.Row=”1″>

<TextBlock x:Name=”tbNorth” Text=”ss-” FontSize=”32″ />

<TextBlock Text=” Accuracy: ” FontSize=”32″ />

<TextBlock x:Name=”tbAccuracy” Text=”-” FontSize=”32″/>

</StackPanel>

</Grid>

 

V kóde sa najskôr pripojíme na senzor

_compass = Compass.GetDefault();

Následne je potrebné ošetriť ak zariadenie príslušný senzor nemá. Čiže ak si používateľ aplikáciu nainštaluje na klasickom notebooku, bez magnetického senzoru, zobrazí sa mu upozornenie o tejto skutočnosti a zvyšok funkcionality bude zablokovaný. Hodnota zo senzora sa číta v procedúre ReadingChanged vždy vtedy, keď dôjde k zmene hodnoty

Fragmenty kódu týkajúce sa kompasu v MainPage.xaml.cs:

using Windows.Devices.Sensors;

using Windows.UI.Core;

 

private Compass _compass;

private uint _desiredReportInterval;

private int nAzimut;

 

private void pageRoot_Loaded(object sender, RoutedEventArgs e)

{

if (_compass != null)

{

_compass.ReportInterval = _desiredReportInterval;

_compass.ReadingChanged += new TypedEventHandler<Compass,

CompassReadingChangedEventArgs>(ReadingChanged);

}

else

{

tbNorth.Text = “No compass sensor found”;

}

}

 

async private void ReadingChanged(object sender, CompassReadingChangedEventArgs e)

{

await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>

{

CompassReading reading = e.Reading;

nAzimut = 360- Convert.ToInt32(reading.HeadingMagneticNorth);

daAnim.From = nFrom;

daAnim.To = nAzimut;

nFrom = nAzimut;

// Start animácie

Scenario1Storyboard.Begin();

 

tbNorth.Text = String.Format(“{0,5:0.00}”, reading.HeadingMagneticNorth);

 

switch (reading.HeadingAccuracy)

{

case MagnetometerAccuracy.Unknown:

tbAccuracy.Text = “Unknown”;

break;

case MagnetometerAccuracy.Unreliable:

tbAccuracy.Text = “Unreliable”;

break;

case MagnetometerAccuracy.Approximate:

tbAccuracy.Text = “Approximate”;

break;

case MagnetometerAccuracy.High:

tbAccuracy.Text = “High”;

break;

default:

tbAccuracy.Text = “No data”;

break;

}

});

}

 

Teraz môžete aplikáciu na vhodnom zariadení, napríklad Windows RT tablete cez diaľkové pripojenie k vývojárskom počítači otestovať.

Aplikáciu nájdete vo Windows obchode pod názvom Magnetic compass

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

Privacy Policy

21. októbra 2013

Personal Information

This application does not collect or transmit any user’s personally identifiable information. No personal information is used, stored, secured or disclosed by services this application works with.

Advertising Banner Privacy Policy

Apps of ours which provide free usage via inbuilt advertising may transmit basic regional/language information about you to the advertising banner system in order to provide you with relevant ads.

Third Parties

If the app makes use of third party services, their usage of information is excluded from this privacy policy. You will be clearly made aware of the third parties involved in the app and we will ensure the very minimal set of data is set to those third parties.

Report Violations or Get More Information

If you would like to report any violations of this policy or get more information on any app, please emailing me at llacko@outlook.com.

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

7. októbra 2013

Vyskakovací rámček pre nastavenie viacerých parametrov

Prečo riešim tento vizuálny prvok ako druhú najdôležitejšiu záležitosť po flexibilnom rozdelení obrazovky? Pravidlá pre schválenie aplikácie pre Windows 8 vyžadujú, aby vývojár deklaroval, či aplikácia od používateľa zbiera od používateľa nejaké údaje, a ak áno, ako s nimi nakladá. Vyžaduje sa aj (zrejme len pre niektoré trhy) aby vývojár deklaroval zásady spracovávania údajov aj na webe a aby v aplikácii bol na túto stránku odkaz. Deklarácia o tom, či a ako aplikácia zbiera od používateľa údaje je potrebné deklarovať na paneli Nastavenie

Nastavenie viacerých parametrov sa vo Windows 8 aplikáciách riešilo spravidla prostredníctvom panela z knižnice Calisto SDK. Jednak to bolo dodatkové riešenie pomocou knižnice “tretej strany” a problém nastal s prvkom WebView, ktorý prekrýval tento panel.

Windows 8.1 poskytuje pre tento účel nový ovládací prvok SettingsFlyout. Volá sa teda rovnako, ako predtým používaný prvok z knižnice Callisto. Tento prvok, podobne ako prvok Page môže byť v XAML deklarovaný ako koreňový element dokumentu s atribútom x : Class nastaveným na podtriedu triedy SettingsFlyout. Môžete nastaviť Šírku vyskakovacieho rámčeku, jeho výška bude vždy cez celú obrazovku. Rámik SettingsFlyout pre nastavenie sa aktivuje tlačidlom Nastavenie z panelu kľúčových tlačidiel. Zatvára sa tlačidlom Späť. Programovo ho zobrazíte metódou Show alebo ShowIndependent a zavrieť ho môžete volaním metódy Hide . Ak je ovládací prvok SettingsFlyout zobrazený na základe volanie metódy Show, potom sa kliknutím na tlačidlo Späť rámik zavrie a znovu sa otvorí tabla pre nastavenie. Pri zobrazení metódou ShowIndependent sa kliknutím na tlačidlo Späť rámček zavrie a používateľ sa vráti do aplikácie.

Súčasne môže byť aktívny iba jeden ovládací prvok SettingsFlyout . Volaním metódy Show pre SettingsFlyout sa zatvoria všetky ostatné ovládacie prvky SettingsFlyout , ktoré sú práve zobrazené .

Rámik SettingsFlyout má dve časti – záhlavie a obsah. V záhlaví je navigačné tlačidlo Späť, nadpis a ak ju nadefinujete, tak aj ikona. V predvolenom nastavení je ako ikona nastavená malá ikona vašej aplikácie. Nastavením parametra IconSource môžete zadať inú ikonu . Farebný dizajn hlavičky môžete doladiť pomocou parametrov HeaderBackgroundHeaderForeground.

Pridanie rámika Nastavenie

  1. V kontextovom menu aplikovanom na projekt vyberte Add > New Item. .
  2. V dialógu Add New Item vyberte položku Setting Flyout.
  3. Zadajte názov súboru

Pridanie Setting Flyout

Zobrazí sa ukážková preddefinovaná šablóna prvku pre nastavenie aplikácie do ktorej môžete pridávať ovládacie prvky na nastavenie parametrov aplikácie

Preddefinovaná šablóna prvku pre nastavenie aplikácie

Text “Lorem ipsum” nahraďte svojim textom, napríklad povinným vyhlásením o ochrane osobných údajov, ak aplikácia nejaké zbiera, alebo deklarovaním toho, že aplikácia od používateľa žiadne údaje nezbiera. Napríklad (všimnite si implicitne pridaných komentárov, ktoré vám pomôžu zorientovať sa)

<SettingsFlyout

x:Class=”BlogBranislavaRaca.SettingsFlyout1″

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

xmlns:local=”using:BlogBranislavaRaca”

xmlns:d=”http://schemas.microsoft.com/expression/blend/2008&#8243;

xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006&#8243;

mc:Ignorable=”d”

IconSource=”Assets/SmallLogo.png”

Title=”Nastavenie”

d:DesignWidth=”346″>

 


<!– This StackPanel acts as a root panel for vertical layout of the content sections –>

<StackPanel VerticalAlignment=”Stretch” HorizontalAlignment=”Stretch” >


<!– The StackPanel(s) below define individual content sections –>

<!– Content Section 1–>

<StackPanel Style=”{StaticResource SettingsFlyoutSectionStyle}”>

<!– Section 1 header –>

<TextBlock Style=”{StaticResource TitleTextBlockStyle}” Text=”Prehlásenie” />


<!– Section 1 body –>

<TextBlock Style=”{StaticResource BodyTextBlockStyle}” Margin=”0,0,0,25″ TextWrapping=”Wrap”>

<TextBlock.Text>

Táto aplikácia nezbiera od používateľa žiadne údaje.

</TextBlock.Text>

</TextBlock>

<HyperlinkButton Content=”Ochrana osobných údajov” Foreground=”DarkBlue”

NavigateUri=”http://donorsforum.vnet.sk/OchranaOsobnychUdajovBR.htm”&gt;

</HyperlinkButton>

</StackPanel>


<!– Define more Content Sections below as necessary –>

</StackPanel>

</SettingsFlyout>;

Vizuálne sa prvok zobrazí takto

Upravená šablóna prvku pre nastavenie aplikácie

Ak ste si preštudovali zoznam novieniek vo Windows 8.1 pre vývojárov, pri pohľade na link vložený do textu si určite spomeniete, že Windows 8.1 umožňuje pridať do textu element Hyperlink. Pracuje sa s ním rovnako ako s ostatným textom a spoločne s ním sa môže na konci riadku zalomiť. Ak je text označený ako hypertextové prepojenie, zobrazuje farebne zvýraznený a po kliknutí sa prejde na lokalitu určenú identifikátorom URI (Uniform Resource Identifier) vo vlastnosti NavigateUri. Použijeme RichTextBlock

<StackPanel VerticalAlignment=”Stretch” HorizontalAlignment=”Stretch” >

<!– The StackPanel(s) below define individual content sections –>

<!– Content Section 1–>

<StackPanel Style=”{StaticResource SettingsFlyoutSectionStyle}”>

<!– Section 1 header –>

<TextBlock Style=”{StaticResource TitleTextBlockStyle}” Text=”Prehlásenie” />

<!– Section 1 body –>

<RichTextBlock>

<Paragraph></Paragraph>

<Paragraph>Táto aplikácia nezbiera od používateľa žiadne údaje..

<Hyperlink NavigateUri=

http://donorsforum.vnet.sk/OchranaOsobnychUdajovBR.htm”&gt;

Ochrana osobných údajov</Hyperlink>

</Paragraph>

</RichTextBlock>

</StackPanel>

<!– Define more Content Sections below as necessary –>

</StackPanel>

 

Aby sa prvok SettingsFlyout zobrazil, musíte ho v App.xaml.cs pridružiť k objektu SettingsPane aplikácie v udalosti SettingsPane.CommandsRequested a pridaním objektu triedy SettingsCommand do kolekcie ApplicationCommands .

V metóde OnLaunched pridajte riadok

SettingsPane.GetForCurrentView().CommandsRequested += OnCommandsRequested;

 

Telo metódy v ktorej vytvoríte inštanciu ovládacieho prvku SettingsFlyout a zobrazíte ho bude:

void OnCommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)

{

Windows.UI.ApplicationSettings.SettingsCommand updateSetting =

new Windows.UI.ApplicationSettings.SettingsCommand(“Ochrana osobných údajov”, “Ochrana osobných údajov”, (handler) =>

{

SettingsFlyout1 setFlyout = new SettingsFlyout1();

setFlyout.Show();

});

args.Request.ApplicationCommands.Add(updateSetting);

}

Teraz môžete vyskúšať fungovanie nastavenia

Nastavenie

Na rozdiel od prvku z knižnice Callisto integrovaný prvok SettingsFlyout vo Windows 8.1 funguje dobre aj pri prekrývaní prvku WebView

Ak kliknete na hyperlink v texte, zobrazí sa príslušná stránka v prehliadači, pričom aplikácia si s prehliadačom rozdelia obrazovky pol na pol

Zobrazenie stránky na ktorú odkazoval odkaz v texte

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

6. októbra 2013

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í

Vývoj pre Windows 8.1 II – vylepšené dynamické dlaždice

4. októbra 2013

Vo Windows 8.1 sú dispozícii dve nové veľkosti dynamických dlaždíc – malá 70 × 70 pixelov a veľká štvorcová 310 × 310 pixelov. Veľká dlaždica sa hodí pre aplikácie, ktoré potrebujú na dlaždici zobraziť veľa informácií, či už sa jedná o zoznam správ, podrobnejšiu predpoveď počasia a podobne. Malú štvorcovú dlaždicu (s polovičnou dĺžkou strany pôvodnej štvorcovej dlaždice 70 x 70) zas použijete pre aplikácie, ktoré na dlaždiciach nezobrazujú žiadne informácie. Typickým príkladom sú dlaždice desktopových aplikácií. Okrem nových rozmerov bola inovovaná aj funkcionalita dynamických dlaždíc. Dlaždicu môžete deklarovať v manifeste aplikácie. Obsah dlaždice sa začne aktualizovať, hneď ako používateľ aplikáciu nainštaluje – už nemusí aplikáciu najskôr spustiť. Pri vytváraní sekundárnych dlaždíc aplikácia ponúka viac možností pre veľkosť a grafickú podobu.

Nové veľkosti dynamických dlaždíc umožňujú používateľom kreatívnejšie

Nové veľkosti dynamických dlaždíc pre Windows 8.1 aplikáciu sa definujú v aplikačnom manifeste

Zadanie pre grafika v prípade ak sa nevyužije škálovanie grafických prvkov podľa mierky

  • Obrázok pre úvodnú obrazovku: SplashScreen.png – rozmer 620 x 300 pixelov
  • Obrázok pre štvorcovú dlaždicu: Logo.png – rozmer 150 x 150 pixelov
  • Obrázok pre veľkú štvorcovú dlaždicu: Logo.png – rozmer 150 x 150 pixelov
  • Obrázok pre obdĺžnikovú dlaždicu: SquareLogo.png – rozmer 310 x 150 pixelov
  • Obrázok pre malú dlaždicu (ikonu): SmalLogo.png – rozmer 30 x 30 pixelov
  • Obrázok pre Windows Obchod: StoreLogo.png – rozmer 50 x 50 pixelov

Ak by sa využilo škálovanie, čiže aby dlaždice a ostatné grafické prvky dobre vyzerali od malého tabletu 1024×768 až po displej vodorovným rozlíšením nad 2500 pixelov je potrebné vytvoriť jednotlivé grafické prvky vo viacerých mierkach v rozmeroch (číslo v názve obrázku udáva percentuálne zvačšenie)

Obrázok pre úvodnú obrazovku

  • SplashScreen.scale-100.png – rozmer 620 x 300 pixelov
  • SplashScreen.scale-140.png – rozmer 868 x 420 pixelov
  • SplashScreen.scale-180.png – rozmer 1116 x 540 pixelov

Malá dlaždica (ikona)

  • SmallLogo.scale-80.png (24 x 24 pixelov)
  • SmallLogo.scale-100.png (30 x 30 pixelov)
  • SmallLogo.scale-140.png (42 x 42 pixelov)
  • SmallLogo.scale-180.png (54 x 54 pixelov)

Štvorcová dlaždica

  • Logo.scale-80.png (120 x 120 pixelov)
  • Logo.scale-100.png (150 x 150 pixelov)
  • Logo.scale-140.png (210 x 210 pixelov)
  • Logo.scale-180.png (270 x 270 pixelov)

Veľká štvorcová dlaždica

  • SquareLogo.scale-80.png (248 x 248 pixelov)
  • SquareLogo.scale-100.png (310 x 310 pixelov)
  • SquareLogo.scale-140.png (434 x 434 pixelov)
  • SquareLogo.scale-180.png (558 x 558 pixelov)

Obdĺžniková dlaždica

  • WideLogo.scale-80.png (248 x 120 pixelov)
  • WideLogo.scale-100.png (310 x 150 pixelov)
  • WideLogo.scale-140.png (434 x 210 pixelov)
  • WideLogo.scale-180.png (558 x 270 pixelov)

Logo pre Windows obchod

  • StoreLogo.scale-100.png (50 x 50 pixelov)
  • StoreLogo.scale-140.png (70 x 70 pixelov)
  • StoreLogo.scale-180.png (90 x 90 pixelov)

Posielanie oznámení na dynamické dlaždice

Najväčším problémom je kompatibilita so starými Windows 8 aplikáciami. Problém je, že keď pošlete oznámenia na dlaždicu, neviete, či ho prijme aplikácia vo Windows 8.1 alebo aplikácia vo Windows 8. Nové názvy šablón rozoznáva iba Windows 8.1. Microsoft to vyriešil rozlišovacím atribútom fallback, ktorý sa používa iba pre pôvodnú štvorcovú (150×150) a obdĺžnikovú (310×150). U ostatných dlaždíc je situácia jednoznačná, nakoľko nové dlaždice v starých aplikáciách neboli. Ak použijete nové názvy šablón a atribút fallback, nastavte atribút version na hodnotu 2.

<tile>

<visual version=”2″>

<binding template=”TileSquare150x150Image” fallback=”TileSquareImage” branding=”None”>

<image id=”1″ src=”Assets/Images/d1.png”/>

</binding>

<binding template=”TileWide310x150Image” fallback=”TileWideImage” branding=”None”>

<image id=”1″ src=”Assets/Images/d2.png”/>

</binding>

<binding template=”TileSquare310x310Image” branding=”None”>

<image id=”1″ src=”Assets/Images/d3.png”/>

</binding>

</visual>

</tile>

Šablónu pre veľkú štvorcovú dlaždicu (310×310) musíte umiestniť až na konci, nakoľko Windows 8 keď narazí na šablónu, ktorú nepozná, zastaví parsovanie oznámenia.

Vývoj pre Windows 8.1 Flexibilné rozdelenie obrazovky medzi aplikácie

3. októbra 2013

Vo Windows 8 môžete mať dve aplikácie na jednej obrazovke súbežne, pričom jedna z nich beží v pripnutom móde, teda v 320 pixelov širokom páse pri ľavom, alebo pravom okraji obrazovky. Windows 8.1 umožňuje rozdeliť obrazovku medzi aplikácie v ľubovoľnom pomere, pričom počet súčasne zobrazených aplikácií závisí od rozlíšenia monitora, teda koľko krát sa vám vodorovne vojde na obrazovku panel o šírke 500 pixelov, toľko aplikácií môžete súčasne spustiť (HD – 2 aplikácie, Full HD 3 aplikácie).

Ak je na obrazovke dosť miesta aplikácie môžu pri spustení ďalšej aplikácie zostať otvorené na popredí. Nepresúvajú sa do pozadia, sú plne funkčné.

Podobne aj Internet Explorer 11 môžete spustiť vo viacerých samostatných oknách.

Rozdelenie obrazovky medzi dve aplikácie (pol na pol)

Príklad flexibilného rozdelenia obrazovky medzi viac aplikácií

Z hľadiska vývojára to znamená, že vo Windows 8.1 aplikácie nemá preddefinované stavy zobrazenia s pevnou šírkou, ako to bolo u Windows 8 (Snapped, Filled…). Šírku okna aplikácie určuje používateľ, tým ako posúva zvislé pásy tvoriace hranice medzi oknami aplikácie, pričom minimálna šírka je 500 pixelov. Aplikácia na posun zvislého pásu reaguje plynulou zmenou šírky po minimálnu hodnotu.

Ak ponecháte nastavenú minimálnu šírku aplikácie, nebudete musieť riešiť zmenu vizuálnych stavov, to znamená, že ak nemáte špecifické požiadavky pre rozmiestnenie prvkov v režime “na výšku” nebudete potrebovať XAML sekciu notoricky známu z Windows 8

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name=”ApplicationViewStates”>

<VisualState x:Name=”FullScreenLandscape”>


</VisualState>

 

<VisualState x:Name=”Snapped”>


</VisualState>

 

<VisualState x:Name=”Filled”>


</VisualState>

 

<VisualState x:Name=” FullScreenPortrait “>


</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

 

Minimálna šírka 500 pixelov štandardný parameter, no aplikácie môžu vo svojom manifeste uvádzať, že podporujú menšiu šírku, minimálne 320 px, čo je vlastne šírka Windows 8 aplikácie v režime snapped. Takto motivujete používateľov aby si nechali na obrazovku aplikáciu vypisujúcu pre nich zaujímavé informácie, napríklad novinky s blogov aj keď momentálne pracujú s inou aplikáciou, alebo inými dvoma aplikáciami.

Vaša aplikácia sa po novom môže zobrazovať aj v strede medzi dvoma už bežiacimi aplikáciami, nielen na pravom alebo ľavom okraji obrazovky, ako tomu bolo u Windows 8. Aplikácia musí vyplniť obrazovku na výšku, pričom minimálna výška aplikácie je 768 pixelov. Jedna aplikácia môže mať súčasne otvorených viac okien.

Aplikáciu je potrebné navrhnúť tak, aby bola funkčná a vyzerala dobre pri každej veľkosti až do definovaného minimálneho rozlíšenia.

Minimálnu šírku okna aplikácie definujete v manifeste

<m2:VisualElements



<m2:ApplicationView MinWidth=”width320″ />

</m2:VisualElements>

 

V rozmedzí 500 až 320 pixelov budete musieť modifikovať zobrazenie. Položky sa budú zobrazovať ako vertikálne usporiadaný zoznam (vľavo môžu byť obrázky). Zmenšite veľkosť písma záhlavia na 20 pixelov menšiu ikonu tlačidla Späť. Odporúčaná veľkosť ľavého okraja je 20 pixelov.

Vaša aplikácia môže spúšťať inú aplikáciu. Typickým príkladom je Internet Explorer. Ak je na obrazovke dosť miesta, aplikácie si ju rozdelia na polovice. Toto implicitné správanie môžete zmeniť pomocou parametra DesiredRemainingView.

public ViewSizePreference DesiredRemainingView { get; set; }

 

 


Hodnoty ViewSizePreference

Zmena nastala aj v triedach a objektoch pre zisťovanie stavu umiestnenia aplikácie na obrazovke a zisťovaní orientácie zariadenia (na šírku / na výšku)

Windows.UI.ViewManagement má nové enumerations:

  • ApplicationViewOrientation
  • ApplicationViewSwitchingOptions
  • ViewSizePreference

Trieda ApplicationView má nové vlastnosti:

  • AdjacentToLeftDisplayEdge
  • AdjacentToRightDisplayEdge
  • IsFullScreen
  • Orientation

a nové metódy

  • GetApplicationViewIdForWindow
  • GetForCurrentView

Windows 8.1 poskytuje oveľa sofistikovanejšie možnosti zobrazovania na dvoch monitoroch. Ak presuniete okno aplikácie z malej obrazovky tabletu na monitor s vyšším rozlíšením, veľkosť okna sa automaticky prispôsobí zobrazovacím možnostiam monitoru. Aplikácia môže využívať viac monitorov.

Konverzia aplikácie z Windows 8 na Windows Phone

2. októbra 2013

Technologická príbuznosť Windows 8 a Windows Phone 7 ma motivovala migrovať Windows 8 aplikáciu na WP7. Úmyselne na WP7 a nie WP8, lebo jednak je to väčšia výzva a jednak používateľov telefónov s WP7 je stále pomerne veľa. Migroval som aplikáciu Autoškola Testy (je vo Windows obchode http://apps.microsoft.com/windows/app/autoskola-testy/0042ff49-a68a-48cd-871f-747f561d3bb4). Myšlienka na migráciu prišla až po dokončení aplikácie pre Windows 8, takže pri prvotnom vývoji som s migráciou nepočítal. Aplikácia je vytvorená v tandeme XAML + C#. Používateľské rozhranie je jednoduché bez dizajnových okrás aby čo najviac asociovalo testy v autoskole, na ktorých je len text a obrázky, žiadne rámčeky ani nič podobné.

Postup migrácie

Vytvoril som nový projekt pre Windows Phone 7 a prekopíroval doň všetky zdrojovky, xml súbor so zoznamom otázok a obrázky dopravných značiek a križovatiek. Obrázky križovatiek som v Zoner Photo Studiu zmenšil na šírku 320 pixelov primerane k rozlišovacej schopnosti displeja Windows Phone. Redizajn si vyžadovala len úvodná obrazovka, ktorú som prispôsobil základnej orientácii na výšku a ponechal som len základné testy a zobrazenie otázok so správnymi odpoveďami na samošúdium. Vypustil som test všetkých dopravných značiek a križovatiek, nakoľko na mobile nikto nebude robiť test zo 150 timi otázkami. Klasické testy majú 27 otázok, čo je pre používanie na mobile prijateľné. Screenshoty sú z emulátora takže po stranách sú diagnostické údaje v zvislo stĺpci

Nakoľko testy boli urobené v XAML, prispôsobili sa novému rozlíšeniu obrazovky bez väčších úprav



Suma sumárum migrácia projektu trvala tri hodiny. Bolo treba dorobiť niektoré funkcie, napríklad vyhľadávanie z zoznamoch, ktoré WP framework nepodporuje, vypustiť z XAML pre Windows 8 časti pre prispôsobovanie sa režimu Snapped, a vytvoriť nové ikony a aplash screen. Aplik8cia bez probl0mov pre3la schva2ovac9m procesom do Windows Phone store

Ešte lepšia kompatibilita Windows 8 s WP8

Jedným z argumentov, prečo nový Windows Phone 8 nie je kompatibilný s WP7 je to, že je založený na rovnakých “core” technológiách ako Windows 8. Vývojári aplikácií môžu jednoducho portovať svoje aplikácie prakticky bez úprav a vývojári hier môžu vyvíjať v natívnom kóde na báze DirectX a tú istú hru je možné vytvárať pre obidve klientske platformy, teda Windows 8 a Windows Phone 8. Podľa doterajších skúsenosti, na adaptáciu už existujúcej zložitej Windows 8 hry na WP8 sú potrebné približne dva dni.