Windows 10 (část 3.)

RAD Studio 10 Seattle a Windows 10 (část 3.)

Windows 10 jsou univerzálním systémem, který by měl být dobře použitelný jak na stolních tak přenosných zařízeních. Z obou světů se snaží nabídnout uživatelům jednak to nejlepší a jednak to, na co jsou uživatelé zvyklí. Na stolní počítače tak proniklo například centrum akcí, které jsem zmiňoval minule.

Centrum sdílení

Další podobnou funkcionalitou převzatou z "mobilního světa" je zjednodušení nejběžnějších uživatelských postupů (workflow). Ta byla zřejmě motivována snahou do jisté míry kompenzovat absenci klávesnice a myši u telefonů a tabletů, výrazně zpříjemnit práci však může i na PC. Vytvoříme-li v aplikaci nějaký obsah (data, obrázky, multimédia) a potřebujeme jej předat jinému programu, stačí zvolit možnost sdílet a vybrat aplikaci, které jej chceme předat. Odpadá tak nutnost na tabletu ne úplně pohodlného "copy - paste" nebo uložení a import souboru.

RAD Studio 10.x umožňuje rozšířit aplikace o sdílení obsahu za pomoci nové komponenty "Sharing Contract". Některé časté operace tak lze podstatně zjednodušit, což ocení i uživatelé, kteří Windows 10 provozují na zařízeních bez dotykové obrazovky.

Sdílení obsahu mezi aplikacemi zajišťuje operační systém, v tomto případě Windows 10. Aplikace musí vytvořit v požadovaném tvaru "balíček dat" a odkaz na něj odeslat správci sdílení. Ten nabídne uživateli seznam cílových aplikací, které jsou registrovány a umí v balíčku obsažená data zpracovat.

Komponenta "Sharing Contract" výše uvedené kroky "zapouzdřuje" a zjednodušuje tak jejich implementaci.

Delphi


Prvním krokem je vytvoření datového balíčku:

sc.ApplicationName := 'SCDemo';
sc.PackageName := 'SCDemoBalicek';
sc.DataTitle := 'Data sdílená aplikací SCDemo';

Následně je třeba balíček naplnit daty:

sc.DataTitle := 'SCTestData';
sc.IconFile := 'embfavicon.ico';
sc.LogoFile := 'delphi_red.png';
sc.ImageFile := 'eso.bmp';
sc.DataText := 'Nějaký zajímavý text';
sc.RtfText := 'Text ve formátu RTF';
sc.HTML = '<h1>HTML kód<h1>';
sc.WebAddress = 'http://www.embt.cz';

Nakonec balíček publikujeme, čímž je zároveň aktivován správce sdílení Windows 10:

sc.InitSharing;

C++Builder


sh->ApplicationName = "SCDemo";
sh->PackageName = "SCDemoBalicek";
sh->Description = "Data sdílená aplikací SCDemo";

sh->DataTitle = "SCTestData";
sh->IconFile = "embfavicon.ico";
sh->LogoFile = "cpp_red.png";
sh->ImageFile = "eso.bmp";
sh->DataText = "Nějaký zajímavý text.";
sh->RtfText = "Text ve formátu RTF";
sh->HTML = "<h1>HTML kód<h1>";
sh->WebAddress = "http://www.embt.cz";

sh->InitSharing();

Relative panel

Další novou komponentou, která ve VCL pro podporu Windows 10 přibyla je RelativePanel. Můžeme jej využít všude tam, kde je třeba přizpůsobit rozmístění či velikost prvků velikosti obrazovky. RelativePanel slouží jako kontejner, do kterého lze umisťovat další vizuální komponenty. Na jednotlivé komponenty lze následně odkazovat pomocí indexu, který jim byl v rámci kolekce přiřazen a stanovit jejich polohu vůči jiné komponentě nebo panelu samému. Možnosti jsou:

Delphi


Zarovnání k pravému, levému, hornímu nebo spodnímu okraji komponenty RelativePanel:
rp.ControlCollection[0].AlignLeftWithPanel := True;

Přichycení nad, pod, zleva nebo zprava k určené komponentě:
rp.ControlCollection[5].RightOf := Label1;

Horizontální nebo vertikální vystředění vzhledem ke komponentě RelativePanel:
rp.ControlCollection[9].AlignHorizontalCenterWithPanel := True;

Horizontální nebo vertikální vystředění vůči určené komponentě:
rp.ControlCollection[7].AlignVerticalCenterWith := Label2;

Pozor! Komponenta "RelativePanel" nehlídá možné křížové závislosti nebo protichůdné požadavky. Je proto vhodné ošetřit, aby nedošlo k například k překrytí ovládacích prvků nebo třeba k jejich posunutí mimo formulář.

