From an select item in the list, create another listbox

asked 2016-11-20 21:18:49 +0800

OscarHMG gravatar image OscarHMG

updated 2016-11-20 21:28:16 +0800

I had a headache with this. I want to choose a book from the 1st list and with that book create a second list to be able to show the details of the book (title, number of pages)

Here is the code:

Class Book: Model the book

public class Book{

private int numBook;
private String nameBook;
private String author;

public Book(int numBook, String nameBook, String author) {
    this.numBook = numBook;
    this.nameBook = nameBook;
    this.author = author;
public int getNumBook() {
    return numBook;
public void setNumBook(int numBook) {
    this.numBook = numBook;
public String getNameBook() {
    return nameBook;
public void setNameBook(String nameBook) {
    this.nameBook = nameBook;
public String getAuthor() {
    return author;
public void setAuthor(String author) {
    this.author = author;

public String toString() {
    return "Book [numBook=" + numBook + ", nameBook=" + nameBook
            + ", author=" + author + "]";

Class BookData: Load the info in array

public class BookData {
        private List<Book> books = new ArrayList<Book>();

public BookData() {

public List<Book> getBooks() {
    return books;

public void setBooks(List<Book> books) {
    this.books = books;
public void loadBooks(){
    Book b;
    for(int i = 0; i<4;i++){
        b = new Book(i+1, "Libro "+i+1, "Author "+i+1);

Class BookViewModel: ViewModel of Listbox

public class BookViewModel {
    private static Book selectedBook;
    private List<Book> booksData = new ArrayList<Book>(new BookData().getBooks()); // Armo los libros

public List<Book> getBooksData() {
    return booksData;

public void setBooksData(List<Book> booksData) {
    this.booksData = booksData;

//Getters and Setter the SelectedCar
public Book getSelectedBook() {
        new DetailData(selectedBook);
        //new ArrayList<>(new DetailData().getDetailsFilterByBook());
        //Then here pass the Book Selected
    return selectedBook;
public void setSelectedBook(Book selectedBook) {
    this.selectedBook = selectedBook;


Class Detail: Detail Model of the choose Book

public class Detail {
    private int idBook;
    private String title;
    private int numPages;

public Detail(int idBook, String title, int numPages) {
    this.idBook = idBook;
    this.title = title;
    this.numPages = numPages;

public int getIdBook() {
    return idBook;
public void setIdBook(int idBook) {
    this.idBook = idBook;
public String getTitle() {
    return title;
public void setTitle(String title) {
    this.title = title;
public int getNumPages() {
    return numPages;
public void setNumPages(int numPages) {
    this.numPages = numPages;

public String toString() {
    return "Detail [idBook=" + idBook + ", title=" + title + ", numPages="
            + numPages + "]";


Class DetailData: Load the data in array

//Clase que se ecarga de manejar la data
public class DetailData {
    private List<Detail> details = loadAllDetails();
    private List<Detail> detailsFilterByBook;
    private static Book bookSelected;
/*public DetailData(){
    //Previously all the data is loaded
    detailsFilterByBook = new ArrayList<>();

public void setBookSelected(Book bookSelected){
    this.bookSelected = bookSelected;

public DetailData(){

public DetailData(Book b){
    bookSelected = b;
    detailsFilterByBook = new ArrayList<>();

public List<Detail> loadAllDetails(){
    List tmp = new ArrayList<Detail>();
    //Libro 1
    Detail d1b1 = new Detail(1, "Preview", 15);
    Detail d2b1 = new Detail(1, "Inicio", 10);
    Detail d3b1 = new Detail(1, "Zk Bind", 50);
    //Libro 2
    Detail d1b2 = new Detail(2, "Introduccion", 15);
    Detail d2b2 = new Detail(2, "JAVA", 100);
    Detail d3b2 = new Detail(2, "CSS", 25);     

    //Libro 3
    Detail d1b3 = new Detail(3, "HTML", 35);
    Detail d2b3 = new Detail(3, "Javascript", 40);
    Detail d3b3 = new Detail(3, "Ajax", 25);                

    //Libro 4
    Detail d1b4 = new Detail(4, "Android", 100);
    Detail d2b4 = new Detail(4, "IOS", 100);




    return tmp;

private void filterDetailsByBook() {
    for(Detail d:details){
        if(d.getIdBook() == bookSelected.getNumBook())

public void print(){
    System.out.println("Imprimiendo detalles del libro escogido");
    for(Detail d: detailsFilterByBook){

public List<Detail> getDetails() {
    return details;

public void setDetails(List<Detail> details) {
    this.details = details;

public List<Detail> getDetailsFilterByBook() {
    return detailsFilterByBook;

public void setDetailsFilterByBook(List<Detail> detailsFilterByBook) {
    this.detailsFilterByBook = detailsFilterByBook;


Class: DetailViewModel:ViewModel of the second ListBox

public class DetailViewModel {
    private List<Detail> detailsData = new ArrayList<>();

public void refreshList(){
    detailsData = new ArrayList<>(new DetailData().getDetailsFilterByBook());

public List<Detail> getDetailsData() {
    return detailsData;

public void setDetailsData(List<Detail> detailsData) {
    this.detailsData = detailsData;


Here is the zul file <window title="" border="none" height="100%" apply="org.zkoss.bind.BindComposer" viewmodel="@id('vm') @init('book.BookViewModel')"> <listbox model="@bind(vm.booksData)" selecteditem="@bind(vm.selectedBook)" emptymessage="No car found in the result"> <listhead> <listheader label="Num Libro"/> <listheader label="Libro"/> <listheader label="Autor"/> </listhead> <template name="model" var="book"> <listitem> <listcell label="@bind(book.numBook)"/> <listcell label="@bind(book.nameBook)"/> <listcell label="@bind(book.author)"/> </listitem> </template> </listbox>

<separator height="100px"/>
<window title="" border="none" height="100%" apply="org.zkoss.bind.BindComposer"
        viewModel="@id('vm') @init('detail.DetailViewModel')">
    <listbox model="@bind(vm.detailsData)" emptyMessage="No existen datos que presentar">
            <listheader label="Num Capitulos"/>
            <listheader label="Titulo del Cap"/>
        <template name="model" var="detail">
                <listcell label="@bind(detail.idBook)"/>
                <listcell label="@bind(detail.title)"/>
                <listcell label="@bind(detail.numPages)"/>


I try in the second listbox (At begin have to be empty), show the details of the book everytime when a book in the 1st listbox is selected. I get the correct info. When I choose a book, I get the correct details of that book, but my second listbox does'nt show anything. I will apreciate all the help. PD: Sorry for the english

delete flag offensive retag edit
Be the first one to answer this question!
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

1 follower



Asked: 2016-11-20 21:18:49 +0800

Seen: 19 times

Last updated: Nov 20 '16

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More