SlideShare a Scribd company logo

Jgrid

•
•
Hendrik Ebbers
Hendrik Ebbers

This document discusses JGrid, an open source Java Swing component for grid-based visualization of data. JGrid provides an alternative to using JList for non-hierarchical data and shares interfaces with JList. It uses renderers similarly to JList to display raw data in grid cells. The document demonstrates examples of grid views and discusses when grids are preferable to lists or tables for displaying data. It also outlines plans to further develop JGrid with additional features like sorting, filtering and cell editing.

1 of 32
Download to read offline
J G R I D
Table of contents • About me • My projects • The JGrid • Demo
About me • Java, UI and Apple nerd • Java Development Lead at SIC GmbH in Dortmund, Germany • I just started open source development
About GuiGarage www.guigarage.com • Just another Java blog • My daily experience with Java & Swing • Home of my opensource projects GestureWrapper jRating jGrid
GestureWrapper • Use Mac OS Multitouch gestures in every Java programm • Forget about java.lang.NoClassDefFoundError GestureUtilities.registerListener(panel, new GestureRotationListener() {...});
JRating • Simple JComponent for rating • Renderer support for different skins
JGrid • Grid based visualization of Data • Underlying data is administrated in a list • Raw Data visualized by renderer Grid
Examples of grid based views
Examples of grid based views
Examples of grid based views
When to use grids? three options for visualizing non- Grid hirarchical collections of data List Table best overview best overview best overview for „simple“ for „complex“ for „illustrated“ data data data
Integration same data, different views
Integration • Fall back on swing classes • Shares interfaces with JList • Makes use of the swing renderer concept
Develop a new example I copied „iBooks“ I copied „iPhoto“ Let´s continue this series ...
Let´s copy iTunes...
... and implement GarageTunes cross-platform (pure Java) modern UI
Collect some UI ideas cool ListView Controls dribbble.com
Collect some UI ideas Grid of covers dribbble.com
Collect some UI ideas switch between Grid & List dribbble.com
User Interface Sketching
Implementing the model • Create a datamodel • MP3 to data (MP3-Tags) • Drag & Drop MP3 files all albums are stored in a ListModel data is generated from MP3-Tags
Intermediate result Controls drop MP3´s here switch between views
Custom renderer • Create a ListCellRenderer • Activate antialiasing • Use gradients
Retrieve album covers • Use amazon webservices • Search by album name & interpreter AWSECommerceService service = new AWSECommerceService(); service.setHandlerResolver(new AwsHandlerResolver(awsSecretKey)); AWSECommerceServicePortType port = service.getAWSECommerceServicePort(); ItemSearchRequest itemSearchRequest = new ItemSearchRequest(); itemSearchRequest.setSearchIndex("Music"); itemSearchRequest.setArtist(interpreter); itemSearchRequest.setTitle(albumName); itemSearchRequest.getResponseGroup().add("Images"); ItemSearch itemSearch = new ItemSearch(); itemSearch.setAWSAccessKeyId(awsAccessKeyId); itemSearch.getRequest().add(itemSearchRequest); ItemSearchResponse response = port.itemSearch(itemSearch); register @ aws.amazon.com
Intermediate result covers from JRating as part of amazon the renderer webservices
Adding a gridview • Add GridView • Grid and list share selection & data model • Add GridCellRenderer model
Intermediate result pinch to zoom
Finishing coding • Play the MP3s • mp3spi.jar • Service provider interface • Use javax.sound.* •
GarageTunes ToDos better user feedback: rollover effects on controls showing loading state for covers (animation?) GarageTunes Icon
JGrid Roadmap • Full support for ListSelectionModel (interval selection, etc.) • Sorting & filtering • Label renderer • Cell & label editor • OS specific UIs
Summery • Use JGrid alternative to JList • Best practice: • Let the user change the view • share the models between the views • Integrate gestures as a alternative to your user guidance • Subscribe to my Blog feed stay tuned for more UI stuff!
Q&A

More Related Content

Jgrid

  • 1. J G R I D
  • 2. Table of contents • About me • My projects • The JGrid • Demo
  • 3. About me • Java, UI and Apple nerd • Java Development Lead at SIC GmbH in Dortmund, Germany • I just started open source development
  • 4. About GuiGarage www.guigarage.com • Just another Java blog • My daily experience with Java & Swing • Home of my opensource projects GestureWrapper jRating jGrid
  • 5. GestureWrapper • Use Mac OS Multitouch gestures in every Java programm • Forget about java.lang.NoClassDefFoundError GestureUtilities.registerListener(panel, new GestureRotationListener() {...});
  • 6. JRating • Simple JComponent for rating • Renderer support for different skins
  • 7. JGrid • Grid based visualization of Data • Underlying data is administrated in a list • Raw Data visualized by renderer Grid
  • 8. Examples of grid based views
  • 9. Examples of grid based views
  • 10. Examples of grid based views
  • 11. When to use grids? three options for visualizing non- Grid hirarchical collections of data List Table best overview best overview best overview for „simple“ for „complex“ for „illustrated“ data data data
  • 12. Integration same data, different views
  • 13. Integration • Fall back on swing classes • Shares interfaces with JList • Makes use of the swing renderer concept
  • 14. Develop a new example I copied „iBooks“ I copied „iPhoto“ Let´s continue this series ...
  • 16. ... and implement GarageTunes cross-platform (pure Java) modern UI
  • 17. Collect some UI ideas cool ListView Controls dribbble.com
  • 18. Collect some UI ideas Grid of covers dribbble.com
  • 19. Collect some UI ideas switch between Grid & List dribbble.com
  • 21. Implementing the model • Create a datamodel • MP3 to data (MP3-Tags) • Drag & Drop MP3 files all albums are stored in a ListModel data is generated from MP3-Tags
  • 22. Intermediate result Controls drop MP3´s here switch between views
  • 23. Custom renderer • Create a ListCellRenderer • Activate antialiasing • Use gradients
  • 24. Retrieve album covers • Use amazon webservices • Search by album name & interpreter AWSECommerceService service = new AWSECommerceService(); service.setHandlerResolver(new AwsHandlerResolver(awsSecretKey)); AWSECommerceServicePortType port = service.getAWSECommerceServicePort(); ItemSearchRequest itemSearchRequest = new ItemSearchRequest(); itemSearchRequest.setSearchIndex("Music"); itemSearchRequest.setArtist(interpreter); itemSearchRequest.setTitle(albumName); itemSearchRequest.getResponseGroup().add("Images"); ItemSearch itemSearch = new ItemSearch(); itemSearch.setAWSAccessKeyId(awsAccessKeyId); itemSearch.getRequest().add(itemSearchRequest); ItemSearchResponse response = port.itemSearch(itemSearch); register @ aws.amazon.com
  • 25. Intermediate result covers from JRating as part of amazon the renderer webservices
  • 26. Adding a gridview • Add GridView • Grid and list share selection & data model • Add GridCellRenderer model
  • 28. Finishing coding • Play the MP3s • mp3spi.jar • Service provider interface • Use javax.sound.* •
  • 29. GarageTunes ToDos better user feedback: rollover effects on controls showing loading state for covers (animation?) GarageTunes Icon
  • 30. JGrid Roadmap • Full support for ListSelectionModel (interval selection, etc.) • Sorting & filtering • Label renderer • Cell & label editor • OS specific UIs
  • 31. Summery • Use JGrid alternative to JList • Best practice: • Let the user change the view • share the models between the views • Integrate gestures as a alternative to your user guidance • Subscribe to my Blog feed stay tuned for more UI stuff!
  • 32. Q&A