Horizontal scroll bar in Grid table

<zk>

  <window border="normal" title="Grid Display">

 

  <div>The data is displayed in Grid below:</div>

    

    <separator height="10px" />

 

<grid id="dataGrid" height="530px" style="overflow: scroll;">

          <columns>

            <column label="Column1" width="13%" />

   <column label="Column2" width="20%" />

            <column label="Column3" width="20%" />

            <column label="Column4" width="20%" />

            <column label="Column5" width="20%" />

            <column label="Column6" width="8%" />

            <column label="Column7" width="8%" />

            <column label="Column8" width="13%" />

            <column label="Column9" width="13%" />

            <column label="Column10" width="13%" />

            <column label="Column11" width="9%" />

            <column label="Column12" width="8%" />

            <column label="Column13" width="8%" />

            <column label="Column14" width="8%" />

            <column label="Column15" width="8%" />

          </columns>

        </grid>

  </window>

</zk>

how can I detect a zoom event on the map zk ?

Like this:http://blog.zkoss.org/index.php/2012/07/03/zk-openlayers-integration/

Just add the zoom callback function by override the ZK openlayer widget

    <script><![CDATA[
    zk.afterLoad('openlayers', function() {
   var _openlayers = {};
   zk.override(openlayers.Openlayers.prototype, _openlayers, {
       bind_: function (desktop, skipper, after) {
           _openlayers.bind_.apply(this, arguments);
           this.map.events.on({
               zoomend: this.proxy(this.zoomend)
           });
       },
       zoomend: function() {
           zk.log('current zoom level', this.map.zoom);
       }
   });
    });

    ]]></script>

ZK Charts Resize in ZK

Q:I create dynamically ZK Charts in a panel and i want to fit the chart to the panel size if it gets max/minimized.

I found Chart Resize, but since i do it dynamically i got stuck.


    Div div = new Div();
    div.setHflex("1");
    div.setVflex("1");

    div.addEventListener(Events.ON_AFTER_SIZE, new EventListener<Event>() {
        @Override
        public void onEvent(Event event) throws Exception {
            chart.setWidth(event.getWidth() + "px");
        }
    });

    div.appendChild(chart);

it says **"The method getWidth() is undefined for the type Event"**

Ans:

