ZK Component Development Essentials/Packing as a Jar

The Jar Archive

This step is to pack a jar for our ZK component , and then you can include it to your project or share with others.

To this we are going to show what a component jar need , and what configuration you can set in the jars.

Config files

----/META-INF/MANIFEST.MF
     
----/metainfo/mesg/msgzul.properties                              (optional) 
                              /msgzul_<locale>.properties              (optional ...)
 
                    /xml/<component-name>.xsd                       (optional)

                    /zk/lang.xml                                                  (optional)
                    /zk/lang-addon.xml   

File descriptions

• META-INF
  • MANIFEST.MF
    • The file for jar defino
• metainfo
  • mesg
    • msgzul.properties
      • These files are i18n resource files,you can define with the locale you want , the default file is msgzul.properties.
  • xml
    • <component-name>.xsd
      • The xml schema for component tags
  • zk
    • lang.xml
      • The language definition file (ex. "xul/html") , and you can define components here , too.
    • lang-addon.xml
      • The language add-on define components with specific language.

• For exmaple.

----/META-INF/MANIFEST.MF
     
----/metainfo/mesg/msgzul.properties 
                              /msgzul_en_us.properties 
                              /msgzul_ca.properties 
                              /msgzul_ko.properties 
                              /msgzul_cs.properties 
                              /msgzul_zh.properties 
                              /msgzul_zh_tw.properties    
                              (......and so on )

                    /xml/simplelabel.xsd
                    /zk/lang.xml 
                    /zk/lang-addon.xml

Component classes

----/<java-package-folder and classes> 

• For exmaple.

----/com/foo/SimpleLabel.class
                   /events/ClearEvent.class

Widget js-class/css/mold

/web/js/<component-package>/mold/<widget-mold-js-file>
                                                  /css/<widget-css-dsp-file>               (optional)
                                                  /css/<widget-css-file>               (optional)
                                                  /<widget-class-js-file>
                                                  /zk.wpd

File descriptions

• web
  • js
    • <component-package>
      • mold
        • <widget-mold-js-file> (ex. simple-label.js )
          • Widget mold file , you can write widget's html with javascript function here.
      • css
        • <widget-css-dsp-file> (ex. simple-label.css.dsp )
          • The css dsp files ,in the dsp you can use some variable with zk enviroment to write it.
        • <widget-css-file> (ex. simple-label.css )
          • the pure css files.
      • <widget-class-file> (ex. Simple-label.js)
        • The widget class you write .

• • • • zk.wpd
        • Define your component's package and your widgets here, and the dependency with other package.

• For exmaple.

/web/js/com/foo/mold/simple-label.js
                          /css/simple-label.css.dsp 
                          /simple-label.js
                          /zk.wpd

Other files

/web/<component-package>/css/zk.wcs                              (optional)
                                                     /<css-files>                       (optional)
                                              /img                                         (optional)

File descriptions

• web
  • <component-package>
    • css
      • zk.wcs
        • Let you can config the CSS file for a particular language
    • img
      • This is a folder for some image files , and you can access them in xxx.css.dsp files through ${c:encodeURL('~./img/<component-package>/xxx.png')}

• For exmaple.

/web/com/foo/css/zk.wcs
                            /xxx.css.dsp
                     /img/label-background.png   
                            /label-background-hover.png