Revision history [back]

Hi,

I want to use Bootstrap component button with glyphicons. (getbootstrap.com/components/#glyphicons-examples)

I need output like this:

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span>Icon Button
</button>

However Zkoss Button does not take any elements inside, only text.

So I am trying to create a new component iconButton that extends Button and takes one more parameter icon that specifies the icon name.

<iconbutton label="Icon Button" icon="glyphicon-star"/>

I followed this manual (books.zkoss.org/wiki/ZK%20Component%20Development%20Essentials/Creating%20a%20simple%20ZK%20Component) and created component but when I open the page where I use iconButton it just show Zkoss indicator Loading... The page is loaded and Tomcat does not print any output or exception.

Could anyone help me to find the problem here? Thanks.

My code:

Java class IconButton.java:

package com.foo;

public class IconButton extends org.zkoss.zul.Button {

    private static final long serialVersionUID = 1L;

    private String icon;

    public String getIcon() {
        return icon;
    }

    public void setIcon(String icon) {
        this.icon = icon;
        smartUpdate("icon", icon);
    }

     protected void renderProperties(org.zkoss.zk.ui.sys.ContentRenderer renderer)
                throws java.io.IOException {
            super.renderProperties(renderer);
            render(renderer, "icon", icon);
     }
}

Widget at /src/main/webapp/js/com/foo/IconButton.js:

com.foo.IconButton = zk.$extends(zk.Button, {

    _icon : '', // default icon

    geticon : function() {
        return this._icon;
    },

    seticon : function(icon) {
        if (this._icon != icon) {
            this._icon = icon;
            if (this.desktop)
                this.$n().innerHTML = zUtl.encodeXML(icon);
        }
    }

});

Mold at /src/main/webapp/js/com/foo/mold/icon-button.js:

function (out) {
    var tabi = this._tabindex;

    out.push('<button type="', this._type, '"', this.domAttrs_());
    if (this._disabled) out.push(' disabled="disabled"');
    if (tabi) out.push(' tabindex="', tabi, '"');
    out.push('><span class="glyphicon ', this._icon, '"></span>', this.domContent_(), '</button>');
}

Package at /src/main/webapp/js/com/foo/zk.wpd:

<package name="com.foo" language="xul/html" depends="zul.wgt">
    <widget name="IconButton"/>
</package>

Language addon:

<?xml version="1.0" encoding="UTF-8"?>
<language-addon>
    <addon-name>dag-bootstrap</addon-name>
    <language-name>xul/html</language-name>
    <!-- <javascript src="/js/zkoss-override.js" charset="UTF-8" /> -->

    <stylesheet href="/css/zkoss-override.css" type="text/css" />

    <javascript package="com.foo" />

    <component>
        <component-name>iconButton</component-name>
        <component-class>com.foo.IconButton</component-class>
        <widget-class>com.foo.IconButton</widget-class>
        <mold>
            <mold-name>default</mold-name>
            <mold-uri>mold/icon-button.js</mold-uri>
        </mold>
    </component>

</language-addon>

Hi,

I want to use Bootstrap component button with glyphicons. (getbootstrap.com/components/#glyphicons-examples)

I need output like this:

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span>Icon Button
</button>

However Zkoss Button does not take any elements inside, only text.

So I am trying to create a new component iconButton that extends Button and takes one more parameter icon that specifies the icon name.

<iconbutton label="Icon Button" icon="glyphicon-star"/>

I followed this manual (books.zkoss.org/wiki/ZK%20Component%20Development%20Essentials/Creating%20a%20simple%20ZK%20Component) and created component but when I open the page where I use iconButton it just show Zkoss indicator Loading...

In Chrome console is this error: Uncaught Unknown widget: com.foo.IconButton

What do I need to Zkoss can find my IconButton widget? Thanks.

The page is loaded and Tomcat does not print any output or exception.

Could anyone help me to find the problem here? Thanks.

Uncaught Unknown widget: com.foo.IconButton zk.wpd:18320
create zk.wpd:18320
create zk.wpd:18342
create zk.wpd:18342
create zk.wpd:18342
create zk.wpd:18342
mtBL zk.wpd:18176
doEnd zk.wpd:17797
zk.copy.setLoaded._zkf zk.wpd:17835
(anonymous function) zul.box.wpd:1648
doEnd zk.wpd:17797
zk.copy.setLoaded._zkf zk.wpd:17834
(anonymous function) zul.inp.wpd:3653
doEnd zk.wpd:17797
zk.copy.setLoaded._zkf zk.wpd:17834
(anonymous function) zul.wnd.wpd:2268
doEnd zk.wpd:17797
zk.copy.setLoaded._zkf zk.wpd:17834
(anonymous function) com.foo.wpd:29
doEnd zk.wpd:17797
zk.copy.setLoaded._zkf zk.wpd:17834
(anonymous function) zkmax.nav.wpd:15
doEnd zk.wpd:17797
zk.copy.setLoaded._zkf zk.wpd:17834
(anonymous function) zul.utl.wpd:280
doEnd zk.wpd:17797
zk.copy.setLoaded._zkf zk.wpd:17834
(anonymous function) zk.wpd:27075
doEnd zk.wpd:17797
zk.copy.setLoaded._zkf zk.wpd:17834
(anonymous function) zk.fmt.wpd:502
doEnd zk.wpd:17797
zk.copy.setLoaded._zkf zk.wpd:17834
(anonymous function) zk.wpd:24068
doEnd zk.wpd:17797
zk.copy.setLoaded._zkf zk.wpd:17834
(anonymous function)

My code:

Java class IconButton.java:

package com.foo;

public class IconButton extends org.zkoss.zul.Button {

    private static final long serialVersionUID = 1L;

    private String icon;

    public String getIcon() {
        return icon;
    }

    public void setIcon(String icon) {
        this.icon = icon;
        smartUpdate("icon", icon);
    }

     protected void renderProperties(org.zkoss.zk.ui.sys.ContentRenderer renderer)
                throws java.io.IOException {
            super.renderProperties(renderer);
            render(renderer, "icon", icon);
     }
}

Widget at /src/main/webapp/js/com/foo/IconButton.js:

com.foo.IconButton = zk.$extends(zk.Button, {

    _icon : '', // default icon

    geticon : function() {
        return this._icon;
    },

    seticon : function(icon) {
        if (this._icon != icon) {
            this._icon = icon;
            if (this.desktop)
                this.$n().innerHTML = zUtl.encodeXML(icon);
        }
    }

});

Mold at /src/main/webapp/js/com/foo/mold/icon-button.js:

function (out) {
    var tabi = this._tabindex;

    out.push('<button type="', this._type, '"', this.domAttrs_());
    if (this._disabled) out.push(' disabled="disabled"');
    if (tabi) out.push(' tabindex="', tabi, '"');
    out.push('><span class="glyphicon ', this._icon, '"></span>', this.domContent_(), '</button>');
}

Package at /src/main/webapp/js/com/foo/zk.wpd:

<package name="com.foo" language="xul/html" depends="zul.wgt">
    <widget name="IconButton"/>
</package>

Language addon:

<?xml version="1.0" encoding="UTF-8"?>
<language-addon>
    <addon-name>dag-bootstrap</addon-name>
    <language-name>xul/html</language-name>
    <!-- <javascript src="/js/zkoss-override.js" charset="UTF-8" /> -->

    <stylesheet href="/css/zkoss-override.css" type="text/css" />

    <javascript package="com.foo" />

    <component>
        <component-name>iconButton</component-name>
        <component-class>com.foo.IconButton</component-class>
        <widget-class>com.foo.IconButton</widget-class>
        <mold>
            <mold-name>default</mold-name>
            <mold-uri>mold/icon-button.js</mold-uri>
        </mold>
    </component>

</language-addon>