Revision history [back]

click to hide/show revision 1
initial version

asked 2017-03-22 04:12:23 +0800

pafi gravatar image pafi

@BindingParam issue

Hello everyone,

I'm trying to make a simple tree like the example in ZkDemo : "Getting Started > Tree"

Everything is going fine from here until I tried to add a button at the end of each line in the resultGrid line.

I just try to get the click event on the "add cart button" but no matter what I do, in the @Command method "addToCart", "article" is always null !...

My zul :

<window apply="org.zkoss.bind.BindComposer"
    viewModel="@id('vm') @init('nc.noumea.mairie.appock.viewmodel.ListeCatalogueServiceViewModel')"
    border="none" hflex="1"
    vflex="1" contentStyle="overflow:auto">
<vlayout vflex="1">
    <hbox hflex="1" vflex="1">
        <tree id="catalogueServiceTree" model="@bind(vm.catalogueTree)"
              itemRenderer="@bind(vm.catalogueTreeitemRenderer)" width="400px" vflex="1">
            <treecols>
                <treecol label="Libellé"/>
                <treecol label="Nombre" align="center" width="80px"/>
            </treecols>
        </tree>
        <listbox id="resultCatalogueServiceTreeGrid" width="100%" vflex="1">
            <listhead menupopup="auto" sizable="true">
                <listheader label="Photo" width="100px" align="center"/>
                <listheader label="Référence" sort="auto(reference)" width="150px"/>
                <listheader label="Libellé" sort="auto(libelle)" hflex="1"/>
                <listheader label="Colisage" sort="auto(quantiteColisage)" width="80px"/>
                <listheader label="" width="55px" align="center"/>
            </listhead>
            <template name="model">
                <listitem>
                    <listcell>
                        <image src="${each.photoSrc}"/>
                    </listcell>
                    <listcell>
                        <label value="${each.reference}"/>
                    </listcell>
                    <listcell>
                        <label value="${each.libelle}"/>
                    </listcell>
                    <listcell>
                        <label value="${each.libelleColisage}"/>
                    </listcell>
                    <listcell>
                        <button iconSclass="z-icon-cart-plus" onClick="@command('addToCart', article=each)"/>
                    </listcell>
                </listitem>
            </template>
        </listbox>
    </hbox>
</vlayout>

</window>

And my View :

@VariableResolver(DelegatingVariableResolver.class)

