Introduction to the Graphical User Interface

Introduction to the Graphical User Interface

1. Main interaction channel between the user and system. Does not need to be standalone.

   • Concept or term that refers to whatever is graphically represented
     • The GUI interface corresponds to the VIEW; elements visible or front-end to the user
       • User can work on an action in the system and there will be information displayed
       • controller package will provide functional requirements that are going to access the model and respond to the context
       • JAVA Swing (standalone application to be used in course)
         • Set of libraries and packages that offer graphical user elements that can be displayed and orgainized
           • Build GUi to respond to functional and nonfunctional requirements
             • Usability is important, apply Gestalt Principles
               • Gestalt principles or laws are rules that describe how the human eye perceives visual elements. These principles aim to show how complex scenes can be reduced to more simple shapes.
                 • Applications should be intuitive, clear, and friendly
             • Elements
               • Buttons Labels Images/Icons
             • Containers
               • In charge of grouping
                 • JFrame Class methods
                   • Main container is the frame or window. Frame holds everything; with basic actions to minimize, maximize, and close
                     • setSize(width, height) : set frame width and height
                       • setResizable( boolean input i.e. true/false): sets if user can modify frame size or not.
                         • setDefaultCloseOperation(EXIT_ON_CLOSE): tells app to end execution when clicking "exit"
                           • setVisible(boolean input i.e. true/false): sets frame as visible/invisible to user
                             • add(GUI component): adds element/container component to frame
                 • Panels
                   • Used to contain and divide GUI elements within the frame. Group GUI elements based on purpose
                     • Can be active or inactive panels
             • Layouts
               • Graphical distributors. Works with the container to organize the group
                 • Every container needs specifications from a layout to organize the elements
                   • setLayout();
                 • 2 distributors to be used in this class:
                   • BorderLayout
                     • GridLayout
                       • matrix where you need to specify number of rows and columns
                         • setLayout(new GridLayout(rows, columns))
                           • add(GUI component) can only be added in the order of the cell numbers i.e. 1,2,3 etc.
                     • Element organized by North, South, East, West, and Center.
                       • Can only have up to 5 elements but the element for each container can have more elements inside it
                         • setLayout(new BorderLayout())
                           • add(GUI component(container/element), BorderLayer.NORTH)
             • Use popup panes to display error warning and info messages as request data input from user