Rozteč, tedy vzdálenost mezi prvky lze kontrolovat definováním okrajů jednotlivých prvků:
label1.Margins.Left := 20;

Info: Okraje (Left|Right|Top|Bottom) jsou přednastaveny na hodnotu 3.

C++Builder


rp->ControlCollection->Items[0]->AlignLeftWithPanel = True;
rp->ControlCollection->Items[0]->RightOf = Shape1;
rp->ControlCollection->Items[1]->AlignHorizontalCenterWithPanel = True;
rp->ControlCollection->Items[0]->AlignVerticalCenterWith = Shape1;
rp->ControlCollection->Items[1]->AlignLeftWithPanel = False;
label1->Margins->Left = 20;

ActivityIndicator

ActivityIndicator je náhradou za staré dobré "přesýpací hodiny". Protože umožňuje nastavení řady parametrů, vytvořila pro ně společnost Embarcadero samostatnou komponentu. Nastavit lze:

Delphi


// Barvu Indikátoru
  ActivityIndicator.IndicatorColor := aicBlack;
  ActivityIndicator.IndicatorColor := aicWhite;

// Vzhled (typ) Indikátoru
  ActivityIndicator.IndicatorType := aitSectorRing;
  ActivityIndicator.IndicatorType := aitMomentumDots;
  ActivityIndicator.IndicatorType := aitRotatingSector;

// Velikost Indikátoru
ActivityIndicator.IndicatorSize := aisSmall; //24 x 24 pixelů
ActivityIndicator.IndicatorSize := aisMedium; //32 x 32
ActivityIndicator.IndicatorSize := aisLarge; //48 x 48
ActivityIndicator.IndicatorSize := aisXLarge //64 x 64

// Rychlost animace    
  ActivityIndicator.FrameDelay := 30;

// Spuštění/ukončení animace
  ActivityIndicator.Animate := True;
  ActivityIndicator.Animate := False;

C++Builder


  ActivityIndicator->IndicatorColor = aicBlack;
  ActivityIndicator->IndicatorType = aitSectorRing;
  ActivityIndicator->IndicatorSize = aisSmall;
  ActivityIndicator->FrameDelay = 30;
  ActivityIndicator->Animate = True;

ToggleSwitch

Komponenta Toggle Switch je vhodnou alternativou ke komponentě CheckBox. Odhlédneme-li od vzhledu, je její hlavní předností použití na dotykových zařízeních, protože lze nastavit její velikost a lze ji tak pohodlně obsluhovat i "tlustými prsty".

Delphi


if TSAnimate.State = tssOn then
  ActivityIndicator.Animate := True;
 else
  ActivityIndicator.Animate := False;

C++Builder


 if (TSAnimate->State == tssOn)
  ActivityIndicator->Animate = True;
 else
  ActivityIndicator->Animate = False;

SearchBox

SearchBox je tvořen kombinací dvou v Delphi či C++Builderu běžně používaných komponent kterými jsou edit box a klasické tlačítko. Podle zvoleného nastavení může komponenta reagovat na stisk tlačítka (ikony) nebo na klávesu Enter. V obou případech je vyvolána událost "OnInvokeSearch".

Delphi


// Inicializace vyhledávacího políčka
procedure TForm1.SearchBox1Enter(Sender: TObject);
begin
  SearchBox1.Text := '';
end;

procedure TForm1.SearchBox1InvokeSearch(Sender: TObject);
begin
  ShowMessage('Vyhledávám ' + SearchBox1.Text + ' ...');
  // kód pro realizaci vyhledávání
end;

C++Builder


void __fastcall TForm1::SearchBox1Enter(TObject *Sender)
{
  SearchBox1->Text = "";
}

void __fastcall TForm1::SearchBox1InvokeSearch(TObject *Sender)
{
  ShowMessage("Vyhledávám " + SearchBox1->Text + " ...");
}

K tomuto článku je k dispozici videotutoriál:

Zdrojové kody jsou k dispozici zde.

Petr Houf na LinkedIn

Windows 10 (část 2.)

RAD Studio 10 Seattle a Windows 10 (část 2.)

V minulém příspěvku jsme si ukázali, jak provázat aplikace vyvíjené v prostředích Delphi nebo C++ Builder 10 Seattle s centrem akcí operačního systému Windows 10, nebo jak použít nové vizuální styly.
Další novou komponentou pro knihovnu VCL, která je navržena pro podporu nových Windows 10 je ovládací prvek "SplitView". Komponenta SplitView je obdobou komponenty MultiView, která je součástí knihovny FireMonkey pro návrh multiplatformních aplikací. Jedná se o výsuvný panel, který může být použit k umístění libovolných ovládacích prvků. S použitím výsuvných panelů se můžeme setkat jak přímo u Windows 10, tak u mnoha dalších aplikací v čele s kancelářským balíkem Microsoft Office.

