Revision history [back]

Hi there!

I'am fairly new to web developement and I'am struggeling with a project of mine that works exactly like the example: zkdemo/listbox/list_group which i can't post as a link cause I'dont have enough karma

The only thing i can't get to work is the mechanic to expand and collapse the Listitems of a group.

I tried the developer tool (F12) of FireFox to look at the Code. With that I found out that the Listitems use css classes like z-listcell, z-listgroup-inner etc. But there is my problem i nearly don't know anything about the css stuff and i haven't found a documentation yet. Does anyone know how I can implement the arrow icon and the expand and collaps feature?

I only have basic css knowledg so I might need some hints ;)

Hi there!

I'am fairly new to web developement and I'am struggeling with a project of mine that works exactly like the example: zkdemo/listbox/list_group which i can't post as a link cause I'dont have enough karma

The only thing i can't get to work is the mechanic to expand and collapse the Listitems of a group.

I tried the developer tool (F12) of FireFox to look at the Code. With that I found out that the Listitems use css classes like z-listcell, z-listgroup-inner etc. But there is my problem i nearly don't know anything about the css stuff and i haven't found a documentation yet. Does anyone know how I can implement the arrow icon and the expand and collaps feature?

I only have basic css knowledg so I might need some hints ;)

Hi there!

I'am fairly new to web developement and I'am struggeling with a project of mine that works exactly like the example: zkdemo/listbox/list_group zkdemo/listbox/list_group which i can't post as a link cause I'dont have enough karma

The only thing i can't get to work is the mechanic to expand and collapse the Listitems of a group.

I tried the developer tool (F12) of FireFox to look at the Code. With that I found out that the Listitems use css classes like z-listcell, z-listgroup-inner etc. But there is my problem i nearly don't know anything about the css stuff and i haven't found a documentation yet. Does anyone know how I can implement the arrow icon and the expand and collaps feature?

I only have basic css knowledg so I might need some hints ;)

Hi there!

I'am fairly new to web developement and I'am struggeling with a project of mine that works exactly like the example: zkdemo/listbox/list_group [zkdemo/listbox/list_group] which i can't post as a link cause I'dont have enough karma

The only thing i can't get to work is the mechanic to expand and collapse the Listitems of a group.

I tried the developer tool (F12) of FireFox to look at the Code. With that I found out that the Listitems use css classes like z-listcell, z-listgroup-inner etc. But there is my problem i nearly don't know anything about the css stuff and i haven't found a documentation yet. Does anyone know how I can implement the arrow icon and the expand and collaps feature?

I only have basic css knowledg so I might need some hints ;)

public class FeatureListGroupRenderer implements ListitemRenderer<Object>{

@Override
public void render(Listitem item, Object data, int index) throws Exception {
    if(item instanceof Listgroup) {
        FeatureGroupsModel.FeatureGroupInfo groupinfo = (FeatureGroupsModel.FeatureGroupInfo) data;
        Feature feature = groupinfo.getFirstChild();
        String groupTxt;
        switch(groupinfo.getColIndex())
        {
            case 0:
                groupTxt = feature.getCategory();
                break;
            case 1:
                groupTxt = feature.getName();
                break;
            case 2:
                groupTxt = feature.getDescription();
                break;
            default:
                groupTxt = feature.getCategory();
        }
        Listcell cell = new Listcell(groupTxt);
        cell.setSpan(2);
        cell.setClass("z-listcell z-listgroup-inner");
       // item.setStyle("padding-left:20px");

        item.appendChild(cell);
        item.setValue(data);
        item.setClass("z-listgroup open-true");
        //((Listgroup)item).setLabel("Test");
        //item.setAttribute("onOpen", ((Listgroup) item).isOpen());
        item.setCheckable(false);


    } else if (item instanceof Listgroupfoot) {
        Listcell cell = new Listcell();
        cell.setSclass("featureFooter");
        cell.setSpan(2);
        cell.appendChild(new Label(" Groupesize: " + data));
        item.appendChild(cell);
        item.setCheckable(false);
    } else {
        Feature feature = (Feature) data;
        item.appendChild(new Listcell(feature.getName()));
        item.appendChild(new Listcell(feature.getDescription()));
        item.setValue(feature);
    }
}

