Objecves - Washington and Lee Universitysprenkle/cs209/pre_class/20-guis.pdf · • Using the Swing...

11/3/16

1

Objec&ves• ProgrammingParadigms•  Introduc&ontoGUIsinJava

Ø Eventhandling

Nov4,2016 Sprenkle-CSCI209 1

OneMorePlugin:ProjectUsus• hLps://github.com/usus/usus-plugins/wiki• Sayshasmetricscapabili&es,buttheyweren’tworkingforme.

• Makesnicevisualrepresenta&onsofaproject’sclasses:


11/3/16

2

PROGRAMMINGPARADIGMS


ProgrammingParadigms• OurfocushasbeenObject-orientedandProceduralparadigms

• OtherparadigmsØ Event-driven

• GUIs,Webapplica&onsØ Distributed

• Webapplica&ons,Grid,CloudØ ConcurrentØ ParallelØ Aspect-oriented


Blurred lines �between paradigms,

Not completely independent

11/3/16

3

GUISINJAVA


JavaGUILibraries:AWT&Swing• AWT:AbstractWindowingToolkit

Ø OriginalGUItoolkitØ Reliesonopera&ngsystemtorenderGUIs

• Benefit:Matchlookandfeelofpla^ormØ Classesinjava.awt.*

• Swing:addedtoJava2Ø Classesinjavax.swing.*Ø ExtendsAWTØ ProvidesJavalookandfeelforapplica&ons

• Butcanpluginotherlook&feelsNov4,2016 Sprenkle-CSCI209 6

11/3/16

4

Swing&AWT• SwingdoesnotcompletelyreplaceAWT• UsingtheSwinggraphicsprogrammingmodel

Ø ImprovesperformanceØ AllowsmoreefficientdevelopmentofGUIs

• WewilluseSwingmostlyØ LeverageAWT


Swing:MadeupofComponents• Top-levelcomponents

Ø ~Hold GUI elements Ø Examples: JFrame, JWindow, JDialog, JApplet

• GUIElementsØ ~ThingsuserinteractswithØ Examples: JButton, JLabel, JMenuBar


11/3/16

5

JFRAMESANDPARENTCLASSES


Frames• Frame:Mostbasicunitofgraphicsprogramming• Exampleofacontainer

Ø AcontainercontainsotherUIcomponents

•  Atop-levelwindowØ Notcontainedwithinanotherwindow

• Swing’sJFrame classimplementsaframe


11/3/16

6

ExampleFrame


public class Game extends JFrame implements KeyListener {

public static void main(String[] args) {Game session = new Game();session.init();

}

public void init() {// Top-left corner is (0,0)// width/height: XBOUND, YBOUNDsetBounds(0, 0, XBOUND, YBOUND);// Shows the windowsetVisible(true);…

}}

FrameInheritance• Classhierarchy

• JFrameisderivedfromjava.awt.FrameØ Frame classisderivedfromContainer class• Container:anythingthatcancontainUIcomponents

Ø Lotsofmethodsavailablefromthehierarchy


11/3/16

7

Components&Containers• Component

Ø AbstractclassØ Everythingyouseeisacomponent

• Allnonmenu-relatedAWTcomponentsØ Manymethods

• Somedeprecated:becareful

• ContainerØ Concreteimplementa&onofComponentØ Baseclassofmanyclasses


Container Methods• add(Component c)• setSize

Ø Setssizeofframeinpixels

• setLocationØ Setsloca&onofframe

• Coordinatesoftop-lefcorner• setBounds

Ø Setsbothsizeandloca&onofframe• Providesinforma&onneededforsetSize andsetLocation


11/3/16

8

Window Methods• Top-levelwindow• Noborders• NoMenuBar• dispose()

Ø Closeswindowandreclaimsresourcesassociatedwithit

• toBack()Ø Sendswindowtoback,maylosefocus/ac&va&on

• toFront()Ø Bringtofront,makethisthefocusedwindow


Frame’sMethods

• Top-levelwindowwith3tleandborders• setTitle(String title)

Ø Sets&tleofframe(displayedin&tlebar)

• setResizable(boolean resizable)Ø Cantheuserresizetheframe?


11/3/16

9

AnatomyofanApplica&onGUI


JPanel

JButton

JFrame

JLabel

GUI Internal structure

JFrame

JPanel

JButton JLabel

containers

Implemen&ngaGUIComponent1.  Createit2.  Configureit3.  Addchildren(ifcontainer)4.  Addtoparent(ifnotJFrame)5.  Listentoit


order�important

11/3/16

10

Implemen&ngaGUIComponent1.  Createit

JButton b = new JButton();2.  Configureit

b.setText("press me");b.setForeground(Color.blue);

3.  Addittoparentpanel.add(b);

4.  ListentoitØ  Events:Listeners

Nov4,2016 19Sprenkle-CSCI209


