UŽIVATELSKÉ ROZHRANÍ WINDOWS-FORM DESKTOPOVÉ APLIKACE - CVIČENÍ

Transkript

1 UŽIVATELSKÉ ROZHRANÍ WINDOWS-FORM DESKTOPOVÉ APLIKACE - CVIČENÍ AUTOR DOKUMENTU: MGR. MARTINA SUKOVÁ DATUM VYTVOŘENÍ: KLÍČOVÁ AKTIVITA: 02 UČIVO: STUDIJNÍ OBOR: PROGRAMOVÁNÍ 2. ROČNÍK (PRG2) INFORMAČNÍ TECHNOLOGIE HODINOVÁ DOTACE: 2(8)

2 OBSAH 1. Otevření, spuštění a uložení projektu Instalace Otevření projektu Spuštění programu Uložení projektu 9 2. Soubory projektu 9 3. Ovládací prvky a jejich vlastnosti Form Formulář Label Popisek TextBox Textové pole Button Tlačítko Události Samostatná práce 23 1

3 1. OTEVŘENÍ, SPUŠTĚNÍ A ULOŽENÍ PROJEKTU 1.1 INSTALACE Prvním krokem, který musíme provést je spuštění vývojového prostředí Microsoft Visual C# 2012 Express for Desktop. Pokud na vašem PC není tento program nainstalován, je možné jej bezplatně stáhnout z následujícího odkazu: Na stejné stránce je možné stáhnout Language Pack, který lze použít k přepínání jazyka uživatelského rozhraní. (Ke stažení je i vývojové prostředí Microsoft Visual C# 2012 Express for Web, které je určené pro vývoj webových aplikací.) 2

4 1.2 OTEVŘENÍ PROJEKTU Po instalaci můžeme přistoupit k vlastnímu spuštění programu pomocí ikony: Objeví následující úvodní obrazovka: Z nabídky SOUBOR zvolme Nový projekt. Programům v C# se většinou říká projekty. Skládají se z několika souborů, které ukládáme do jedné složky. 3

5 Nastavíme Šablony/Visual C#/Windows a zvolíme Formulářová aplikace Windows. V tomto okně nastavíme název projektu a adresář, do kterého se budou soubory projektu ukládat. Zatržítko v zaškrtávacím políčku Vytvořit adresář pro řešení zrušíme. Nakonec všechny volby potvrdíme tlačítkem OK. 4

6 Vývojové prostředí bude vypadat asi následovně. Objeví se v něm Návrhář, který umožňuje vizuálně navrhovat uživatelské rozhraní. V pravé části jsou okna Průzkumník řešení a Vlastnosti. Pokud nejsou otevřená, použijte nabídku ZOBRAZIT, ve které najdete volby pro zobrazení/skrytí těchto i dalších oken. Okno nového programu, ve kterém můžeme měnit vzhled vznikajícího projektu (nastavovat jeho vlastnosti a přidávat do něj další ovládací prvky). 5

7 1.3 SPUŠTĚNÍ PROJEKTU Přesto, že jsme ještě nenapsali ani řádek programového kódu, můžeme náš vznikající projekt spustit a následně spuštění ukončit a vrátit se do Návrháře. To lze provést několika způsoby. Spuštění projektu: Nabídka LADIT/Spustit ladění Ikona na panelu nástrojů Klávesa F5 6

8 Uzavření spuštěného projektu: Křížek v jeho pravém horním rohu Nabídka LADIT/Ukončit ladění Klávesy Shift+F5 Ikona na panelu nástrojů 7

9 1.4 ULOŽENÍ PROJEKTU Pro uložení projektu vždy volíme nabídku SOUBOR/Uložit vše. Ta zajistí, že se uloží všechny soubory projektu do adresáře, který jsme zvolili při otvírání nového projektu. I v tomto případě můžeme použít ikonu na panelu nástrojů nebo klávesovou zkratku Ctrl+Shift+S 2. SOUBORY PROJEKTU Podívejme se nyní do složky projektu na disku počítače. Projekt jsme při jeho otevření nazvali První pokus a do této složky se soubory projektu uložily. Složka vypadá následovně: 8

