Graphical)User)Interfaces)User)interfaces) • Command)Line)Interface)(CLI)) – Good)for)experts)...

21
Graphical User Interfaces CSCI 136: Fundamentals of Computer Science II • Keith Vertanen • Copyright © 2011 CSCI 136: Fundamentals of Computer Science II • Keith Vertanen • Copyright © 2014

Transcript of Graphical)User)Interfaces)User)interfaces) • Command)Line)Interface)(CLI)) – Good)for)experts)...

Page 1: Graphical)User)Interfaces)User)interfaces) • Command)Line)Interface)(CLI)) – Good)for)experts) – Automang)thing)viascripts) (e.g.)DOS)batch)files)) – Easy)to)use)remotely)(e.g.)over

Graphical  User  Interfaces  

CSCI  136:  Fundamentals  of  Computer  Science  II    •    Keith  Vertanen    •    Copyright  ©  2011  CSCI  136:  Fundamentals  of  Computer  Science  II    •    Keith  Vertanen    •    Copyright  ©  2014  

Page 2: Graphical)User)Interfaces)User)interfaces) • Command)Line)Interface)(CLI)) – Good)for)experts) – Automang)thing)viascripts) (e.g.)DOS)batch)files)) – Easy)to)use)remotely)(e.g.)over

Overview  

2  

•  Command  line  versus  GUI  apps  •  Java  GUI  applica;ons  –  JFrame  – Layout  managers  – Popular  widgets  

•  Events  – Ac;on  listeners  –  Inner  listener  classes  

•  Drawing  things  (without  StdDraw)  –  JPanel  

         

 

Page 3: Graphical)User)Interfaces)User)interfaces) • Command)Line)Interface)(CLI)) – Good)for)experts) – Automang)thing)viascripts) (e.g.)DOS)batch)files)) – Easy)to)use)remotely)(e.g.)over

User  interfaces  •  Command  Line  Interface  (CLI)  – Good  for  experts  – Automa;ng  thing  via  scripts  (e.g.  DOS  batch  files)  – Easy  to  use  remotely  (e.g.  over  SSH)  – Low  resource  consump;on  

•  Graphical  User  Interface  (GUI)  – Good  for  novices  – Difficult  to  automate  (e.g.  macros  in  Office)  

– Good  for  presen;ng  mul;ple  views,  graphical  data  – Remote  access  difficult  (e.g.  VNC,  Remote  Desktop)  – High  resource  consump;on  

3  

Page 4: Graphical)User)Interfaces)User)interfaces) • Command)Line)Interface)(CLI)) – Good)for)experts) – Automang)thing)viascripts) (e.g.)DOS)batch)files)) – Easy)to)use)remotely)(e.g.)over

Java  GUIs  •  Thus  far:  StdDraw  – Good  for  drawing  – But  no  GUI  widgets:  

•  BuVons  •  Combo  boxes  •  Text  fields    •  Dialog  boxes  

•  Today:  doing  it  ourselves  – Use  the  Java  API  to  create  a  GUI  – Crea;ng  common  widgets  – Crea;ng  an  area  to  draw  things  on  –  In  prac;ce,  oWen  done  using  a  GUI  builder  

4  

Page 5: Graphical)User)Interfaces)User)interfaces) • Command)Line)Interface)(CLI)) – Good)for)experts) – Automang)thing)viascripts) (e.g.)DOS)batch)files)) – Easy)to)use)remotely)(e.g.)over

Top-­‐level  container  •  JFrame  – Container  that  holds  all  the  GUI  elements  – Created  by  main()  method  

5  

Page 6: Graphical)User)Interfaces)User)interfaces) • Command)Line)Interface)(CLI)) – Good)for)experts) – Automang)thing)viascripts) (e.g.)DOS)batch)files)) – Easy)to)use)remotely)(e.g.)over

JFrame  example  •  GUI  with  a  single  giant  buVon  – BuVon  doesn't  do  anything  (yet)  

6  

