GUI Programming Paradigms and Basic Concepts

CS360/CS580H GUI & Windows Programming Introduction

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 (c) D. Foreman 8/21/19

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 (c) D. Foreman 8/21/19

Comparison of Paradigms Note: WPF – see WindowsFormsHost control (c) D. Foreman 8/21/19

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 (c) D. Foreman 8/21/19

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 (c) D. Foreman 8/21/19

MS naming conventions prefix data type --------------------------------- by BYTE (unsigned char) b BOOL (int, TRUE=1 FALSE=0) c char dw DWORD (4-byte unsigned long) fn function h handle l long (4 bytes) n short (int) near pointer p pointer sz null-terminated char string w word (two bytes) lpsz long ptr to null-terminated str (c) D. Foreman 8/21/19

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 (c) D. Foreman 8/21/19

Callback Functions A thread-like mechanism: • Program issues a service call to O/S • Tells O/S address of callback fn • Tells O/S when to call it (msg filter) • Program loop waits for an "event" message • Program reads message from queue, tells O/S to signal the callback function, loops for more msgs, NO WAIT for msg processing • O/S starts callback fn to process the message • Callback returns to O/S (c) D. Foreman 8/21/19

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) (c) D. Foreman 8/21/19

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 (c) D. Foreman 8/21/19

Win32 = Windows API • Uses basic windows functions • Usable with C/C++, Java • Programmer must do almost everything • Used with the Windows SDK (NOT MFC) (c) D. Foreman 8/21/19

Microsoft Foundation Classes (c) D. Foreman 8/21/19

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 (c) D. Foreman 8/21/19

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 (c) D. Foreman 8/21/19

Windows Forms (WF) (c) D. Foreman 8/21/19

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 (c) D. Foreman 8/21/19

Windows Presentation Foundation (c) D. Foreman 8/21/19

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#) (c) D. Foreman 8/21/19

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 (c) D. Foreman 8/21/19

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 (c) D. Foreman 8/21/19

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">  <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 (c) D. Foreman 8/21/19

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!"); } } } (c) D. Foreman 8/21/19

.NET (3.0) stack .NET Apps .NET Tools WPF CardSpace (InfoCard) Canceled! WF (Workflow) CLR, Base Class Libraries, ASP.NET, ASO.NET, WinForms Windows (c) D. Foreman 8/21/19

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 (c) D. Foreman 8/21/19

GUI Programming Paradigms and Basic Concepts