Modern GUI Systems Beyond X Windows 1 CS 349 - Implementing GUIs - - PowerPoint PPT Presentation

Modern GUI Systems

Beyond X Windows

CS 349 - Implementing GUIs 1

Modern GUI (present)

Desktop (WIMP)

3 CS 349 - Implementing GUIs

T ablet (T

• uch/Pen)

Hybrids (WIMP+T

• uch

+Pen) Smartphones (T

• uch)

Is X Windows still applicable?

• X Windows hasn’t aged very well

– Based on standard C, not C++/OO – Built using conventions at that time (enums, int constants)

• Modern toolkits are object-oriented, and have

better abstractions to handle events, drawing.

– Required to make systems more extensible. – Also helpful to scale-out to more input and output devices.

• Event model assumes a single event loop

– As we’ll see, this scales poorly! – Would prefer this to be handled by the underlying system (i.e. not at the application level)

CS 349 - Implementing GUIs 4

What stays the same?

• Core requirements haven’t changed

– Need to manage events from multiple input devices

• Events routed to appropriate application/windows
• More devices supported but underlying mechanism

for handling events is the same – Primarily 2D interfaces

• Still need optimized 2D graphics

– Clipping, double-buffering etc. – Input is still primarily text + positional

• Variation in keyboards, but we still use standard

layouts

• Variation in pointing devices, but we still need a

pointing device to return x,y coordinates (i.e. what to activate)

CS 349 - Implementing GUIs 5

What’s changed?

• GUI toolkits are more prevalent

– Stock components (widgets) often provided by OS vendors. – Supports standard look-and-feel with minimal coding. – Have been expanded to support additional devices/platforms.

• New input modalities: speech, touch, pen

– Non-mainstream but becoming more popular – Often complementary

• New output modalities: VR, AR (virtual and

augment reality)

– Definitely non-mainstream – Challenges to each

CS 349 - Implementing GUIs 6

Widgets

• Widget (control, component) is a

generic name for parts of an interface that have their own behavior: buttons, progress bars, sliders, drop-down menus, spinners, file dialog boxes etc. – Can have their own appearance – Receive and interpret their own events – Put into libraries (toolkits) for reuse

CS 349 - Implementing GUIs 7 Widget from Wow Wow Wubbzy

What has replaced X Windows?

• We have multiple operating systems/platforms/toolkits

– Market share split: Microsoft (desktop), Google (mobile) – Apple (desktop+mobile)

• OS vendors typically provide toolkits and development

tools/languages, often intended to lock-in to their platform. – Microsoft Windows: C# – Apple macOS: ObjC/Swift – Apple iOS: ObjC/Swift – Google Android: Java/Android

• Multi platform tools are rare or have limited capabilities

– e.g. Java, Javascript/CSS/HTML (truly cross-platform) – e.g. Swift, .NET core (OSS but limited) – GTK+, Qt (OSS, used in Linux systems on top of X11)

CS 349 - Implementing GUIs 8

What’s a programmer to do?

• Decision 1: Decide which platforms you want to support
• Decision 2: Choose appropriate languages/tools

– Platform-specific vs. cross-platform languages and tools

• e.g. Java for Android, Swift for iOS, C# for Windows, or build

web interfaces using JS/CSS

• e.g. JS/CSS or Java everywhere

– “Best” tools and support is often platform-specific.

• Decision 2: Stock widgets vs. custom

– Widget toolkits and common look-and-feel were dominant for years (e.g. standard-looking Windows apps). – Shift towards heavy customization, and custom controls

• Allows for more creative expression, removes toolkit limitations
• e.g. a streaming music app without a title-bar

CS 349 - Implementing GUIs 9

Java GUI Programming

A quick-start guide to building Swing applications.

10 CS 349 - Implementing GUIs

The Java Platform

Packages, libraries Classes and objects Program structure

11 CS 349 - Implementing GUIs

Everything is a class

• Classes, objects are core language constructs
• OO features: polymorphism, encapsulation,

inheritance (more later)

• Static and member variables and methods
• Resembles C++ on the surface
• Language differences from C++

– No pointers. Really. Not needed. – No type ambiguity; classes resolved at runtime – No destructor (due to garbage collector) – Single inheritance model

