Úvod, uživatelské prostředí

1. díl - Úvod, uživatelské prostředí

Tomáš Jecha       26. 4. 2007       C#, VB.NET, WinForms, Grafika       8542 zobrazení

V prním dílu tohoto seriálu si navrhneme potřebné uživatelské rozhraní kreslící tabule.

Úvod

Když jsem se rozhodoval jakou síťovou aplikaci budu popisovat, jako první mě napadnul chatovací prográmek. Řekl jsem si ale, že půjdu o kousek dál a pokusím se popsat krok za krokem vývoj jednoduché sdílené kreslící tabule (podobnou jako znáte například z MSN Live Messangeru). To znamená, že tu nebudeme řešit jen základní komunikaci, ale i nějakou tu synchronizaci a jednoduchý protokol s několika příkazy.

Základní funkce

Ve výsledku bude program podporovat tyto funkce:

  • možnost relaci založit a připojit se na ní
  • kreslení čar na straně serveru i klienta
  • změna barvy a tloušťky čáry

Potřebné znalosti

Pokusím se v článku popsat vše, co je nutné provést, abyste dosáhli stejného výsledku jako zde. Chci klást nějvětší důraz na vysvětlení síťových prvků, proto například o vykreslování tolik rozprávět nebudu. O tom si můžete přečíst v článku Hungry Snake. Kdyby vám i přesto nebylo něco jasné, zeptejte se v diskuzi.

Rozvržení

Založíme si projekt typu Windows Application. Aplikace poběží na formuláři, který má neměnnou velikost a bude obsahovat menu, kreslící plochu a stavový panel.

Začneme nastavením vlastnosti formuláře FrameBorderStyle na FixedSingle a MaximizeBox na False, čímž dosáhneme, že formulář nebude možné maximalizovat, ani ho žádným jiným způsobem zmenšit, či zvětšit.

Pak se vrhneme na horní menu. Na formulář vložíme objekt MenuStrip z Toolboxu (kategorie Menus&Toolbars), který se automaticky nalinkuje jako hodnota vlastnosti formuláře MainMenuStrip (tím se stane výchozím menu na formuláři). Teď už můžete pomocí Window Designeru navrhnout menu stejně jako na obrázku:

Vytvoření menu pomocí MenuStrip

TIP: Vodorovné oddělovací čáry uděláme tak, že jako Text zadáme - (pomlčku)

TIP: Příkaz Odpojit znepřístupníte v kontextovém menu odškrtnutím položky Enabled

Teď vložíme StatusStrip (stejná kategorie jako MenuStrip), který nám pomůže informovat uživatele o stavu připojení. Nezapomeňte nastavit SizingGrid na False - odstraníte tím malou mřížku vpravo dole na změnu velikosti formuláře SizingGrid .   Aby se na StatusStripu mohlo něco zobrazovat, přidáme do něj StatusLabel jako na obrázku:

Vložení StatusLabel do StatusStrip

Na StatusLabel pak klikneme a nastavíme mu jméno na StripInfo a text na Připraven.

Poslední, co nám zbývá, je vložit na formulář PictureBox, do kterého budeme vykreslovat. Jeho jméno bude PicTabule. Formulář by teď měl vypadat asi takto:

Výsledné okno

Vykreslování

To, co je na kreslící tabuli, budeme muset mít někde uložené. V našem případě bude vhodné použít objekt Drawing.Bitmap. Funkce pro vykreslování nám pak zprostředkuje Drawing.Graphics. Jejich deklaraci a inicializaci provedeme takto:

     Dim grp As Drawing.Graphics ' nabízí provádění grafických operací 
     Dim TBitmap As Drawing.Bitmap ' uložistě grafického obsahu tabule 
  
     Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load 
         TBitmap = New Bitmap(PicTabule.Width, PicTabule.Height) ' inicializujeme nový objekt Bitmap s velikostí tabule 
         grp = Graphics.FromImage(TBitmap) ' navážeme na TBitmap objekt grp, který umožní vykreslování 
         grp.Clear(Color.Black) ' nastavíme barvu tabule na černou 
         grp.SmoothingMode =Drawing2D.SmoothingMode.AntiAlias ' aktivujeme vyhlazování čar 
     End Sub 