Realizace podobných výsuvných nabídek je nyní ve vývojových prostředích Delphi a C++Builder poměrně jednoduchou záležitostí. Jednou z možných variant je právě použití komponenty SplitView a komponenty CategoryButtons, která nabízí velmi široké možnosti pro přizpůsobení vzhledu a chování.

SplitView

Důležitá nastavení pro panel SplitView jsou:
Placement - Určuje umístění panelu v rámci formuláře. SplitView lze aktuálně uchytit k levé (svpLeft) nebo pravé (svpRight) hraně okna.
CloseStyle - Jak název napovídá, upravuje toto nastavení chování panelu při jeho skrytí. To může být buď úplné (svcColapse), nebo částečné (svcCompact). Šířku vysunutého a částečně skrytého panelu lze určit dle potřeby.
DisplayMode - Nastavení, které ovlivňuje, zda klientská oblast formuláře je či není dotčena zobrazením panelu. Pokud ne (svmOverlay), panel při vysunutí "překrývá" vizuální prvky umístěné v oblasti, kde se panel SplitView zobrazí. V opačném případě (svmDocked) budou komponenty, které mají pozici určenou relativně ke klientské oblasti formuláře panelem "odsunuty".  
UseAnimation - Určuje, zda má být pro zobrazení/skrytí SplitView použita animace (panel se neobjeví, ale je vysouván postupně). Pokud je animace zapnuta, lze nastavit počet kroků (parametr AnimationStep) a časový odstup (parametr AnimationDelay) mezi nimi. Kombinací těchto atributů lze měnit plynulost, s jakou se bude komponenta SplitView zobrazovat.

Delphi


// Nastavení SplitView
SplitView1.Placement := svpLeft;
SplitView1.CloseStyle := svcCompact;
SplitView1.DisplayMode := svmDocked;
SplitView1.UseAnimation := True;
SplitView1.AnimationStep := TrackBar1.Position;
SplitView1.AnimationDelay := TrackBar2.Position;

// Zobrazení panelu
procedure TForm1.Button1Click(Sender: TObject);
begin
  if SplitView1.Opened then
    SplitView1.Close
  else
    SplitView1.Open;
end;

C++Builder


// Nastavení SplitView
SplitView1->Placement = svpRight;
SplitView1->CloseStyle = svcCollapse;
SplitView1->DisplayMode = svmOverlay;
SplitView1->UseAnimation = True;
SplitView1->AnimationStep = 50;
SplitView1->AnimationDelay = 30;

// Zobrazení panelu
void __fastcall TForm1::Button1Click(TObject *Sender)
{
  if (SplitView1->Opened) {
 SplitView1->Close();
} else {
 SplitView1->Open();
}
}

CategoryButtons

Pro návrh nabídky, kterou lze uživateli zobrazit s využitím SplitView můžeme použít komponentu CategoryButtons. Tato komponenta slouží jako kontejner pro správu tlačítek. Tlačítka lze členit do kategorií, které lze dle potřeby skrýt (sbalit) nebo zobrazit (rozbalit). Tlačítka mohou kromě textu obsahovat i grafiku.

Pokud se chceme vzhledem co nejvíce přiblížit výsuvným nabídkám operačního systému Windows 10, musíme pro CategoryButtons změnit některá nastavení.

Delphi


V případě, že chceme u jednotlivých tlačítek zobrazit kromě textu i ikony, připravíme si vhodnou grafiku. Tlačítkům můžeme ikony přiřadit jak přímo, tak odkazem na index komponenty ImageList, kterou můžeme použít jako kontejner:
CategoryButtons1.Images := iList;

Pokud pro SplitView nastavíme částečné skrývání (svcCompact), je vhodné ve stavu closed zneviditelnit popisky tlačítek (z čistě estetického důvodu):
CategoryButtons.ButtonOptions := 
CategoryButtons.ButtonOptions - [boShowCaptions];

Dále skryjeme rámeček, aby tlačítka působila jako nedílná součást SplitView:
CategoryButtons.BorderStyle := bsNone;

Tlačítka ukotvíme ke komponentě SplitView:
CategoryButtons.Anchors := [akLeft, akRight];

Dle potřeby upravíme písmo pro popisky tlačítek:
CategoryButtons.Font.Size := 11;
CategoryButtons.Font.Color := clWhite;