13 CS 349 - Implementing GUIs

Java Platform (JDK) Includes tools, and libraries - everything from threading, to database access, to UI toolkits – all cross platform and portable.

14 CS 349 - Implementing GUIs

Java Class Library

• Classes are grouped into packages (i.e.

namespaces) to avoid name collisions.

• To assign your source code to a package,

use the package keyword at the top of source files.

• Typically, package = subdirectory

– e.g. “graphics” package is in subdirectory of the same name – alt. it can be included in a JAR file.

• Use the import keyword to include a class

from a different package in your code. – This is how you include bundled Java libraries.

15 CS 349 - Implementing GUIs

Common Classes/Packages

Package Classes (Examples) Description java.awt Color, Graphics, Graphics2D, event. Contains all of the classes for creating user interfaces and for painting graphics and images. javax.swing JFrame, JButton, JList, JToolbar Provides a set of "lightweight" (all- Java language) components that works the same on all platforms. java.io File, FileReader, FileWriter, InputStream Provides for system input and output through data streams, serialization and the file system. java.lang Boolean, Integer, String, System, Thread, Math Provides classes that are fundamental to the design of the Java programming language. java.util ArrayList, HashMap, Observable Contains the collections framework, legacy collection classes, event model,… Java 8 API Specification: https://docs.oracle.com/javase/8/docs/api/overview-summary.html

16 CS 349 - Implementing GUIs

Java Class Hierarchy

• Implicit class hierarchy

– All classes in Java are derived from the Object class in

java.lang defines and implements common class

behavior

• e.g. clone(), toString(), finalize() methods

– Classes you write inherit this basic behavior.

17 CS 349 - Implementing GUIs

Structure of a Program (revisit)

18

Bicycle.java

CS 349 - Implementing GUIs

