user interface programming in c basics and events n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
User Interface Programming in C#: Basics and Events PowerPoint Presentation
Download Presentation
User Interface Programming in C#: Basics and Events

Loading in 2 Seconds...

play fullscreen
1 / 22

User Interface Programming in C#: Basics and Events - PowerPoint PPT Presentation


  • 167 Views
  • Uploaded on

User Interface Programming in C#: Basics and Events. Chris North CS 3724: HCI. GUI Development: Goals. General GUI programming concepts GUI components, layouts Event-based programming Graphics Direct Manipulation, Animation MVC architectures Data-driven UIs C#, .NET Windows Forms

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'User Interface Programming in C#: Basics and Events' - omana


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
gui development goals
GUI Development: Goals
  • General GUI programming concepts
      • GUI components, layouts
      • Event-based programming
      • Graphics
      • Direct Manipulation, Animation
      • MVC architectures
      • Data-driven UIs
  • C#, .NET
      • Windows Forms
      • Events, delegates
      • GDI+
      • Threads
      • ADO.net

Goal: learn other languages quickly, same concepts

      • VB, Xwin, Java 49, …
c background
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, …
c materials
C# Materials
  • MS Visual Studio .Net (2002, 2003)
  • MSDN (integrates with VS)
  • VS Dynamic Help
  • Books
      • MS Visual C# .NET, MS Press
        • C# language
        • Window Forms, GDI+
  • MSDN online
getting started
Getting Started
  • Visual Studio
  • New Application
  • Drag-n-drop GUI builder
  • Code editor
  • Properties
  • Methods
  • Events
visual studio net
Visual Studio .Net

designer

controls

Properties,

events

components api
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)
anatomy of a c winapp
Anatomy of a C# WinApp

namespace 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

}

adding gui controls
Adding GUI Controls

public 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} );

}

gui tree structure
GUI Tree Structure

GUI

Internal structure

Form

Form

Button

containers

Panel

Panel

Button

Label

Label

gui layout management
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
layout combinations
Layout Combinations

Button

Button

TextBox

layout combinations1
Layout Combinations

Button

Button

Form

x,y

Panel

Dock: top

JTextArea

Dock: Fill

java layout managers
Java: Layout Managers

FlowLayout

GridLayout

null

none, programmer sets x,y,w,h

Left to right,

Top to bottom

GridBagLayout

BorderLayout

CardLayout

n

c

One at a time

JButton

w

e

s

typical command line program
Typical command line program
  • Non-interactive
  • Linear execution

program:

main()

{

code;

code;

code;

code;

code;

code;

code;

code;

code;

code;

code;

code;

}

interactive command line program
Interactive command line program

program:

main()

{

decl data storage;

initialization code;

loop

{

get command;

switch(command)

{

command1:

code;

command2:

code;

}

}

}

  • User input commands
  • Non-linear execution
  • Unpredictable order
  • Much idle time
typical gui program
Typical GUI program

GUI 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
gui events
GUI Events

App1

App2

mouseclick

OK

OK

Cancel

Cancel

App2 code:

OKbtn_click()

{

do stuff;

}

CancelBtn_click()

{

do different stuff;

}

App2Form_click()

{

do other stuff;

}

App1

event

loop

WindowSystem

event

loop

App2

event

loop

whichapp?

inputdevice

whichcontrol?

c winapp
C# WinApp

C# 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
delegates
Delegates
  • Register with a control to receive events
      • Give Control a function pointer to your callback function
      • this.button1.Click += new EventHandler(this.button1_Click);
  • Receive events from control
      • Control will call the function pointer
      • private void button1_Click(object sender, EventArgs e){

1. button1.Click += button1_click( )

click

Button1

Button1_click() callback

2. button1_Click( )

gui topics
GUI Topics
  • Components*
  • GUI layout*
  • Events*
  • Graphics
  • Manipulation
  • Animation
  • Databases
  • MVC