ListView Customizations

This is another code to customize ListView. Typically a list view will contain a scroll bar and the list of items in the following manner in Javafx.

We can customize the above listview to be more captivating by implementing Cascading Style Sheets in javafx. The major advantage of CSS in Javafx is that on applying CSS to one particular control such as a listview all the occurrences of listview’s in all other scenes will inherit the properties mentioned in the stylesheet. This is useful since we don’t have to write each individual style class for each list view used in various scenes of an application.

However if we want to implement different stylesheet properties for the controls then we can define a style class explicitly in the javafx.css file and then include this styleclass in the StyleClass variable for a particular control.

The following code uses Translate Transition class to provide the slow translation that happens to reach the center of the screen.

Originally the list view does not select the cells when we hover the mouse over it. Here we can find that the cells get the item withing that cell and highlight it when you hover the mouse over. This feature is obtained by implementing the cellFactory within the ListView. We can override this function and select the cell when the mouse enters a particular cell.

The tooltip appears based on the ListCell the mouse is hovered. The tooltip cannot be translated to the position of the mouse pointer using the translateX and translateY variables. This is a weird behavior I have encountered in Javafx. But a way to get around this problem is to embed the tooltip within  a group and then translate the group to the point where the mouse pointer is while it enters a list cell. The data within the tooltip is populated with the cell name, the mouse pointer is on.

Observe that the List scroll bar is not visible. This is obtained by reducing the scroll bar width to zero and then making it transparent or invisible using javafx css.

You can launch the ListView program by clicking on the following link

For windows users pressing on the Launch button would start the Application in java web start.

However Linux users may face the problem of just jnlp the file being downloaded onto the system. However we can still get the application started by opening the terminal and setting the JDK home to 1.6 and then start the application by using

export JAVA_HOME=/usr/jdk1.6.0_18 and then set the PATH variable export export PATH=/usr/jdk1.6.0_18/bin:$PATH

After doing the above just execute:-   javaws ListView.jnlp

Leave a comment

Filed under Javafx Code Demos

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s