CS360/CS580H

GUI & Windows ProgrammingIntroduction

Basic Course Outline

• Visual Studio 2013• Win32/Windows API & SDK• MS Foundation Classes (MFC) & C++• HTML, XAML• C# vs. C++ concepts/differences• Common Gateway Interface (CGI) programming• The .Net Framework• Windows Forms• WPF - Windows Presentation Foundation

Using DirectX + XAML & RTL (post-Vista)• Android

Paradigms

• 4 different ways to build a GUI program:• Each has advantages/disadvantages– WIN32API – lower-level control, works on older systems – Microsoft Foundation Classes – many pre-built objects– Windows Forms – presentation separated from processing– Windows Presentation Foundation

• Can build common browser-based and desktop apps• Easier handling of media types

Comparison of Paradigms

Win32API MFC Windows

FormsWindows

Forms+API Codepack

WPF

GUI forms and controls X X X X

On-screen documents X X X

Fixed-format documents (PDF) ext X X

Images BMP X

Video/audioUse

Media Player

X X

2D graphics " X X

3D graphics " X X

Note: WPF – see WindowsFormsHost control

Basic Concepts for all GUI's

• "Control" – MS term for mechanisms that manage what appears on the screen– Sliders, pointers, windows, data entry boxes, etc.

• Messages – system code indicating user action• Message loop – Mechanism to pass execution between system app– Uses messages to determine processing

• Multi-threading O/S

Fonts & Pixels• Dots per inch (DPI)• Device-independent pixel (DIPs) (1/96 of a logical inch)• 1 pt = 1/72 inch (ALWAYS!!!)

– 12pt font takes 12/72 inch in HEIGHT– Some characters need more or less space (e.g.; letters L and I)– A 72-point font is defined to be one logical inch tall = 96px– 1 logical inch=96 pixels– A 12pt font needs 12 points/(72 points per inch)=1/6 of an inch– 12 points = 1/6 logical inch = 96/6 = 16 pixels– BUT if display is set to 144 DPI, then 72pt font=144 px NOT 96

• Because that inch now has to hold 144 pixels, not 72 or 96

MS naming conventions

prefix data type---------------------------------by BYTE (unsigned char)b BOOL (int, TRUE=1 FALSE=0)c chardw DWORD (4-byte unsigned long)fn functionh handlel long (4 bytes)n short (int) near pointerp pointersz null-terminated char stringw word (two bytes)lpsz long ptr to null-terminated str

Processing window messages

• Message codes for event triggering• A "callback" mechanism (next slide)– O/S calls your function– Reverse of a "system call"

• Message processing loop in program– Tests for message types– Calls your handler functions

• Program is idle until an event

Callback Functions

A thread-like mechanism:1. Program issues a service call to O/S

a. Tells O/S address of callback fnb. Tells O/S when to call it (msg filter)

2. Program loop waits for an "event" message 3. Program reads message from queue, tells O/S to

signal the callback function, loops for more msgs, NO WAIT for msg processing

4. O/S starts callback fn to process the message5. Callback returns to O/S

Model-View-Controller (MVC) Architecture

• 3 parts of an application:– Data, interface, operations

• MVC separates pgm data types from presentation• Reduces complexities/dependencies• Model– application data specs

• View – what the user sees (may also be controller)• Controller - code to process the data– Accepts input– Rules for processing– Converts to pgm-usable data (codes, msgs, etc)

Win32API Architecture

• Core set of system interfaces– Kernel32.dll

• Mem mgmt., I/O, process, thread

– User32.dll• implements abstractions for Windows apps

– HWND– MSG– Message loop– Build, obscure, size, move, dialogs, etc

– GDI32.dll• Drawing lines & curves• Manage palettes• Rendering fonts• Predecessor of DirectX/OpenGL• No "frames", no rasterization, SLOW

Win32 = Windows API

• Uses basic windows functions• Usable with C/C++, Java• Programmer must do almost everything• Used with the Windows SDK (NOT MFC)

MICROSOFT FOUNDATION CLASSES

MFC architecture

• Based on Document/View concept– Separation of data from the user's view of data– Data is what user sees with "open a file"

• Operations – Design the window(s) - these are the "views"– Process the data based on user input– Switch/modify windows as needed to show results– E.g.; represent a collection of numbers as

• Table• Graph

MS Foundation Classes (MFC)

• A C++ class library• Builds on portions of the Win32API• Pre-defined classes contain pre-written code:– Independent of user settings

• Create/Open/Close a window• Open a dialog box

– Adjustable (size, content, etc.) via the program

WINDOWS FORMS (WF)

Windows Forms (WF) Architecture

• Use C# or Visual Basic• GUI part of .NET Framework• Does not offer a paradigm comparable to

Model–View–Controller paradigm of MFC• Event driven• Feature of .NET Framework• Usage:– Design a form (e.g.; built-in wizard in MS Access, Visual

Basic)– Specify parts of program that process each part– Function names to call are embedded in the form

WINDOWS PRESENTATION FOUNDATION

WPF Architecture

• Provides many h/w-related advances– Hardware acceleration (graphic adapter card)

also called Graphics Processing Unit (GPU)– Enables modern UI features

• transparency, gradients and transforms

• Deployable on desktop or web browser• Subset of .Net Framework types – Mostly in System.Windows – WPF provides additions for properties & routed events

• Uses markup & code-behind concepts– XAML – Managed languages (C#)

WPF (4.5 – Aug 2012 – might be the last version)

• 1st release in 2005• Implements SOAP & non-MS web svc's tech's.• DirectX vs. older GDI interface• C#, .Net, XAML (based on XML)• Standalone apps• Embedded objects on a website• RTL included in all Windows post-XP• Unifies– Rendering, typography, vector graphics, animation, fixed,

adaptive & pre-rendered docs, events, bindings

• Poor response-time, not for low-power devices

WPF vs. WinForms

• WPF– Does not rely on "standard" windows controls– A "window" is just a border around "content"– e.g.; Can make a button with image & text in it– BUT may take more work for "simple" things

• WF– ONLY uses standard "windows"

• Dialog/text boxes, etc.

– Button w/image would require you to create your own button control type

WPF example – part 1

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation " xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="SDKSample.AWindow" Title="Window with Button"

Width="250" Height="100"> <!-- Add button to window --> <Button Name="button" Click="button_Click">Click Me!</Button>

</Window>

• x:Class associates – XAML def'n of window (above)– code-behind class (Awindow) on next slide

• This example (parts 1 & 2) is from: http://msdn.microsoft.com/en-us/library/aa970268(v=vs.110).aspx

WPF example –part 2

using System.Windows; // Window, RoutedEventArgs, MessageBox namespace SDKSample { public partial class AWindow : Window

{ public AWindow() { // Set properties and register event handlers

InitializeComponent(); // Required to merge this class & XAML

} void button_Click(object sender, RoutedEventArgs e)

{ // Show message box when button is clicked MessageBox.Show("Hello, from WPF app!");

} }

}

.NET (3.0) stack

.NET Apps .NET Tools

CLR, Base Class Libraries, ASP.NET, ASO.NET, WinForms

WPF CardSpace(InfoCard)Canceled!

WF(Workflow)

Windows

Deploying .NET Framework Apps

• Distinguish between the app and the Framework• http://msdn.microsoft.com/en-us/library/6hbb4k3e(

v=vs.110).aspx• http://support.microsoft.com/kb/818016