/ JavaFX / Enrich your List UI by using the MediaListCell

Enrich your List UI by using the MediaListCell

Hendrik on 2014/09/30 - 08:37 in JavaFX

By default the cells of a ListView will show only a string representation of your data on screen. This is ok for a basic implementation and will work for a lot of use cases. But if you have a application that contains a big list like a news feed or a chat you need a better skin for the cells. For JavaOne I created some JavaFX APIs that contains basic utilities and controls that can be easily integrated in any JavaFX application. The ui-basics module contains some custom list cells that can be used to enrich your JavaFX application. By using this cells we can achieve the following UI change with only a few lines of Java code:
media-cell
The following graphics shows the inheritance of the new cell classes:
ext
The StructuredListCell defines a cell that splits a cell in 3 regions: left, center and right. The center region will grow by default:
cell layout
You can add any content to the cell by calling the following methods:


In addition the cell provides some new CSS attributes to style it:

  • -fx-left-alignment (VPos): Defines the vertical alignment of the left content
  • -fx-center-alignment (VPos): Defines the vertical alignment of the center content
  • -fx-right-alignment (VPos): Defines the vertical alignment of the right content
  • -fx-spacing (number): Defines the spacing between the 3 regions
  • -fx-height-rule (HPos): Defines which region should be used for the height calculation. By default the center content is used. This means that the cell will be as high as the center content.

The MediaListCell extends this cell definition. It sets the center content to a a title and a description label. If you want to use the cell you only need to call setTitle(…) and setDescription(…) to define the center content:
tite-desc
The class provides default style classes for both labels:

  • media-cell-title
  • media-cell-description

In addition the class provides two new CSS properties:

  • -fx-show-description (boolean): Defines if the description label should be visible
  • -fx-text-spacing (number): Defines the spacing between the title and description label

If you want the UI as shown in the demo you should use the SimpleMediaListCell class. This adds a rounded image view as the left content. By using this cell its very easy to create a list view like you know from many modern applications. To make the use of the cell even easier I introduced the Media interface. The SimpleMediaListCell is defined as SimpleMediaListCell and therefore it can only used with data that implements the Media interface. This interface is quite simple as you can see in its source:


The properties of the nodes in the cell are automatically bound to the properties that are provided by the interface and therefore the SimpleMediaListCell class can be used like shown in the following example:


All the cell classes are part of the ui-basics module that can be found at github:

further development

At the moment I plan some new features for the cells. As you might have registered the right region wasn’t used in this example. In most UIs this is used to define a user action or hint like shown in this image:
showroom
I plan to add this as a default feature. In addition I will provide different styles for the image view. Maybe you don’t want a rounded view. In this case it would be perfect to define a style by css. Please ping me if you have some other cool improvements :)

6 POST COMMENT

Send Us A Message Here

Your email address will not be published. Required fields are marked *

6 Comments
  • 2014/10/03

    Hi.
    It is very useful, but I can’t find source code.
    Where is source code of ‘ui-basics’ module ?
    On GitHub, I can’t find it.

    Thanks.

    Ladislav Török
    Reply
    • 2014/10/04

      Hi,
      I’m still not home from my JavaOne trip. I will release it next week and then link to the repo / Maven artifact.

      Reply
  • 2014/10/13

    Looks nice. Do you know of a way to stream the icons into the control during scrolling? My intention is to show the list and then stream the icons from a server, but only the required ones. Thank you.

    Lofi
    Reply
    • 2014/10/13

      Hi,
      I’m doing this in my demo application. I will write a post about the application the next weeks. I will explain it there.

      Reply
  • 2014/11/17

    Hi Hendrik,

    Any chance to get access to the ‘ui-basics’ module?

    Thanks.

    Bob Namestka
    Reply