graphical user interface programming. gui graphical user interface graphical user interface event...
Post on 04-Jan-2016
302 Views
Preview:
TRANSCRIPT
Graphical User Interface Graphical User Interface ProgrammingProgramming
GUIGUI
Graphical User InterfaceGraphical User Interface event driven programmingevent driven programming
Java GUI programmingJava GUI programming AWT (Abstract Window Toolkit)AWT (Abstract Window Toolkit) SwingSwing
Event driven programmingEvent driven programming
Uses a signal-and-response approachUses a signal-and-response approach Events and event handlersEvents and event handlers AsynchronousAsynchronous
Event = object that act as a signal to another Event = object that act as a signal to another objectobject
Listener = event receiverListener = event receiver One event might have zero or more listeners.One event might have zero or more listeners. Listeners can receive events from different Listeners can receive events from different
objects.objects.
Event driven programmingEvent driven programming
One event might have zero or more listeners.One event might have zero or more listeners.
Button X
Listerner A
Listerner B
Listerner C
Event driven programmingEvent driven programming
Listeners can receive events from different Listeners can receive events from different objects.objects.
Button Y
Button Z
Button X
Listerner A
Listerner B
Typical eventsTypical events
User moves the mouse.User moves the mouse. User clicks the mouse button.User clicks the mouse button. User clicks the mouse button in a button in a User clicks the mouse button in a button in a
window.window. User presses a key on the keyboard.User presses a key on the keyboard. Timer event occurs.Timer event occurs.
Typical programming and event Typical programming and event driven programmingdriven programming
Up to now your programs consisted of lists of Up to now your programs consisted of lists of statements executed in order.statements executed in order.
In event-driven programming, you create In event-driven programming, you create objects that can fire events, and you create objects that can fire events, and you create listener objects that react to the events.listener objects that react to the events. You don’t know the order ahead of time.You don’t know the order ahead of time. Typically, your code Typically, your code nevernever directly calls the directly calls the
listener methods.listener methods.
WindowsWindows
via Swing’s JFramevia Swing’s JFrame
Creating a window in SwingCreating a window in Swing
import javax.swing.JFrame;import javax.swing.JFrame;
……JFrame f = new JFrame( “My Simple Frame” );JFrame f = new JFrame( “My Simple Frame” );f.setSize( 300, 200 ); //w, hf.setSize( 300, 200 ); //w, hf.setDefaultCloseOperation(f.setDefaultCloseOperation(
JFrame.DO_NOTHING_ON_CLOSE );JFrame.DO_NOTHING_ON_CLOSE );……f.setVisible( true );f.setVisible( true );
Adding a button to a window Adding a button to a window (JFrame)(JFrame)
import javax.swing.JButton;import javax.swing.JButton;
……
//create the button//create the button
JButton b1 = new JButton( “Click to end program” );JButton b1 = new JButton( “Click to end program” );
//associate the listener with this button (next slide)//associate the listener with this button (next slide)
MyButtonListener listener = new MyButtonListener();MyButtonListener listener = new MyButtonListener();
b1.addActionListener( listener );b1.addActionListener( listener );
f.add( b1 );f.add( b1 ); //add the button to our frame//add the button to our frame
Our button listenerOur button listener
import java.awt.event.ActionListener;import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;import java.awt.event.ActionEvent;
public class MyButtonListener implements ActionListener {public class MyButtonListener implements ActionListener {
public void actionPerformed ( ActionEvent e ) {public void actionPerformed ( ActionEvent e ) {
System.exit( 0 );System.exit( 0 );
}}
}}
(Typical) Steps(Typical) Steps
1.1. Create the frame.Create the frame.
2.2. Create the button.Create the button.
3.3. Create the action listener for the button.Create the action listener for the button.
4.4. Add the action listener to the button (register Add the action listener to the button (register the action listener with the button).the action listener with the button).
5.5. Add the button to the frame.Add the button to the frame.
6.6. Show the frame.Show the frame.
PixelPixel
Smallest unit of space on which your screen Smallest unit of space on which your screen can write.can write.
PixelPixel is a contraction for … what? is a contraction for … what?
Useful JFrame methodsUseful JFrame methods
public JFrame ( )public JFrame ( ) public JFrame ( String title )public JFrame ( String title ) public void setDefaultCloseOperation ( int public void setDefaultCloseOperation ( int
operation )operation ) JFrame.DO_NOTHING_ON_CLOSEJFrame.DO_NOTHING_ON_CLOSE JFrame.HIDE_ON_CLOSEJFrame.HIDE_ON_CLOSE JFrame.DISPOSE_ON_CLOSEJFrame.DISPOSE_ON_CLOSE JFrame.EXIT_ON_CLOSEJFrame.EXIT_ON_CLOSE Note: The close-window-button is part of the JFrame (not Note: The close-window-button is part of the JFrame (not
a JButton)a JButton) public void setSize ( int width, int height )public void setSize ( int width, int height )
More useful JFrame methodsMore useful JFrame methods
public void setTitle ( String title )public void setTitle ( String title ) public void add ( Component componentAdded )public void add ( Component componentAdded ) public void setLayout ( LayoutManager manager )public void setLayout ( LayoutManager manager ) public void setJMenuBar ( JMenuBar menubar )public void setJMenuBar ( JMenuBar menubar ) public void dispose ( )public void dispose ( ) public void setVisible ( boolean makeVisible )public void setVisible ( boolean makeVisible )
ButtonsButtons
via Swing’s JButtonvia Swing’s JButton
Buttons (JButton)Buttons (JButton)
Different kinds of components require Different kinds of components require different kinds of listener classes to handle the different kinds of listener classes to handle the events they fire.events they fire.
A button fires events known as action events, A button fires events known as action events, which are handled by listeners know as action which are handled by listeners know as action listeners.listeners.
Back to creating a window in SwingBack to creating a window in Swing
import javax.swing.JFrame;import javax.swing.JFrame;
……JFrame f = new JFrame( “My Simple Frame” );JFrame f = new JFrame( “My Simple Frame” );f.setSize( 300, 200 ); //w, hf.setSize( 300, 200 ); //w, hf.setDefaultCloseOperation(f.setDefaultCloseOperation(
JFrame.DO_NOTHING_ON_CLOSE );JFrame.DO_NOTHING_ON_CLOSE );……f.setVisible( true );f.setVisible( true );
This is not a very OO approach!
A more OO approach to creating a A more OO approach to creating a window in Swingwindow in Swing
import javax.swing.JFrame;import javax.swing.JFrame;
public MyFrame public MyFrame extends JFrameextends JFrame { {public static final intpublic static final int sWidth = 300;sWidth = 300;public static final intpublic static final int sHeight = 200;sHeight = 200;MyFrame ( ) {MyFrame ( ) {
super( “My More OO Simple Frame” );super( “My More OO Simple Frame” );setSize( sWidth, sHeight );setSize( sWidth, sHeight );setDefaultCloseOperation(setDefaultCloseOperation(
JFrame.DO_NOTHING_ON_CLOSE );JFrame.DO_NOTHING_ON_CLOSE );……setVisible( true );setVisible( true );
}}……
}}
JLabel – a line of textJLabel – a line of text
Simply a line of text appearing in a window.Simply a line of text appearing in a window.import javax.swing.JLabel;import javax.swing.JLabel;
……
JLabel label = new JLabel( “hello there.” );JLabel label = new JLabel( “hello there.” );
add( label );add( label );
Programming in ColorProgramming in Color
import java.awt.Color;import java.awt.Color;
……
Color.BLACKColor.BLACK AlsoAlso
Color.BLUE, Color.CYAN, Color.DARK_GRAY, …Color.BLUE, Color.CYAN, Color.DARK_GRAY, … Or you can specify/create your own colors by specifying Or you can specify/create your own colors by specifying
the argb or rgb values in the Color ctor.the argb or rgb values in the Color ctor. Use getContentPane().setBackground( Color.BLUE ); Use getContentPane().setBackground( Color.BLUE );
to change the background color of your JFrame.to change the background color of your JFrame.
Programming in colorProgramming in color
Colors are represented by their RGB value.Colors are represented by their RGB value. R=redR=red G=greenG=green B=blueB=blue When R is the largest value, the color has more red When R is the largest value, the color has more red
than the other components.than the other components. What happens when r=g=b?What happens when r=g=b?
Sometimes ARGB is used where A=alpha Sometimes ARGB is used where A=alpha (opacity).(opacity).
Layout ManagersLayout Managers
Controlling the placement of Controlling the placement of components in a container (our components in a container (our
frame)frame) So far, we simply add components to a container and accept So far, we simply add components to a container and accept
whatever default layout is presented.whatever default layout is presented. Layout manager – describes how the components are Layout manager – describes how the components are
arranged.arranged. Java provides many layout managers.Java provides many layout managers.
1.1. Border (in book)Border (in book)2.2. Box (not in book)Box (not in book)3.3. Card (not in book)Card (not in book)4.4. Flow (in book)Flow (in book)5.5. Grid (in book)Grid (in book)6.6. Grid bag (not in book)Grid bag (not in book)7.7. Group (not in book)Group (not in book)8.8. Spring (not in book)Spring (not in book)
BorderLayoutBorderLayout
Places the components in five areas:Places the components in five areas:1.1. NorthNorth
2.2. SouthSouth
3.3. EastEast
4.4. WestWest
5.5. CenterCenter You specify the area in the add method.You specify the area in the add method.
add( new JLabel(“me”), BorderLayout.NORTH );add( new JLabel(“me”), BorderLayout.NORTH );
Using the BorderLayoutUsing the BorderLayout
import java.awt.BorderLayout;import java.awt.BorderLayout;import javax.swing.JFrame;import javax.swing.JFrame;import javax.swing.JLabel;import javax.swing.JLabel;
public class MyFrame extends JFrame {public class MyFrame extends JFrame {public MyFrame ( ) {public MyFrame ( ) {
super( “My frame w/ border layout.” );super( “My frame w/ border layout.” );setSize( 300, 200 );setSize( 300, 200 );setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );setLayout( setLayout( new BorderLayout()new BorderLayout() ); );add( new JLabel( “first” ), add( new JLabel( “first” ), BorderLayout.NORTHBorderLayout.NORTH ); );add( new JLabel( “second” ), add( new JLabel( “second” ), BorderLayout.SOUTHBorderLayout.SOUTH ); );……setVisible( true );setVisible( true );
}}}}
FlowLayoutFlowLayout
Simplest.Simplest.
Arranges components one after another, from Arranges components one after another, from left to right and top to bottom, in the order in left to right and top to bottom, in the order in which one adds them.which one adds them.
Using the FlowLayoutUsing the FlowLayout
import java.awt.FlowLayout;import java.awt.FlowLayout;import javax.swing.JButton;import javax.swing.JButton;import javax.swing.JFrame;import javax.swing.JFrame;import javax.swing.JLabel;import javax.swing.JLabel;
public class MyFrame extends JFrame {public class MyFrame extends JFrame {public MyFrame ( ) {public MyFrame ( ) {
super( “My frame w/ flow layout.” );super( “My frame w/ flow layout.” );setSize( 300, 200 );setSize( 300, 200 );setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );setLayout( setLayout( new FlowLayout()new FlowLayout() ); );add( new JLabel( “first” ) );add( new JLabel( “first” ) );add( new JButton( “second” ) );add( new JButton( “second” ) );……setVisible( true );setVisible( true );
}}}}
GridLayoutGridLayout
Arranges components Arranges components on a 2D grid of given on a 2D grid of given size (i.e., rows and size (i.e., rows and cols specified via the cols specified via the GridLayout ctor).GridLayout ctor).
Each entry in the grid Each entry in the grid will be stretched to will be stretched to the the samesame size. size.
Placement rules are more complicated.Placement rules are more complicated. Say we have a 2 x 3 (2 rows x 3 cols):Say we have a 2 x 3 (2 rows x 3 cols):
new GridLayout( 2, 3 )new GridLayout( 2, 3 ) If we subsequently add six things, they will appear in a If we subsequently add six things, they will appear in a
2x3 grid of equally sized elements.2x3 grid of equally sized elements.
What happens if we add more or less?What happens if we add more or less?
GridLayoutGridLayout
GridLayoutGridLayout
Placement rules are more Placement rules are more complicated.complicated. Say we have a 2 x 3 (2 rows Say we have a 2 x 3 (2 rows
x 3 cols).x 3 cols).
Adding 7 or 8 items causes Adding 7 or 8 items causes a col to be added.a col to be added.
Adding fewer than 6 items Adding fewer than 6 items causes a col(s) to be deleted.causes a col(s) to be deleted.
X
GridLayoutGridLayout
Placement rules are more complicated.Placement rules are more complicated. Say we have a 2 x 3 (2 rows x 3 cols).Say we have a 2 x 3 (2 rows x 3 cols).
To only honor the number of rows, specify a 0 for To only honor the number of rows, specify a 0 for the cols.the cols.
To honor only the number of cols, specify a 0 for To honor only the number of cols, specify a 0 for the rows.the rows.
Using the GridLayoutUsing the GridLayout
import java.awt.GridLayout;import java.awt.GridLayout;import javax.swing.JButton;import javax.swing.JButton;import javax.swing.JFrame;import javax.swing.JFrame;import javax.swing.JLabel;import javax.swing.JLabel;
public class MyFrame extends JFrame {public class MyFrame extends JFrame {public MyFrame ( ) {public MyFrame ( ) {
super( “My frame w/ flow layout.” );super( “My frame w/ flow layout.” );setSize( 300, 200 );setSize( 300, 200 );setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );setLayout( setLayout( new GridLayout(0,1)new GridLayout(0,1) ); //always a single col ); //always a single coladd( new JLabel( “first” ) );add( new JLabel( “first” ) );add( new JButton( “second” ) );add( new JButton( “second” ) );……setVisible( true );setVisible( true );
}}}}
Summary of Layout ManagersSummary of Layout Managers
FlowLayoutFlowLayout Displays components from left to right in the order Displays components from left to right in the order
in which they are added to the container.in which they are added to the container. BorderLayoutBorderLayout
Displays the components in five areas: N, S, E, W, Displays the components in five areas: N, S, E, W, and Center. You specify the area in the add and Center. You specify the area in the add method.method.
GridLayoutGridLayout Lays out components in a grid with each Lays out components in a grid with each
component stretched to fill its box in the grid.component stretched to fill its box in the grid.
Additional Layout ManagersAdditional Layout Managers
Box (not in book)Box (not in book) Card (not in book)Card (not in book) Tabbed pane (not in book; not strictly a layout Tabbed pane (not in book; not strictly a layout
manager)manager) Grid bag (not in book)Grid bag (not in book) Group (not in book)Group (not in book) Spring (not in book)Spring (not in book)
BoxLayoutBoxLayout
““either stacks its components on top of each other or either stacks its components on top of each other or places them in a row - your choice” from places them in a row - your choice” from http://java.sun.com/docs/books/tutorial/uiswing/layout/bhttp://java.sun.com/docs/books/tutorial/uiswing/layout/box.htmlox.html
CardLayoutCardLayout
Typically used to switch between different Typically used to switch between different panels.panels.
Poor man’s version of tabbed pane.Poor man’s version of tabbed pane.choice here
causes change here
JTabbedPaneJTabbedPane
Not strictly a layout manager.Not strictly a layout manager. Typically preferred over CardLayout.Typically preferred over CardLayout.
GridBagLayoutGridBagLayout
“… “… if you want to code by hand and do not want to use GroupLayout, then if you want to code by hand and do not want to use GroupLayout, then GridBagLayout is recommended as the next most flexible and powerful GridBagLayout is recommended as the next most flexible and powerful layout manager” from layout manager” from http://java.sun.com/docs/books/tutorial/uiswing/layout/card.htmlhttp://java.sun.com/docs/books/tutorial/uiswing/layout/card.html
GroupLayoutGroupLayout
“… “… if you want to code by hand and do not want to use GroupLayout, then if you want to code by hand and do not want to use GroupLayout, then GridBagLayout is recommended as the next most flexible and powerful GridBagLayout is recommended as the next most flexible and powerful layout manager” from layout manager” from http://java.sun.com/docs/books/tutorial/uiswing/layout/card.html
Intended to be used by a GUI builder.Intended to be used by a GUI builder.
SpringLayoutSpringLayout
Intended to be used by GUI builder.Intended to be used by GUI builder.
JPanelJPanel
a general purpose window-like a general purpose window-like containercontainer
Panels (JPanel)Panels (JPanel)
General purpose, window-like containerGeneral purpose, window-like container Groups objectsGroups objects Components may be added to them (including Components may be added to them (including
other panels)other panels) hierarchicalhierarchical
Layout manager can be associated w/ a panelLayout manager can be associated w/ a panel Can be added to a JFrameCan be added to a JFrame
Example JPanelsExample JPanelsJPanel w/ a top-to-bottom BoxLayout
subclass of JPanel w/ a left-to-right BoxLayout
subclass of JPanel w/ a top-to-bottom BoxLayout
JPanel w/ a top-to-bottom BoxLayout
COMPLETE JPANEL COMPLETE JPANEL EXAMPLEEXAMPLE
JPanel exampleJPanel example
Let’s create a window with 3 Let’s create a window with 3 panels with the default panels with the default background color, and 3 background color, and 3 buttons, red, white, and blue.buttons, red, white, and blue.
When a button is pressed, the When a button is pressed, the corresponding panel will corresponding panel will change to that color.change to that color.
JPanel exampleJPanel example
GridLayout (center)GridLayout (center)
FlowLayout (south)FlowLayout (south)
JPanel ExampleJPanel Exampleimport javax.swing.JFrame;import javax.swing.JFrame;import javax.swing.JPanel;import javax.swing.JPanel;import java.awt.BorderLayout;import java.awt.BorderLayout;import java.awt.GridLayout;import java.awt.GridLayout;import java.awt.FlowLayout;import java.awt.FlowLayout;import java.awt.Color;import java.awt.Color;import javax.swing.JButton;import javax.swing.JButton;import java.awt.event.ActionListener;import java.awt.event.ActionListener;import java.awt.event.ActionEvent;import java.awt.event.ActionEvent;
public class PanelDemo extends JFrame public class PanelDemo extends JFrame implements ActionListenerimplements ActionListener
{{ public static final int WIDTH = 300;public static final int WIDTH = 300; public static final int HEIGHT = 200;public static final int HEIGHT = 200;
private JPanel redPanel = new JPanel();private JPanel redPanel = new JPanel(); private JPanel whitePanel = new JPanel();private JPanel whitePanel = new JPanel(); private JPanel bluePanel = new JPanel();private JPanel bluePanel = new JPanel();
public static void main ( String[] args ) {public static void main ( String[] args ) { PanelDemo gui = new PanelDemo( );PanelDemo gui = new PanelDemo( ); gui.setVisible( true );gui.setVisible( true ); }}
public void actionPerformed ( ActionEvent e ) {public void actionPerformed ( ActionEvent e ) { String buttonString = e.getActionCommand();String buttonString = e.getActionCommand();
if (buttonString.equals("Red"))if (buttonString.equals("Red")) redPanel.setBackground( Color.RED );redPanel.setBackground( Color.RED ); else if (buttonString.equals("White"))else if (buttonString.equals("White")) whitePanel.setBackground(Color.WHITE);whitePanel.setBackground(Color.WHITE); else if (buttonString.equals("Blue"))else if (buttonString.equals("Blue")) bluePanel.setBackground( Color.BLUE );bluePanel.setBackground( Color.BLUE ); elseelse System.out.println( "Unexpected error." );System.out.println( "Unexpected error." ); }}
JPanel ExampleJPanel Example public PanelDemo ( ) {public PanelDemo ( ) { super( "Panel Demonstration“ );super( "Panel Demonstration“ ); setSize( WIDTH, HEIGHT );setSize( WIDTH, HEIGHT ); setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE ); setLayout( new BorderLayout( ) );setLayout( new BorderLayout( ) );
JPanel biggerPanel = new JPanel( );JPanel biggerPanel = new JPanel( ); biggerPanel.setLayout( new GridLayout(1, 3) );biggerPanel.setLayout( new GridLayout(1, 3) );
redPanel.setBackground( Color.LIGHT_GRAY );redPanel.setBackground( Color.LIGHT_GRAY ); biggerPanel.add( redPanel );biggerPanel.add( redPanel );
whitePanel.setBackground( Color.LIGHT_GRAY );whitePanel.setBackground( Color.LIGHT_GRAY ); biggerPanel.add( whitePanel );biggerPanel.add( whitePanel );
bluePanel.setBackground( Color.LIGHT_GRAY );bluePanel.setBackground( Color.LIGHT_GRAY ); biggerPanel.add( bluePanel );biggerPanel.add( bluePanel );
add( biggerPanel, BorderLayout.CENTER );add( biggerPanel, BorderLayout.CENTER );
JPanel buttonPanel = new JPanel( );JPanel buttonPanel = new JPanel( ); buttonPanel.setBackground( Color.LIGHT_GRAY );buttonPanel.setBackground( Color.LIGHT_GRAY ); buttonPanel.setLayout( new FlowLayout( ) );buttonPanel.setLayout( new FlowLayout( ) );
JButton redButton = new JButton( "Red" );JButton redButton = new JButton( "Red" ); redButton.setBackground( Color.RED );redButton.setBackground( Color.RED ); redButton.addActionListener( this );redButton.addActionListener( this ); buttonPanel.add( redButton );buttonPanel.add( redButton );
JButton whiteButton = new JButton( "White" );JButton whiteButton = new JButton( "White" ); whiteButton.setBackground( Color.WHITE );whiteButton.setBackground( Color.WHITE ); whiteButton.addActionListener( this );whiteButton.addActionListener( this ); buttonPanel.add( whiteButton );buttonPanel.add( whiteButton );
JButton blueButton = new JButton( "Blue" );JButton blueButton = new JButton( "Blue" ); blueButton.setBackground( Color.BLUE );blueButton.setBackground( Color.BLUE ); blueButton.addActionListener( this );blueButton.addActionListener( this ); buttonPanel.add( blueButton );buttonPanel.add( blueButton );
add( buttonPanel, BorderLayout.SOUTH );add( buttonPanel, BorderLayout.SOUTH ); setVisible( true );setVisible( true ); }}}}
JPanel ExampleJPanel Example
PanelDemo (JFrame w/ BorderLayout)PanelDemo (JFrame w/ BorderLayout) biggerPanel (w/ GridLayout of 1 row & 3 cols)biggerPanel (w/ GridLayout of 1 row & 3 cols)
added at centeradded at center redPanelredPanel whitePanelwhitePanel bluePanelbluePanel
buttonPanel (w/ FlowLayout)buttonPanel (w/ FlowLayout) added at southadded at south redButtonredButton whiteButtonwhiteButton blueButtonblueButton
The Container classThe Container class
Can have components added to itCan have components added to it JFrame & JPanel are descendents of ContainerJFrame & JPanel are descendents of Container Container class = any descendent of ContainerContainer class = any descendent of Container Component = any descendent of JComponentComponent = any descendent of JComponent You may add any component to any containerYou may add any component to any container JComponent is derived from Container so you JComponent is derived from Container so you
may add a JComponent to a JComponentmay add a JComponent to a JComponent
More examplesMore examples
The MVC PatternThe MVC Pattern
MVC = Model+View+ControllerMVC = Model+View+Controller
Model-View-Controller (from Model-View-Controller (from wikipedia.org)wikipedia.org)
ModelModel The domain-specific representation of the information on The domain-specific representation of the information on
which the application operates. Domain logic adds which the application operates. Domain logic adds meaning to raw data (e.g., calculating whether today is the meaning to raw data (e.g., calculating whether today is the user's birthday, or the totals, taxes, and shipping charges user's birthday, or the totals, taxes, and shipping charges for shopping cart items).for shopping cart items).
Many applications use a persistent storage mechanism Many applications use a persistent storage mechanism (such as a database) to store data. MVC does not (such as a database) to store data. MVC does not specifically mention the data access layer because it is specifically mention the data access layer because it is understood to be underneath or encapsulated by the Model.understood to be underneath or encapsulated by the Model.
Model-View-Controller (from Model-View-Controller (from wikipedia.org)wikipedia.org)
ViewView Renders the model into a form suitable for interaction, Renders the model into a form suitable for interaction,
typically a user interface element.typically a user interface element.
Multiple views can exist for a single model for different Multiple views can exist for a single model for different purposes.purposes.
Model-View-Controller (from Model-View-Controller (from wikipedia.org)wikipedia.org)
ControllerController Processes and responds to events, typically user actions, Processes and responds to events, typically user actions,
and may invoke changes on the model. and may invoke changes on the model.
Basic MVCBasic MVCModel
data1
data2
.
.
.
View
…
update()
…
Controller
…
…
manipulatenotify
Model-View-Controller (from Model-View-Controller (from wikipedia.org)wikipedia.org)
Though MVC comes in different flavors, control flow generally works as Though MVC comes in different flavors, control flow generally works as follows:follows:
1.1. The user interacts with the user interface in some way (e.g., presses a button).The user interacts with the user interface in some way (e.g., presses a button).
2.2. A controller handles the input event from the user interface, often via a A controller handles the input event from the user interface, often via a registered handler or callback.registered handler or callback.
3.3. The controller accesses the model, possibly updating it in a way appropriate The controller accesses the model, possibly updating it in a way appropriate to the user's action (e.g., controller updates user's shopping cart).to the user's action (e.g., controller updates user's shopping cart).
4.4. A view uses the model (indirectly) to generate an appropriate user interface A view uses the model (indirectly) to generate an appropriate user interface (e.g., the view produces a screen listing the shopping cart contents). The view (e.g., the view produces a screen listing the shopping cart contents). The view gets its own data from the model. The model has no direct knowledge of the gets its own data from the model. The model has no direct knowledge of the view.view.
5.5. The user interface waits for further user interactions, which begins the cycle The user interface waits for further user interactions, which begins the cycle anew.anew.
By decoupling models and views, MVC helps to reduce the complexity in By decoupling models and views, MVC helps to reduce the complexity in architectural design, and to increase flexibility and reuse.architectural design, and to increase flexibility and reuse.
Model-View-Controller (from Model-View-Controller (from wikipedia.org)wikipedia.org)
A simple diagram depicting the relationship between the Model, View, and Controller.
Note: the solid lines indicate a direct association, and the dashed lines indicate an indirect association (e.g., observer pattern).
Observer patternObserver pattern
““The observer pattern is a software design pattern in The observer pattern is a software design pattern in which an object, called the subject, maintains a list which an object, called the subject, maintains a list of its dependents, called observers, and notifies of its dependents, called observers, and notifies them automatically of any state changes, usually by them automatically of any state changes, usually by calling one of their methods. It is mainly used to calling one of their methods. It is mainly used to implement distributed event handling systems.”implement distributed event handling systems.”
from http://en.wikipedia.org/wiki/Observer_patternfrom http://en.wikipedia.org/wiki/Observer_pattern
Model (data)ConnectFour
||V
MyConnectFour
View (output)
MyView
Main
Controller (input events)
MyController
A diagram depicting the relationship between the Model, View, and Controller for the ConnectFour game. Note: the solid lines indicate a direct association, and the dashed lines indicate an indirect association (e.g., observer pattern).
NoteNote
Some designers combine/simply the M-V-C to Some designers combine/simply the M-V-C to D-V where…D-V where… D is the document, data, or model,D is the document, data, or model, V is the View, andV is the View, and the controller is typically part of the view.the controller is typically part of the view.
Menus and buttonsMenus and buttons
Menu bars, menus, and menu itemsMenu bars, menus, and menu items
JMenuBar, JMenu, and JMenuItemJMenuBar, JMenu, and JMenuItem import:import:
javax.swing.JMenuBarjavax.swing.JMenuBar ex. the menu bar in an appex. the menu bar in an app
javax.swing.JMenujavax.swing.JMenu ex. Fileex. File ex. Editex. Edit ex. Helpex. Help
javax.swing.JMenuItemjavax.swing.JMenuItem ex. Open in the File menuex. Open in the File menu ex. Cut in the Edit menuex. Cut in the Edit menu
implement ActionListener for eventsimplement ActionListener for events
ExampleExample
menu bar
menu
menu item
Example: creating a menu barExample: creating a menu bar
……public class MenuDemo extends JFrame implements ActionListener {public class MenuDemo extends JFrame implements ActionListener {
……public MenuDemo ( ) {public MenuDemo ( ) {
……JMenu colorMenu = new JMenu( “Add colors” );JMenu colorMenu = new JMenu( “Add colors” );
JMenuItem greenChoice = new JMenuItem( “Green” );JMenuItem greenChoice = new JMenuItem( “Green” );greenChoice.addActionListener( this );greenChoice.addActionListener( this );colorMenu.add( greenChoice );colorMenu.add( greenChoice );……JMenuBar bar = new JMenuBar();JMenuBar bar = new JMenuBar();bar.add( colorMenu );bar.add( colorMenu );setJMenuBar( bar );setJMenuBar( bar );
}}……
}}
Handling menu eventsHandling menu events
When we create a button or menu item, we When we create a button or menu item, we specify a string.specify a string.
By default, that string becomes the action By default, that string becomes the action command for that button.command for that button.
The action command is provided to the The action command is provided to the actionPerformed method.actionPerformed method.
The action command can be changed via The action command can be changed via setActionCommand (there is also a setActionCommand (there is also a getActionCommand method as well).getActionCommand method as well).
Example: handle menu eventsExample: handle menu events
……public class MenuDemo extends JFrame implements ActionListener {public class MenuDemo extends JFrame implements ActionListener {
……public void actionPerformed ( ActionEvent e ) {public void actionPerformed ( ActionEvent e ) {
String action = e.getActionCommand();String action = e.getActionCommand();if (action.equals( “Green” ))if (action.equals( “Green” ))
greenPanel.setBackground( Color.GREEN );greenPanel.setBackground( Color.GREEN );else if (action.equals( “White” )else if (action.equals( “White” )
whitePanel.setBackground( Color.WHITE );whitePanel.setBackground( Color.WHITE );……elseelse
System.out.println( “Unexpected action” );System.out.println( “Unexpected action” );}}……
}}
Advanced topic: sub/nested menusAdvanced topic: sub/nested menus
submenu
submenussubmenus
Similarly to adding menu items to a menu, we Similarly to adding menu items to a menu, we may also add menus to menus. (Note that may also add menus to menus. (Note that JMenuItem is a superclass of JMenu below.)JMenuItem is a superclass of JMenu below.)
Text fields and text areasText fields and text areas
Text field (JTextField)Text field (JTextField) A field that allows the user to enter a single line of A field that allows the user to enter a single line of
text.text. Ex.Ex.
JTextField name = new JTextField( 30 );JTextField name = new JTextField( 30 );……String inputString = name.getText();String inputString = name.getText();……name.setText( “fred” );name.setText( “fred” );
JTextField f2 = new JTextField( “ethel”, 30 ); //default JTextField f2 = new JTextField( “ethel”, 30 ); //default valuevalue
30 is the minimum number of visible characters (more may 30 is the minimum number of visible characters (more may be entered)be entered)
Text area (JTextArea)Text area (JTextArea)
Same as text field except it allows multiple lines.Same as text field except it allows multiple lines. Ex.Ex.
JTextArea theText = new JTextArea( 5, 20 );JTextArea theText = new JTextArea( 5, 20 );
JTextArea t2 = new JTextArea( “hello\nthere”, 5, 20 );JTextArea t2 = new JTextArea( “hello\nthere”, 5, 20 );
5 is the minimum number of visible lines.5 is the minimum number of visible lines.
20 is the minimum number of visible characters.20 is the minimum number of visible characters.
Some useful JTextComponent Some useful JTextComponent methodsmethods
public String getText()public String getText()
public boolean isEditable()public boolean isEditable()
public void setBackground ( Color theColor )public void setBackground ( Color theColor )
public void setEditable ( boolean argument )public void setEditable ( boolean argument )
public void setText ( String text )public void setText ( String text )
top related