Lecture 1

• Course CST8221: Java Application Programming (JAP)
• Week 1: Starting GUI Apps
• Topics include:
  • Development environment
  • Brief idea about Environments

Introduction to GUI

• GUI stands for Graphical User Interface.
• GUI is a Human-Machine Interface for interaction between humans and computers.
• GUIs consist of two parts: input devices and an application window for output.
• Basic input devices: keyboard and mouse.
• Other input devices: touchscreens on tablets and mobiles

Application Programming Interface (API)

• Programmers use an application programming interface when creating a GUI.
• The API is from the language library.

Principles and Guidelines for design

• Design Principles include:
  • Clear Mental Model
  • Reassuring Feedback
  • Navigability
  • Consistency
  • Intuitive Interaction
  • Behavior
  • Appropriateness
  • Importance
• Design Process Guidelines include:
  • Know Your User or Client
  • Understand the Business Function
  • Understand the Principles of Good Screen Design
  • Develop System Menus and Navigation Schemes
  • Select the Proper Kinds of Windows
  • Select the Proper Device-Based Controls
  • Choose the Proper Screen-Based Controls
  • Write Clear Text and Messages
  • Provide Effective Feedback and Guidance and Assistance
  • Provide Effective Internationalization and Accessibility
  • Create Meaningful Graphics, Icons, and Images
  • Choose the Proper Colors
  • Organize and Layout Windows and Pages
  • Test, Test, and Retest
• Guidelines in the Art of Interface Design
  • Balance: equal weight of screen elements, left and right, top and bottom.
  • Symmetry: replicate elements left and right of the screen centerline.
  • Regularity: similar element sizes, shapes, colors, and spacing.
  • Predictability: be consistent and follow conventional orders or arrangements.
  • Sequentially: arrange elements to guide the eye through the screen.
  • Economy: use as few styles, display techniques, and colors as possible.
  • Unity: use similar sizes, shapes, or colors for related information.
  • Proportion: data or text with aesthetically pleasing proportions.
  • Simplicity: optimize the number of elements on a screen, within limits of clarity.
  • Groupings: provide functional groupings of associated elements.

The 10 Commandments of User Interface Design

• Create a Story
• Streamline Navigation
• Make It Responsive
• Ensure Accessibility
• Form Follows Function
• Use Pleasant Color Themes
• Define Font Families
• Boost Optimized Images
• Master Minimalisim
• Eliminate Errors

GUI in Java

• Abstract Windowing Toolkit (AWT): A class library that provides basic components for GUI programming, introduced with Java for the first time.
• AWT handles user interface elements by delegating their creation and behavior to the native windowing system.
• Each component in AWT has a "native" peer responsible for handling the user actions.
• Components in AWT are called "heavyweight components"
• Swing is a GUI library created by Sun Microsystems, and does not heavily rely on underlying platform
• Swing began as the library for Java 1.2
• Swing is part of Java Foundation Classes (JFC)
• Swing components are painted onto blank windows.
• Swing components are called "lightweight components"
• Only the functionality required is from the underlying windowing system is to put up a window and to paint on the window.

GUI Programming - Building

To build a GUI, you need to:

• Choose a primary container (window).
• Choose GUI components and containers to be part of the interface.
• Arrange the components inside the containers.
• Arrange the components and the containers inside the primary container.
• Handle the events generated by the user actions, such as a mouse click or a keystroke.

Containers

• A primary container or a top-level window that is not contained inside another window is called a Frame in Java.

Layers

• Root pane: Examples include JFrame, JApplet, JDialog, JWindow, and JInternalFrame.
• Glass pane: Hidden by default, appears as a sheet of glass over the root pane if made visible.
• Layered pane: A container with depth, allowing overlapping components to appear on top of each other.
• Content pane: Holds the root pane's visible components, excluding the menu bar.
• Optional menu bar.

JavaFX

• Swing was designed for developing desktop GUI applications.
• Swing was gradually replaced by a completely new GUI framework known as JavaFX.
• JavaFX is fully integrated in Java 8 and is no longer integrated in later versions of Java.
• JavaFX is updated by the Apache Software Foundation.
• JavaFX incorporates modern GUI technologies and has built-in support for modern GPUs.
• JavaFX supports multi-touch for touch-screen devices, and has built-in 2D, 3D, animation support, video and audio playback.
• JavaFX is under open source license, more information https://openjfx.io/

GUI Examples

• Simple GUI-Based Input/Output with JOptionPane allows user input from the user.

Swing Components:

• JLabel: Displays uneditable text and/or icons.
• JTextField: Receives input from the user.
• JButton: Triggers an event when clicked with the mouse.
• JCheckBox: Specifies an option that can be selected or not selected.
• JcomboBox: A drop-down list of items for user selection.
• JList: A list of selectable items. Multiple elements can be selected.
• JPanel: An area in which components can be placed and organized.

Programming software included

• Eclipse
• Netbeans
• VSCode
• IntelliJ

Rules

• When programming, "Put yourself in the user's place" [UX]
• "Keep It Simple, Student" (KISS) [SE]

Questions about Graphical User Interfaces (GUI), Application Programming Interfaces (API) and JavaFX. It covers topics such as interface design principles, components and functionalities of JavaFX.