Graphical User Interface

Graphical User Interface

1. Interaction channel between user and system

2. GUI Technologies

   • Standalone
     • Runs in your computer
   • Web
     • Runs in a web browser (can also be used in a mobile browser)
   • Mobile
     • Runs on a mobile device (typically in an app)
   • To build a user-friendly GUI, there are several technologies and languages which can be used

3. GUI Elements

   • Buttons
     • elements which can be clicked on
   • Labels
     • elements which label sections
   • Images
     • pictures and diagrams to assist user or provide decoration

4. Containers

   • The Frame
     • Main container for all GUI elements
     • Can control using Jframe methods
       • setSize(width, height)
         • sets frame width and height
       • setResizable(boolean)
         • sets if the user can modify the size
       • setDefaultCloseOperation(EXIT_ON_CLOSE)
         • tells the app if the process will terminate when the exit button is clicked
       • setVisible(boolean)
         • sets the frame visible/invisible to user
       • add(GUI component)
         • adds a GUI component
   • Panels
     • Divides GUI elements in frame

5. Layout

   • Specifies how containers organize their elements
   • BorderLayout
     • Organizes based on compass rose
     • There are 5 sections: North, South, East, West, Center
   • GridLayout
     • Organizes based on grid
     • You specify rows and columns of grid for layout
     • Adds components sequentially

6. Defines which sections respond to user input and which sections display information to user

   • Inactive
     • Displays info to user
   • Active
     • Responds to input from user
   • Messages
     • Can show messages displaying important info to user such as errors and confirmations