Hello geeks, I think most of you have already knew that JavaFX 2.2 contains the “Pagination” which is really awesome although it is not pretty hard to make our own. Lets first look over how the Pagination actually looks like.
1. LOOKS
Normal Pagination
Ok now that was just the normal Pagination you can modify and change as per your need . You can just style it using some CSS codes.
2. CODE (How to make Pagination)
|
1 2 3 4 5 6 7 8 |
Pagination pagination = new Pagination(6,0); pagination.currentPageIndexProperty().addListener(new ChangeListener<Number>(){ @Override public void changed(ObservableValue&lt? extends Number> observable, Number oldValue, Number newValue) { //Change UI like table or Pane } }); //Just add this "pagination" inside some container |
As Pagination is inherited from Control class; we can easily place this control at any container like Group,Pane etc.
3.STYLE (Make it different)
Although the default style of this control is actually good but the default is not suitable when it comes for the vendor specific design and for different purposes. Lets looks at some CSS styling which I have done differently.
Diamond Style Pagination
Diamond Style Pagination
EFFECT: Drop Shadow
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.pagination{ -fx-base:black; } .pagination .toggle-button { -fx-shape:"m74.63,72.21494l14.50002,-14.49994l14.49998,14.49994l-14.49998,14.50002l-14.50002,-14.50002z"; -fx-background-radius:3px; } .pagination .button{ -fx-padding: 8 10 8 10px; -fx-background-radius:0px; /* This is used for making the Arrow Button Curve*/ } .pagination .label { -fx-text-fill:white; } |
Circle Numbering Pagination
Circle Style Pagination|
EFFECT: Drop Shadow
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.pagination{ -fx-base:black; } .pagination .toggle-button , .mypage .button{ -fx-background-radius:15px; -fx-padding: 0px; } .pagination .button{ -fx-padding: 5 15 5 16px; } .pagination .label { -fx-text-fill:white; } |
Grid Style Pagination
Grid Style Pagination
Effects: Drop Shadow
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.pagination{ -fx-base:black; } .pagination .toggle-button{ -fx-shape:"m61.73247,191.50499l-6.00997,5.7599m69.1152,-5.50928l5.75948,5.50928m-5.75948,-68.6145l5.75948,-6.01002m-68.86471,5.75976l-5.75947,-5.50913m5.75947,5.38381l63.10523,0l0,63.10521l-63.10523,0l0,-63.10521zm-5.88478,-5.88481l74.87482,0l0,74.87489l-74.87482,0l0,-74.87489z"; -fx-background-insets: 0, -0.5 6.5 -0.5 6.5,0 7 0 7; -fx-padding:0px; -fx-background-radius:0px; } .pagination .toggle-button:selected{ -fx-base:white; } .pagination .control-box{ -fx-background-color:linear-gradient(to bottom,black,transparent);; -fx-padding:-11 0 0 0px; } .pagination .label { -fx-text-fill:white; } |
After working with some styling and Pagination I have made this pagination to work in TableView as well which was really amazing. The below is the screenshot of that demo application.
Source Code: Pagination Demo Source Code
This much for today Have a great day coding 🙂
Pingback: Java desktop links of the week, March 11 | Jonathan Giles
Nice examples. Circle Numbering & Grid Style pagination with drop shadows really looks cool. Please keep up the good work.
In my case I require label instead of showing number of pages as 1/4 in your example with a label showing Page 1 of 4. Is it possible? How to achieve that?
Thanks & Regards,
Hiren Desai
Hi hiren,
Thanks ! But I think it’s not possible in current API.
Thanks
It’s hard to come by experienced people on this topic, however, you seem like you know what you’re talking
about! Thanks
Hi! I know this is kinda off topic but I’d figured I’d ask.
Would you be interested in exchanging links or maybe guest authoring a blog article or
vice-versa? My website discusses a lot of the same topics as yours and I believe we could greatly benefit from each
other. If you might be interested feel free to send me an e-mail.
I look forward to hearing from you! Terrific blog by
the way!
Thanks for some other wonderful post. Where else may anybody
get that type of info in such a perfect method of writing?
I have a presentation next week, and I am at the search for such information.
Hi there,
I’m here to actually talk about a problem that has been asked almost everywhere but not a once discussed or even code shown !!
Even at Oracle site, all they do are nothing but mere static codes
The problem in iteself is, i have a tableview which is filled from a database !!
When i click on a row in the tableview, i want to get the first colomn’s value of the selected row !!
In java, when yu include the rs2xml.jar library, yu have a method that is getValueAt(row,coloumn) but as far as i have searched, i didn’t get to find a way to do this !!
I really need help for this, it concerns my final year’s project !!
Hey nice work :).
But is there a work around to get table sorting done even with pagination?
Because i can click the headers and they will sort the given page not the whole list.
@Chris,
For making the sorting done you need to make your own way. Because javafx only provides the sorting of table with in the content of tableview.
How to make this happen:
1. Take the table header control Node from CSS selector via Node class
node.lookupAll(“.column-header”);
2. Then use click event listener to that node
3. apply your logic and then sort the whole pagination 🙂
Thanks
Narayan
Oh my goodness! Awesome article dude! Thank you so much,
However I am going through difficulties with your RSS. I don’t understand the reason why I can’t
subscribe to it. Is there anybody getting the same RSS problems?
Anyone that knows the answer will you kindly respond?
Thanx!!
How can i change row color in the table?
Use property and classes of CSS to change color.
for eg.
.list-cell:odd{-fx-background-color:red;
}
.list-cell:odd{
-fx-background-color:blue;
}
Thanks
thanks for answer.another question.
I need change special row for example :rows with values of negative.
this is need to implement with code of javafx and not css.can you guide me?
How can i change message in the table when table is empty?
When table is empty pagination in below of table is a lot buttons!! how can i remove that?
use setPlaceholder method of tablev for the message of empty table. You can change them from the pagination control.
Hi ..i saw most of the sample code gave only fixed size of no.of rows per page , but my requirement is need to choose different no of rows per page by clicking
hyperlink for pagination, and this pagination needs to work by both filtered items and table items ..
Pingback: Java desktop links of the week, March 11 – Jonathan Giles