10 Nejdůležitější jsou soubory s příponou.cs. Jedná se o zdrojové kódy programu. Tyto soubory obsahují vlastní zápis programu v programovacím jazyce C#. Tyto soubory jsou textové a bylo by možné je editovat například v poznámkovém bloku. Toho však využívat nebudeme, protože vestavěný editor C# nabízí vhodné editovací pomocníky, se kterými se později seznámíme. Dále se ve složce projektu nachází soubor s příponou.csproj. Toto je definiční soubor projektu. V tomto souboru se nacházejí informace o tom, co všechno do projektu patří (zdrojové texty, odkazy na knihovny ) Soubor je ve formátu XML. Nikdy jej ze složky nesmažte! Soubor s příponou.sln definiční soubor řešení. Dovoluje sdružit několik příbuzných projektů do jednoho řešení. V našich programech bude vždy pouze jeden projekt, přesto soubor.sln musí být v adresáři přítomen. Při kopírování programu tedy kopírujte vždy složku projektu celou. Potřebujete-li projekt poslat jako přílohu u, celou složku zkomprimujte a takto odešlete. Budete-li otvírat již existující projekt, poklepejte buď na soubor.sln, nebo na soubor.csproj. Cílem programátora je vytvořit takzvaný spustitelný soubor soubor s příponou.exe. Tyto soubory se distribuují uživatelům. Spustitelný soubor se vytváří během sestavování programu a ukládá se do podadresáře bin\debug, případně bin\release. Spustitelný soubor tvoří sled instrukcí pro processor zapsaný ve strojovém jazyce. 9

11 Ve vývojovém prostředí C# můžeme s těmito soubory manipulovat v okně Průzkumník řešení. Toto okno se standardně zobrazí v pravé části vývojového prostředí. 3. OVLÁDACÍ PRVKY A JEJICH VLASTNOSTI V této kapitole se naučíme navrhovat uživatelské rozhraní našich programů. Do okna programu budeme umísťovat jednotlivé ovládací prvky (tlačítka, textová pole, popisky, zaškrtávací políčka ) a měnit jejich vzhled vlastnosti. Prvky prozatím nebudou nic užitečného vykonávat. Tím se budeme zabývat v kapitole následující. Otevřeme _První pokus, se kterým budeme nadále pracovat. 10

12 3.1 FORM - FORMULÁŘ Prvním prvkem, jehož vlastnosti probereme, bude samotné okno programu. Nejedná se sice o typický ovládací prvek, ale součástí našeho projektu je od samého počátku. Vlastnosti měníme v okně Vlastnosti. V prvním rozbalovacím okně vybereme prvek, jehož vlastnost hodláme měnit. Z ikon v dalším řádku zvolme abecední uspořádání a vlastnosti (druhá a třetí ikona zleva). Dále se okno skládá ze dvou sloupců. V levém sloupci je uvedeno jméno vlastnosti a v pravém její hodnota. Jestliže vybereme vlastnost Text a změníme její hodnotu na První pokus, projeví se tato změna v záhlaví formuláře. 11 V dolní části okna se zobrazuje stručný popis vybrané vlastnosti. Vlastností formuláře, které můžeme měnit jsou desítky. Stručně se seznámíme s některými z nich:

13 Name Jméno objektu, pod kterým objekt identifikujeme v programovém kódu. Toto jméno nesmí obsahovat mezeru. Je zvykem objekty přejmenovávat a jména přidělovat tak, aby bylo jasné, ke kterému objektu patří. Budeme dodržovat následující konvenci - první slovo píšeme malými písmeny a v každém dalším slově velké počáteční písmeno. Náš formulář nazvěme oknoprogramu. FormBorderStyle Určuje vzhled a chování ohraničení formuláře. Pokud požadujeme, aby se velikost formuláře neměnila za běhu programu, nastavíme hodnotu této vlastnosti na FixedSingle. MaximizeBox Určuje, zda formulář má v pravém horním rohu aktivní maximalizační tlačítko. Většinou nastavujeme její hodnotu na False. (Okno s několika ovládacími prvky maximalizované na celou obrazovku nevypadá dobře.) 3.2 LABEL - POPISEK Label (popisek) je objekt, do kterého ukládáme nápis, který chceme umístit do okna programu. Popisek vložíme do formuláře přetažením myší z panelu nástrojů, kde jej nalezneme mezi běžnými ovládacími prvky. 12

14 Po přetažení objektu do formuláře, vypadá uživatelské rozhraní vznikajícího projektu následovně: U tohoto objektu nás budou zajímat vlastnosti: Text Hodnota této vlastnosti je zobrazena v ovládacím prvku. Name Opět se jedná o jméno objektu, pod kterým objekt identifikujeme v programovém kódu. Vzhledem k tomu, že se na popisky z kódu většinou neodkazujeme, nemusíme (ale můžeme) je přejmenovávat. Font Písmo použité k zobrazení textu v ovládacím prvku. Můžeme nastavit jeho typ, velikost, podtržení, kurzívu.. ForeColor Určuje barvu písma. Barvu vybíráme z rozbalovací nabídky. Vybíráme z barev palety, barev typických pro web nebo barev systémových. BackColor 13