import  javax.swing.*;    public  class  SimpleButton    {        public  static  void  main(String  []  args)          {              JFrame  frame  =  new  JFrame();              JButton  button  =  new  JButton("click  me!");              frame.getContentPane().add(button);                          frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);                frame.setSize(300,300);              frame.setVisible(true);        }  }  

Create  the  frame  and  a  buVon.  Add  the  buVon  to  the  content  por;on  of  the  frame.  

Makes  the  X  box  close  everything.  

Make  a  reasonable  size  and  actually  display.  

Page 7: Graphical)User)Interfaces)User)interfaces) • Command)Line)Interface)(CLI)) – Good)for)experts) – Automang)thing)viascripts) (e.g.)DOS)batch)files)) – Easy)to)use)remotely)(e.g.)over

Adding  mul;ple  things  •  Layout  manager  – Handles  arranging  mul;ple  things  in  the  frame  

7  

•  BorderLayout  –  5  regions:  NORTH,  SOUTH,  EAST,  

WEST,  CENTER  –  Default  type  for  a  frame      

•  FlowLayout  –  LeW  to  right  –  Creates  mul;ple  rows  if  needed  –  Default  type  for  a  panel  (more  on  

panels  in  a  bit)  

MultiButtons.java  

MultiButtonsFlow.java  

Page 8: Graphical)User)Interfaces)User)interfaces) • Command)Line)Interface)(CLI)) – Good)for)experts) – Automang)thing)viascripts) (e.g.)DOS)batch)files)) – Easy)to)use)remotely)(e.g.)over

Adding  mul;ple  things  

8  

•  BoxLayout  –  Ver;cal  stack  of  components  

•  BoxLayout.Y_AXIS  –  Horizontal  row    

•  BoxLayout.X_AXIS  – Won't  rearrange  if  you  resize  window  

MultiButtonsBox.java  

Page 9: Graphical)User)Interfaces)User)interfaces) • Command)Line)Interface)(CLI)) – Good)for)experts) – Automang)thing)viascripts) (e.g.)DOS)batch)files)) – Easy)to)use)remotely)(e.g.)over

Handy  JFrame  methods  •  Some  JFrame  methods:  

 

9  

Method   Descrip.on  JFrame()   Default  constructor,  a  window  with  no  name  JFrame(String  title)   Constructor,  give  the  window  a  ;tle  setLayout(LayoutManager  mgr)   Change  the  layout  manager  for  the  frame  setDefaultCloseOperation(int  op)   What  to  do  when  the  frame  is  closed  setSize(int  width,  int  height)   Sets  to  the  given  width  and  height  setVisible(boolean  b)   Show  or  hide  depending  on  value  of  b  getContentPane()   Returns  the  content  pane  where  we  add  

things  setTitle(String  s)   Change  the  ;tle  of  the  window  

Page 10: Graphical)User)Interfaces)User)interfaces) • Command)Line)Interface)(CLI)) – Good)for)experts) – Automang)thing)viascripts) (e.g.)DOS)batch)files)) – Easy)to)use)remotely)(e.g.)over

Handy  JBuVon  methods  •  Some  JBuVon  methods:  

 

10  

Method   Descrip.on  JButton(String  s)   Constructor  a  new  buVon  with  the  given  label  setText(String  s)   Change  the  buVon’s  label  setEnabled(boolean  b)   Enables  or  disables  the  buVon  setPreferredSize(Dimension  d)   Tell  layout  manager  how  big  you  would  like  

the  buVon  to  be  

Page 11: Graphical)User)Interfaces)User)interfaces) • Command)Line)Interface)(CLI)) – Good)for)experts) – Automang)thing)viascripts) (e.g.)DOS)batch)files)) – Easy)to)use)remotely)(e.g.)over

Widget'o'rama  

11  Widgets.java  

JButton  

JLabel  

JTextField  

JCheckBox  

JTextArea  

JSlider  

JSeparator  

JRadioButton  ButtonGroup  

JComboBox  