Odpovídajícím způsobem upravíme také vzhled tlačítek:
// Výšku tlačítka
CategoryButtons.ButtonHeight := 45;
// Standardní barvu tlačítky
CategoryButtons.RegularButtonColor := clNone;
// Barva stisknutého tlačítka
CategoryButtons.SelectedButtonColor := clNone;
// Barva tlačítka nad kterým je kurzor myši 
CategoryButtons.HotButtonColor := clGray;
// Šířka tlačítka přes celou šířku komponenty CategoryButtons 
CategoryButtons.ButtonOptions := 
CategoryButtons.ButtonOptions + [boFullSize];
// Tlačítka nebudou v rámečku kategorie 
CategoryButtons.ButtonOptions := 
CategoryButtons.ButtonOptions + [boCaptionOnlyBorder];
// Horizontální zobrazení kategorií
CategoryButtons.ButtonOptions := CategoryButtons.ButtonOptions
- [boVerticalCategoryCaptions];

Stejný kód pro C++Builder

CategoryButtons->Images = iList;
CategoryButtons->Categories->Items[0]->Items->Items[0]->ImageIndex = 0;
CategoryButtons->ButtonOptions =
CategoryButtons->ButtonOptions<<boShowCaptions;
CategoryButtons->BorderStyle = bsNone;
CategoryButtons->Anchors = CategoryButtons->Anchors<<akLeft<<akRight;
CategoryButtons->Font->Size = 11;
CategoryButtons->Font->Color = clWhite;
CategoryButtons->ButtonFlow =cbfHorizontal;
CategoryButtons->ButtonHeight = 45;
CategoryButtons->RegularButtonColor = clNone;
CategoryButtons->SelectedButtonColor = clNone;
CategoryButtons->HotButtonColor = clGray;
CategoryButtons->ButtonOptions =
CategoryButtons->ButtonOptions<<boFullSize;
CategoryButtons->ButtonOptions =
CategoryButtons->ButtonOptions<<boCaptionOnlyBorder;
CategoryButtons->ButtonOptions =
CategoryButtons->ButtonOptions>>boVerticalCategoryCaptions;

Výsledkem by měl být zhruba následující vzhled nabídky:

Zdrojový kód aplikací je dostupný na adrese:
https://onedrive.live.com/redir?resid=E2F9F7B64CA96B45!1281&authkey=!AEQdxr-4pbMpuhA&ithint=folder%2c

K tomuto článku je k dispozici i videoturoriál:

View Petr Houf's profile

Windows 10 (část 1.)

RAD Studio 10 Seattle a Windows 10

Ještě do 29. července 2016 mohou všichni uživatelé, kteří na svém PC používají Windows 7 a vyšší využít bezplatného přechodu na Windows 10. Takto získaná licence je vázána na konkrétní počítač, není však časově ani funkčně omezena. Jednou z hlavních výhod přechodu na Windows 10 jsou aktualizované ovladače, podpora některých nových technologií a vyšší úroveň zabezpečení systému. Důležitá je také podpora systému ze strany společnosti Microsoft, která je pro Windows 10 garantována do roku 2020 respektive do roku 2025.

Společnost Emabarcadero zareagovala vydáním nové verze vývojových nástrojů 10 Seattle. Ty umožňují využít mnohé z nových vlastností, které Windows 10 přinesly:

Vylepšení na úrovni prostředí

• RAD Studio IDE je schopno pracovat s větší velikostí paměti
• Prostředí podporuje práci s více monitory a s monitory 4K

Nové doplňky a komponenty

• Nové vizuální styly Windows 10
• Možnost provázání aplikace s centrem akcí
• Nové komponenty „SplitView“ a „RelativePanel“
• Sdílení dat aplikace prostřednictvím „Share Contracts“
• Windows 10 ovládací prvky „SearchButton“, „ToggleSwitch“ a „ActivityIndicator“

Vzhled aplikace (stylování)

Spolu s uvedením verze 10 Seattle uvolnila společnost Embarcadero nové styly pro knihovny VCL a FireMonkey. Upravit stávající aplikaci tak, aby si uživatel mohl změnit její vzhled, je velmi jednoduché. Nejprve ve vlastnostech projektu (Shift+Ctrl+F11), v sekci „Application/Appearance“ je třeba vybrat styly, které mají být uživatelům k dispozici pro individuální nastavení.

Pozor! Základní styl "Windows" nesmí být nastaven jako defaultní.

V kódu je třeba do sekce uses přidat odkaz na jednotku vcl.Themes. To nám umožní využívat služby Správce Stylů. Pro výběr požadovaného stylu můžeme použít například komponentu ComboBox.

