Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-584

A native component library corresponding to the core components

XMLWordPrintable

    • Icon: New Feature New Feature
    • Resolution: Unresolved
    • Icon: Normal Normal
    • None
    • 5.0.9
    • None

      Having corresponding native classes would be a great convenience. The idea is that a developer can choose whether or not the component needs to have dynamic functionality, and on this basis decide whether or not to add "Native" (or "N") in java or "native" in zul the the front of the component class name, i.e. NativeHlayout (in Java), <nativehlayout>. This way, performance tuning is a breeze, with the native components behaving as expected after the class refactoring.

      Instead of dealing with namespaces, a native component, such as div, could be just:

      <nativehl width="150px">My content</nativehl>

      In Java, I have developed some of my own wrappers to mimic (roughly) the layout of the standard ZK components for my own use. Here is my NativeHlayout class:

      import org.zkoss.zk.ui.Component;
      import org.zkoss.zk.ui.HtmlNativeComponent;

      /**
      *

      • @author Richard Lovell
        */
        public class NativeHlayout extends HtmlNativeComponent {

      public NativeHlayout()

      { this.setTag("div"); this.setEpilogContent("<div style=\"clear:both;\"></div>"); }

      @Override
      public boolean appendChild(Component comp)

      { NativeSpan nSpan = new NativeSpan(); nSpan.setStyle("float:left; margin:2px;"); nSpan.appendChild(comp); return super.appendChild(nSpan); }

      /**

      • @return the width
        */
        public String getWidth() { return (String)this.getDynamicProperty("width"); }

      /**

      • @param width the width to set
        */
        public void setWidth(String width) { this.setDynamicProperty("width", width); }

      /**

      • @return the height
        */
        public String getHeight() { return (String)this.getDynamicProperty("height"); }

      /**

      • @param height the height to set
        */
        public void setHeight(String height) { this.setDynamicProperty("height", height); }

      /**

      • @return the style
        */
        public String getStyle() { return (String)this.getDynamicProperty("style"); }

      /**

      • @param style the style to set
        */
        public void setStyle(String style) { this.setDynamicProperty("style", style); }

        }

      NativeSpan is used to wrap each appended component, so here it is:

      import org.zkoss.zk.ui.HtmlNativeComponent;

      /**
      *

      • @author Richard Lovell
        */
        public class NativeSpan extends HtmlNativeComponent {

      public NativeSpan(){
      this.setTag("span");
      }

      /**

      • @return the width
        */
        public String getWidth() {
        return (String)this.getDynamicProperty("width");
        }

      /**

      • @param width the width to set
        */
        public void setWidth(String width) {
        this.setStyle("display:inline-block;width:"+width);//width for span determined in CSS
        }

      /**

      • @return the height
        */
        public String getHeight() {
        return (String)this.getDynamicProperty("height");
        }

      /**

      • @param height the height to set
        */
        public void setHeight(String height) {
        this.setDynamicProperty("height", height);
        }

      /**

      • @return the style
        */
        public String getStyle() {
        return (String)this.getDynamicProperty("style");
        }

      /**

      • @param style the style to set
        */
        public void setStyle(String style) {
        this.setDynamicProperty("style", style);
        }
        }

      I'm not saying take away the current implementation for native comps because it lends versatility - just to add a native component library that corresponds to the core components.

            Unassigned Unassigned
            RichardL RichardL
            Votes:
            1 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated: