Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

Uživatelské rozhraní (1)

Podobné prezentace


Prezentace na téma: "Uživatelské rozhraní (1)"— Transkript prezentace:

1 Uživatelské rozhraní (1)
Vychází z normy CUA – Common User Access Aplikace lze rozdělit na: SDI – Single Document Interface: umožňují otevřít vždy jen jeden dokument (textový soubor, obrázek, zvukový záznam, …) např. WordPad, Paint MDI – Multiple Document Interface: umožňují otevřít více dokumentů zároveň přepínání mezi dokumenty je realizováno pomocí menu Okno, případně pomocí kláves Ctrl+Tab např.: MS-Word, MS-Excel, Paint Shop Pro, Corel Draw 16/05/2018

2 Uživatelské rozhraní (2)
16/05/2018

3 Uživatelské rozhraní (3)
Hlavní okno aplikace – Form: Titulní proužek (Title Bar): systémové menu název aplikace + jméno otevřeného (aktivního) dokumentu tlačítka pro minimalizaci, maximalizaci a zavření okna Proužek menu (Menu Bar) – MenuStrip: menu, pomocí něhož lze s aplikací pracovat, tj. vyvo-lávat jednotlivé její funkce položky menu by měly být přístupné prostřednictvím klávesy Alt a příslušného písmene doporučuje se, aby měl následující strukturu: 16/05/2018

4 Uživatelské rozhraní (4)
Soubor Úpravy Zobrazit Možnosti Okno Nápověda Nový Ctrl+N Zpět Ctrl+Z  Panel nástrojů Otevřít… Ctrl+O Vyjmout Ctrl+X  Stavový řádek Uložit Ctrl+S Kopírovat Ctrl+C Uložit jako… Vložit Ctrl+V Tisk… Ctrl+P Vložit jinak…  Pravítko Náhled Vymazat Del  Mřížka Vzhled stránky… Vybrat vše Ctrl+A  Přichytit k mřížce Najít... Ctrl+F Najít další F3 Konec Nahradit... Ctrl+H Lupa… seznam naposledy otevřených dokumentů 16/05/2018

5 Uživatelské rozhraní (5)
Soubor Úpravy Zobrazit Možnosti Okno Nápověda Panel nástrojů… Nové okno Obsah F1 Paleta barev… Kaskáda Rychlý start Pravítko… Horizontální dlaždice Rejstřík Mřížka… Vertikální dlaždice Tip dne Nastavení… Zavřít vše Zkratkové klávesy Seřadit ikony Výuka Domovská stránka O aplikaci… Seznam oken 16/05/2018

6 Uživatelské rozhraní (6)
položky roletových menu, jejichž zvolení vede na zobrazení dialogového okna, by měly být následovány třemi tečkami položky, jejichž zvolení nemá v daný okamžik žádný význam, by měly být neaktivní (grayed) Proužek nástrojů (Tool Bar) – ToolStrip obsahuje ovládací prvky pro zpřístupnění nejčastěji používaných funkcí (duplikuje některé funkce menu) každá funkce přístupná pomocí Tool Baru by měla být dostupná i pomocí menu prvky obsažené v Tool Baru by měly být vybaveny „bublinovou“ nápovědou – vlastnost ToolTipText 16/05/2018

7 Uživatelské rozhraní (7)
Stavový proužek (Status Bar) – StatusStrip: obsahuje informace vyjadřující momentální stav aplikace, např.: poloha (souřadnice) kurzoru počet stránek (aktuální stránka) dokumentu aktuální režim aplikace použité jednotky (mm, inch, pica, pixel) Rolovací lišty (Scroll Bars) – HScrollBar a VScrollBar: umožňují posunout obsah dokumentu tak, aby bylo možné zobrazit všechny jeho části rolovací lišty by se měly zobrazovat pouze tehdy, jsou-li skutečně zapotřebí (v opačném případě mohou působit rušivě) 16/05/2018

8 Uživatelské rozhraní (8)
Dialogová okna (Dialog Boxes) – Form: slouží k zadávání různých parametrů a nastavo-vání voleb, s nimiž program bude dále pracovat lze je rozdělit do dvou skupin: modální nemodální Pravidla pro návrh dialogových oken: dvě tlačítka pro ukončení: OK: umožňuje potvrdit nastavené volby, které stiskem tohoto tlačítka vchází v platnost mělo by být nastaveno jako hodnota vlastnosti AcceptButton, aby bylo možné dialog ukončit stiskem klávesy Enter 16/05/2018