Page 12: Graphical)User)Interfaces)User)interfaces) • Command)Line)Interface)(CLI)) – Good)for)experts) – Automang)thing)viascripts) (e.g.)DOS)batch)files)) – Easy)to)use)remotely)(e.g.)over

GUI  events  •  Events  – Something  triggers  

•  Usually  the  user  – Examples:    

•  User  clicks  buVon  •  Moves  the  mouse  •  Changing  selec;on  in  a  combo  box  list  

12  

Page 13: Graphical)User)Interfaces)User)interfaces) • Command)Line)Interface)(CLI)) – Good)for)experts) – Automang)thing)viascripts) (e.g.)DOS)batch)files)) – Easy)to)use)remotely)(e.g.)over

Event  listeners  and  sources  •  Event  listener  – Code  called  when  an  event  occurs  – Done  by  implemen;ng  a  Java  interface  

• Which  one  depends  on  what  you  care  about  

– Register  listener  with  the  object  •  Event  source  – The  object  that  generated  the  event  

•  e.g.  the  JBuVon  object  – Normally  you'll  be  handling  events  

•  Not  genera;ng  them  

13  

Page 14: Graphical)User)Interfaces)User)interfaces) • Command)Line)Interface)(CLI)) – Good)for)experts) – Automang)thing)viascripts) (e.g.)DOS)batch)files)) – Easy)to)use)remotely)(e.g.)over

BuVon  counter  example  •  Single  buVon  window  – Every  ;me  buVon  is  pushed,  increment  counter  – Display  counter  as  label  of  the  buVon  

14  

Page 15: Graphical)User)Interfaces)User)interfaces) • Command)Line)Interface)(CLI)) – Good)for)experts) – Automang)thing)viascripts) (e.g.)DOS)batch)files)) – Easy)to)use)remotely)(e.g.)over

15  

import  javax.swing.*;  import  java.awt.event.*;    public  class  ButtonCount  implements  ActionListener  {        private  int  count  =  0;        private  JButton  button;          public  void  actionPerformed(ActionEvent  event)        {              count++;              button.setText("count  =  "  +  count);        }          public  void  go()        {              JFrame  frame  =  new  JFrame();              button  =  new  JButton("count  =  "  +  count);              frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);              frame.getContentPane().add(button);              frame.setSize(300,300);              frame.setVisible(true);              button.addActionListener(this);        }          public  static  void  main(String  []  args)          {              ButtonCount  gui  =  new  ButtonCount();              gui.go();          }  }  

Page 16: Graphical)User)Interfaces)User)interfaces) • Command)Line)Interface)(CLI)) – Good)for)experts) – Automang)thing)viascripts) (e.g.)DOS)batch)files)) – Easy)to)use)remotely)(e.g.)over

Mul;ple  listeners  •  Listening  for  mul;ple  buVons  – Single  actionPerformed()method  

•  Use  the  passed  in  event  object    •  Test  which  buVon  object  triggered  the  method  

– Mul;ple  inner  classes  •  Each  classes  implements  actionListener  •  Each  has  its  own  actionPerformed()  method  

16  

Page 17: Graphical)User)Interfaces)User)interfaces) • Command)Line)Interface)(CLI)) – Good)for)experts) – Automang)thing)viascripts) (e.g.)DOS)batch)files)) – Easy)to)use)remotely)(e.g.)over

Single  listener  approach  

17  

public  class  FarmListener  implements  ActionListener  {        private  JButton  buttonCow;        private  JButton  buttonDog;        private  JButton  buttonCat;          public  void  actionPerformed(ActionEvent  event)        {                        if  (event.getSource()  ==  buttonCow)  StdAudio.play("cow.wav");              else  if  (event.getSource()  ==  buttonDog)  StdAudio.play("dog.wav");              else  if  (event.getSource()  ==  buttonCat)  StdAudio.play("cat.wav");        }          public  void  go()        {              ...              buttonCow.addActionListener(this);              buttonDog.addActionListener(this);              buttonCat.addActionListener(this);        }        ...  }  