Delphi

uses

  …, Vcl.Themes;

// ComboBox naplníme dostupnými styly:

procedure TForm1.FormCreate(Sender: TObject);

var

  StyleName: String;

begin

  for StyleName in TStyleManager.StyleNames do

    cb1.Items.Add(StyleName);

end;

// Do události OnChange komponenty ComboBox přidáme
// kód pro změnu aktuálního stylu:

procedure TForm1.cb1Change(Sender: TObject);

begin

  TStyleManager.SetStyle(cb1.Text);

end;

C++ Builder

//Do hlavičkového souboru doplníme

#include <Vcl.Themes.hpp>

//Naplnění ComboBoxu:

void __fastcall TForm1::FormCreate(TObject *Sender)

{

  DynamicArray<String> styleNames = Vcl::Themes::TStyleManager::StyleNames;

  for (int i = 0; i < styleNames.Length; ++i)

     {

       String styleName = styleNames[i];

       cb1->Items->Add(styleName);

     }

}

//Nastavení zvoleného stylu:

void __fastcall TForm1::cb1Change(TObject *Sender)

{

  TStyleManager::SetStyle(cb1->Text);

}

Spolupráce aplikace s Centrem Akcí

Windows 10 si kladou za cíl být jednotící platformou, která na všech typech zařízení umožní uživatelům pracovat tak, jak jsou zvyklí. Protože přibývá uživatelů, kteří si své návyky přináší z chytrých telefonů nebo tabletů, setkáme se ve Windows 10 i s prvky, které byly dříve výhradně doménou mobilních zařízení. 

Jedním z nich je "Centrum akcí". Podobně jako u systémů Android nebo iOS se jedná o rychle přístupnou oblast, prostřednictvím které je uživatel informován o důležitých událostech, a z které lze realizovat většinu běžných úloh.

  

Služeb "Centra akcí" mohou využívat i aplikace napsané v Delphi nebo C++Builderu 10 Seattle. Pro tento účel zde přibyla VCL komponenta TNotificationCenter. S využitím komponenty „Notification“ stačí vytvořit novou instanci upozornění, nastavit potřebné parametry a odeslat „Centru akcí“. Komponenta rovněž umožňuje ošetřit událost „ReceiveLocalNotification“, která je vyvolána, když uživatel potvrdí přijetí oznámení (klikne na něj myší). Z aplikace tak můžeme uživatele informovat o libovolné události (např. dokončení nějaké operace) a pokud uživatel zprávu přijme, aplikaci maximalizovat nebo zobrazit odpovídající formulář či dialog.

Delphi

uses

  ..., System.Notification;

procedure TForm1.Button1Click(Sender: TObject);

var

  nt: TNotification;

begin

  // Vytvoření upozornění

  nt := TNotification.Create;

  nt.Name := 'Test';

  nt.Title := 'Testovací oznámení';

  nt.AlertBody := 'Operace byla úspěšně dokončena.';

  // Zobrazení upozornění

  nc.PresentNotification(nt);

end;

// Zpracování

procedure TForm1.ncReceiveLocalNotification(Sender: TObject;

  ANotification: TNotification);

begin

  ShowMessage('Upozornění přijato uživatelem');

end;

C++Builder

// Odeslání zprávy

void __fastcall TForm1::btnPoslatZpravuClick(TObject *Sender)

{

  TNotification *nc = NotificationCenter1->CreateNotification();

  nc->Name = "Test";

  nc->Title = "Testovací oznámení";

  nc->AlertBody = "Operace byla úspěšně dokončena.";

  NotificationCenter1->PresentNotification(nc);

}

// Zpracování

void __fastcall TForm1::NotificationCenter1ReceiveLocalNotification(TObject *Sender,

            TNotification *ANotification)

{

  ShowMessage("Upozornění přijato uživatelem");

}

Pozor! Chování centra akcí lze do velké míry přizpůsobit. Pokud se upozornění z Vaší aplikace v "Centru akcí" nezobrazuje, zkontrolujte si, že je tato možnost v nastavení Windows 10 povolena.

Komponenta „Notification“ je dostupná nejen pro knihovnu VCL, ale rovněž pro FireMonkey. Možnosti práce s oznámeními se na různých platformách mírně liší. Například zvuková signalizace, použití visaček (Badges) nebo zobrazení upozornění v určený čas nemusí být podporováno na všech platformách.

K tomuto článku je k dispozici i videoturoriál a to na adrese: https://www.youtube.com/watch?v=5hfzo9bHP6E

View Petr Houf's profile