Custom components creation

answered 2017-03-03 06:23:52 +0800

chillworld
5367 ● 4 ● 9
https://github.com/chillw...

updated 2017-03-07 08:00:23 +0800

Actually, if you want to create a custom component a good technique is not using zul files but write it all in a Java class.

It's maybe a little more work, but you can do much more and the performance is a little better, because he doesn't need to search for the zul, executing the createComponents of the zul,...

When your class is ready, you can make your own tag by adding this in the lang-addon.xml :

<component>
    <component-name>myTagNameForZul</component-name>
    <extends>div</extends>
    <component-class>be.chillworld.web.components.MyCustomCompontClass</component-class>
</component>

And that's it.

I'll show you some component I have created.
It's actually a combobox for Enums, so I don't need to give the model to the combobox.
The only thing I need to set is the fqn of the Enum class and the combobox will have it's model.

/**
 *
 * @author chillworld
 */
public class EnumCombobox extends Combobox implements AfterCompose {

    private Class<Enum> enumClass;
    private boolean emptyValue = false;

    @Override
    public void afterCompose() {
        ListModelList model = new ListModelList(enumClass.getEnumConstants());
        if (emptyValue) {
            model.add(0, null);
        }
        setModel(model);
        setItemRenderer(new ComboitemRenderer<Enum>() {

            @Override
            public void render(Comboitem item, Enum data, int index) throws Exception {
                if (data == null) {
                    item.setLabel("Empty selection");
                    item.setStyle("color:grey");
                } else {
                    item.setLabel(data.toString());
                }
                item.setValue(data);
            }

        });
    }

    public void setEnumClass(String enumClass) throws ClassNotFoundException {
        this.enumClass = (Class<Enum>) Class.forName(enumClass);
    }

    public void setEmptyValue(boolean emptyValue) {
        this.emptyValue = emptyValue;
    }

    @Override
    public void setConstraint(String constr) {
        super.setConstraint(constr);
        this.clearErrorMessage();
    }
}

Usage :

<enumcombobox enumClass="be.chillworld.model.enums.SomeEnum" selectedItem="@bind(vm.selectedItem)" />