Page 18: Graphical)User)Interfaces)User)interfaces) • Command)Line)Interface)(CLI)) – Good)for)experts) – Automang)thing)viascripts) (e.g.)DOS)batch)files)) – Easy)to)use)remotely)(e.g.)over

Inner  listener  approach  

18  

public  class  FarmInner  {        private  JButton  buttonCow;        private  JButton  buttonDog;        private  JButton  buttonCat;          class  CowListener  implements  ActionListener        {              public  void  actionPerformed(ActionEvent  event)  {  StdAudio.play("cow.wav");  }        }        class  DogListener  implements  ActionListener        {              public  void  actionPerformed(ActionEvent  event)  {  StdAudio.play("dog.wav");  }        }        class  CatListener  implements  ActionListener        {              public  void  actionPerformed(ActionEvent  event)  {  StdAudio.play("cat.wav");  }        }          public  void  go()        {              ...              buttonCow.addActionListener(new  CowListener());              buttonDog.addActionListener(new  DogListener());              buttonCat.addActionListener(new  CatListener());        }        ...  }  

Page 19: Graphical)User)Interfaces)User)interfaces) • Command)Line)Interface)(CLI)) – Good)for)experts) – Automang)thing)viascripts) (e.g.)DOS)batch)files)) – Easy)to)use)remotely)(e.g.)over

Panels  •  JPanel  – Purpose  1:  Container  for  other  widgets  – Purpose  2:  Place  to  draw  lines,  circles,  images,  etc.  

•  Like  StdDraw  – Needs  to  be  added  to  a  JFrame  – A  class  that  extends  JPanel,  drawing  done  by:  

•  public  void  paintComponent(Graphics  g)  •  Called  automa;cally  when  needed    

–  e.g.  window  resized  •  Or  by  calling  repaint()  on  JFrame  

19  

Page 20: Graphical)User)Interfaces)User)interfaces) • Command)Line)Interface)(CLI)) – Good)for)experts) – Automang)thing)viascripts) (e.g.)DOS)batch)files)) – Easy)to)use)remotely)(e.g.)over

20  

public  class  Panel    {        public  static  void  main(String  []  args)          {              JFrame  frame  =  new  JFrame();              MyDrawPanel  panel  =  new  MyDrawPanel();              frame.getContentPane().add(BorderLayout.CENTER,  panel);              frame.setSize(300,  300);              frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);              frame.setVisible(true);        }  }  

public  class  MyDrawPanel  extends  JPanel    {        public  void  paintComponent(Graphics  g)          {              g.setColor(Color.orange);              g.fillRect(20,50,100,100);                g.setColor(new  Color(1.0f,  0.0f,  1.0f));              g.drawLine(0,  0,  100,  100);                Image  image  =  new  ImageIcon("cat.jpg").getImage();              g.drawImage(image,  150,  150,  this);        }  }  

Page 21: Graphical)User)Interfaces)User)interfaces) • Command)Line)Interface)(CLI)) – Good)for)experts) – Automang)thing)viascripts) (e.g.)DOS)batch)files)) – Easy)to)use)remotely)(e.g.)over

Summary  •  Building  Java  GUIs  –  JFrame  basis  for  GUI  – Choice  of  layout  manager  

• We  looked  at  just  three:    –  BorderLayout,  FlowLayout,  BoxLayout  

•  Handles  where  widgets  such  as  buVons  appear  – Event  handling  

• Widgets  trigger  events    •  No;fy  registered  listeners  

–  Single  listener  that  handles  mul;ple  widget  –  Separate  inner  class  for  each  widget  

– Drawing  primi;ve  shapes,  images  •  Create  a  class  that  extends  JPanel  

   

21  


Translation by Iterative Collaboration between Monolingual ...Information interfaces and presentation (e.g., HCI): Miscellaneous 1 INTRODUCTION An enormous potential exists for solving

