L'événement ZK Combobox ne se déclenche pas dans MVVM

Question

J'essaie de comprendre le fonctionnement de ZKoss, en particulier en utilisant le modèle MVVM.

J'utilise ZK8.0.2.2 CE sur JDK8 et wildfly 10.

J'ai un combobox et une grille. Je veux que l'événement combobox onSelect déclenche la mise à jour de la grille. La grille est mise à jour avec l'élément sélectionné dans la liste déroulante en tant que paramètre.

Le problème est que la méthode @Command supposée être appelée par onSelect n'est jamais appelée et que la mise à jour n'est jamais déclenchée.

Et une autre chose: si j'ai compris comment fonctionne la liaison de données, l'argument onSelect sur la Combobox ne devrait même pas être nécessaire. La grille est liée à un ListModel dans le ViewModel (allMedia) par l'argument model = "@ load (vm.allMedia)"

Donc, si allMedia change, la grille devrait se mettre à jour automatiquement (de la même manière que ce qui se passe dans JavaFX avec bounded Propriétés). Évidemment, cela n'arrive pas.

Ceci est le fichier .zul:

<?xml version="1.0" encoding="UTF-8"?> 
<zk xmlns="http://www.zkoss.org/2005/zul"> 
    <window apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('mediadb.gui.MediaViewModel')"> 
     <vbox pack="center" align="top" width="990px" height="600px"> 
      <panel title="Search" border="normal" vflex="true"> 
       <panelchildren> 
        <label value="Type" class="boxlabel" /> 
        <combobox id="cmbType" width="150px" model="@load(vm.allType)" selectedItem="@bind(vm.actualType)" 
         onSelect="@Command('updateTable')"> 
         <template name="model"> 
          <comboitem label="@load(each.label)" /> 
         </template> 
        </combobox> 
       </panelchildren> 
      </panel> 
      <panel title="Media" border="normal" vflex="true"> 
       <panelchildren> 
        <grid id="mediaGrid" mold="paging" autopaging="true" 
          emptyMessage="No results" pagingPosition="both" 
          vflex="true" model="@load(vm.allMedia)"> 
         <columns sizable="true"> 
          <column hflex="1" label="ID" align="center" sort="auto(id)" /> 
          <column hflex="3" label="Serial#" align="center" sort="auto(serialNumber)" /> 
          <column hflex="3" label="Support Label" align="center" sort="auto(supportLabel)" /> 
          <column hflex="3" label="User Label" align="center" sort="auto(userLabel)" /> 
          <column hflex="2" label="Added" align="center" sort="auto(addDate)" /> 
         </columns> 
         <template name="model"> 
          <row vflex="1"> 
           <label value="@load(each.id)" /> 
           <label value="@load(each.serialNumber)" /> 
           <label value="@load(each.supportLabel)" /> 
           <label value="@load(each.userLabel)" /> 
           <label value="@load(each.addDate) @converter('formatedDate', format='dd/MM/yyyy')" /> 
          </row> 
         </template> 
        </grid> 
       </panelchildren> 
      </panel> 
     </vbox> 
    </window> 
</zk> 

et c'est le MODELVIEW:

package mediadb.gui; 

import mediadb.db.DataProvider; 
import mediadb.entity.MdbCategory; 
import mediadb.entity.MdbMedia; 
import java.beans.PropertyVetoException; 
import java.io.IOException; 
import java.sql.SQLException; 
import java.util.ArrayList; 
import java.util.List; 
import java.util.logging.Level; 
import java.util.logging.Logger; 
import org.zkoss.bind.annotation.Command; 
import org.zkoss.bind.annotation.Init; 
import org.zkoss.bind.annotation.NotifyChange; 
import org.zkoss.zul.ListModel; 
import org.zkoss.zul.ListModelList; 

public class MediaViewModel { 

    private DataProvider db = null; 
    private ListModel<MdbCategory> allType = null; 
    private ArrayList<MdbMedia> allMediaData = null; 
    private ListModel<MdbMedia> allMedia = null; 
    private MdbCategory actualType = null; 

    @Init 
    public void init() { 
     try { 
      db = DataProvider.getInstance(); 
      allType = new ListModelList<>(db.getCategories()); 
      actualType = allType.getElementAt(0); 

      allMediaData = new ArrayList(); 
      allMedia = new ListModelList<>(allMediaData); 

     } catch (IOException | SQLException | PropertyVetoException e) { 
      Logger.getLogger(MediaViewModel.class.getName()).log(Level.SEVERE, null, e); 
     } 
    } 

    @Command 
    public void updateTable() { 
     allMediaData.clear(); 
     allMediaData.addAll(db.getMedia(actualType.getLabel())); 
    } 

    public ListModel<MdbCategory> getAllType() { 
     return allType; 
    } 

    public void setAllType(ListModel<MdbCategory> allType) { 
     this.allType = allType; 
    } 

    public MdbCategory getActualType() { 
     return actualType; 
    } 

    public void setActualType(MdbCategory actualType) { 
     this.actualType = actualType; 
    } 

    public ListModel<MdbMedia> getAllMedia() { 
     return allMedia; 
    } 
} 

(j'omettre les grains de données et l'accès db qui est à côté du point de la question.

Est-ce que je le fais mal? Y a-t-il une meilleure façon de le faire?

Merci d'avance.

Answer 1

@Command dans votre code ont une majuscule en lettre C changer en @command et cela devrait fonctionner correctement.

changement dans:

<combobox id="cmbType" width="150px" model="@load(vm.allType)" 
    selectedItem="@bind(vm.actualType)" onSelect="@command('updateTable')"> 

et Ne pas oublier d'ajouter @NotifyChange("allMediaData") sur votre méthode UpdateTable

@Command 
@NotifyChange({"allMediaData","allMedia"}) 
public void updateTable() { 
    allMediaData.clear(); 
    allMediaData.addAll(db.getMedia(actualType.getLabel())); 
    allMedia.AddAll(allMediaData); 
}