Graphical User Interface (GUI)

Graphical User Interface (GUI)

1. Interaction channel between the user and the system

2. Key Factor: Usability

   • Intuitive Clear Friendly

3. Tech & Lang. to build GUI

   • Standalone (Computer) - JAVA Swing
   • Web (Browser) - HTML, CSS, JS
   • Mobile (Cellphone) - IOS, Android

4. Containers

   • The Frame - JFrame
     • Main container for all graphical elements
       • Key: Minimize Close Move Maximize
     • setSize(width, height);
     • setResizable(boolean input);
     • setDefaultCloseOperation(EXIT_ON_CLOSE);
     • setVisible(boolean input);
     • add(GUI component);
   • The Panels
     • Creates divisions within the Frame
       • Groups elements based on purpose for usability

5. Graphical Distributors (Layouts)

   • BorderLayout (Think Compass Rose)
     • setLayout(new BorderLayout());
     • add(GUI component, BorderLayout.*insert a direction*);
   • GridLayout (Think Matrix)
     • setLayout(new GridLayout(rows, columns));
     • add(GUI component);

6. Messages' Management

   • Error Message
     • Warning Message
       • Info Message

7. Data Input

   • JOptionPane

Bilder und Dateien der Mindmap