15 Visible Vlastnost Visible může nabývat dvou hodnot True/False. Její standardní nastavení je na hodnotu True, pak je popisek při spuštění programu ve formuláři vidět. Při přepnutí na hodnotu False vidět není. Height Výška objektu v pixelech. Width Šířka objektu v pixelech. Top Vzdálenost objektu od horního okraje formuláře. Left Vzdálenost objektu od levého okraje formuláře. 3.3 TEXTBOX TEXTOVÉ POLE Textové pole je ovládací prvek, který umožňuje uživateli: a) zadat vstupní data do programu b) zobrazit výstupní údaje programu Do formuláře jej vložíme stejným způsobem jako popisek. Vlastnosti textového pole: Name Textová pole používáme v kódu a proto je zvykem je přejmenovávat. Jméno většinou začíná slovem pole, tedy například polezadejjmeno. Text 14

16 Toto je nejdůležitější vlastnost textového pole. Její hodnotou je text, který je v textovém poli zobrazen. Obvykle text do textového pole zadá uživatel pak se jedná o vstupní data programu. Po spuštění programu můžeme zadávat data: ReadOnly Hodnota této vlastnosti je nastavena na True. Při tomto nastavení může uživatel do textového pole zapisovat. Změníme-li hodnotu na False, pak je toto pole určeno pouze pro čtení. Tohoto nastavení se užívá právě tehdy, když používáme textové pole pro výstup dat. TextAlign Určuje, zda je text zarovnán v textovém poli vlevo Left, vpravo Right nebo uprostřed Center. Bývá zvykem zarovnávat čísla doleva a text doprava. Multiline Změníme-li hodnotu na True, pak do textového pole můžeme zadat víceřádkový text. WordWrap Určuje, zda jsou u víceřádkového pole automaticky zalamována slova. ScrollBars 15

17 Vkládá do víceřádkového textového pole posuvníky, pomocí kterých můžeme textovým polem rolovat v případě, že se celý text nedá zobrazit najednou. Horizontal svislý posuvník Vertikal vodorovný posuvník (vloží se pouze tehdy, je-li hodnota vlastnosti WordWrap nastavena na False) Both vloží oba posuvníky Následující vlastnosti fungují stejně jako u popisku. BackColor ForeColor Font Visible Height Width Top Left 3.4 BUTTON - TLAČÍTKO Tlačítko je ovládací prvek, který po stisknutí spouští nějakou akci. Z hlediska programování nejsou tak důležité jeho vlastnosti, jako události, které se s ním spojují. Těmi se budeme zabývat v následující kapitole. Do formuláře tlačítko vložíme stejným způsobem jako popisek nebo textové pole. Vlastnosti tlačítka: 16

18 Name Tlačítka používáme v programovém kódu a proto je zvykem je přejmenovávat. Jméno většinou začíná slovem tlacitko, tedy například tlacitkopozdrav. Text Její hodnotou je text, který je v tlačítku zobrazen. Následující vlastnosti fungují stejně jako u popisku a textového pole. BackColor ForeColor Font Visible TextAlign Nápisy na tlačítku necháváme většinou zarovnané na střed. Height Width Top Left 17

19 4. UDÁLOSTI Běh programu s grafickým uživatelským rozhraním je řízen událostmi. Program začne vykonávat činnost tehdy, když vznikne událost. Událostí může být kliknutí myší, stisknutí klávesy, přesunutí myši, změna velikosti objektu, impuls časovače atd. Jestliže požadujeme, aby program na vznik události reagoval, musíme k této události připojit obslužný podprogram. Obslužný podprogram k události vložíme z okna Vlastnosti kliknutím na ikonu s bleskem Události. Zde vybereme požadovanou událost. Po vybrání události tlacitkopozdrav_click se otevře zdrojový kód Form1.cs a vloží se do něj prázdný obslužný podprogram dané události. Výpis tohoto kódu vypadá následovně: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; namespace _24_2_1_1_První_pokus { public partial class oknoprogramu : Form { public oknoprogramu() { InitializeComponent(); } 18

20 private void tlacitkopozdrav_click(object sender, EventArgs e) { } } } V zobrazeném zdrojovém kódu většina řádků existovala ještě před vložením obslužného podprogramu. Tento kód je připraven v šabloně formulářové aplikace Windows, ze které byl program vytvořen. Nově zde přibyla pouze kostra obslužného programu, která je zvýrazněna rámečkem. Tento obslužný program má svou hlavičku, ve které se vyskytuje jméno podprogramu - tlacitkopozdrav_click. Za hlavičkou podprogramu následují prázdné závorky {}, do kterých budeme zapisovat tělo podprogramu tvořené příkazy, jež se mají vykonat. Potřebujeme-li v programovém kódu měnit hodnotu vlastnosti objektu, použijeme přiřazovací příkaz ve tvaru: jméno_objektu.jméno_vlastnosti=hodnota_vlastnosti; Zapišme do těla procedury přiřazovací příkaz: polepozdrav.text = "Zdravím uživatale jménem " + polezadejjmeno.text; Tímto příkazem říkáme: zapiš do vlastnosti Text textového pole polepozdrav text Zdravím uživatele jménem a za něj připoj hodnotu vlastnosti Text textového pole polezadejjméno. Program se bude chovat následovně: a) Spusťme program. b) Zapišme do textového pole polezadejjméno text Karel. c) Klikněme na tlačítko Pozdrav 19