public class ListeCatalogueServiceViewModel extends AbstractListeViewModel<catalogue> implements Serializable { private static final long serialVersionUID = 1L;

@WireVariable
CatalogueService                            catalogueService;

private TreeModel<CatalogueTreeNode>        catalogueTree;

private TreeitemRenderer<CatalogueTreeNode> catalogueTreeitemRenderer;

@Wire("#resultCatalogueServiceTreeGrid")
private Listbox                             resultGrid;

@AfterCompose
public void afterCompose(@ContextParam(ContextType.VIEW) Component view) {
    Selectors.wireComponents(view, this, false);
}

@Init(superclass = true)
public void initTree() throws IOException {

    Catalogue catalogue = catalogueService.findActif();
    if (catalogue == null) {
        Messagebox.show("Il n'existe pas de catalogue actif à afficher", "Erreur", Messagebox.OK, Messagebox.ERROR);
        return;
    }

    initCatalogueTreeModel(catalogue);
}

public TreeModel<CatalogueTreeNode> getCatalogueTree() {
    return catalogueTree;
}

public void setCatalogueTree(TreeModel<CatalogueTreeNode> catalogueTree) {
    this.catalogueTree = catalogueTree;
}

private void initCatalogueTreeModel(Catalogue catalogue) throws IOException {
    setCatalogueTree(new CatalogueTreeModel(getCatalogueTreeRoot(catalogue)));
}

private CatalogueTreeNode getCatalogueTreeRoot(Catalogue catalogue) throws IOException {
    return catalogueService.getCatalogueTreeRoot(catalogue);
}

public TreeitemRenderer<CatalogueTreeNode> getCatalogueTreeitemRenderer() {
    if (catalogueTreeitemRenderer == null) {
        catalogueTreeitemRenderer = new TreeitemRenderer<CatalogueTreeNode>() {
            @Override
            public void render(Treeitem treeitem, CatalogueTreeNode catalogueTreeNode, int i) throws Exception {
                Treerow dataRow = new Treerow();
                dataRow.setParent(treeitem);
                treeitem.setValue(catalogueTreeNode);
                treeitem.setOpen(true);

                Treecell treecellLabel = new Treecell(catalogueTreeNode.getLibelle());
                dataRow.appendChild(treecellLabel);
                dataRow.addEventListener(Events.ON_CLICK, new EventListener<Event>() {
                    @Override
                    public void onEvent(Event event) throws Exception {
                        CatalogueTreeNode selectedNodeValue = ((Treeitem) event.getTarget().getParent()).getValue();

                        if (selectedNodeValue.getTypeCatalogueNode() == TypeCatalogueNode.FAMILLE) {
                            resultGrid.setModel(new ListModelList<>(((SousFamille) selectedNodeValue.getEntity()).getListeArticle()));
                        }
                    }
                });

                Treecell treecellNombreArticle = new Treecell(String.valueOf(catalogueTreeNode.getNombreArticle()));
                dataRow.appendChild(treecellNombreArticle);
            }
        };
    }

    return catalogueTreeitemRenderer;
}

public void setCatalogueTreeitemRenderer(TreeitemRenderer<CatalogueTreeNode> catalogueTreeitemRenderer) {
    this.catalogueTreeitemRenderer = catalogueTreeitemRenderer;
}

@Command
public void addToCart(@BindingParam("article") Article article) {
    if (article == null) {
        return;
    }
}

}

