Saturday, December 17, 2011

ZK Macro Component practice - togglebutton

test.zul:


<?component name="togglebutton" macroURI="/togglebutton.zul"
   class="com.ToggleButton"?>
<zk>
    <togglebutton onCheck="alert(self.isChecked());" checked="true"
        disableImage="img/star_empty.png"
        enableImage="img/star_fullfill.png" />
    <togglebutton onCheck="alert(self.isChecked());" checked="false"
        disableImage="img/star_empty.png"
        enableImage="img/star_fullfill.png" />
</zk>

togglebutton.zul:


<window style="display: inline-block;">
    <checkbox id="mc_togglebutton_checkbox" visible="false" />
    <image id="mc_togglebutton_image" src="img/battery.gif" />
</window>

ToggleButton.java:


package com;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.HtmlMacroComponent;
import org.zkoss.zk.ui.event.CheckEvent;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.event.Events;
import org.zkoss.zul.Image;

public class ToggleButton extends HtmlMacroComponent {
    private Image _img;
    private boolean _checked = true;
    private String _disableImage;
    private String _enableImage;
    public void afterCompose() {
        super.afterCompose();
        init();
    }

    private void init() {
        // this macro togglebutton
        final Component toggleButton = this;
        _img = (Image) getFirstChild().getFellow("mc_togglebutton_image");
        if (_checked)
            _img.setSrc(getEnableImage());
        else
            _img.setSrc(getDisableImage());

        final Image img = _img;
        img.addEventListener(Events.ON_CLICK, new EventListener(){
            public void onEvent(Event event) throws Exception {
                _checked = !_checked;
                if (_checked)
                    _img.setSrc(getEnableImage());
                else
                    _img.setSrc(getDisableImage());
                // create an onCheck event then post it back
                CheckEvent evt = new CheckEvent(Events.ON_CHECK, toggleButton, _checked);
                Events.postEvent(evt);
            }
        });
    }
    public void setChecked(boolean checked) {
        _checked = checked;
    }
    public boolean isChecked() {
        return _checked;
    }
    public void setDisableImage(String disableImage) {
        _disableImage = disableImage;
        if (_img != null && !_checked)
            _img.setSrc(_disableImage);
    }
    public void setEnableImage(String enableImage) {
        _enableImage = enableImage;
        if (_img != null && _checked)
            _img.setSrc(_enableImage);
    }
    public String getDisableImage() {
        return _disableImage;
    }
    public String getEnableImage() {
        return _enableImage;
    }
}

images:

star_fullfill.png


star_empty.png








The project architecture:


Download:
The project is available on github
https://github.com/benbai123/ZK_Practice/tree/master/Components/projects/togglebutton

 References:
http://books.zkoss.org/wiki/Macro_Components
http://felipecypriano.com/2010/01/15/handling-events-on-zk-macro-components/

No comments:

Post a Comment