JFrame

• ContainsContentPaneØ AContainer objectthatholdscomponentsyouadd,placingthemintheframe

Ø ThepartoftheframethatholdsUIcomponents

JFrame

ContentPane

11/3/16

11

BuildingaGUI1.  Create(topdown):

Ø FrameØ ContainerØ ComponentsØ Listeners

2.  Add(boLomup):Ø Listenersintocomponents

Ø ComponentsintopanelØ Panelintoframe

Container

JButton

Listener

JFrame

JLabel


Content Pane Create Ad

d

ExampleCode// create the componentsJFrame f = new JFrame("title");f.setBounds(0, 0, 100, 100);Container pane = f.getContentPane();JButton b = new JButton("press me");

// add button to panelpane.add(b);

// show the framef.setVisible(true);


11/3/16

12

MoreGUIComponents•  Choice

Ø Drop-downlist•  FileDialog

Ø Openingandsavingfiles•  List

Ø  ScrollableØ Allowsmul&pleselec&ons

•  ScrollPaneØ  scrollbars

•  TextFieldØ  Singlelineoftext

•  TextAreaØ Mul&plelinesoftext


Menus• MenuBar

Ø ThingacrosstopofframeØ Frame: setMenuBar(MenuBar mb);

• MenuØ ThedropdownpartØ AsequenceofMenuItemsØ Menu isasubclassofMenuItems,socanhavesubmenus


11/3/16

13

Prac&ce:CombiningComponents• CreateapanelwiththreebuLonsonit


ButtonPanel.java

PlacementofComponents

• HowdoesthepanelknowwheretoplaceabuLon?

• HowdoesthepanelknowwheretoplacethenextbuLon?

• Howdoesthepanelknowwheretoplaceanycomponentthatisaddedtoit?


11/3/16

14

LAYOUTMANAGERS


LayoutManagers• Javauseslayoutmanagerstoplacecomponentsinsideacontainer

• LayoutManagerautoma&callyhandlesplacementofcomponentsØ Whenacomponentisaddedtoacontainer(throughadd),layoutmanagerdecideswheretoplacethecomponent


11/3/16

15

DefaultLayoutManagers• JFrame’scontentpane:BorderLayout• JPanel’s:FlowLayout


TheFlowLayoutManager• Defaultlayoutmanagerforapanel

• Linescomponentsuphorizontallyun&lnomoreroomincontainerØ Thenstartsanewrowofcomponents

•  Ifuserresizescomponent,layoutmanagerautoma&callyreflowscomponents


11/3/16

16

TheFlowLayoutManager• Canchoosehowtoarrangecomponentsinarow

Ø Default:centereachrowØ Otherop&ons:leforrightalign

• ChangealignmentusingsetLayout

Ø Panelsettouseaflowlayoutmanagerwithrowcomponentsalignedtothelef

• Anotherconstructorhashgap andvgap forgapstoputaroundcomponents


setLayout(new FlowLayout( FlowLayout.LEFT ));

BorderLayoutManager• DefaultlayoutmanagerofthecontentpaneforJFrame

• Letsyouchoosewhereyouwanttoplaceeachcomponent


with respect to the container

Center

North

South

West East

11/3/16

17

BorderLayoutRegions

• Edgecomponentsarelaidoutfirst• Centeroccupiesremainingspace


Center

North

South

West East

BorderLayoutRules• Growsallcomponentstofillavailablespace•  Ifcontainerisresized,edgecomponentsareredrawnandcenterregionsizerecomputed

• ToaddacomponenttoacontainerusingaborderlayoutØ Ex:JFrame’scontentpane


Container contentPane = getContentPane();contentPane.add(button, BorderLayout.SOUTH);

11/3/16

18

AddingComponentsUsingaBorderLayout

•  Ifnoregionspecified,assumescenterregion

Ø Recall:borderlayoutgrowscomponenttofitspecifiedregion


Container contentPane = getContentPane();contentPane.add(button, BorderLayout.SOUTH);

What happens if we add multiple components, e.g., three buttons, without specifying a region?

ABorderLayoutLimita&on

• LastbuLonaddedgrowstocompletelyfillcenterregion

• FirsttwobuLonswerediscarded/overwriLenbyeachsubsequentlyaddedcomponent


Three

11/3/16

19

ChangingLayoutManagers• Anycontainercanuseanylayoutmanager• UsesetLayout tochangelayoutmanagerbeforeaddingcomponents


// sets layout to a new flow layout manager that// aligns row components to the left and uses a 20 pixel// horizontal separation and 20 pixel vertical separationsetLayout(new FlowLayout(FlowLayout.LEFT, 20, 20));

// sets layout to a new border layout manager that// uses a 45 pixel horizontal separation between// components (regions) and a 20 pixel vertical separationsetLayout(new BorderLayout(45, 20));