Aby se obsah TBitmap vykresloval do PictureBoxu, bude potřeba vložit tento kód:

  
     Private Sub PicTabule_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles PicTabule.Paint 
         ' vykreslíme obsah TBitmap na formulář do PicTabule 
         e.Graphics.DrawImage(TBitmap, 0, 0) 
     End Sub 

Nesmíme zapomenout na tlačítka "Smazat tabuli" a "Konec" v menu:

  
     Private Sub ToolStripMenuItem_SmazatTabuli_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles ToolStripMenuItem_SmazatTabuli.Click 
         grp.Clear(Color.Black) ' smažeme tabuli 
         PicTabule.Invalidate() ' a překreslíme ji 
     End Sub 
  
     Private Sub StripMenuItemKonec_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles StripMenuItemKonec.Click 
         End ' klepnuli jsme na Konec 
     End Sub 
   
A nakonec ještě kód, který dovolí myší kreslit čáry:
  
         Dim PosledniBod As Point ' bude potřeba si pamatovat poslední bod, kam se kreslilo 
         Dim drawWidth As Integer = 10 ' šířka kreslené čáry 
         Dim drawColor As Color = Color.White ' barva štětce 
         Dim Kresleni As Boolean	' aktivuje se stisknutím levého tlačítka na kreslící tabuli a indikuje začátek kreslení 
  
         Private Sub PicTabule_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PicTabule.MouseDown 
                 If e.Button = Windows.Forms.MouseButtons.Left Then 
                         PosledniBod = e.Location ' počátek kreslení je nyní nastaven jako pozice myši 
                         grp.FillEllipse(New Pen(drawColor).Brush, New RectangleF(e.X - drawWidth / 2, e.Y - drawWidth / 2, drawWidth, drawWidth)) ' vykreslíme první bod (zakulacení počátku čáry) 
                         PicTabule.Invalidate() ' nechame překreslit PicTabule 
                         Kresleni = True	' aktivujeme kreslici moc 
                 End If 
         End Sub 
  
         Private Sub PicTabule_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PicTabule.MouseMove 
                 If e.Button = Windows.Forms.MouseButtons.Left And Kresleni = True Then 
                         grp.DrawLine(New Pen(drawColor, drawWidth), PosledniBod, e.Location) ' vykreslíme čáru z posledního bodu, kde byla myš 
                         grp.FillEllipse(New Pen(drawColor).Brush, New RectangleF(e.X - drawWidth / 2, e.Y - drawWidth / 2, drawWidth, drawWidth)) ' vykreslíme zakončovací bod (zakulacení konce čáry) 
                         PicTabule.Invalidate() ' nechame překreslit PicTabule 
                         PosledniBod = e.Location ' poslední bod, ze kterého se kreslilo je nyní opět aktuální pozice myši 
                 End If 
         End Sub 
  
         Private Sub PicTabule_MouseUp(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PicTabule.MouseUp 
                 If e.Button = Windows.Forms.MouseButtons.Left Then 
                         Kresleni = False ' puštěním levého tlačítka myši opouštíme kreslící mód 
                 End If 
         End Sub 
 

To bude prozatím vše. Výsledek by měl vypadat stejně jako na obrázku níže.

Výsledná aplikace

Zatím náš prográmek neumí nic víc, než kreslit čáru, ale v dalším díle se už konečně vrhneme na samotnou komunikaci přes TCP/IP protokol.

První verzi kreslící tabule z tohoto dílu si můžete stáhnout zde:

 

hodnocení článku

2 bodů / 2 hlasů       Hodnotit mohou jen registrované uživatelé.

 

Všechny díly tohoto seriálu

3. Přenos dat, protokol a dokončení 26. 4. 2007
2. Základy TCP spojení, implementace funkcí Připojit a Založit server 26. 4. 2007
1. Úvod, uživatelské prostředí 26. 4. 2007

 

Mohlo by vás také zajímat

Windows Presentation Foundation (WPF) - díl 10.: Návrh přihlašovacího formuláře - TextBox, PasswordBox, CheckBox a Label

Jak navrhnout jednoduchý přihlašovací formulář v technologii WPF. Zároveň popíši další čtyři ze základních komponent: TextBox, PasswordBox, CheckBox a Label.

Co je to .NET Framework 4.5?

V tomto článku se snažím nastínit rozdíl mezi .NET 4 a .NET 4.5 z pohledu zpětné kompatibility.

Genericita, rozhraní a dědičnost

Jazyk C# je multiparadigmatický, což v praxi znamená, že v něm můžeme dělat hodně věcí. Jak ale do sebe jednotlivá paradigma zapadají? Co se hezky doplňuje a co není vzájemně kompatibilní? V tomto článku chci popsat, jak se chová IEquatable vzhledem k dědičnosti typu T.

 

 

Nový příspěvek

 

Diskuse: Díl 1. - Úvod, uživatelské prostředí

Tejto casti ktoru pisete nerozumiem. Ako mam vlozit Drawing.Bitmap?????????

nahlásit spamnahlásit spam 0 odpovědětodpovědět

pictureBox.Invalidate();

v c# smaže vše co se na picbox namaluje a v překladu znamena zrusit.. co tedy udělá ve vb.NET ?

dd8:

zkus tam napsat System.Drawing.Bitmap

snad mi za par let nekdo napise :DD

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Diskuse: Díl 1. - Úvod, uživatelské prostředí

Tento program si vyrabam.

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Diskuse: Díl 1. - Úvod, uživatelské prostředí

Dobrý den, mám dotaz jak mám uložit číslo barvy z určitého bodu na obrazovce (souřadnice už mám v proměných x, y), dekuji

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Diskuse: Díl 1. - Úvod, uživatelské prostředí

Zdravím, Je možné udělat i program, který má víc uživatelů než dva?

nahlásit spamnahlásit spam 1 / 1 odpovědětodpovědět

ano je to možné a to bez najmenších problémov , mam zdrojak ktory je chat s vela miestnostami a dalsie sa daju vytvorit , program funguje tak ze spravy uploaduje na ftp. Ak nekdo chce zdrojak (program som testoval na chatovyni v 20pc naraz na skolskom turnaji v programovani) a dostal som diplom za najlepsi projekt roka...... nechcem powedat ze je to naky vynalez , je zostaveny len z 5 txt suborov na FTPecku a klasicky client ktory nahrava spravy a s timerom ktory kazdych 5 sekund stahuje spravy , + klient maze spravy z FTP ak txt subor je väcsi ako 5mb

nahlásit spamnahlásit spam 0 odpovědětodpovědět
                       
Nadpis:
Antispam: Komu se občas házejí perly?
Příspěvek bude publikován pod identitou   anonym.

Nyní zakládáte pod článkem nové diskusní vlákno.
Pokud chcete reagovat na jiný příspěvek, klikněte na tlačítko "Odpovědět" u některého diskusního příspěvku.

Nyní odpovídáte na příspěvek pod článkem. Nebo chcete raději založit nové vlákno?

 

  • Administrátoři si vyhrazují právo komentáře upravovat či mazat bez udání důvodu.
    Mazány budou zejména komentáře obsahující vulgarity nebo porušující pravidla publikování.
  • Pokud nejste zaregistrováni, Vaše IP adresa bude zveřejněna. Pokud s tímto nesouhlasíte, příspěvek neodesílejte.

přihlásit pomocí externího účtu

přihlásit pomocí jména a hesla

Uživatel:  
Heslo:  

zapomenuté heslo

 

založit nový uživatelský účet

zaregistrujte se

 
zavřít

Nahlásit spam

Opravdu chcete tento příspěvek nahlásit pro porušování pravidel fóra?

Nahlásit Zrušit

Chyba

zavřít

feedback