Graphical User Interface (GUI):

Graphical User Interface (GUI):

1. Definition: the interaction channel between the user and the system

   • The user interacts with the view through actions and returns outputs. The view communicates with the controller and the controller with the model
     • the view is our GUI
       • the view has buttons: which are used to interact with the view, etc.
         • the view uses labels to identify inputs and outputs
           • for example inputs for username and password
           • the view also utilizes images to communicate with the user without supplying words
   • It can stand alone(running in your computer with 1 client)
     • can be used in a web brouser (HTML,CSS,JS)
       • or can be used as mobile through a cellphone
   • It is supposed to be intuitive, clear, and friendly for efficient and usable for anyone

2. Container: The Frame

   • this supplies the main container for all the graphical elements within the app
     • examples: minimize, close, move, maximize
   • what are the basic assets of the frame
   • JFrame
     • some methods used in Frames using JFrame
       • setSize, setResizable, setDefaultCloseOperation(EXIT_ON_CLOSE), setVisible(boolean input, and add(GUI component)
   • Container: The Panels
     • they are used to contain (with similar elements) and divide GUI elements within the Frame
       • grouped based on their purpose, allowing for the user to use effiecently
     • Graphical Distributors: Layouts
       • used to organize the panels/groups
         • ex. setLayout(...)
         • BorderLayout
           • organizes based on a compass
           • up to 5 elements: North, east, South, West, & Center
             • ex. setLayout(new BorderLayout());
               • add(GUI component, BorderLayout,North);
         • GridLayout
           • organizes based on a matrix
           • gridlike elements: set in columns and rows
             • ex. setLayout(new GridLayout(rows,columns));
               • add(GUI component);

3. Interaction

   • is the channel between the user and the entire system
   • inactive panels
     • they are used to display information and do not allow for interaction witht he use
   • active panels
     • the user can interact being able to access and act

4. JOptionPane

   • Messages can also be sent to the user through panes
     • ex. Error, Warning, and Informative messages
       • ex. String clave = jOptionPane.showInputDialog( this, "Input your password")
         • if( password != null) { //....}