I'm not new to ZK and I usually find what is wrong but here I'm stuck for hours looking on forum and so...:(

Thank you for your help !

@BindingParam issue

Hello everyone,

I'm trying to make a simple tree like the example in ZkDemo : "Getting Started > Tree"

Everything is going fine from here until I tried to add a button at the end of each line in the resultGrid line.

I just try to get the click event on the "add cart button" but no matter what I do, in the @Command method "addToCart", "article" is always null !...

My zul :

 <window apply="org.zkoss.bind.BindComposer"
     viewModel="@id('vm') @init('nc.noumea.mairie.appock.viewmodel.ListeCatalogueServiceViewModel')"
     border="none" hflex="1"
     vflex="1" contentStyle="overflow:auto">
 <vlayout vflex="1">
     <hbox hflex="1" vflex="1">
         <tree id="catalogueServiceTree" model="@bind(vm.catalogueTree)"
               itemRenderer="@bind(vm.catalogueTreeitemRenderer)" width="400px" vflex="1">
             <treecols>
                 <treecol label="Libellé"/>
                 <treecol label="Nombre" align="center" width="80px"/>
             </treecols>
         </tree>
         <listbox id="resultCatalogueServiceTreeGrid" width="100%" vflex="1">
             <listhead menupopup="auto" sizable="true">
                 <listheader label="Photo" width="100px" align="center"/>
                 <listheader label="Référence" sort="auto(reference)" width="150px"/>
                 <listheader label="Libellé" sort="auto(libelle)" hflex="1"/>
                 <listheader label="Colisage" sort="auto(quantiteColisage)" width="80px"/>
                 <listheader label="" width="55px" align="center"/>
             </listhead>
             <template name="model">
                 <listitem>
                     <listcell>
                         <image src="${each.photoSrc}"/>
                     </listcell>
                     <listcell>
                         <label value="${each.reference}"/>
                     </listcell>
                     <listcell>
                         <label value="${each.libelle}"/>
                     </listcell>
                     <listcell>
                         <label value="${each.libelleColisage}"/>
                     </listcell>
                     <listcell>
                         <button iconSclass="z-icon-cart-plus" onClick="@command('addToCart', article=each)"/>
                     </listcell>
                 </listitem>
             </template>
         </listbox>
     </hbox>
 </vlayout>
</window>

</window>

And my View :

 @VariableResolver(DelegatingVariableResolver.class)

public class ListeCatalogueServiceViewModel extends AbstractListeViewModel<catalogue> AbstractListeViewModel<Catalogue> implements Serializable { private static final long serialVersionUID = 1L;

1L;

    @WireVariable
 CatalogueService                            catalogueService;

 private TreeModel<CatalogueTreeNode>        catalogueTree;

 private TreeitemRenderer<CatalogueTreeNode> catalogueTreeitemRenderer;

 @Wire("#resultCatalogueServiceTreeGrid")
 private Listbox                             resultGrid;

 @AfterCompose
 public void afterCompose(@ContextParam(ContextType.VIEW) Component view) {
     Selectors.wireComponents(view, this, false);
 }

 @Init(superclass = true)
 public void initTree() throws IOException {

     Catalogue catalogue = catalogueService.findActif();
     if (catalogue == null) {
         Messagebox.show("Il n'existe pas de catalogue actif à afficher", "Erreur", Messagebox.OK, Messagebox.ERROR);
         return;
     }

     initCatalogueTreeModel(catalogue);
 }

 public TreeModel<CatalogueTreeNode> getCatalogueTree() {
     return catalogueTree;
 }

 public void setCatalogueTree(TreeModel<CatalogueTreeNode> catalogueTree) {
     this.catalogueTree = catalogueTree;
 }

 private void initCatalogueTreeModel(Catalogue catalogue) throws IOException {
     setCatalogueTree(new CatalogueTreeModel(getCatalogueTreeRoot(catalogue)));
 }

 private CatalogueTreeNode getCatalogueTreeRoot(Catalogue catalogue) throws IOException {
     return catalogueService.getCatalogueTreeRoot(catalogue);
 }

 public TreeitemRenderer<CatalogueTreeNode> getCatalogueTreeitemRenderer() {
     if (catalogueTreeitemRenderer == null) {
         catalogueTreeitemRenderer = new TreeitemRenderer<CatalogueTreeNode>() {
             @Override
             public void render(Treeitem treeitem, CatalogueTreeNode catalogueTreeNode, int i) throws Exception {
                 Treerow dataRow = new Treerow();
                 dataRow.setParent(treeitem);
                 treeitem.setValue(catalogueTreeNode);
                 treeitem.setOpen(true);

                 Treecell treecellLabel = new Treecell(catalogueTreeNode.getLibelle());
                 dataRow.appendChild(treecellLabel);
                 dataRow.addEventListener(Events.ON_CLICK, new EventListener<Event>() {
                     @Override
                     public void onEvent(Event event) throws Exception {
                         CatalogueTreeNode selectedNodeValue = ((Treeitem) event.getTarget().getParent()).getValue();

                         if (selectedNodeValue.getTypeCatalogueNode() == TypeCatalogueNode.FAMILLE) {
                             resultGrid.setModel(new ListModelList<>(((SousFamille) selectedNodeValue.getEntity()).getListeArticle()));
                         }
                     }
                 });

                 Treecell treecellNombreArticle = new Treecell(String.valueOf(catalogueTreeNode.getNombreArticle()));
                 dataRow.appendChild(treecellNombreArticle);
             }
         };
     }

     return catalogueTreeitemRenderer;
 }

 public void setCatalogueTreeitemRenderer(TreeitemRenderer<CatalogueTreeNode> catalogueTreeitemRenderer) {
     this.catalogueTreeitemRenderer = catalogueTreeitemRenderer;
 }

 @Command
 public void addToCart(@BindingParam("article") Article article) {
     if (article == null) {
         return;
        }
    }
}

}

I'm not new to ZK and I usually find what is wrong but here I'm stuck for hours looking on forum and so...:(

Thank you for your help !

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