0

mouseover event in zk listbox open new popup window

asked 2011-03-22 06:38:22 +0800

yaryan997 gravatar image yaryan997
210 2

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

delete flag offensive retag edit

9 Replies

Sort by ยป oldest newest

answered 2011-03-22 07:27:52 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

updated 2011-03-22 08:04:28 +0800

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

link publish delete flag offensive edit

answered 2011-03-23 00:34:56 +0800

yaryan997 gravatar image yaryan997
210 2

@ 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

link publish delete flag offensive edit

answered 2011-03-23 05:05:00 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

It's standing in there.

==> ComponentsCtrl.applyForward(item, "onMouseOver=onMouseOver");

Show us your renderer code.

link publish delete flag offensive edit

answered 2011-03-23 05:18:22 +0800

yaryan997 gravatar image yaryan997
210 2

updated 2011-03-23 06:52:26 +0800

@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

link publish delete flag offensive edit

answered 2011-03-23 07:00:55 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

updated 2011-03-23 07:04:22 +0800


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

link publish delete flag offensive edit

answered 2011-03-24 02:05:08 +0800

yaryan997 gravatar image yaryan997
210 2

@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..

link publish delete flag offensive edit

answered 2011-03-25 17:12:57 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

updated 2011-03-25 17:44:22 +0800

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

link publish delete flag offensive edit

answered 2011-03-30 21:15:41 +0800

PeterKuo gravatar image PeterKuo
481 2

@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">

link publish delete flag offensive edit

answered 2011-03-31 03:47:13 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

Yes Peter, i have done that. Seems that i haven't found the right div for doing that.

thanks
Stephan

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2011-03-22 06:38:22 +0800

Seen: 2,126 times

Last updated: Mar 31 '11

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More