 <div height="165px">
                                    <listbox model="@load(vm.featureGroupsModel)" checkmark="true" onSelect="@command('selectGroup', data=event.reference.value)"
                                             emptyMessage="Keine Daten gefunden." itemRenderer="de.fhdo.model.FeatureListGroupRenderer" multiple="true">
                                             <custom-attributes org.zkoss.zul.listbox.groupSelect="true" />
                                        <listhead>
                                            <listheader hflex="1"/>
                                            <listheader hflex="1"/>
                                        </listhead>
                                        <auxhead>
                                        <auxheader style="line-height: 10px; background: linear-gradient(to bottom, #d6f9ff 0%, #9ee8fa 100%);" colspan="2" label="Features"/>
                                    </auxhead>
                                    <template name="featuresModel">
                                        <listcell label="@bind(each)">
                                        </listcell>
                                    </template>
                                    </listbox>
                                </div>

    @Init

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

    featureTypesList = new ListModelList<>();
    featureTypesList.setMultiple(true);

    List<Feature> subfeatures = new ArrayList<>();

    for(Domainvalue feature : zusatzangaben)
    {
        Session hb_session;
        Transaction tx = null;
        List<Domainvalue> dvs = null;

        try
        {
            hb_session = HibernateUtil.getSessionFactory().getCurrentSession();
            tx = hb_session.beginTransaction();

            String hql = "from Domain d where d.domainName=:domainName";
            Domain domain = (Domain)hb_session.createQuery(hql).setParameter("domainName", feature.getDomainDisplay()).uniqueResult(); 

            hql = "from Domainvalue dv where dv.domain=:domain";

            dvs = (List<Domainvalue>)hb_session.createQuery(hql).setParameter("domain", domain.getDomainId()).list();
        }
        catch(Exception e) { System.out.println(e.getMessage());}
        finally
        {
            if(tx != null) tx.commit();
        }



        if(dvs != null)
            for(Domainvalue dv : dvs)
            {
                subfeatures.add(new Feature(feature.getDomainDisplay(), dv.getDomainDisplay(), dv.getDomainCode()));
            }
    } 
    Object[] array = subfeatures.toArray();

    Feature[] featureArray = new Feature[array.length];
    int index = 0;

    for(Object o : array)
    {
        if(o instanceof Feature)
        {
            featureArray[index] = (Feature)o;
            index++;
        }
    }

    featureGroupsModel = new FeatureGroupsModel(featureArray, new FeatureComparator());
    featureGroupsModel.setMultiple(true);
}

    @Command("selectGroup")
public void selectGroup(@BindingParam("data") Object data) {
    if(data instanceof FeatureGroupsModel.FeatureGroupInfo)
    {
        FeatureGroupsModel.FeatureGroupInfo groupinfo = (FeatureGroupsModel.FeatureGroupInfo) data;
        int groupIndex = groupinfo.getGroupIndex();
        int childCount = featureGroupsModel.getChildCount(groupIndex);
        boolean added = featureGroupsModel.isSelected(groupinfo);
        for(int childIndex = 0; childIndex < childCount; childIndex++) {
            Feature feature = featureGroupsModel.getChild(groupIndex, childIndex);
            if(added) {
                featureGroupsModel.addToSelection(feature);
            } else {
                featureGroupsModel.removeFromSelection(feature);
            }
        }
    }
}

Hi there!

I'am fairly new to web developement and I'am struggeling with a project of mine that works exactly like the example: [zkdemo/listbox/list_group] which i can't post as a link cause I'dont have enough karma

