Skillnad mellan versioner av "Kap 14 Windowsprogrammering (49)"

Från Mathonline
Hoppa till: navigering, sök
m
m
 
(11 mellanliggande versioner av samma användare visas inte)
Rad 16: Rad 16:
  
 
= <b><span style="color:#931136">Kap 14 &nbsp; Windowsprogrammering (forts.)</span></b> =
 
= <b><span style="color:#931136">Kap 14 &nbsp; Windowsprogrammering (forts.)</span></b> =
== <b><span style="color:#931136">&nbsp; Genomgång av [[Övningar_48_(C/Cpp_23)#V.C3.A5r_f.C3.B6rsta_GUI-.C3.B6vning|<span style="color:blue"> övn 14.2</span>]]</span> ==
+
== <b><span style="color:#931136">&nbsp; Genomgång av [[Övningar_48_(C/Cpp_23)#V.C3.A5r_f.C3.B6rsta_GUI-.C3.B6vning|<span style="color:blue"> övn 14.2</span>]]</span></b> ==
== <span style="color:#931136"> &nbsp; Vår första GUI-övning</span></b> ==
+
 
<div class="ovnE">
 
<div class="ovnE">
 +
=== <b><span style="color:#931136"> &nbsp; Vår första GUI-övning</span></b> ===
 
<div style="border:1px solid black;display:inline-table;margin-left: 0px;"> [[Image: Ovn_14_1_2_1.jpg]]</div>
 
<div style="border:1px solid black;display:inline-table;margin-left: 0px;"> [[Image: Ovn_14_1_2_1.jpg]]</div>
  
Rad 27: Rad 27:
  
  
= <b><span style="color:#931136">14.1 &nbsp; Interaktiva grafiska gränssnitt (GUI)</span></b> =
+
= <b><span style="color:#931136">14.3 &nbsp; CheckBoxar och radioknappar</span></b> =
 
<div class="ovnE">
 
<div class="ovnE">
=== <b><span style="color:#931136">Projektet Interaction</span></b> ===
+
=== <b><span style="color:#931136">Tre nya kontroller</span></b> ===
<div style="border:1px solid black;display:inline-table;margin-left: 0px;"> [[Image: WinFormsAppl_1a.jpg]]</div>
+
<div style="border:1px solid black;display:inline-table;margin-left: 0px;"> [[Image: CheckRadioGroup.jpg]]</div>
 
+
</div>
 
+
<div style="border:1px solid black;display:inline-table;margin-left: 0px;"> [[Image: WinFormsAppl_2.jpg]]</div>
+
  
  
 +
= <b><span style="color:#931136">Projektet Bartender</span></b> =
 
<div class="ovnC">
 
<div class="ovnC">
==== <b><span style="color:#931136">Controls</span></b> ====
+
<big>
* &nbsp; Förprogrammerade grafiska komponenter i Visual Studio kallas för <b><span style="color:#931136">controls</span></b>.
+
Efter val av dryck och glas samt klick knappen Servera ska ett meddelande med de valda alter-
: &nbsp; Ex.: TextBox, Label, Button, ... .
+
* &nbsp; I Visual Studio är de samlade i verktygslådan <b>Toolbox</b>.
+
* &nbsp; De skapas genom att dubbelklicka dem eller dra dem med musen till formfönstret.
+
* &nbsp; För att få funktionalitet i dem dubbelklickar man på dem, när de är placerade,
+
: &nbsp; och skriver kod ”bakom” dem. Koden är i regel en [[Kap_14_Windowsprogrammering#H.C3.A4ndelsemetoder|<b><span style="color:blue">händelsemetod</span></b>]].
+
</div>
+
  
 +
nativen skrivas ut i en MessageBox.
  
<div style="border:1px solid black;display:inline-table;margin-left: 0px;"> [[Image: WinFormsAppl_3.jpg]]</div>
+
Kontrollen <i>CheckBox</i> (små rutor) tillåter val av flera alternativ.
  
 +
Kontrollen <i>RadioButton</i> (små ringar) tillåter val av endast ett alternativ.
  
<div style="border:1px solid black;display:inline-table;margin-left: 0px;"> [[Image: WinFormsAppl_4.jpg]]</div>
+
Kontrollen <i>GroupBox</i> grupperar kontrollerna ovan med resp. rubriker (endast grafiskt).
</div>
+
  
 
+
<div style="border:1px solid black;display:inline-table;margin-left: 0px;"> [[Image: Bartendera.jpg]]</div>
= <b><span style="color:#931136">Händelsemetoder</span></b> =
+
</big>
<div class="ovnC">
+
<div style="border:1px solid black;display:inline-table;margin-left: 0px;"> [[Image: WinFormsAppl_5a.jpg]]</div>
+
 
</div>
 
</div>
  
  
= <b><span style="color:#931136">Metoden MessageBox.Show()</span></b> =
+
= <b><span style="color:#931136">Kod bakom knappen Servera</span></b> =
 
<div class="ovnA">
 
<div class="ovnA">
<div style="border:1px solid black;display:inline-table;margin-left: 0px;"> [[Image: WinFormsAppl_6.jpg]]</div>
+
<div style="border:1px solid black;display:inline-table;margin-left: 0px;"> [[Image: KodServera.jpg]]</div>
 +
<big>För att bygga detta projekt följ instruktionerna i [http://mathonline.se/Boken%20Programmering%20i%20C%20och%20Cpp.pdf <b><span style="color:blue">kursboken</span></b>], sid 407-410.</big>
 
</div>
 
</div>
  
  
= <b><span style="color:#931136">Körresultat</span></b> =
+
= <b><span style="color:#931136">14.4 &nbsp; En egen webbläsare</span></b> =
 +
 
 +
 
 +
= <b><span style="color:#931136">Projektet FirstBrowser</span></b> =
 
<div class="ovnE">
 
<div class="ovnE">
<div style="border:1px solid black;display:inline-table;margin-left: 0px;"> [[Image: WinFormsAppl_7.jpg]]</div>
+
===== <b><span style="color:#931136">När det är klart:</span></b> =====
 +
<div style="border:1px solid black;display:inline-table;margin-left: 0px;"> [[Image: MyFirstBrowser.jpg]]</div>
 
</div>
 
</div>
  
  
= <b><span style="color:#931136">Händelsestyrd programmering</span></b> =
+
= <b><span style="color:#931136">Kontrollen WebBrowser</span></b> =
 
<div class="ovnC">
 
<div class="ovnC">
<div style="border:1px solid black;display:inline-table;margin-left: 0px;"> [[Image: Event_driven_programming.jpg]]</div>
+
===== <b><span style="color:#931136">När man hämtat den från Toolbox:</span></b> =====
</div>
+
<div style="border:1px solid black;display:inline-table;margin-left: 0px;"> [[Image: WebBrowser.jpg]]</div>
  
 
+
===== <b><span style="color:#931136">Några egenskaper av den nya WebBrowser-kontrollen:</span></b> =====
= <b><span style="color:#931136">14.2 &nbsp; TextBoxar, Buttons & Labels</span></b> =
+
<div class="ovnA">
+
=== <b><span style="color:#931136">Tre kontroller</span></b> ===
+
<div style="border:1px solid black;display:inline-table;margin-left: 0px;"> [[Image: Tre kontroller.jpg]]</div>
+
</div>
+
 
+
 
+
= <b><span style="color:#931136">Projektet PasswdTextBox</span></b> =
+
<div class="ovnE">
+
 
<big>
 
<big>
En text (t.ex. ett lösenord) ska matas in i kontrollen TextBox.
+
* &nbsp; &nbsp; Täcker hela formen: <b><span style="color:red">Docked in Parent Container</span></b>.
 +
* &nbsp; &nbsp; <b><span style="color:red">Parent Container</span> = Formen</b>.
 +
* &nbsp; &nbsp; Med <i>Smart Tag</i> (lilla pilen) i det högre översta hörnet
  
Den inmatade texten ska inte kunna läsas i textboxen utan maskeras av stjärnor.
+
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; kan man ändra till <b><span style="color:red">Undock in Parent Container</span></b>, dvs:
  
Först när man klickar på Button-kontrollen <i>Show me</i> ska texten visas i klartext i kontollen Label.
+
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; lösa kontrollen från formen och placera den valfritt.
  
<div style="border:1px solid black;display:inline-table;margin-left: 0px;"> [[Image: PasswdTextBox.jpg]]</div>
+
* &nbsp; &nbsp; Välj <b><span style="color:red">Undock ... </span></b> och ändra storleken senare.
 +
</big>
 +
</div>
  
  
<div class="ovnC">
+
= <b><span style="color:#931136">Koden till projektet FirstBrowser</span></b> =
==== <small><b><span style="color:#931136">Egenskapen PasswordChar</span></b></small> ====
+
<div class="ovnE">
<div style="border:1px solid black;display:inline-table;margin-left: 0px;"> [[Image: PasswordChar.jpg]]</div>
+
=== <b><span style="color:#931136">Dubbelklicka i formen på Kör-knappen och ... </span></b> ===
 +
==== <b><span style="color:#931136">Lägg till följande sats i händelsemetoden btnGo_Click():</span></b> ====
 +
<div style="border:1px solid black;display:inline-table;margin-left: 0px;"> [[Image: btnGo_Click.jpg]]</div>
 
</div>
 
</div>
  
  
<div class="ovnC">
+
== <b><span style="color:#931136">Följ instruktionerna till detta projekt i [http://mathonline.se/Boken%20Programmering%20i%20C%20och%20Cpp.pdf <span style="color:blue">kursboken</span>], sid 411-414.</span></b> ==
==== <small><b><span style="color:#931136">Kod bakom knappen Show Me</span></b></small> ====
+
<div style="border:1px solid black;display:inline-table;margin-left: 0px;"> [[Image: Kod_ShowMe.jpg]]</div>
+
</div>
+
  
 
<big>För att bygga detta projekt följ instruktionerna i [http://mathonline.se/Boken%20Programmering%20i%20C%20och%20Cpp.pdf <b><span style="color:blue">kursboken</span></b>], sid 405-406.</big>
 
</big>
 
</div>
 
  
 
<br><br>
 
<br><br>
  
 
<div class="border-divblue">
 
<div class="border-divblue">
=== <b><span style="color:#931136">Gå vidare till: &nbsp;&nbsp;<div class="smallBox">[[Övningar 48 (C/Cpp 23)|<span style="color:blue">Övningar 48</span>]]</div> &nbsp;&nbsp;&nbsp; när du är klar med denna genomgång.</span></b> ===
+
=== <b><span style="color:#931136">Gå vidare till: &nbsp;&nbsp;<div class="smallBox">[[Övningar 49 (C/Cpp 23)|<span style="color:blue">Övningar 49</span>]]</div> &nbsp;&nbsp;&nbsp; när du är klar med denna genomgång.</span></b> ===
 
</div>
 
</div>
  

Nuvarande version från 11 december 2023 kl. 20.07

Tis 12 dec, kl 9-12


        <<  Agenda          Genomgång 49          Övningar 49          Innehåll & struktur          Nästa lektion  >>      


Kap 14   Windowsprogrammering (forts.)

  Genomgång av övn 14.2

  Vår första GUI-övning

Ovn 14 1 2 1.jpg


Klassen Form1

Ovn 14 1 2 2.jpg


14.3   CheckBoxar och radioknappar

Tre nya kontroller

CheckRadioGroup.jpg


Projektet Bartender

Efter val av dryck och glas samt klick på knappen Servera ska ett meddelande med de valda alter-

nativen skrivas ut i en MessageBox.

Kontrollen CheckBox (små rutor) tillåter val av flera alternativ.

Kontrollen RadioButton (små ringar) tillåter val av endast ett alternativ.

Kontrollen GroupBox grupperar kontrollerna ovan med resp. rubriker (endast grafiskt).

Bartendera.jpg


Kod bakom knappen Servera

KodServera.jpg

För att bygga detta projekt följ instruktionerna i kursboken, sid 407-410.


14.4   En egen webbläsare

Projektet FirstBrowser

När det är klart:
MyFirstBrowser.jpg


Kontrollen WebBrowser

När man hämtat den från Toolbox:
WebBrowser.jpg
Några egenskaper av den nya WebBrowser-kontrollen:

  •     Täcker hela formen: Docked in Parent Container.
  •     Parent Container = Formen.
  •     Med Smart Tag (lilla pilen) i det högre översta hörnet

          kan man ändra till Undock in Parent Container, dvs:

          lösa kontrollen från formen och placera den valfritt.

  •     Välj Undock ... och ändra storleken senare.


Koden till projektet FirstBrowser

Dubbelklicka i formen på Kör-knappen och ...

Lägg till följande sats i händelsemetoden btnGo_Click():

BtnGo Click.jpg


Följ instruktionerna till detta projekt i kursboken, sid 411-414.



Gå vidare till:        när du är klar med denna genomgång.












Copyright © 2023. All Rights Reserved.