GUI: Graphical User Interface

GUI: Graphical User Interface

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

   • It can be standalone (running on your computer), JAVA Swing
     • Web (runs in a browser), HTML, CSS, JS. For example, Facebook
       • Mobile (runs in your cellphone), IOS, Android
   • Key Factor!! Usability
     • Gestalt Principles: intuitive, clear, friendly
   • The user passes actions to the interaction channel, and the GUI responds to the user with outputs
     • There are both active and inactive panels
       • Inactive: for the user to view, no interaction (ex. picture)
       • Active: a panel that the user can interact with

2. Graphical Elements

   • Buttons, Labels, Images...

3. Containers

   • The Frame
     • Main container for all the graphical elements of our app
       • Key: Minimize, Close, Move, Maximize...
         • JFrame Class:
           • setSize(width, height): sets the frame's width and height
           • setResizable(boolean): sets if the user can modify the frame's size
           • setDefaultCloseOperation(EXIT_ON_CLOSE): the app will end execution (destroy memory) when clicking the exit button of the frame
           • setVisible(boolean): sets the frame and it's components visible to the user
           • add(GUI component): adds GUI element or container to the Frame
   • The Panels
     • Used to contain and divide GUI elements within the Frame
       • Group GUI elements based on purpose to make accessibility easier

4. Layouts (Graphical Distributors)

   • Each container needs a specific layout to organize its elements
     • BorderLayout
       • Organizes based on compass rose, space for five elements
       • Syntax: setLayout(new BoarderLayout());
         • add(GUI component, BorderLayout.NORTH);
     • GridLayout
       • Organizes like a matrix
       • Syntax: setLayout(newGridLayout(rows, columns));
         • add(GUI component);

5. Message Management

   • Error messages, Warning Messages, Informational Messages

6. Data Input

   • To get information from the user...
     • String x = JOptionPane.showInputDialog(this, "Message")

Images and files in the map