The only thing i can't get to work is the mechanic to expand and collapse the Listitems of a group.

I tried the developer tool (F12) of FireFox to look at the Code. With that I found out that the Listitems use css classes like z-listcell, z-listgroup-inner etc. But there is my problem i nearly don't know anything about the css stuff and i haven't found a documentation yet. Does anyone know how I can implement the arrow icon and the expand and collaps feature?

I only have basic css knowledg so I might need some hints ;)

The Renderer:

public class FeatureListGroupRenderer implements ListitemRenderer<Object>{

@Override
public void render(Listitem item, Object data, int index) throws Exception {
    if(item instanceof Listgroup) {
        FeatureGroupsModel.FeatureGroupInfo groupinfo = (FeatureGroupsModel.FeatureGroupInfo) data;
        Feature feature = groupinfo.getFirstChild();
        String groupTxt;
        switch(groupinfo.getColIndex())
        {
            case 0:
                groupTxt = feature.getCategory();
                break;
            case 1:
                groupTxt = feature.getName();
                break;
            case 2:
                groupTxt = feature.getDescription();
                break;
            default:
                groupTxt = feature.getCategory();
        }
        Listcell cell = new Listcell(groupTxt);
        cell.setSpan(2);
        cell.setClass("z-listcell z-listgroup-inner");
       // item.setStyle("padding-left:20px");

        item.appendChild(cell);
        item.setValue(data);
        item.setClass("z-listgroup open-true");
        //((Listgroup)item).setLabel("Test");
        //item.setAttribute("onOpen", ((Listgroup) item).isOpen());
        item.setCheckable(false);


    } else if (item instanceof Listgroupfoot) {
        Listcell cell = new Listcell();
        cell.setSclass("featureFooter");
        cell.setSpan(2);
        cell.appendChild(new Label(" Groupesize: " + data));
        item.appendChild(cell);
        item.setCheckable(false);
    } else {
        Feature feature = (Feature) data;
        item.appendChild(new Listcell(feature.getName()));
        item.appendChild(new Listcell(feature.getDescription()));
        item.setValue(feature);
    }
}

}

The ZUL snippet:

 <div height="165px">
                                    <listbox model="@load(vm.featureGroupsModel)" checkmark="true" onSelect="@command('selectGroup', data=event.reference.value)"
                                             emptyMessage="Keine Daten gefunden." itemRenderer="de.fhdo.model.FeatureListGroupRenderer" multiple="true">
                                             <custom-attributes org.zkoss.zul.listbox.groupSelect="true" />
                                        <listhead>
                                            <listheader hflex="1"/>
                                            <listheader hflex="1"/>
                                        </listhead>
                                        <auxhead>
                                        <auxheader style="line-height: 10px; background: linear-gradient(to bottom, #d6f9ff 0%, #9ee8fa 100%);" colspan="2" label="Features"/>
                                    </auxhead>
                                    <template name="featuresModel">
                                        <listcell label="@bind(each)">
                                        </listcell>
                                    </template>
                                    </listbox>
                                </div>

Codesnippet from the VM:

    @Init

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

    featureTypesList = new ListModelList<>();
    featureTypesList.setMultiple(true);

    List<Feature> subfeatures = new ArrayList<>();

    for(Domainvalue feature : zusatzangaben)
