Graphical User Interface (GUI)

Graphical User Interface (GUI)

1. is the interaction channel between the user and the system

   • ⬅️ View ➡️
     • User ➡️
     • ⬅️ Controller ➡️
       • ⬅️ Model

2. Technologies and languages that help to build GUIs

   • Standalone
     • runs in a computer (1 client)
       • JAVA Swing (in this course)
   • Web
     • runs in a browser
       • HTML, CSS, JavaScript
   • Mobile
     • runs in a cellphone
       • IOS, Android

3. Key factor: Usability

   • Gestalt Principles: Intuitive, Clear, Friendly

4. Components

   • Elements
     • Buttons, labels, images, etc.
   • Containers
     • Frame
       • The main container (minimize, close, move, maximize)
     • Panels
       • Contains, divides and organizes elements within the Frame based on their purpose

5. Graphical Distributors (Layouts)

   • Border
     • North, South, East, West, Center
   • Grid
     • Rows and columns

6. Interaction

   • Active
     • Buttons, forms, etc.
   • Inactive
     • Images, text

7. Messages to the user

   • Warning
   • Error
   • Information
   • Prompt to input