Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi.. zk friends
I am developing a kind of application in which my listbox will show all records using listmodelList item renderer. I am successfully able to display all my records to the listbox listcell with ItemRenderer.
Now what I want is that when user moves its mouse cursor on the listbox. The mouseOver event should fired and a new window should popup. With the particular listbox rowId selected in that.
Best Regards
Yogendra
Are you sure you will that ?
Attached pieces of code that you can fit to your needs to have a look in the eclipse console what happens. The result is much heavy traffic.
zul listbox code. Look at listcell forward=...
<listbox id="listBoxBranch"
model="@{controller.branches}"
selectedItem="@{controller.selectedBranch}" vflex="true"
style="border-top-width: 0px; border-left-width: 0px; border-right-width: 0px; border-bottom-width: 1px;"
tooltiptext="${c:l('listbox.tooltiptext.UseDoubleClickForEditing')}"
width="100%" height="100%" multiple="false">
<listhead sizable="true">
<listheader id="listheader_BranchText"
sclass="FDListBoxHeader1"
image="/images/icons/create_doc_16x16.gif"
label="${c:l('common.Description')}" sort="auto" width="100%" />
</listhead>
<listitem id="listBoxBranchListItem"
self="@{each='branch'}" value="@{branch}"
forward="onDoubleClick=onDoubleClickedBranchItem">
<listcell label="@{branch.text}"
forward="onMouseOver=onMouseOver" style="padding-left: 5px" />
</listitem>
</listbox>
or in your renderer
@Override
public void render(Listitem item, Object data) throws Exception {
final Customer customer = (Customer) data;
Listcell lc = new Listcell(customer.getKunNr());
lc.setParent(item);
. . .
item.setAttribute("data", data);
==> ComponentsCtrl.applyForward(item, "onMouseOver=onMouseOver");
}
controller java code:
. . .
public void onMouseOver(Event event) {
System.out.println(event.toString());
ForwardEvent e = (ForwardEvent) event;
System.out.println(e.toString());
// CAST to the origin Event
MouseEvent me = (MouseEvent) e.getOrigin();
System.out.println(me.toString());
Listcell lc = (Listcell) me.getTarget();
System.out.println(lc.toString());
System.out.println(lc.getLabel().toString());
}
If the User moves the mouse over the listbox, there will opens so much windows as long the move the mouse.
best
Stephan
@ terrytornado..
ok that's fine but can I set mouseOver event of the listcell from the ListItemRenderer class.
So when the use moves it's mouse to the Listheader listcell I may be able to open a new popup window for him.
Best Regards
Yogendra
It's standing in there.
==> ComponentsCtrl.applyForward(item, "onMouseOver=onMouseOver");
Show us your renderer code.
@terrytornado.
this is my renderer code.
public class SellerDetailModelItemRenderer implements ListitemRenderer {
/* (non-Javadoc)
* @see org.zkoss.zul.ListitemRenderer#render(org.zkoss.zul.Listitem, java.lang.Object)
*/
public void render(Listitem listItem, Object data) throws Exception {
// TODO Auto-generated method stub
final Map map = (Map) data;
Listcell status = new Listcell();
Hbox status_hbox = new Hbox();
Listcell lc = new Listcell();
//verification id
if(map.get("verification_id") != null && map.get("verification_id") != "")
{
lc = new Listcell(map.get("verification_id").toString());
lc.setParent(listItem);
}
else
{
new Listcell(" - ").setParent(listItem);
}
//verification date
//new Listcell(map.get("verification_date").toString()).setParent(listItem);
if(map.get("verification_date") != null && map.get("verification_date") != "")
{
lc = new Listcell(map.get("verification_date").toString());
lc.setParent(listItem);
lc.setTooltiptext("DAte");
}
else
{
new Listcell(" - ").setParent(listItem);
}
//verification user ip
//new Listcell(map.get("cli_ip").toString()).setParent(listItem);
if(map.get("cli_ip") != null && map.get("cli_ip") != "")
{
lc = new Listcell(map.get("cli_ip").toString());
lc.setParent(listItem);
}
else
{
new Listcell(" - ").setParent(listItem);
}
//verification city name
if(map.get("city_name") != null && map.get("city_name") != "")
{
lc = new Listcell(map.get("city_name").toString());
lc.setParent(listItem);
}else
{
new Listcell(" - ").setParent(listItem);
}
//verification country name
if(map.get("country") != null && map.get("country") != "")
{
lc = new Listcell(map.get("country_id").toString());
lc.setStyle("padding-left: 5px");
lc.setParent(listItem);
lc.setTooltiptext(map.get("country").toString());
}
//verification interrogation type
if(map.get("interrogation_type") != null && map.get("interrogation_type") != "")
{
if(map.get("interrogation_type").equals("auth"))
{
lc = new Listcell("auth");
lc.setParent(listItem);
}
else if(map.get("interrogation_type").equals("pre_auth"))
{
lc = new Listcell("pre_auth");
lc.setParent(listItem);
}
else if(map.get("interrogation_type").equals("prod_info"))
{
lc = new Listcell("prod_info");
lc.setParent(listItem);
}
else if(map.get("interrogation_type").equals("invalid"))
{
lc = new Listcell("invalid");
lc.setParent(listItem);
}
}else
{
new Listcell(" - ").setParent(listItem);
}
////verification response
if(map.get("code_check_result") != null && map.get("code_check_result") != "")
{
if(map.get("code_check_result").equals("3"))
{
lc = new Listcell("cbs.KO");
lc.setParent(listItem);
}
else if(map.get("code_check_result").equals("0"))
{
lc = new Listcell("cbs.NA");
lc.setParent(listItem);
}
else
{
lc = new Listcell("cbs.OK");
lc.setParent(listItem);
}
}else {
new Listcell(" - ").setParent(listItem);
}
//verification CLASSIFICATION
if(map.get("verification_class_type_id") != null && map.get("verification_class_type_id") != "")
{
if(map.get("verification_class_type_id").equals("1"))
{
lc = new Listcell(map.get("verification_class_type").toString());
lc.setParent(listItem);
}
else if(map.get("verification_class_type_id").equals("2"))
{
lc = new Listcell(map.get("verification_class_type").toString());
lc.setParent(listItem);
}
else if(map.get("verification_class_type_id").equals("3"))
{
lc = new Listcell(map.get("verification_class_type").toString());
lc.setParent(listItem);
}
else if(map.get("verification_class_type_id").equals("4"))
{
lc = new Listcell(map.get("verification_class_type").toString());
lc.setParent(listItem);
}
else
{
lc = new Listcell(map.get("verification_class_type").toString());
lc.setParent(listItem);
}
}else
{
new Listcell(" - ").setParent(listItem);
}
//verification CLG Code
if(map.get("certilogo_code") != null && map.get("certilogo_code") != "")
{
lc = new Listcell(map.get("certilogo_code").toString());
lc.setParent(listItem);
lc.setStyle("color:#FF0000; font-size:12px; text-decoration: underline;");
/*A ahref = new A();
ahref.setParent(lc);
ahref.setHref("test.zul?seller_id="+map.get("certilogo_code").toString());*/
lc.addEventListener("onClick", new EventListener() {
public void onEvent(Event event) throws Exception {
Executions.sendRedirect("test.zul?seller_id="+ map.get("certilogo_code").toString());
} });
// Executions.sendRedirect("sellers_details.zul?seller_id="+);
} else
{
new Listcell(" - ").setParent(listItem);
}
//Status value for varification
if(map.get("status1")!= null )
{
Image img = new Image();
img.setSrc("/ana_images/r_status_1.gif");
img.setTooltiptext("Requested");
img.setParent(status_hbox);
}else
{
Image img = new Image();
img.setSrc("/ana_images/b_status_1.gif");
img.setTooltiptext("Not Requested");
img.setParent(status_hbox);
}
if(map.get("status2")!= null )
{
Image img = new Image();
img.setSrc("/ana_images/r_status_2.gif");
img.setTooltiptext("Delivered");
img.setParent(status_hbox);
}else
{
Image img = new Image();
img.setSrc("/ana_images/b_status_2.gif");
img.setTooltiptext("Not Delivered");
img.setParent(status_hbox);
}
if(map.get("status4")!= null )
{
Image img = new Image();
img.setSrc("/ana_images/r_status_4.gif");
img.setTooltiptext("Interrogated");
img.setParent(status_hbox);
}else
{
Image img = new Image();
img.setSrc("/ana_images/b_status_4.gif");
img.setTooltiptext("Not Interrogated");
img.setParent(status_hbox);
}
if(map.get("status128")!= null )
{
Image img = new Image();
img.setSrc("/ana_images/r_status_128.gif");
img.setTooltiptext("Observed");
img.setParent(status_hbox);
}else
{
Image img = new Image();
img.setSrc("/ana_images/b_status_128.gif");
img.setTooltiptext("Not Observed");
img.setParent(status_hbox);
}
if(map.get("status16")!= null && map.get("status32")!= null && map.get("status64")!= null )
{
Image img = new Image();
img.setSrc("/ana_images/r_status_16_32_64.gif");
img.setTooltiptext("Marked");
img.setParent(status_hbox);
}else
{
Image img = new Image();
img.setSrc("/ana_images/b_status_16_32_64.gif");
img.setTooltiptext("Not Marked");
img.setParent(status_hbox);
}
status = new Listcell();
status_hbox.setParent(status);
status.setParent(listItem);
/*Listcell listcell = new Listcell();
listcell.setAttribute("data", map.get("verification_id").toString());
ComponentsCtrl.applyForward(listcell, "onMouseOver=onMouseOver");*/
}
}
actually when applied your given process it runs mouse over event but for the Whole zul page. means anywhere on page i move my mouse it gives me mouse over event is generated.. also gives me error mouseEvent cannot be cast to ForwardEvent
but i only want that in my listbox Listcell mouse over event.
Best Regards
Yogendra
renderer partial sample code:
You must look at your code on which listcell you will popup.
. . .
lc = new Listcell(customer.getKunOrt());
lc.setParent(item);
==> ComponentsCtrl.applyForward(lc, "onMouseOver=onMouseOver");
lc = new Listcell();
final Checkbox cb = new Checkbox();
cb.setDisabled(true);
cb.setChecked(customer.getKunMahnsperre());
lc.appendChild(cb);
lc.setParent(item);
. . .
This is the code for your JAVA-Controller which the listbox holds.
. . .
// Test Popup on a listcell
private Popup popup = null;
private Label popLabel = null;
. . .
/**
* Test method for showing how to popup on a listcell.<br>
*
* @param event
*/
public void onMouseOver(MouseEvent event) {
System.out.println("current target : " + event.getTarget());
Component comp = event.getTarget();
if (comp instanceof Listcell) {
System.out.println(comp.toString());
System.out.println(((Listcell) comp).getLabel().toString());
if (popup == null) {
popup = new Popup();
popup.setParent(window_customerList);
popup.setWidth("100px");
popup.setHeight("100px");
popup.open(window_customerList);
popLabel = new Label();
popLabel.setParent(popup);
popLabel.setValue(((Listcell) comp).getLabel().toString());
} else {
popup.close();
popLabel.setValue(((Listcell) comp).getLabel().toString());
popup.open(window_customerList);
}
}
}
best
Stephan
@terrytornado.
thanx for your support i m able to build the mouse hover popup window, but actually I want to ask you something like that on every popup only one single listcell value can be passed using ComponentsCtrl.applyForward(lc, "onMouseOver=onMouseOver");
actually in my code below
if(map.get("verification_id") != null && map.get("verification_id") != "")
{
lc = new Listcell(map.get("verification_id").toString());
lc.setParent(listItem);
}
else
{
new Listcell(" - ").setParent(listItem);
}
i just want to pass listcell verification_id value on mouseOver event. and Base on that my popup window will show me the values of related content..
Hi Yogendra,
here is the extended code. You can download it in the zksample2 in customerListCtrl.java .
Here is a pic.
Remember: A listitem holds a bean. Means you can get eventualy more values out of them as not in the listbox listcells is rendered.
. . .
// Test Popup on a listcell
private Popup popup = null;
private Label popLabel = null;
private Vbox vbox = null;
private Hbox titleBox = null;
. . .
/**
* Test method for showing how to popup on a listcell.<br>
* Extended. Now, it get the parent of the Listcell (a Listitem) and iterate through a list of
* its listcells and show the value for each.
*
* @param event
*/
public void onMouseOverListCell(MouseEvent event) {
// System.out.println("current target : " + event.getTarget());
if (popup == null) {
popup = new Popup();
popup.setSclass("myPopup");
popup.setParent(window_customerList);
// popup.setWidth("200px");
vbox = new Vbox();
vbox.setStyle("padding: 0px;");
vbox.setParent(popup);
// clear old stuff
vbox.getChildren().clear();
titleBox = new Hbox();
titleBox.setHeight("15px");
titleBox.setWidth("100%");
titleBox.setStyle("background-color: red;");
titleBox.setParent(vbox);
popLabel = new Label();
popLabel.setParent(titleBox);
popLabel.setValue("Customer Details");
popLabel.setStyle("color: white; ");
} else {
// clear old stuff
vbox.getChildren().clear();
titleBox = new Hbox();
titleBox.setHeight("15px");
titleBox.setWidth("100%");
titleBox.setStyle("background-color: red;");
titleBox.setParent(vbox);
popLabel = new Label();
popLabel.setParent(titleBox);
popLabel.setValue("Customer Details");
popLabel.setStyle("color: white; ");
popup.close();
}
Component comp = event.getTarget();
if (comp instanceof Listcell) {
System.out.println("1: " + comp.toString());
System.out.println("2: " + ((Listcell) comp).getLabel().toString());
System.out.println("3: " + comp.getParent().toString());
// get the parent object of the listcell, should be a listitem
Component parentComponent = comp.getParent();
if (parentComponent instanceof Listitem) {
// get a list of listcell that resides in the listItem
List list = parentComponent.getChildren();
// for all listcells we add a label with its value
for (Object object : list) {
if (object instanceof Listcell) {
popLabel = new Label();
popLabel.setParent(vbox);
popLabel.setValue(((Listcell) object).getLabel().toString());
}
}
}
}
popup.open(window_customerList);
}
pieces from the renderer
. . .
lc = new Listcell(customer.getKunOrt());
lc.setParent(item);
ComponentsCtrl.applyForward(lc, "onMouseOver=onMouseOverListCell");
. . .
Can someone explain me why the setting of the StyleClass in java failed ??
Must i set a path to the css-file in the controller ?
I will set the common padding to '0px' .
--> popup.setSclass("myPopup");
piece of the zksample2.css
/* ------------------- Popup in Customerlist -------------------- */
.myPopup .z-popup .z-popup-cm {
padding: 0px;
}
best
Stephan
@terrytornado
You may use firebug to see the rendered result.
And see if other css rule is applied.
another api is setZclass().
For setSclass(), it will add another class name in the rendered html, maybe <div class="z-popup myPopup">
For setZclass(), it will replace original class name of zk component, maybe <div class="myPopup">
Yes Peter, i have done that. Seems that i haven't found the right div for doing that.
thanks
Stephan
Asked: 2011-03-22 06:38:22 +0800
Seen: 2,137 times
Last updated: Mar 31 '11
