ZK + component jar static resources

Question

I am using the ZK framework and have created a maven project of custom components.

I am trying to include static CSS for the project (for components with no javascript) as per the brief outline on this page:

http://books.zkoss.org/wiki/ZK_Component_Development_Essentials/Packing_as_a_Jar

How does zk know to include the CSS generated when the project is included in a ZK WEB project ? Currently my resources directory of my component project looks like this:

web
    foo
         bar
            css
               zk.wcs
               macro.css.dsp
               other.css.dsp
            less
               macro.less
               other.less  

My zk.wcs :

<css language="xul/html">
    <stylesheet href="~./foo/bar/css/macro.css.dsp"/>
    <stylesheet href="~./foo/bar/css/primitive.css.dsp"/>
</css>

My styles in macro.css.dsp are not applied when using the component project in my web zk project however...

Answer 1

You can include css in lang-addon.xml:

<!-- define a component -->
<component>
    <!-- the tag name of this component
        required,
        must be unique -->
    <component-name>codemirror</component-name>
    <!-- fully-qualified java class name at server side
        required for a new component that not extends another component -->
    <component-class>org.sinnlabs.zk.ui.CodeMirror</component-class>
    <!-- widget class, 'org.sinnlabs.zk.ui.CodeMirror' also specify the
        package of widget class 'org.sinnlabs.zk.ui'
        required for a new component that not extends another component -->

    <widget-class>org.sinnlabs.zk.ui.CodeMirrorWidget</widget-class>
    <!-- mold
        required for a new component that not extends another component
        or has self widget-class

        a mold denotes the files that to render and style this comopnent -->
    <mold>
        <!-- default mold is required -->
        <mold-name>default</mold-name>
        <!-- relative path based on widget-class' path
            (web/js/org/sinnlabs/zk/ui/)

            where codemirrorwidget.js (required) contains a function that
            will render the html of the comopnent. -->
        <mold-uri>mold/codemirrorwidget.js</mold-uri>
        <css-uri>css/codemirror.css</css-uri>
    </mold>
</component>

zk.load will load your css style.