ZK How to update ListBox ListModel using selected item

Question

I'm making a web file browser using ZK Components and find a block. Is there any way to update the ListBox model using the selected item of the listbox? The use case is when traversing the files and folder, the user click the folder, and the list is refreshed with the content of the selected folder. The selection event is triggered and for regular file, it handle well, but not the folder.

My Code: myfilesvm.zul

<zk>
    <window apply="org.zkoss.bind.BindComposer"
        viewModel="@id('vm') @init('com.my.zk.mvvm.MyFilesViewModel')">
        <hlayout>
            <listbox vflex="true" hflex="1" model="@load(vm.files)"
                id="fileBrowser" selectedItem="@bind(vm.selectedFile)">
                <auxhead>
                    <auxheader colspan="3">File List</auxheader>
                    <auxheader colspan="3">
                        <hlayout>
                            <!-- breadcrumb, implemented later -->
                        </hlayout>
                    </auxheader>
                </auxhead>
                <listhead>
                    <listheader label="Name" />
                    <listheader label="Size" />
                    <listheader label="Modified" />
                </listhead>
                <template name="model" var="file">
                    <listitem>
                        <listcell label="@load(file.name)" />
                        <listcell label="@load(file.length())" />
                        <listcell label="@load(file.lastModified())" />
                    </listitem>
                </template>
            </listbox>
        </hlayout>
        <separator />
    </window>
</zk>

MyFilesViewModel.java

package com.my.zk.mvvm;

import java.io.File;
import java.io.FileNotFoundException;
import java.util.Arrays;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.zkoss.bind.annotation.Init;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.zul.Filedownload;
import org.zkoss.zul.ListModel;
import org.zkoss.zul.ListModelList;

import com.my.zk.FileCrumbManager;

public class MyFilesViewModel  {



    private static Logger log = LoggerFactory.getLogger(MyFilesViewModel.class);
//  AuthenticationService authService = new AuthenticationServiceImpl();
//  UserCredential cre = authService.getUserCredential();
    String homeFolder = "D:\\path\\home";

    ListModel<File> files = new ListModelList<File>(Arrays.asList(FileCrumbManager.populateList(new File(homeFolder))));
    File selectedFile;

    @Init
    public void init() { // Initialize

    }

    public ListModel<File> getFiles() {
        return files;
    }

    @NotifyChange({ "selectedFile" })
    public void setFiles(ListModel<File> files) {
        this.files = files;
    }

    public File getSelectedFile() {
        return selectedFile;
    }

    public void pilihFile() {
        if (getSelectedFile().isDirectory()) {
            log.info("File is a directory");
            this.files = new ListModelList<File>(
                    Arrays.asList(FileCrumbManager.populateList(new File(getSelectedFile().getAbsolutePath()))));
        } else {
            try {
                Filedownload.save(getSelectedFile(), null);
            } catch (FileNotFoundException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
                log.error(e.getMessage());
            }
        }
    }

    public void setSelectedFile(File selectedFile) {
        this.selectedFile = selectedFile;
        pilihFile();
    }

}

Appreciate for any help. Thank you.

Answer 1

The correct way to refresh ListModelList in pilihFile() is:

this.files.clear();
this.files.addAll(Arrays.asList(FileCrumbManager.populateList(new File(getSelectedFile().getAbsolutePath()))));

Because Listbox is model-driven rendering, you should control the rendering by manipulating the model object. When you call methods of ListModelList, it will notify Listbox to render into a browser. If you replace this.files with a new object, ZK doesn't know it. That's why your browser doesn't have the update.