User Interface Programming in C#: Basics and Events
description
Transcript of User Interface Programming in C#: Basics and Events
![Page 1: User Interface Programming in C#: Basics and Events](https://reader034.fdocuments.in/reader034/viewer/2022051316/56815b67550346895dc9588f/html5/thumbnails/1.jpg)
User Interface Programming in C#:
Basics and Events
Chris North
CS 3724: HCI
![Page 2: User Interface Programming in C#: Basics and Events](https://reader034.fdocuments.in/reader034/viewer/2022051316/56815b67550346895dc9588f/html5/thumbnails/2.jpg)
GUI Development: Goals
1. General GUI programming concepts• GUI components, layouts• Event-based programming• Graphics• Direct Manipulation, Animation • MVC architectures• Data-driven UIs
2. C#, .NET• Windows Forms• Events, delegates• GDI+• Threads • ADO.net
Goal: learn other languages quickly, same concepts• VB, Xwin, Java 49, …
![Page 3: User Interface Programming in C#: Basics and Events](https://reader034.fdocuments.in/reader034/viewer/2022051316/56815b67550346895dc9588f/html5/thumbnails/3.jpg)
C# Background• C# = VB + Java (best of both!)• Basic statements identical to C++, Java• Object-oriented only!
• main( ) is inside a class• No global variables
• “interfaces”• No pointers (object references only), safe• No delete: automatic garbage collection• Error Handling, exceptions (try, catch)• GUI: Windows Forms• Libraries: Data structs, databases, …• Component-based: (“assembly”) reflection
• No .h files
• Visual Studio• .NET: CLR, multi-language, web, XML, services, …
![Page 4: User Interface Programming in C#: Basics and Events](https://reader034.fdocuments.in/reader034/viewer/2022051316/56815b67550346895dc9588f/html5/thumbnails/4.jpg)
C# Materials
• MS Visual Studio .Net (2005)
• MSDN (integrates with VS)
• VS Dynamic Help
• Books• MS Visual C# .NET, MS Press
– C# language
– Window Forms, GDI+
• MSDN online
![Page 5: User Interface Programming in C#: Basics and Events](https://reader034.fdocuments.in/reader034/viewer/2022051316/56815b67550346895dc9588f/html5/thumbnails/5.jpg)
Getting Started
• Visual Studio
• New Application
• Drag-n-drop GUI builder
• Code editor
• Properties
• Methods
• Events Examples: Pop-up,Run-away button
![Page 6: User Interface Programming in C#: Basics and Events](https://reader034.fdocuments.in/reader034/viewer/2022051316/56815b67550346895dc9588f/html5/thumbnails/6.jpg)
Visual Studio .Net
controls
designer
Properties,events
![Page 7: User Interface Programming in C#: Basics and Events](https://reader034.fdocuments.in/reader034/viewer/2022051316/56815b67550346895dc9588f/html5/thumbnails/7.jpg)
Components API
• Properties• Like member fields• Get, set • E.g. Button1.Text = “Press Me”
• Methods• Like member functions• Tell component to do something• E.g. Button1.Show( )
• Events• Like callback functions• Receive notifications from component• E.g. Button1.Click(e)
![Page 8: User Interface Programming in C#: Basics and Events](https://reader034.fdocuments.in/reader034/viewer/2022051316/56815b67550346895dc9588f/html5/thumbnails/8.jpg)
Anatomy of a C# WinAppnamespace MyWindowsApplication1 {
public class MyForm1 : System.Windows.Forms.Form {// inherit from Form base class
public MyForm1( ) // constructor, calls InitializeComponent( )
private void InitializeComponent( ) // VS auto-generated GUI code
protected override void Dispose( bool disposing )// standard method to clean up resources
static void Main( ) { // App starts here!Application.Run(new MyForm1( ));
// create a new MyForm1 and run the main event loop }
![Page 9: User Interface Programming in C#: Basics and Events](https://reader034.fdocuments.in/reader034/viewer/2022051316/56815b67550346895dc9588f/html5/thumbnails/9.jpg)
Adding GUI Controlspublic class MyForm1 : System.Windows.Forms.Form {
private System.Windows.Forms.Button button1; … // member variables for each GUI control
private void InitializeComponent( ) // VS auto-generated GUI code
// create GUI controls:this.button1 = new System.Windows.Forms.Button( );
// set properties of GUI controls:this.button1.Text = "button1";
// add controls to their parent or Form:this.Controls.AddRange(
new System.Windows.Forms.Control[] {this.button1} );}
![Page 10: User Interface Programming in C#: Basics and Events](https://reader034.fdocuments.in/reader034/viewer/2022051316/56815b67550346895dc9588f/html5/thumbnails/10.jpg)
GUI Tree Structure
Panel
ButtonForm
Label
GUI Internal structure
containers
Panel Button
Form
Label
![Page 11: User Interface Programming in C#: Basics and Events](https://reader034.fdocuments.in/reader034/viewer/2022051316/56815b67550346895dc9588f/html5/thumbnails/11.jpg)
GUI Layout Management
• Fixed position:• X,Y location• W,H size
• Anchor:• Maintain distance to: Top, Left, Bottom, Right
• Dock:• Fill space in: Top, Left, Bottom, Right, Fill
• AutoScroll:• Scrolling control panels
• Z-Order:• Front to back order
![Page 12: User Interface Programming in C#: Basics and Events](https://reader034.fdocuments.in/reader034/viewer/2022051316/56815b67550346895dc9588f/html5/thumbnails/12.jpg)
Layout Combinations
Button Button
TextBox
![Page 13: User Interface Programming in C#: Basics and Events](https://reader034.fdocuments.in/reader034/viewer/2022051316/56815b67550346895dc9588f/html5/thumbnails/13.jpg)
Layout Combinations
Form
Panel
ButtonButton
TextBox
Dock: top
Dock: Fill
x,y
![Page 14: User Interface Programming in C#: Basics and Events](https://reader034.fdocuments.in/reader034/viewer/2022051316/56815b67550346895dc9588f/html5/thumbnails/14.jpg)
Java: Layout Managers
Left to right,Top to bottom
c
n
s
ew
FlowLayout GridLayout
BorderLayout
none, programmer sets x,y,w,h
null
One at a time
CardLayout GridBagLayout
JButton
![Page 15: User Interface Programming in C#: Basics and Events](https://reader034.fdocuments.in/reader034/viewer/2022051316/56815b67550346895dc9588f/html5/thumbnails/15.jpg)
Events
![Page 16: User Interface Programming in C#: Basics and Events](https://reader034.fdocuments.in/reader034/viewer/2022051316/56815b67550346895dc9588f/html5/thumbnails/16.jpg)
Typical command line program
• Non-interactive
• Linear execution
program:
main(){
code;code;code;code;code;code;code;code;code;code;code;code;
}
![Page 17: User Interface Programming in C#: Basics and Events](https://reader034.fdocuments.in/reader034/viewer/2022051316/56815b67550346895dc9588f/html5/thumbnails/17.jpg)
Interactive command line program
• User input commands
• Non-linear execution
• Unpredictable order
• Much idle time
program:
main(){
decl data storage;initialization code;
loop{
get command;switch(command){
command1:code;
command2:code;
…}
}}
![Page 18: User Interface Programming in C#: Basics and Events](https://reader034.fdocuments.in/reader034/viewer/2022051316/56815b67550346895dc9588f/html5/thumbnails/18.jpg)
Typical GUI programGUI program:
main(){
decl data storage;initialization code;
create GUI;register callbacks;
main event loop;}
Callback1() //button1 press{ code;}Callback2() //button2 press{ code;}…
• User input commands
• Non-linear execution
• Unpredictable order
• Much idle time
• Event callback procs
![Page 19: User Interface Programming in C#: Basics and Events](https://reader034.fdocuments.in/reader034/viewer/2022051316/56815b67550346895dc9588f/html5/thumbnails/19.jpg)
GUI Events
WindowSystem
eventloop
App1
OK
Cancel
App2 code:
OKbtn_click() { do stuff;}CancelBtn_click(){ do different stuff;}App2Form_click(){ do other stuff;}
mouseclick
inputdevice
App1
eventloop
App2
eventloop
whichapp?
whichcontrol?
App2
OK
Cancel
![Page 20: User Interface Programming in C#: Basics and Events](https://reader034.fdocuments.in/reader034/viewer/2022051316/56815b67550346895dc9588f/html5/thumbnails/20.jpg)
C# WinAppC# WinApp:
Class{ decl data storage;
constructor(){initialization code;create GUI controls;register callbacks;
} main(){
Run(new ) } callback1(){
do stuff; } callback2(){
do stuff; }…
• “delegates” = callbacks
• Function pointers
• Java: Listeners
![Page 21: User Interface Programming in C#: Basics and Events](https://reader034.fdocuments.in/reader034/viewer/2022051316/56815b67550346895dc9588f/html5/thumbnails/21.jpg)
Delegates
1. Register with a control to receive events• Give Control a function pointer to your callback function
• this.button1.Click += new EventHandler(this.button1_Click);
2. Receive events from control• Control will call the function pointer
• private void button1_Click(object sender, EventArgs e){
Button1 Button1_click() callback
click
2. button1_Click( )
1. button1.Click += button1_click( )
![Page 22: User Interface Programming in C#: Basics and Events](https://reader034.fdocuments.in/reader034/viewer/2022051316/56815b67550346895dc9588f/html5/thumbnails/22.jpg)
GUI Topics
ComponentsGUI layoutEvents
• Graphics
• Manipulation
• Animation
• Databases
• MVC