0

Custom components creation

asked 2017-03-03 04:23:31 +0800

mangaldaslima gravatar image mangaldaslima
11 2

In the documentation explanation about the custom component creation is good. but in zk project, where the files should be placed (path are not given) are not told. so can any one help me about the files directory structure.

thank you

delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted
1

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

chillworld gravatar image chillworld flag of Belgium
5322 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)" />
link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2017-03-03 04:23:31 +0800

Seen: 37 times

Last updated: Mar 07 '17

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