Translation by Iterative Collaboration between Monolingual ...Information interfaces and presentation (e.g., HCI): Miscellaneous 1 INTRODUCTION An enormous potential exists for solving

The Department of Hidden Stories: Playful Digital Storytelling for ...€¦ · H.5.m. Information interfaces and presentation (e.g., HCI): Miscellaneous. INTRODUCTION We describe

The Department of Hidden Stories: Playful Digital Storytelling for ...€¦ · H.5.m. Information interfaces and presentation (e.g., HCI): Miscellaneous. INTRODUCTION We describe

Canvas Presentations in the Wild - RWTH Aachen University · H.5.2 [Information Interfaces and Presentation (e.g., HCI)]: User Interfaces—Graphical User Interfaces (GUI) Introduction

Canvas Presentations in the Wild - RWTH Aachen University · H.5.2 [Information Interfaces and Presentation (e.g., HCI)]: User Interfaces—Graphical User Interfaces (GUI) Introduction

Trafoguard reliable moniToring of Transformer oPeraTing ...€¦ · 7 Trafoguard® – inTerfaces. various physical interfaces (e.g. rJ 45 or fiber optic) are available for the iec61850

Trafoguard reliable moniToring of Transformer oPeraTing ...€¦ · 7 Trafoguard® – inTerfaces. various physical interfaces (e.g. rJ 45 or fiber optic) are available for the iec61850

Design and Display of Abstract Information in Desktop FINA.eprints.cs.vt.edu/archive/00000672/01/Design_and... · design of multimedia interfaces and presentation scripting- e.g.

Design and Display of Abstract Information in Desktop FINA.eprints.cs.vt.edu/archive/00000672/01/Design_and... · design of multimedia interfaces and presentation scripting- e.g.

Rethinking RFID: Awareness and Control For Interaction ...grouplab.cpsc.ucalgary.ca/grouplab/uploads/... · H5.m. Information interfaces and presentation (e.g., HCI): Miscellaneous.

Rethinking RFID: Awareness and Control For Interaction ...grouplab.cpsc.ucalgary.ca/grouplab/uploads/... · H5.m. Information interfaces and presentation (e.g., HCI): Miscellaneous.

Towards a Framework for Collaborative Video Surveillance ...susumus.com/files/pubs/cscw2016_paper.pdf · H.5.3 [Information interfaces and presentation (e.g., HCI)]: Computer-supported

Towards a Framework for Collaborative Video Surveillance ...susumus.com/files/pubs/cscw2016_paper.pdf · H.5.3 [Information interfaces and presentation (e.g., HCI)]: Computer-supported

Prof. Alessandro De Luca - uniroma1.itdeluca/rob1_en/13_TrajectoryPlanningJoints.pdf · Prof. Alessandro De Luca. Trajectory planner interfaces external sensors ... can be used, e.g.,

Prof. Alessandro De Luca - uniroma1.itdeluca/rob1_en/13_TrajectoryPlanningJoints.pdf · Prof. Alessandro De Luca. Trajectory planner interfaces external sensors ... can be used, e.g.,

Coco’s Videos: An Empirical Investigation of Video-Player ...faculty.washington.edu/alexisr/CocosVideos.pdf · H.5.m. Information interfaces and presentation (e.g., HCI): Miscellaneous;

Coco’s Videos: An Empirical Investigation of Video-Player ...faculty.washington.edu/alexisr/CocosVideos.pdf · H.5.m. Information interfaces and presentation (e.g., HCI): Miscellaneous;