you should use AfterSizeEvent

    div.addEventListener(Events.ON_AFTER_SIZE, new EventListener<AfterSizeEvent>() {
        public void onEvent(AfterSizeEvent event) throws Exception {
            //do something
        }
    }

Zk Charts Change color of crosshair lines in zk

Q:How can I change the color of the crosshair lines? Only found a boolean flag in Tooltip class for switching crosshairs on/off.

Ans:The color of the crosshair lines can be customized by ```setCrosshairs(List)``` in Tooltip .

http://www.zkoss.org/javadoc/latest/zkcharts/org/zkoss/chart/Tooltip.html.

For example:

    Tooltip tooltip = chart.getTooltip();

    // create a list to store the style maps
    List<Map<String, String>> crosshairsStyle = new LinkedList<Map<String, String>>();

    // add the first map to customize x axis crosshair style 
    Map<String, String> xStyle = new LinkedHashMap<String, String>();
    xStyle.put("color", "#f39c12");
    crosshairsStyle.add(xStyle);

    // add the second map to customize y axis crosshair style 
    Map<String, String> yStyle = new LinkedHashMap<String, String>();
    yStyle.put("color", "#27ae60");
    yStyle.put("dashStyle", "dash");
    yStyle.put("width", "2");
    crosshairsStyle.add(yStyle);

    tooltip.setCrosshairs(crosshairsStyle);

Absolute layout in zk

<absolutelayout hflex="1" vflex="3">
                <absolutechildren x="200" y="100">
                    <vbox spacing="4">
                        <hbox spacing="2" >
                            <label
                                value="@load(vm.getText('FIELD_DOCUMENT'))">
                            </label>
                            <textbox hflex="max" width="250px"
                                value="@load(vm.document)" readonly="true"
                                tooltiptext="@load(vm.getText('FIELD_DOCUMENT'))" />
                        </hbox>
                        <hbox spacing="2">
                            <label
                                value="@load(vm.getText('FIELD_INTERNAL'))">
                            </label>
                            <textbox hflex="max" width="250px"
                                value="@load(vm.internal)" readonly="true"
                                tooltiptext="@load(vm.getText('FIELD_INTERNAL'))" />
                        </hbox>
                        <hbox>
                            <label
                                value="@load(vm.getText('FIELD_DOCID'))">
                            </label>
                                <separator width="45px"></separator>
                            <textbox hflex="max" value="@load(vm.docID)"
                                readonly="true" width="250px"
                                tooltiptext="@load(vm.getText('FIELD_DOCID'))" />
                        </hbox>
                        <hbox>
                            <label
                                value="@load(vm.getText('FIELD_PROCESS'))">
                            </label>
                            <separator width="36px"></separator>
                            <textbox hflex="max"  width="250px"
                                value="@load(vm.process)" readonly="true"
                                tooltiptext="@load(vm.getText('FIELD_PROCESS'))" />
                        </hbox>
                    </vbox>
                </absolutechildren>
            </absolutelayout>

Change the font size of tooltip's in ZK

In addition, you could specify the style class by use of HtmlBasedComponent.setSclass(String), such that you could apply the same CSS style to multiple components.

<window>

    <style>

        .red {

            color: blue;

            font-style: oblique;

        }

    </style>

    <textbox sclass="red" /> <!-- first textbox -->

    <textbox sclass="red" /> <!-- another textbox -->

</window>

el expression in zk .

Some EL characters are illegal in XML attribute or ZK annotation, you should replace them with other EL operators. 

Character	Replacement
=	eq
!=	ne
&&	and
<	lt
<=	le
>	gt
>=	ge


For example:

<label value="@bind(vm.age lt 18?'true':'false')"/>
<image src="@load(vm.picture ne null ? 'images/'.concat(vm.picture) : 'images/NoImage.png')"/>

How to NotiFy Single Item or Record or Single Column from ZK List Not Whole List?

ZUL file

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk> <br /> <window title="new page title" border="normal" id="inp" <br /> viewModel="@id('vm') @init('com.notify.MyListbox')" apply="org.zkoss.bind.BindComposer" > <br /> <button label="AddItem" onClick="@command('addNewItem')<a href="mailto:%22%20%3e%3c/button%3e%20%3cbr%20/%3e%20%3cbr%20/%3e%20%3cbr%20/%3e%20%3clistbox%20model=%22@bind(vm.dataList)">" ></button> <br /> <br /> <br /> <listbox model="@bind(vm.dataList)</a><a href="mailto:%22%20selectedItem=%22@bind(vm.selectedItem)">" selectedItem="@bind(vm.selectedItem)</a>" > <br /> <listhead> <br /> <listheader value="A"></listheader> <br /> <listheader value="B"></listheader> <br /> <listheader value="C"></listheader> <br /> <br /> </listhead> <br /> <template name="model" var="mymodel"> <br /> <listitem> <br /> <listcell> <br /> <br /> <textbox value="@bind(mymodel.a)" onChange="@command('changeTextBox',data = mymodel)<a href="mailto:%22/%3e%20%3cbr%20/%3e%20%3c/listcell%3e%20%3cbr%20/%3e%20%3clistcell%3e%20%3cbr%20/%3e%20%3ctextbox%20value=%22@bind(mymodel.b)">"/> <br /> </listcell> <br /> <listcell> <br /> <textbox value="@bind(mymodel.b)</a>" onChange="@command('changeAnotherTextBox',data = mymodel)<a href="mailto:%22/%3e%20%3cbr%20/%3e%20%3cbr%20/%3e%20%3c/listcell%3e%20%3cbr%20/%3e%20%3clistcell%3e%20%3cbr%20/%3e%20%3clabel%20value=%22@bind(mymodel.c)">"/> <br /> <br /> </listcell> <br /> <listcell> <br /> <label value="@bind(mymodel.c)</a>" /> <br /> <br /> </listcell> <br /> </listitem> <br /> </template> <br /> </listbox> <br /> </window> <br /></zk>  
JAVA:

package com.notify;

import java.util.ArrayList;
import java.util.List;

import org.zkoss.bind.BindUtils;
import org.zkoss.bind.annotation.AfterCompose;
import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.zk.ui.Component;

// TODO: Auto-generated Javadoc
/**
* The Class MyListbox.
*/
public class MyListbox {

/** The data list. */
private List<Data> dataList;

/** The selected item. */
private Data selectedItem;

/**
* After compose.
*
* @param view the view
*/
@AfterCompose
public void afterCompose(@ContextParam(ContextType.VIEW) Component view) {
try {
dataList = new ArrayList<Data>();
Data data;
data = new Data("a1", "b1", "c1");
dataList.add(data);
data = new Data("a2", "b2", "c2");
dataList.add(data);
data = new Data("a3", "b3", "c3");
dataList.add(data);
} catch (Exception e) {

}
}

/**
* Change text box.
*
* @param data the data
*
* Taken from ZK Forum
*/
@Command
public void changeTextBox(@BindingParam("data") Data data) {
data.setB("Hariom=>" + data.getA());
BindUtils.postNotifyChange(null, null, data, "b");
}

/**
* Change another text box.
* Praposed By Nitin
*/
@Command
public void changeAnotherTextBox() {
selectedItem.setC("Hariom=>" + selectedItem.getB());
BindUtils.postNotifyChange(null, null, selectedItem, "c");
}



/**
* Adds the new item.
*/
@Command
@NotifyChange("dataList")
public void addNewItem() {
Data data = new Data("", "", "");
dataList.add(data);
}

/**
* Gets the data list.
*
* @return the data list
*/
public List<Data> getDataList() {
return dataList;
}

/**
* Sets the data list.
*
* @param dataList the new data list
*/
public void setDataList(List<Data> dataList) {
this.dataList = dataList;
}

/**
* The Class Data.
*/
public class Data {

/** The a. */
String a;

/** The b. */
String b;

/** The c. */
String c;

/**
* Gets the a.
*
* @return the a
*/
public String getA() {
return a;
}

/**
* Gets the b.
*
* @return the b
*/
public String getB() {
return b;
}

/**
* Gets the c.
*
* @return the c
*/
public String getC() {
return c;
}

/**
* Sets the a.
*
* @param a the new a
*/
public void setA(String a) {
this.a = a;
}

/**
* Sets the b.
*
* @param b the new b
*/
public void setB(String b) {
this.b = b;
}

/**
* Sets the c.
*
* @param c the new c
*/
public void setC(String c) {
this.c = c;
}

/**
* Instantiates a new data.
*
* @param a the a
* @param b the b
* @param c the c
*/
public Data(String a, String b, String c) {
super();
this.a = a;
this.b = b;
this.c = c;
}

}

/**
* Gets the selected item.
*
* @return the selected item
*/
public Data getSelectedItem() {
return selectedItem;
}

/**
* Sets the selected item.
*
* @param selectedItem the new selected item
*/
public void setSelectedItem(Data selectedItem) {
this.selectedItem = selectedItem;
}

}