CombiningPanels• Panelsactas(smaller)containersforUIelements

• Canbearrangedinsidealargerpanelbyalayoutmanager

• Useaddi&onalpanelstocustomizelookØ CreateapanelØ AddsomebuLonstoitØ Addthatpaneltoaregionincontentpane


11/3/16

20

CombiningPanels


JButton JButton

JTextArea

CombiningPanels


North

JPanel: BorderLayout

Center

JFrame

JPanel: FlowLayout

JButtonJButton

JTextArea

11/3/16

21

UsingAddi&onalPanels• Getfairlyaccurateandpreciseplacementofcomponents

• Usenestedpanelswith


FlexibleLayout.java

Layout UseBorderLayout Contentpanesandenclosingpanels

Flow Layouts PanelscontainingbuLonsandotherUIcomponents

AnotherLayoutManager:Grid• Dividescontainerintocolumnsandrowsofequalsize,whichcollec&velyoccupytheen&recontainerregion

• RowsandcolumnsarealignedlikeatableØ Whencontainerisresized,the“cells”growand/orshrink

Ø Cellsalwaysmaintainiden&calsizes

• Example:


panel.setLayout(new GridLayout(5, 4)); // 5 rows, 4 cols

11/3/16

22

• Componentsaddedsequen3ally• 1staddaddscomponentto1strow,1stcol• 2ndaddaddscomponentto1strow,2ndcol

• Andsoforthun&l1strowisfilled• Then2ndrowbeginswiththe1stcolumn• Con&nuesun&ltheen&recontainerisfilled

AddingComponentstoaGridLayout


GridLayoutRules• Componentsareresizedtotakeupen&recell• Restric&vebutcanbeusefulforsomeapplica&ons

• Example:CreatearowofbuLonsofiden&calsize1.  Makeapanelthathasagridlayoutwithonerow2.  AddabuLontoeachcell3.  Sethoriz/vertsepara&onsobuLonsarenot

touching


11/3/16

23

LayoutManagerHeuris&cs


Left to right,

Top to bottom

c

n

s

e w

FlowLayout GridLayout

BorderLayout

none, programmer sets x,y,w,h

null

One at a time

CardLayout GridBagLayout

JButton

HANDLINGUSERINTERACTIONS


11/3/16

24

Event-DrivenProgramming• Userac&ons(e.g.,mouseclicks,keypresses),sensoroutputs,ormessagesfromotherapplica&onsdetermineflowofprogram

• Applica&onarchitecture:


while ( true ) {event = waitForEvent();handleEvent(event);

}

EventBasics

• AneventisgeneratedfromaneventsourceandistransmiLedtoaneventlistener

• EventsourcesalloweventlistenerstoregisterwiththemØ Registeredlistenerrequestseventsourcesenditseventtolistenerwheneventoccurs


Event Source

Event Listener

Event

11/3/16

25

JavaEventHandling• Alleventsareobjectsofeventclasses

Ø Derivefromjava.util.EventObject• Eventsource

Ø Sendsouteventobjectstoallregisteredlistenerswhenthateventoccurs

• ListenerØ ImplementsalistenerinterfaceØ UsesEventObjecttodetermineitsreac&ontotheevent


JavaEventHandling• Registeralistenerwithaneventsource:

• Example:

Ø Wheneveran“ac&onevent”occursonbutton,listenerisno&fied• ForbuLons,anac&oneventisabuLonclick


ActionListener listener = . . .;JButton button = new Jbutton("Click Me!");button.addActionListener(listener);

eventSourceObject.addEventListener(eventListenerObject);

11/3/16

26

ListenerObjects• AlistenerobjectmustbeaninstanceofaclassthatimplementstheappropriateinterfaceØ ForbuLons,that’sActionListener

• ListenerclassmustimplementactionPerformed(ActionEvent event)


ListenerObjectsandEventHandling• WhenauserclicksabuLon,JButton objectgeneratesanActionEvent object

• JButton callslistenerobject’sactionPerformedmethod,passinggeneratedeventobject

• Asingleeventsourcecanhavemul3plelistenerslisteningforitseventsØ SourcecallsactionPerformedoneachofitslisteners


WhichmakesJButton awhat?

11/3/16

27

AnExampleofEventHandling• SupposewewanttomakeapanelthathasthreebuLonsonitØ EachbuLonhasacolorassociatedwithitØ WhenuserclicksabuLon,backgroundcolorofpanelchangestothecorrespondingcolor

• Weneed1.  Apanelwith3buLonsonit2.  3listenerobjects,oneregisteredtolistenfora

buLon’sevents


Objecves - Washington and Lee Universitysprenkle/cs209/pre_class/20-guis.pdf · • Using the Swing...

Documents

Transcript of Objecves - Washington and Lee Universitysprenkle/cs209/pre_class/20-guis.pdf · • Using the Swing...