features)
    {
        Session hb_session;
        Transaction tx = null;
        List<Domainvalue> dvs = null;

        try
        {
            hb_session = HibernateUtil.getSessionFactory().getCurrentSession();
            tx = hb_session.beginTransaction();

            String hql = "from Domain d where d.domainName=:domainName";
            Domain domain = (Domain)hb_session.createQuery(hql).setParameter("domainName", feature.getDomainDisplay()).uniqueResult(); 

            hql = "from Domainvalue dv where dv.domain=:domain";

            dvs = (List<Domainvalue>)hb_session.createQuery(hql).setParameter("domain", domain.getDomainId()).list();
createSubfeaturesFromDomainvalue(feature);
        }
        catch(Exception e) { System.out.println(e.getMessage());}
        finally
        {
            if(tx != null) tx.commit();
        }



        if(dvs != null)
            for(Domainvalue dv : dvs)
            {
                subfeatures.add(new Feature(feature.getDomainDisplay(), dv.getDomainDisplay(), dv.getDomainCode()));
            }
    } 
    Object[] array = subfeatures.toArray();

    Feature[] featureArray = new Feature[array.length];
    int index = 0;

    for(Object o : array)
    {
        if(o instanceof Feature)
        {
            featureArray[index] = (Feature)o;
            index++;
        }
    }

    featureGroupsModel = new FeatureGroupsModel(featureArray, new FeatureComparator());
    featureGroupsModel.setMultiple(true);
}

    @Command("selectGroup")
public void selectGroup(@BindingParam("data") Object data) {
    if(data instanceof FeatureGroupsModel.FeatureGroupInfo)
    {
        FeatureGroupsModel.FeatureGroupInfo groupinfo = (FeatureGroupsModel.FeatureGroupInfo) data;
        int groupIndex = groupinfo.getGroupIndex();
        int childCount = featureGroupsModel.getChildCount(groupIndex);
        boolean added = featureGroupsModel.isSelected(groupinfo);
        for(int childIndex = 0; childIndex < childCount; childIndex++) {
            Feature feature = featureGroupsModel.getChild(groupIndex, childIndex);
            if(added) {
                featureGroupsModel.addToSelection(feature);
            } else {
                featureGroupsModel.removeFromSelection(feature);
            }
        }
    }
}

Hi there!

I'am fairly new to web developement and I'am struggeling with a project of mine that works exactly like the example: [zkdemo/listbox/list_group] which i can't post as a link cause I'dont have enough karma

The only thing i can't get to work is the mechanic to expand and collapse the Listitems of a group.

I tried the developer tool (F12) of FireFox to look at the Code. With that I found out that the Listitems use css classes like z-listcell, z-listgroup-inner etc. But there is my problem i nearly don't know anything about the css stuff and i haven't found a documentation yet. Does anyone know how I can implement the arrow icon and the expand and collaps feature?

I only have basic css knowledg so I might need some hints ;)

The Renderer:

public class FeatureListGroupRenderer implements ListitemRenderer<Object>{

@Override
public void render(Listitem item, Object data, int index) throws Exception {
    if(item instanceof Listgroup) {
        FeatureGroupsModel.FeatureGroupInfo groupinfo = (FeatureGroupsModel.FeatureGroupInfo) data;
        Feature feature = groupinfo.getFirstChild();
        String groupTxt;
        switch(groupinfo.getColIndex())
        {
            case 0:
                groupTxt = feature.getCategory();
                break;
            case 1:
                groupTxt = feature.getName();
                break;
            case 2:
                groupTxt = feature.getDescription();
                break;
            default:
                groupTxt = feature.getCategory();
        }
        Listcell cell = new Listcell(groupTxt);
        cell.setSpan(2);
        cell.setClass("z-listcell z-listgroup-inner");
       // item.setStyle("padding-left:20px");

        item.appendChild(cell);
        item.setValue(data);
        item.setClass("z-listgroup open-true");
        //((Listgroup)item).setLabel("Test");
        //item.setAttribute("onOpen", ((Listgroup) item).isOpen());
        item.setCheckable(false);


    } else if (item instanceof Listgroupfoot) {
        Listcell cell = new Listcell();
        cell.setSclass("featureFooter");
        cell.setSpan(2);
        cell.appendChild(new Label(" Groupesize: " + data));
        item.appendChild(cell);
        item.setCheckable(false);
    } else {
        Feature feature = (Feature) data;
        item.appendChild(new Listcell(feature.getName()));
        item.appendChild(new Listcell(feature.getDescription()));
        item.setValue(feature);
    }
}

}