9 Uživatelské rozhraní (9)
Storno: umožňuje uzavřít dialogové okno, aniž by nastavené volby byly akceptovány mělo by být nastaveno jako hodnota vlastnosti CancelButton, aby bylo možné dialog ukončit stiskem klávesy Esc vhodné může být i tlačítko Použít, kterým uživa-tel potvrdí nastavené volby, aniž by došlo k uza-vření dialogového okna pro nastavování parametrů volit vhodné ovládací prvky: Radio Buttons – RadioButton: výběr jedné položky z položek, které se vzájemně vylučují např.: zarovnání textu (vpravo, vlevo, doprostřed, k oběma okrajům); orientace papíru (na výšku, na šířku) 16/05/2018

10 Uživatelské rozhraní (10)
Check Boxes – CheckBox: zapnutí (vypnutí) určité volby např.: povolení automatického ukládání dokumentu; zapnutí (vypnutí) tučného, podtrženého nebo skloněného písma Text Boxes – TextBox: zadání určité hodnoty (textové i číselné) uživatelem např. zadání hledaného slova v dokumentu List Boxes – ListBox: slouží k výpisu seznamů položek a případnému výběru určité (určitých) položky (položek) z tohoto seznamu např.: seznam fontů nainstalovaných v systému Combo Boxes – ComboBox: spojení Text Boxu a List Boxu zabírají méně místa na obrazovce vhodné např. pro výběr fontu v Tool Baru, volbu velikosti písma 16/05/2018

11 Uživatelské rozhraní (11)
pro zadávání číselných hodnot: lze použít Text Box někdy bývá vhodnější použít jiných prvků (např. TrackBar, HScrollBar nebo VScrollBar) vhodné bývá také použití Text Boxu, který je propojený s ovládacím prvkem TrackBar, HScrollBar nebo VScrollBar použité ovládací prvky sdružovat do logických skupin pomocí GroupBox správně nastavovat pořadí, ve kterém se bude měnit aktivní prvek při stisku klávesy Tab (vlastnosti TabStop a TabIndex) 16/05/2018

12 Uživatelské rozhraní (12)
ovládací prvky v dialogových oknech obsahují-cích velký počet možností lze rozdělit do více skupin pomocí TabControl ovládací prvky, jejichž použití nemá v daném okamžiku žádný význam by měly být neaktivní (grayed) – vlastnost Enabled dialogová okna většinou nemá smysl zvětšovat a zmenšovat  zakázat minimalizační (maxima-lizační) tlačítko a nastavit vlastnost FormBorderStyle na FixedDialog 16/05/2018

13 Uživatelské rozhraní (13)
Pro standardní akce používat standardní dia-logová okna: otevření souboru – OpenFileDialog uložení souboru – SaveFileDialog volba fontu – FontDialog volba barvy – ColorDialog tisk dokumentu – PrintDialog nastavení vzhledu stránky – PageSetupDialog výběr adresáře (složky) – FolderBrowserDialog 16/05/2018

14 Uživatelské rozhraní (14)
Používat standardní kurzory myši (vlastnost Cursor): Arrow, Default: běžný kurzor (šipka) Cross: pro kreslení grafických objektů IBeam: pro práci s textem WaitCursor: při realizaci delšího výpočtu, kdy není možné s aplikací dále pracovat Help: při zobrazování nápovědy k jednotlivým prvkům aplikace 16/05/2018

15 Uživatelské rozhraní (15)
Objekty, s nimiž je možné provádět různé akce, např.: část textu grafický útvar soubor v adresářové struktuře doplnit kontextovým menu Kontextové menu lze realizovat pomocí třídy ContextMenuStrip a nastavením vlast-nosti ContextMenuStrip 16/05/2018

16 Uživatelské rozhraní (16)
Ukládání informací o nastavení aplikace: registry: dnes doporučovaná metoda možno realizovat pomocí tříd Registry a RegistryKey informace ukládané aplikací by měly být zapisovány do: HKEY_LOCAL_MACHINE\SOFTWARE\Firma\Aplikace HKEY_CURRENT_USER\Software\Firma\Aplikace aplikace využívající registry pro ukládání svých informací by měla umožňovat i jejich kompletní odstranění (program uninstall) 16/05/2018

17 Uživatelské rozhraní (17)
Další možnosti využívané v profesionálních aplikacích: instalační program – možné realizovat pomocí MS Visual Studio podpora práce se schránkou (Clipborad) podpora funkcí Drag&Drop podpora protokolu OLE dockable windows vlastní (graficky) upravená okna 16/05/2018

