PV168

GUI III

Swing Renderers

  • toString() formats content/state of an object for internal usage
    • In a debugger
    • In various logs
    • Compare e.g. "Department@123def" with "112: HR"
  • Renderers are intended for outputs towards the end users
    • Can render graphics on top of text (e.g. Gender)

Swing Row Filters

  • Allow for omission of certain model rows in view
  • Configurable typically via combo boxes or multiselect fields
    • We have introduced Either<L, R> abstraction to deal with special values (ALL etc.)

Swing Row Sorters

  • Allow for changing the order of model rows in view
    • Row numbers in view are different from model!
  • Needs to be synchronized with filtering for both to work correctly together
    • Pay extra attention in case both are used together
    • However, very simple set up in case of no filtering

Why does PV168 begin with GUI?

  • Top-down vs. bottom-up approach
  • Top-down
    • Early value for users of the application
    • Fast convergence
  • Bottom-up
    • Deep dive into technical details first
    • It takes long before we can show anything to users

GUI creation process

  • It starts with a feature
  • Functionality is specified with UI
  • UI is specified by the functionality
  • Wireframes

User Experience (UX) role

  • Person responsible for look & feel
  • Creative role
  • Hard to do without talent
  • Sometimes tied up too tight to product

UX vs. Developer

  • Ideas can be too ambitious
  • Developer wants to make it work
  • UX wants to make it pleasant to use

Frontend - Backend - Full-stack

  • Frontend
    • mostly JS, various frameworks, CSS
  • Backend
    • business logic
  • Full-stack
    • both together

Accessibility

  • We never know who will use our application
  • Text in pictures
  • Contrast

A / B testing

  • You probably participated and you didn't even realize it
  • Not really a testing
  • UX utility

Dark Side of the UX

  • Selling must be fast
  • Ads placement
  • Exclamation marks
  • Red colors, danger

Patterns ...

contain

... and anti-patterns

Creating GUI for group project

  • Use pen and paper
  • Make sure the whole team is on the same page
  • Keep it simple

Figma