Human-computer interaction as science - Nottinghampszsr/files/reeves-2015-hci-as-science.pdf · Human-computer interaction as science ... Information interfaces and presentation (e.g.,

Human-computer interaction as science - Nottinghampszsr/files/reeves-2015-hci-as-science.pdf · Human-computer interaction as science ... Information interfaces and presentation (e.g.,

Java 8 Functional Interfaces - Vanderbilt University · •Recognize foundational functional programming features in Java 8, e.g., •Lambda expressions •Method & constructor references

Java 8 Functional Interfaces - Vanderbilt University · •Recognize foundational functional programming features in Java 8, e.g., •Lambda expressions •Method & constructor references

12th RDMA CONTAINERS UPDATE - OpenFabrics Alliance · • Analogous to macvlan ! If above properties don’t provide a unique namespace • (e.g. when creating multiple interfaces

12th RDMA CONTAINERS UPDATE - OpenFabrics Alliance · • Analogous to macvlan ! If above properties don’t provide a unique namespace • (e.g. when creating multiple interfaces

based on OPC UA · Past/current interfaces between machines: EUROMAP plugs Standardised interfaces » For specific machine combinations (e.g. injection moulding machine –robot,

based on OPC UA · Past/current interfaces between machines: EUROMAP plugs Standardised interfaces » For specific machine combinations (e.g. injection moulding machine –robot,

GENIUS: A Generator for Graphical User Interfaces · GENIUS: a generator for graphical user interfaces 185 and it is easy to involve non-programmers into the process e.g. application

GENIUS: A Generator for Graphical User Interfaces · GENIUS: a generator for graphical user interfaces 185 and it is easy to involve non-programmers into the process e.g. application

MAGIC THipPro€¦ · Slot 1: LAN 3/4 2 additional Ethernet interfaces Flexible use e.g. for control, VoIP, Ember+, DHD Set Logic, SNMP Slot 2: DANTE 32 channels 2 Ethernet interfaces

MAGIC THipPro€¦ · Slot 1: LAN 3/4 2 additional Ethernet interfaces Flexible use e.g. for control, VoIP, Ember+, DHD Set Logic, SNMP Slot 2: DANTE 32 channels 2 Ethernet interfaces

NetScalerAutomaon - virtuEs.IT · 2015. 11. 15. · Agenda)) "!Introduc*on! "!RESTful!APIs!&!NITRO! "!PuppetNetScaler!Module! "!Automang!NetScaler!Configuraons! "!NetScaler!System!sengs!

NetScalerAutomaon - virtuEs.IT · 2015. 11. 15. · Agenda)) "!Introduc*on! "!RESTful!APIs!&!NITRO! "!PuppetNetScaler!Module! "!Automang!NetScaler!Configuraons! "!NetScaler!System!sengs!

SkyAnchor: Optical Design for Anchoring Mid-air Images ... · H.5.2 Information Interfaces and Presentation (e.g., HCI): User Interfaces. INTRODUCTION Mixed Reality (MR) has been

SkyAnchor: Optical Design for Anchoring Mid-air Images ... · H.5.2 Information Interfaces and Presentation (e.g., HCI): User Interfaces. INTRODUCTION Mixed Reality (MR) has been

You move, you move me: Exploring Lifelikeness in ...€¦ · H.5.m [Information interfaces and presentation (e.g., HCI)]: User Interfaces { Haptic I/O, Input Devices and strategies,

You move, you move me: Exploring Lifelikeness in ...€¦ · H.5.m [Information interfaces and presentation (e.g., HCI)]: User Interfaces { Haptic I/O, Input Devices and strategies,

IPv6 in Mobile Networks · IPv6 in Mobile Networks ... LAN (e.g. 802.11) and WAN (e.g. WCDMA/GSM/CDMA2k) uDifferent characteristics for each ... Network Internal Interfaces: Gn/Gp,

IPv6 in Mobile Networks · IPv6 in Mobile Networks ... LAN (e.g. 802.11) and WAN (e.g. WCDMA/GSM/CDMA2k) uDifferent characteristics for each ... Network Internal Interfaces: Gn/Gp,

Defects and Interfaces in Peridynamicssasilli/usacm-tampa-silling-2014.pdf · • e.g., Strain-hardening viscoplastic (Foster & Chen, 2010.) • Classical material models with the

Defects and Interfaces in Peridynamicssasilli/usacm-tampa-silling-2014.pdf · • e.g., Strain-hardening viscoplastic (Foster & Chen, 2010.) • Classical material models with the