The ZUL snippet:

 <div height="165px">
                                    <listbox model="@load(vm.featureGroupsModel)" checkmark="true" onSelect="@command('selectGroup', data=event.reference.value)"
                                             emptyMessage="Keine Daten gefunden." itemRenderer="de.fhdo.model.FeatureListGroupRenderer" multiple="true">
                                             <custom-attributes org.zkoss.zul.listbox.groupSelect="true" />
                                        <listhead>
                                            <listheader hflex="1"/>
                                            <listheader hflex="1"/>
                                        </listhead>
                                        <auxhead>
                                        <auxheader style="line-height: 10px; background: linear-gradient(to bottom, #d6f9ff 0%, #9ee8fa 100%);" colspan="2" label="Features"/>
                                    </auxhead>
                                    <template name="featuresModel">
                                        <listcell label="@bind(each)">
                                        </listcell>
                                    </template>
                                    </listbox>
                                </div>

Codesnippet from the VM:

    @Init

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

    featureTypesList = new ListModelList<>();
    featureTypesList.setMultiple(true);

    List<Feature> subfeatures = new ArrayList<>();

    for(Domainvalue feature : features)
    {
        List<Domainvalue> dvs = null;

        try
        {
            dvs = createSubfeaturesFromDomainvalue(feature);
        }
        catch(Exception e) { System.out.println(e.getMessage());}



        if(dvs != null)
            for(Domainvalue dv : dvs)
            {
                subfeatures.add(new Feature(feature.getDomainDisplay(), dv.getDomainDisplay(), dv.getDomainCode()));
            }
    } 
    Object[] array = subfeatures.toArray();

    Feature[] featureArray = new Feature[array.length];
    int index = 0;

    for(Object o : array)
    {
        if(o instanceof Feature)
        {
            featureArray[index] = (Feature)o;
            index++;
        }
    }

    featureGroupsModel = new FeatureGroupsModel(featureArray, new FeatureComparator());
    featureGroupsModel.setMultiple(true);
}

    @Command("selectGroup")
public void selectGroup(@BindingParam("data") Object data) {
    if(data instanceof FeatureGroupsModel.FeatureGroupInfo)
    {
        FeatureGroupsModel.FeatureGroupInfo groupinfo = (FeatureGroupsModel.FeatureGroupInfo) data;
        int groupIndex = groupinfo.getGroupIndex();
        int childCount = featureGroupsModel.getChildCount(groupIndex);
        boolean added = featureGroupsModel.isSelected(groupinfo);
        for(int childIndex = 0; childIndex < childCount; childIndex++) {
            Feature feature = featureGroupsModel.getChild(groupIndex, childIndex);
            if(added) {
                featureGroupsModel.addToSelection(feature);
            } else {
                featureGroupsModel.removeFromSelection(feature);
            }
        }
    }
}

public class FeatureGroupsModel extends GroupsModelArray<Feature, FeatureGroupsModel.FeatureGroupInfo, Object, Object>{

public FeatureGroupsModel(Feature[] data, Comparator<Feature> cmpr) {
    super(data, cmpr);
}

protected FeatureGroupInfo createGroupHead(Feature[] groupdata, int index, int col){
    return new FeatureGroupInfo(groupdata[0], index, col);
}

protected Object createGroupFoot(Feature[] groupdata, int index, int col)
{
    return groupdata.length;
}

public static class FeatureGroupInfo {
    private Feature firstChild;
    private int groupIndex;
    private int colIndex;

    public FeatureGroupInfo(Feature firstChild, int groupIndex, int colIndex) {
        this.firstChild = firstChild;
        this.groupIndex = groupIndex;
        this.colIndex = colIndex;
    }

    public Feature getFirstChild() {
        return firstChild;
    }
    public int getGroupIndex() {
        return groupIndex;
    }
    public int getColIndex() {
        return colIndex;
    }        
}