+ All Categories
Home > Documents > GUI I IS 313 2.6.03. Outline Quiz Quiz solution GUI components Layout.

GUI I IS 313 2.6.03. Outline Quiz Quiz solution GUI components Layout.

Date post: 18-Jan-2018
Category:
Upload: harold-stewart
View: 241 times
Download: 0 times
Share this document with a friend
Description:
Simple Swing Application
28
GUI I IS 313 2.6.03
Transcript
Page 1: GUI I IS 313 2.6.03. Outline  Quiz  Quiz solution  GUI components  Layout.

GUI IIS 3132.6.03

Page 2: GUI I IS 313 2.6.03. Outline  Quiz  Quiz solution  GUI components  Layout.

Outline Quiz Quiz solution GUI components Layout

Page 3: GUI I IS 313 2.6.03. Outline  Quiz  Quiz solution  GUI components  Layout.

Simple Swing Application

Page 4: GUI I IS 313 2.6.03. Outline  Quiz  Quiz solution  GUI components  Layout.

Standard UI program Main program

Creates a window Adds components Displays

Component maker Creates, customizes components Sets event handlers

Page 5: GUI I IS 313 2.6.03. Outline  Quiz  Quiz solution  GUI components  Layout.

Application Architecture

UI

User

Applicationlogic

Page 6: GUI I IS 313 2.6.03. Outline  Quiz  Quiz solution  GUI components  Layout.

Java UI Topics UI Components Containment hierarchy Layout management Event handling

Page 7: GUI I IS 313 2.6.03. Outline  Quiz  Quiz solution  GUI components  Layout.

Top-Level ComponentsApplet Dialog Frame

Page 8: GUI I IS 313 2.6.03. Outline  Quiz  Quiz solution  GUI components  Layout.

Intermediate ContainersPanel ScrollPane

TabbedPane

SplitPane

Toolbar

Page 9: GUI I IS 313 2.6.03. Outline  Quiz  Quiz solution  GUI components  Layout.

Basic ControlsButtons ListComboBox

TextFieldSliderMenu

Page 10: GUI I IS 313 2.6.03. Outline  Quiz  Quiz solution  GUI components  Layout.

Non-editable Display

ProgressBarLabel ToolTip

Page 11: GUI I IS 313 2.6.03. Outline  Quiz  Quiz solution  GUI components  Layout.

Editable Display

TextTable Tree

Page 12: GUI I IS 313 2.6.03. Outline  Quiz  Quiz solution  GUI components  Layout.

Text Components

Page 13: GUI I IS 313 2.6.03. Outline  Quiz  Quiz solution  GUI components  Layout.

Examples Example 2

two-tiered architecture Example 3

specialized component design

Page 14: GUI I IS 313 2.6.03. Outline  Quiz  Quiz solution  GUI components  Layout.

Layout Manager Maintains topological relationship between

components Follows a set of layout rules Uses constraints specified by the

programmer

Page 15: GUI I IS 313 2.6.03. Outline  Quiz  Quiz solution  GUI components  Layout.

Border Layout

Page 16: GUI I IS 313 2.6.03. Outline  Quiz  Quiz solution  GUI components  Layout.

Border Layout Topology

Two-dimensional distribution Rules

Corner and edge components = preferred size Center component = all extra

Constraints Component sector

Page 17: GUI I IS 313 2.6.03. Outline  Quiz  Quiz solution  GUI components  Layout.

Flow Layout

Page 18: GUI I IS 313 2.6.03. Outline  Quiz  Quiz solution  GUI components  Layout.

Flow Layout Topology

One-dimensional adjacency Rules

All components = preferred size Constraints

Order of insertion

Page 19: GUI I IS 313 2.6.03. Outline  Quiz  Quiz solution  GUI components  Layout.

Grid Layout

Page 20: GUI I IS 313 2.6.03. Outline  Quiz  Quiz solution  GUI components  Layout.

Grid Layout Topology

Two-dimensional distribution Rules

All components = same size Constraints

Order of insertion Left-to-right Top-to-bottom

Page 21: GUI I IS 313 2.6.03. Outline  Quiz  Quiz solution  GUI components  Layout.

GridBag Layout

Page 22: GUI I IS 313 2.6.03. Outline  Quiz  Quiz solution  GUI components  Layout.

GridBag Layout Topology

Two-dimensional distribution Rules

Components = preferred size Extra space allocated using constraints

Constraints Grid location, cell span, padding Fill dimension Weight

Page 23: GUI I IS 313 2.6.03. Outline  Quiz  Quiz solution  GUI components  Layout.

Box Layout

Page 24: GUI I IS 313 2.6.03. Outline  Quiz  Quiz solution  GUI components  Layout.

Box Layout Topology

One-dimensional stacking Rules

Components = preferred size Extra space allocated using special purpose

“filler components” Constraints

Alignment Order of insertion

Page 25: GUI I IS 313 2.6.03. Outline  Quiz  Quiz solution  GUI components  Layout.

Example I: ListDialog

Page 26: GUI I IS 313 2.6.03. Outline  Quiz  Quiz solution  GUI components  Layout.

Example Layout II

Page 27: GUI I IS 313 2.6.03. Outline  Quiz  Quiz solution  GUI components  Layout.

Example Layouts III

Page 28: GUI I IS 313 2.6.03. Outline  Quiz  Quiz solution  GUI components  Layout.

Example Layout IV


Recommended