0

Problem with creating a new component

asked 2014-06-03 11:11:16 +0800

Jonask gravatar image Jonask
1

updated 2014-06-09 15:14:34 +0800

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 error stack trace is:

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>
delete flag offensive retag edit

Comments

I guess some js error showed in your browser console, try use chrome developer tool and see what happen.

roliroli ( 2014-06-09 03:41:51 +0800 )edit

Thanks for advice, it shows Uncaught Unknown widget: com.foo.IconButton but I still cannot find what is wrong. The full error is in editted question.

Jonask ( 2014-06-09 15:17:00 +0800 )edit
Be the first one to answer this question!
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
2 followers

RSS

Stats

Asked: 2014-06-03 11:11:16 +0800

Seen: 50 times

Last updated: Jun 09 '14

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