18 WPF (1) WPF – Windows Presentation Foundation:
původně znám pod jménem Avalon prezentační systém sloužící k vytváření aplikací určených pro operační systémy MS Windows zaměřen na „uživatelsky bohaté“ aplikace grafický subsystém, který poskytuje jednotný pří-stup k: uživatelskému rozhraní 2D a 3D grafice dokumentům médiím poprvé uveden na trh jako součást .NET Frame-work 3.0 16/05/2018

19 WPF (2) pro vytváření uživatelského rozhraní slouží znač-kovací jazyk XAML – Extensible Application Markup Language knihovny pro WPF: jsou standardní součástí systémů: MS Windows Vista MS Windows 7 MS Windows Server 2008 mohou být doinstalovány do systému: MS Windows XP SP2/SP3 MS Windows Server 2003 poznámka: nejedná se o technologii, která nahrazuje Windows Forms 16/05/2018

20 Typy aplikací ve WPF (1) WPF dovoluje vytvářet tři typy aplikací:
Windows Application: klasická aplikace pracující v systému MS Windows zabezpečení je standardně nastaveno na Full-trust, tj. aplikace může přistupovat ke všem zdrojům: databáze souborový systém registry apod. Navigation Application: poskytuje funkcionalitu pro navigaci mezi jednotlivý-mi stránkami aplikace (podobně jako např. u prohlíže-če Internet Explorer) 16/05/2018

21 Typy aplikací ve WPF (2) WPF Browser Application (XBAP):
spouštěna v prohlížeči zabezpečení je nastaveno na Partial-trust, tzn. že nemá např. přístup k souborovému systému nebo registry 16/05/2018

22 WPF vs. Windows Forms (1) WPF se od Windows Forms liší zejména v následujících rysech: použití rozvržení (rozložení – layout): ovládací prvky: nejsou umisťovány přímo do formuláře bývají zpravidla umisťovány do tzv. rozvržení (layuot) nemají definovány vlastnosti Left a Top pozice, na níž je ovládací prvek zobrazen, je dána nastavením: rozvržení okrajů (okolo ovládacího prvku) – vlastnost Margin zarovnání – vlastnosti HorizontalAlignment a VerticalAlignment) 16/05/2018

23 WPF vs. Windows Forms (2) hardwarová akcelerace:
všechny operace provádějící vykreslování jsou realizo-vány pomocí rozhraní DirectX DirectX umožňuje lépe využít možností moderních grafických karet nezávislost na rozlišení: definuje jednotku DIP (Device Independent Pixel) 1 DIP = 1/96“  pro běžné zobrazovací jednotky, které mají rozlišení 96 DPI, platí 1 DIP = 1 pixel umožňuje zvětšování (zmenšování) zobrazovaných prvků v závislosti na nastavení rozlišení zobrazovací jednotky (DPI) 16/05/2018

24 WPF vs. Windows Forms (3) ovládací prvky nemají „pevný vzhled“:
třídy zapouzdřující chování ovládacích prvků definují zejména jejich funkcionalitu a základní vzhled, který může být modifikován deklarativní popis uživatelského rozhraní: uživatelské rozhraní aplikace je zpravidla vytvářeno pomocí značkovacího jazyka XAML program v jazyku C#, který zabezpečuje zbývající činnost aplikace, se označuje jako tzv. code-behind (kód na pozadí) kreslení založené na objektech: vykreslování grafiky je realizováno pomocí útvarů (objektů), které jsou následně zobrazovány 16/05/2018

25 WPF a Windows Forms (1) Komponenty Windows Forms a jejich ekvi-valenty ve WPF: Windows Forms WPF Button Button CheckBox CheckBox ColorDialog Žádný ekvivalent ComboBox ComboBox ContextMenuStrip ContextMenu FolderBrowserDialog Žádný ekvivalent FontDialog Žádný ekvivalent Form Window 16/05/2018

26 WPF a Windows Forms (2) Windows Forms WPF GroupBox GroupBox
HScrollBar, VSrollBar ScrollBar Label TextBlock, Label ListBox ListBox ListView ListView MenuStrip Menu NumericUpDown TextBox + RepeatButon OpenFileDialog OpenFileDialog PageSetupDialog Žádný ekvivalent 16/05/2018

27 WPF a Windows Forms (3) Windows Forms WPF Panel Canvas PictureBox
Image PrintDialog PrintDialog PrintDocument Žádný ekvivalent ProgressBar ProgressBar RadioButton RadioButton SaveFileDialog SaveFileDialog StatusStrip StatusBar TextBox TextBox ToolStrip ToolBar 16/05/2018


Stáhnout ppt "Uživatelské rozhraní (1)"

Podobné prezentace


Reklamy Google