public class Bicycle { private String owner = null; private int speed = 0; private int gear = 1; // constructor public Bicycle() { } public Bicycle(String name) { this.owner = name; } // methods public void changeSpeed(int newSp) { this.speed = newSp; } public void changeGear(int newGear) { this.gear = newGear; } public int getSpeed() { return this.speed; } public int getGear() { return this.gear; } // static entry point – main method public static void main(String[] args) { Bicycle adultBike = new Bicycle("Jeff"); adultBike.changeSpeed(20); System.out.println("speed=" + adultBike.getSpeed()); Bicycle kidsBike = new Bicycle("Austin"); kidsBike.changeSpeed(15); System.out.println("speed=" + kidsBike.getSpeed()); } }

Instantiating Objects

• In Java,

– Primitive types are allocated on the stack, passed by value. – Objects are allocated on the heap, passed by reference

• Technically, value of address passed on the

stack, but behaves like pass-by-reference.

Both refer to the same memory on the heap

• Practically, this means that you don’t need to

worry about pointer semantics in parameter passing.

19 CS 349 - Implementing GUIs

Composition: Inner Classes

Classes can be nested as inner classes. Watch scope!

x = 23 this.x = 1 ShadowTest.this.x = 0

21 CS 349 - Implementing GUIs

Inheritance

• Inheritance: increasing code reusability by

allowing a class to inherit some of it’s behavior from a base class (“is a” relationship). – Classes inherit common attributes and behavior from base classes. – e.g. “Mountain Bike” is-a “Bike”.

• Common: speed, gear
• Unique: engine

– In Java, use extends keyword.

Bike Mountain Bike

22 CS 349 - Implementing GUIs

Subtype Polymorphism

” Meow! “ “ Woof! “

Animals1.java

The Animal class is abstract, and cannot be instantiated. It’s talk() method is abstract, so derived classes must override it.

23 CS 349 - Implementing GUIs

Single Inheritance

• Java only supports single inheritance!
• In practice, this simplifies the language.
• See the “Diamond Problem” for
• ne example of multiple

inheritance being a hard problem.

• Solutions to this problem vary by

language; Java prevents you from doing it.

• It’s very common in Java to derive an existing

class and override behavior (even provided classes).

• All classes have Object as their ultimate base

class (implicit).

24 CS 349 - Implementing GUIs

Interfaces

• An interface represents a set of methods that

must be implemented by a class (“contract”).

• Similar to pure abstract classes/methods.

– Can’t be instantiated – Class implementing the interface must implement all methods in the interface. – Use implements keyword.

• In Java,

– extend a class to derive functionality from it – implement an interface when you want to enforce a specific API.

25 CS 349 - Implementing GUIs

Interfaces Example

• We can replace the abstract class/method with

an interface.

– Polymorphism still applies to interfaces.

Animals2.java

We’re treating the interface, Pet, as a type

26 CS 349 - Implementing GUIs

Interfaces Example

interface Driveable { public void accelerate(); public void brake(); public int getSpeed(); } // implement interface only class Car implements Driveable {} class Train implements Driveable {} // derive from base class, and implement interface class Motorcycle extends Bike implements Driveable {}

• You can (and will often) mix approaches.

– e.g. Drivable interface could be applied to any type

• f drivable vehicle, including our Bike class

hierarchy.

27 CS 349 - Implementing GUIs

Extended Example

Bikes1.java – classes Bikes2.java - interfaces

28 CS 349 - Implementing GUIs

Building User Interfaces

Swing components Creating a window Adding Swing components

29 CS 349 - Implementing GUIs

Java UI Toolkits

30

Toolkit (Release) Description

AWT (1995) “Heavyweight” with platform-specific

• widgets. AWT applications were limited to

common-functionality that existed on all platforms. Swing (1997) “Lightweight”, full widget implementation. Commonly used and deployed cross- platform. Standard Window T

• olkit / SWT (~2000)

”Heavyweight” hybrid model: native, and tied to specific platforms. Used in Eclipse. Java FX (~2010) Intended for rich desktop + mobile apps. Cleaner and richer than Swing, but still seeking market space.

Java has four user-interface libraries, each with different types of widgets (and strengths/tradeoffs)

CS 349 - Implementing GUIs

Swing Component Hierarchy

32

• java.awt.Window is the base for all containers.
• javax.swing.Jcomponent is the root for all widgets.

CS 349 - Implementing GUIs

How to build a Swing UI

• 1. Create a top-level application window, using

a Swing container (JFrame or JDialog).

• 2. Add Swing components to this window.
• Typically, you create a smaller container (like

a JPanel) and add components to the panel.

• This makes dynamic layouts easier (more on

that later in the course!)

• 3. Register for events: add listeners, like

keyboard (press), mouse (down, up, move)

• 4. Write code to respond to these events.
• 5. Make components update and paint

themselves based on events.

33 CS 349 - Implementing GUIs

Creating a Window

BasicForm1.java

34 CS 349 - Implementing GUIs

Open a Window

35

package guis_1.v1; import javax.swing.*; public class GUIs1v1 { public static void main(String[] args) { SwingUtilities.invokeLater(new Runnable() { @Override public void run() { JFrame frame = new JFrame("Window Title"); frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE); frame.setSize(400, 500); frame.setVisible(true); } }); } }

JFrame is a container for components. Paint on components (coming).

CS 349 - Implementing GUIs

Open a Window

36

package guis_1.v1; import javax.swing.*; public class GUIs1v1 { public static void main(String[] args) { SwingUtilities.invokeLater(new Runnable() { @Override public void run() { JFrame frame = new JFrame("Window Title"); frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE); frame.setSize(400, 500); frame.setVisible(true); } }); } }

invokeLater ensures that the program can’t start accepting events from the user before it’s ready to start processing them.

CS 349 - Implementing GUIs

Adding a Component

37

package guis_1.v2; import javax.swing.*; public class GUIs1v2 { public static void main(String[] args) { SwingUtilities.invokeLater(new Runnable() { @Override public void run() { JFrame frame = new JFrame("Window Title"); frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE); frame.setSize(400, 500); frame.add(new ColouredX()); frame.setVisible(true); } }); } } class ColouredXextends JComponent{ }

CS 349 - Implementing GUIs

What’s left?

39

T

• pics that we’ll cover in later lectures
• Drawing
• Events
• Animation
• Advanced graphics
• Design patterns
• Features (undo-redo, copy-paste)

CS 349 - Implementing GUIs