Trouble Shooting

From Documentation

Jump to: navigation, search

If you met any ZK problems you CANNOT solved and you DO search this site and ZK Forum,

you can post it to our Bug Tracker System

Contents

Upgrade Issues

  • how to resolve javax.servlet.ServletException: Only one layout servlet is allowed in one context
  1. please remove the older jar of ZK first.
  2. put the new zk jar into web-inf\lib
  3. also check there is any zk jar files in the common/shared lib of the application server.
Below is the core zk jar list of different version., 
 2.4.1
      zcommon.jar
      zhtml.jar
      zk.jar
      zkplus.jar
      zul.jar
      zweb.jar
 3.0RC
      zcommon.jar
      zcommons-el.jar  *new since 3.0RC
      zhtml.jar
      zk.jar
      zkmax.jar        *new since 3.0RC
      zkplus.jar
      zml.jar          *new since 3.0RC
      zul.jar
      zweb.jar
 3.0RC2
      zcommon.jar
      zcommons-el.jar
      zhtml.jar
      zk.jar
      zkmax.jar
      zkplus.jar
      zml.jar
      zul.jar
      zulex.jar        *new since 3.0RC2
      zweb.jar
 3.0
      zcommon.jar
      zcommons-el.jar
      zhtml.jar
      zk.jar
      zkex.jar         *rename from zulex.jar since 3.0
      zkmax.jar
      zkplus.jar
      zml.jar
      zul.jar
      zweb.jar

Browser Issues

IE

IE Overflow Scrolling of Relative Positioned DIV

The overflow bug is documented well and exists in IE6 or IE7 as well. Thus, in this case we have to specify "position:relative" to the outer tag. For example, 

<window title="tree demo" border="normal">
  <div style="overflow:auto;position:relative" width="300px"
    height="100px">
    <tree id="tree" width="90%" rows="5">
      <treecols sizable="true">
        <treecol label="Name" />
        <treecol label="Description" />
      </treecols>
      <treechildren>
        <treeitem>
          <treerow>
            <treecell label="Item 1" />
            <treecell label="Item 1 description" />
          </treerow>
        </treeitem>
        <treeitem>
          <treerow>
            <treecell label="Item 2" />
            <treecell label="Item 2 description" />
          </treerow>
          <treechildren>
            <treeitem>
              <treerow>
                <treecell label="Item 2.1" />
              </treerow>
              <treechildren>
                <treeitem>
                  <treerow>
                    <treecell label="Item 2.1.1" />
                  </treerow>
                </treeitem>
                <treeitem>
                  <treerow>
                    <treecell label="Item 2.1.2" />
                  </treerow>
                </treeitem>
              </treechildren>
            </treeitem>
            <treeitem>
              <treerow>
                <treecell label="Item 2.2" />
                <treecell
                  label="Item 2.2 is something who cares" />
              </treerow>
            </treeitem>
          </treechildren>
        </treeitem>
        <treeitem label="Item 3" />
      </treechildren>
    </tree>
  </div>
</window>

How to fix the alpha transparency problem of PNG files found in IE6?

IE6 failed to render a PNG with alpha transparency correctly. Refer to here for more infomation.

Solution for ZK 3.x and earlier 
<image mold="alphafix" src="alpha.png"/>
Solution for ZK 5 and later

Since ZK 5, the fix is generic. It applies to all images, not just the image component. However, you have to declare what to fix with <?script?>. For example, 

<?script content="jq.IE6_ALPHAFIX='.png';"?>
<zk>
  <button image="foo.png"/>
</zk>

where .png causes all PNG images will be fixed. If you want to fix certain images, you can do as follows 

<?script content="jq.IE6_ALPHAFIX='more.png|-trans.png'?>

If <?script?> doesn't work, you can try using a regular script-component: 

<zk>
  <script type="text/javascript">jq.IE6_ALPHAFIX='.png';</script>
  <button image="foo.png" />
</zk>

If you prefer to use plain Java instead of ZUL files, you can instantiate a Script component and append it to another component: 

Script alphafix = new Script();
alphafix.setContent("jq.IE6_ALPHAFIX='.png';");
parent.appendChild(alphafix);

How to resolve the issue of CSS not loaded in IE6&7 while integrating ZK and JSP.

As so far as I know, the ZK CSS file fails to load in JSP on IE6&7, so you must add the following page definition to your JSP file. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
...
//Your JSP content
...

Firefox

Cursor lost in overlapped over a Div with "overflow:auto"

This issue existed in Firefox's bugs-list for a long time. -- input field over div with overflow has no input cursor

Server Issues

