SlideServe
Menu
Préférences
© SlideServe · v2026

Java Graphical User Interface Building: HCI Approach

burton-brennan avatar
32 diapositives · 430 Views · Nov 08, 2014

Learn human-computer interaction and Java GUI design, implementation, & client technologies at University of Belgrade's Faculty of Mathematics. Explore functional models, UML, UX storyboards, JavaFX, prototyping, design patterns, data transfer, observer pattern, and client technologies. Discover GUI implementation details, separating presentation elements, data transfer objects, observer pattern, and various client technologies such as form-based, web-based, and mobile. Gain insights into Java GUI building trends and HCI practicalities.

Java Graphical User Interface Building: HCI Approach - slide 1
01 / 32Java Graphical User Interface Building: HCI Approach
1 / 17

Télécharger la présentation

Java Graphical User Interface Building: HCI Approach
Une image / un lien ci-dessous est fourni (tel quel) pour télécharger la présentation

Politique de téléchargement : le contenu du site vous est fourni TEL QUEL pour votre information et votre usage personnel ; il ne peut être vendu, concédé sous licence ni partagé sur d’autres sites sans l’accord de son auteur.Le contenu vous est fourni TEL QUEL, pour votre information et votre usage personnel uniquement. Téléchargez la présentation en cliquant sur ce lien. Lors du téléchargement, si vous ne parvenez pas à télécharger une présentation, l’éditeur a peut-être supprimé le fichier de son serveur.Pendant le téléchargement, si vous ne parvenez pas à obtenir une présentation, le fichier a peut-être été supprimé par l’éditeur.

F I N

Plus de contenu associé

Transcription de la présentation
  1. University of Belgrade, Faculty of Mathematics Human-Computer Interaction and Java Graphical User Interface Building AleksandarKartelj kartelj@math.rs

  2. Outline • Introduction • Functional models for GUI, UML… • GUI Design (Java) • Implementation details • Clients and technologies • Concluding remarks

  3. Resources • Kraemer, Elieen, A Java-based Course in Human-Computer Interaction, PDPTA, 2000. • Lazar, Johathan, Jinjuan Heidi Feng, and Harry Hochheiser, Research Methods in Human-Computer Interaction, Wiley.com, 2010. • Marinilli, Mauro et al., Professional Java User Interfaces, New York: John Wiley & Sons, Inc., 2006. • Weaver, James et al., Pro JavaFX 2: A Definitive Guide to Rich Clients with Java Technology, Apress, 2012. • Programming Paradigms Course, Faculty of Mathematics, University of Belgrade.

  4. Introduction • 1980s shifts in visual technology: • raster graphics, • specialized graphic memories, processors • I/O devices • But, GUI design issues remained: • User happiness • Effectiveness • Complexity • …

  5. Design perspective • User-centric vs development-centric design • Focusing on human details is critical: • Perception • Memory • Learning capabilities • Central issues: • User • Task

  6. Functional models

  7. Standard abstract UI model

  8. Layers

  9. Team

  10. Early design phase • UML use case diagrams • Typical (happy path) scenario analysis

  11. Lifecycle approaches • Rational Unified Process (RUP) • User experience (UX) storyboards: enriching use cases with GUI design info • Extreme programming and agile approaches • Evolutionary prototyping

  12. GRAPHICAL User interface design

  13. Skipping theoretical parts • Short term memory and cognitive modelling • System response time and user • Compromising between human control and automation • Presenting the user with internal state of application

  14. User-centered design Single rule: “Know the user.”

  15. GUI example

  16. Component costs

  17. Design guidelines

  18. Iterative development • Prototyping • Refactoring • User interface testing • Software testing • Usability testing • Profiling

  19. Prototyping

  20. Design patterns inside Java GUI Implementation details

  21. Java GUI underlying patterns

  22. Separating Presentation • Elements that need to be separated: • Look and Feel (how the components are drawn) • Some interaction styles (one or two clicks) • Fonts • Color and themes • Provided by Swing by pluggable look and feel • SWT and AWT enforce certain modularization • JavaFX uses separate FXML source files

  23. Data Transfer Object (Data I/O) • Holds business data in transactions between service providers and clients • Single method to send and receive DTO • Decreases bandwidth • Simplifies communication • Usually contains only necessary information

  24. Observer Pattern (Control) • Event-based communication • Publish and subscribe mechanism

  25. Form-based, web-based, mobile clients CLIENTS AND Technologies

  26. Form-based rich clients (1) • Microsoft technologies (Window Forms), Flash (Flex), Java based,… • Java differences: • Full object-oriented approach • Multi-platform execution • Highly collaborative community • JRE • SWT sacrifices a part of portability for performances

  27. Form-based rich clients (2) • Usual strategy: • Content first • Data second (simulate moving back and forth) • Plain Old Java Object (POJO) object • Commands third • AWT • Swing • SWT • JavaFX

  28. Web-based clients (1) • Web environment • Client display size, connection types, different browsers • No state • Cannot operate when disconnected from server • Attention to bandwidth and interaction issues • Web pages are defined in non-object-oriented languages • No installation needed

  29. Web-based clients (2) • Typical business implementations: • Servlets • JSP • JSF (Spring, Struts,…) • Example of online game scenario: • Data: Postgresql + JPA (Hibernate) • Logic: Tomee+ Rest Services • Presentation: JavaScript + AJAX + JQuery

  30. Mobile based clients • J2ME MIDlets • Limitations: • Low hardware resources • Simplified application lifecycle • Cost-driven design • Other problems…

  31. Concluding remarks • HCI – design, implementation and evaluation of interactive systems for humans • GUI building is its practical part: design, software architecture, code tactics • Java has good GUI related stuffs: • Widely used and well documented • Architecture-neutral, available • High level GUI packages • Growing importance on the internet

  32. THANK YOU FOR ATTENTION. kartelj@matf.bg.ac.rs aleksandar.kartelj@gmail.com www.math.rs/~kartelj