21 Nyní zbývá stejným způsobem otevřít obslužný podprogram tlačítka Smazat a zapsat pro něj programový kód. private void tlacitkosmazat_click(object sender, EventArgs e) { polezadejjmeno.text = null; polepozdrav.text = null; } Těmito příkazy smažeme hodnoty vlastnosti Text obou textových polí. Pokud se vám zdá programový kód příliš dlouhý, můžete z něj smazat řádky připojující jmenné prostory, které váš program nevyužívá. Musí zde nutně zůstat pouze dva z nich System a Systém.Windows.Forms. Konečná verze programu _První pokus: using System; using System.Windows.Forms; namespace _24_2_1_1_První_pokus { public partial class oknoprogramu : Form { public oknoprogramu() { InitializeComponent(); } private void tlacitkopozdrav_click(object sender, EventArgs e) { polepozdrav.text = "Zdravím uživatale jménem " + polezadejjmeno.text; } 20

22 } private void tlacitkosmazat_click(object sender, EventArgs e) { polezadejjmeno.text = null; polepozdrav.text = null; } } Jak se můžeme přesvědčit v nabídce Události, ke každému prvku existuje mnoho událostí, jejichž obslužné podprogramy můžeme popsat. Nejčastěji používané událostní procedury jsou: Load Spouští se při načtení formuláře. Click Spouští se při kliknutí myší na daný objekt. DoubleClick Spouští se při dvojitém kliknutí myší na daný objekt. MouseMove Spouští se při přesunutí myši přes objekt. Resize Spouští se při změně velikosti objektu. 21

23 5. SAMOSTATNÁ PRÁCE Příklad _Prostřední Napište program, který po svém spuštění vykreslí červený Label doprostřed formuláře. Label zůstane uprostřed formuláře i po změně jeho velikosti. Tip: Vnitřní velikost formuláře (bez záhlaví a krajních lišt) získáte jako hodnotu vlastností ClientSize.Height a ClientSize.Width. 22

24 Příklad _Semafor Napište program, který vykreslí tři objekty typu Label, představující semafor. Po spuštění programu svítí červená. Jestliže uživatel klikne na prostřední Label, rosvítí se oranžová a červená zhasne. Jestliže uživatel klikne na dolní Label, rosvítí se zelená a oranžová zhasne. Tedy, na semaforu svítí vždy právě jedna barva. Tip: Stav po kliknutí na prostřední Label Pro změnu barvy využijte vlastnost BackColor. Pro základní barvy existují předdefinované konstanty. Např. barvu prostředního Labelu na oranžovou změníte příkazem: popisekoranzovy.backcolor =Color.Orange; Konstanty pro jednotlivé barvy jsou uložené ve jmenném prostoru Systém.Drawing (nesmíme jej smazat ze začátku kódu). Pro změnu velikosti Labelu je nutné nastavit vlastnost AutoSize na False. 23

25 Příklad _Pohyb Napište program, který vykreslí čtvercový červený Label a čtyři objekty typu Button podle následujícího obrázku. Po kliknutí na tlačítko s nápisem Vlevo nahoru se Label přesune do levého horního rohu, po kliknutí na tlačítko s nápisem Vpravo nahoru se Label přesune do pravého horního rohu, po kliknutí na tlačítko s nápisem Vlevo dolu se Label přesune do levého dolního rohu a po kliknutí na tlačítko s nápisem Vpravo dolu se Label přesune do pravého dolního rohu. 24