Web Servers that don't support JSP 2.0

ZK 3.0 or later

ZK allows developers to use EL expressions, but it doesn't require the Web server to support JSP 2.0. ZK actually doesn't depend on JSP any more.

ZK 2.4 or earlier

For those who use older version of ZK (before 3.0), it is possible to configure an old Web server to support JSP 2.0 as described MyFaces's Installation.

The basic idea is to copy jsp-api.jar to the proper directory, which depends on the Web server. For example, the directory is common/lib if Tomcat 4.1.x is used.

If you find a way to enable ZK on an old Web server, don't hesitate to share the information with us by adding them the proper section above.

The jsp-api.jar file can be found in Tomcat's download, or ZK Subversion.


OS Issues

Notes in Linux

 1.remember to set headless and DISPLAY in linux
   export DISPLAY=:1.0
   export CATALINA_OPTS="-Djava.awt.headless=true"

Other Issues

Why alert instead of an error box when access the value property in BeanShell

In the following code snippet, the error box is not shown. Rather, ZK considered it as programming error (by showing the exception with JavaScript's alert) 

<zk>
  <textbox id="box" constraint="no empty"/>
  <button label="cause validation error" onClick="alert(box.value)"/>
</zk>

Why? BeanShell intercepts all exceptions and uses its own exception to represent them. Thus, ZK doesn't know it is actually caused by WrongValueException.

Solution: Use getValue() and setValue() instead of accessing the property name directly. 

<zk>
  <textbox id="box" constraint="no empty"/>
  <button label="cause validation error" onClick="alert(box.getValue())"/>
</zk>

On Width and Percentages

Using the width= attribute with percentages in ZK requires careful attention because its meaning is different from other frameworks. On one hand, ZK strives to be a browser-independent framework. On the other hand, when rendering HTML, ZK often passes the width= attribute on to the HTML elements it uses, which leads to unexpected effects. The reason is that the HTML elements to which the width= attribute is being passed form a different hierarchy than the ZUL elements from which they originate.

To understand this, consider the following scenario: 

  <hbox width="100%">
        <div width="50%" style="background-color: blue;"> Left </div>
        <div width="50%" style="background-color: green;"> Right </div>
  </hbox>

Here, the intention is for the parent hbox to occupy 100% of its parent (maybe a window), and for each 'div' child to occupy 50% of its parent. In CSS, [W3C], the width attribute refers to the containing block.

However, ZK renders the above roughly as follows: 

  <table width="100%">
    <tr>
      <td>
        <div style="width:50%"> Left </div>
      </td>
      <td>
        <div style="width:50%"> Right </div>
      </td>
    </tr>
  </table>

Users familiar with CSS will note that the width:50% attribute now no longer refers to the 'table' element that was used to render the 'hbox', but to the 'td' element ZK inserted! The default width of the td element is 50% of the table (since there are two 'td' elements), hence the effective width of the 'div' element is 25% of the table. It is apparent that in order to use width= properly, one must understand how ZK translates between ZUL and HTML (contrary to the intentions of ZK's developers.)

To address this problem, ZK provides a "widths" attribute for box elements. The 'widths' attribute allows the assignment of 'width:' attributes to the 'td' elements that make up a box. To achieve the desired effect, you would have to use: 

  <hbox widths="50%,50%" width="100%">
    <div width="100%" style="background-color: blue;"> Left </div>
    <div width="100%" style="background-color: green;"> Right </div>
  </hbox>

which will be rendered to 

  <table width="100%">
    <tr>
      <td style="width:50%">
        <div style="width:100%"> Left </div>
      </td>
      <td style="width:50%">
        <div style="width:100%"> Right </div>
      </td>
    </tr>
  </table>

Thus, the table takes up 100% of its parent, each 'td' elements takes up 50% of the table's width, and the 'div' elements occupying each 'td' take up the entire space (100%).

The 'widths' attribute provides a work-around for boxes, but, unfortunately, it does not provide a general solution. By passing on 'width=' attributes to HTML elements, ZK puts the rendering at the whim of the browser being used, therefore exposing the ZK user to all width-related rendering bugs. Moreover, these bugs are hard to debug because they require the ZK user to understand ZK's rendering process, before they can begin to address the browser pecularities causing them.

For instance, specifying a width of 100% to a <textbox> will result in a style of "width:100%" applied to a <input type="text"> element, which triggers bugs in different browsers - for instance, IE ignores the width restriction when the value placed in the textbox is larger than the box. In this case, IE stretches the box. [Workaround]

Retrieved from "http://docs.zkoss.org/wiki/Trouble_Shooting"