0

ZK 3.5.0 Tabbox and Listbox weird behavior

asked 2008-09-11 20:56:40 +0800

sekrup gravatar image sekrup
78

Hi all,

First of all, congratulations for the 3.5.0 release! I really like the new look and features.

However, when I upgraded from 3.0.7 to 3.5.0, I observed a weird behavior in my application. (source code didn't change at all)

- Inside a Tabbox, I have a Listbox which is populated dynamically using load-on-demand;
- But, when the Listbox is scrolled up/down, the Tabbox was "broken" and some of the text content that should be inside the Listbox is displayed on top of the Tabbox.

Here are the videos: Note the top-most tabs ("Products", "Vendors", etc.)

Video 1: ZK 3.0.7 on Firefox 3: Expected / correct behavior:

http://www.screencast.com/t/nvMze8iEzOt

Video 2: ZK 3.5.0 on Firefox 3: Weird behavior -- pay attention to the top-most tab and the bottom listbox.

http://www.screencast.com/t/miYwX45Z

Note that on the second video, the Tabbox eventually disappeared, after some scrolling on the bottom Listbox. The "Refresh" button is just re-querying data from database and displaying the content to the Listbox.

There is no exceptions thrown, when I'm looking at my Apache Tomcat 5.5 logs.

Code snippet is attached below; please let me know if you need more info.

Does anyone has the same problem?


Thanks,
sekrup

Code:

.zul file:

<tabbox id="mainTabbox">
  <tabs>
    <tab id="productsTab" label="Products"></tab>
    <tab id="vendorsTab" label="Vendors"></tab>
    <tab id="categoriesTab" label="Categories"></tab>
    <tab id="reportsTab" label="Reports"></tab>
  </tabs>
  <tabpanels>
    <tabpanel>
      <window id="reportsWin" width="1140px">
        <tabbox id="reportTypeTabbox" width="100%">
          <tabs>
            <tab id="criticalReportsTab" label="Critical"/>
            <tab id="salesReportsTab" label="Sales"/ >
            <tab id="inventoryReportsTab" label="Inventory"/>
           </tabs>
           <tabpanels>
           <tabpanel>
             <vbox width="100%">
                ...
		<listbox id="reportsCriticalExpiryDateList" width="1050px" height="250px">
		  <listhead sizable="true">
			<listheader label="Product Name" width="300px"></listheader>
			<listheader label="Qty" width="75px"></listheader>
			<listheader label="Purch.Qty" width="75px"></listheader>
			<listheader label="Vendor" width="290px"></listheader>
			<listheader label="Last Purchase Date" width="110px"></listheader>
			<listheader label="Expiry Date" width="100px"></listheader>
		  </listhead>
		</listbox>
          <button label="Print" sclass="button" width="90px" onClick="print.PrintManager.printCriticalExpiryDate()"></button>
	  <button label="Refresh All" onClick="report.ReportManager.report_refreshCriticalReports()" sclass="button" width="90px"></button>

Java class:

	public static void report_refreshCriticalExpiryDateList()
	{
		try
		{
			final Window mainWin = (Window) Sessions.getCurrent().getAttribute("mainWin");
			final Window reportsWin = (Window) mainWin.getFellow("reportsWin");

			Listbox criticalExpDateList = (Listbox) reportsWin.getFellow("reportsCriticalExpiryDateList");
			criticalExpDateList.getItems().clear();

			HashMap<String, HashMap<String, String>> criticalExpDate = getCriticalExpiryDateProducts(ConfigManager.IM_CONF.getConfig("critical_expiry_period"));

			String[][] model = new String[criticalExpDate.size()][7];

			int modelIdx = 0;
			for(Iterator i = criticalExpDate.keySet().iterator(); i.hasNext(); modelIdx++)
			{
				String productID = (String) i.next();
				HashMap<String, String> criticalItem = criticalExpDate.get(productID);

				model[0] = productID;
				model[1] = criticalItem.get("name");
				model[2] = criticalItem.get("qty");
				model[3] = criticalItem.get("qty_purchased");
				model[4] = criticalItem.get("vendor");
				model[5] = criticalItem.get("last_purchase_date");
				model[6] = criticalItem.get("expiry_date");
			}

			final class CriticalItemRenderer implements ListitemRenderer
			{
				public void render(Listitem li, Object data)
				{
					// Convert to String[] to avoid parse error
					String[] d = (String[]) data;

					String productID = d[0];
					new Listcell(d[1]).setParent(li);
					new Listcell(d[2]).setParent(li);
					new Listcell(d[3]).setParent(li);
					new Listcell(d[4]).setParent(li);

					//etc
				}
			}

			ListModel strset = new SimpleListModel(model);
			criticalExpDateList.setModel(strset);
			criticalExpDateList.setItemRenderer(new CriticalItemRenderer());
		}
		catch(Exception e)
		{
			e.printStackTrace();
		}
	}

delete flag offensive retag edit

6 Replies

Sort by » oldest newest

answered 2008-09-12 02:39:45 +0800

lovetide gravatar image lovetide
169 1 7

updated 2008-09-12 03:06:39 +0800

一、
I have a very similar problem, see the screen capture:
http://screencast.com/t/kUO4yq2D
or
http://www.screencast.com/users/lovetide/folders/Jing/media/8103dd4e-1e48-4733-b91e-452f36e538f3

I put 2 listboxes + 1 stack_bar chart in a tabpanel, the tabbox is in a 'center' borderlayout.

** Test result in IE8 beta2: **
After the 1st query issued, the 2nd tab did not disappeared (which is correct, but at the same time, the chart did not contain map+area information in it)
After the 2nd query issued, the 2nd tab disappeared (at the same time, the chart contained map+area information in it now)

** Test result in Firefox 3.0.1: **
After the 1st query issued, the 2nd tab did not disappeared (correct), but at the same time, the chart did not contain any bar in it, it's an empty chart. AND, ZK report an error: "无法处理 addAft A is null" (with 'redraw' and 'close' button)
After the 2nd query issued, both the 2nd and 3rd tab disappeared. (at the same time, the bars in chart were shown, and the chart contained map+area information in it)

===========
二、
Another problem is:
When setTitle of the 'center' borderlayout after query issued, the 'center' borderlayout moved, as if the left+top corner of 'center' borderlayout moved to (0,0) of client area of browser. But when I resized the browser, the layout became normal.

** Tested in both IE8 beta2 and Firefox 3.0.1 **

the codes shown the second problem

borderlayout-test-3.5.0.zul

<?xml version="1.0" encoding="UTF-8"?>
<?page title="Test 首页" id="indexPage"?>
<zk>

<borderlayout>
	<north height="60px" splittable="false" collapsible="false">
		<div>
			[Logo puts here]
			User: ${user.RealName}
		</div>
	</north>
	<west title="City" size="100px" flex="true" splittable="false" collapsible="false">
		<div>
			<listbox id="lbCallCenter" onSelect="divContentContainer.setTitle(self.selectedItem.label)" style="font-size:18px;">
				<listitem label="== All ==" value="-" selected="true"/>
				<listitem label="城市 AAAA" value="a"/>
				<listitem label="城市 BBBB" value="b"/>
			</listbox>
		</div>
	</west>
	<center title="== All ==" id='divContentContainer' flex="true" autoscroll="true">
		<div>
			<tabbox id="tbReports">
				<tabs>
					<tab label="report 1"/>
					<tab label="report 2"/>
					<tab label="report 3"/>
				</tabs>
				<tabpanels>
					<tabpanel>
<zscript>
public ClearListBox (Listbox lb)
{
	int iCount = lb.getItemCount();
	for (int i=0; i<iCount; i++)
		lb.removeItemAt (0);
}

TestQuery ()
{
	ClearListBox (lb);
	for (int i=1; i<=50; i++)
	{
		li = lb.appendItem ("Some time", "Some time");
		li.appendChild (new Listcell("some city"));
		li.appendChild (new Listcell(String.valueOf(Math.random() * 1000)));
		li.appendChild (new Listcell(String.valueOf(Math.random() * 1000)));
		li.appendChild (new Listcell(String.valueOf(Math.random() * 1000)));
		li.appendChild (new Listcell(String.valueOf(Math.random() * 1000)));
		li.appendChild (new Listcell(String.valueOf(Math.random() * 1000)));
		li.appendChild (new Listcell(String.valueOf(Math.random() * 1000)));
		li.appendChild (new Listcell(String.valueOf(Math.random() * 1000)));
		li.appendChild (new Listcell(String.valueOf(Math.random() * 1000)));
		li.appendChild (new Listcell(String.valueOf(Math.random() * 1000)));
		li.appendChild (new Listcell(String.valueOf(Math.random() * 1000)));
		//alert ("" + i);
	}
}
</zscript>
							<button label=' Query / 查 询 ' onClick='TestQuery()'/>
							<div id='divMonthlyCallStatsTable' visible='true'>
								Query Result
								<listbox id="lb" fixedLayout="true">
									<listhead>
										<listheader label="Time"/>
										<listheader label="City"/>
										<listheader label="Measure 1"/>
										<listheader label="Measure 2"/>
										<listheader label="Measure 3"/>
										<listheader label="Measure 4"/>
										<listheader label="Measure 5"/>
										<listheader label="Measure 6"/>
										<listheader label="Measure 7"/>
										<listheader label="Measure 8"/>
										<listheader label="Measure 9"/>
										<listheader label="Measure 10"/>
									</listhead>
								</listbox>
							</div>

					</tabpanel>

					<tabpanel>
					</tabpanel>

					<tabpanel>
					</tabpanel>
				</tabpanels>
			</tabbox>
		</div>
	</center>
</borderlayout>

</zk>

link publish delete flag offensive edit

answered 2008-09-18 07:59:30 +0800

davidchen gravatar image davidchen
18

Hi sekrup & lovetide :
This bug has fixed in the next release
Thank You

/David

link publish delete flag offensive edit

answered 2008-10-06 08:36:37 +0800

troum gravatar image troum
12

I have the same problem with ZK 3.5.1 Freshly (2008-10-03)

link publish delete flag offensive edit

answered 2008-10-16 16:14:58 +0800

troum gravatar image troum
12

updated 2008-10-16 16:24:27 +0800

problem is solved by removing zkex.jar, zkmax.jar and zkplus.jar libs from application

link publish delete flag offensive edit

answered 2008-10-22 01:08:12 +0800

sekrup gravatar image sekrup
78

Hi all,

I'm using ZK 3.5.1 stable version;

After removing those 3 files (zkex.jar, zkmax.jar and zkplus.jar), it's not happening anymore. (But when those files are present, it's still happening) -- anyways, it's working now :)


Thank you guys!

sekrup

link publish delete flag offensive edit

answered 2008-10-23 11:26:24 +0800

mpg2005m gravatar image mpg2005m
15

Hi all, first thanks to sekrup for your solution, it works fine, but in my project I use hibernate and JasperReport so I only remove zkmax.jar and my program works fine with tabs and ZK 3.5.1.

Thanks you!! :-))

link publish delete flag offensive edit

answered 2008-10-23 11:26:37 +0800

mpg2005m gravatar image mpg2005m
15

updated 2008-10-23 11:28:44 +0800

.

link publish delete flag offensive edit

answered 2009-03-21 00:30:36 +0800

Mandy gravatar image Mandy
18

--> tabbox init code:

protected void init() {
this.setWidth(FULL_SIZE);
this.setHeight(FULL_SIZE);

Tabs tabs = new Tabs();
Tabpanels tabpanels = new Tabpanels();
tabs.setParent(this);
tabpanels.setParent(this);

for (int i = 0; i < menuTabboxDTOs.size(); i++) {
MenuTabboxDTO menuTabboxDTO = menuTabboxDTOs.get(i);
Tab tab = new Tab();
MenuTabpanel tabpanel = new MenuTabpanel(menuTabboxDTO.getSrc(),
menuTabboxDTO.getArg(), menuTabboxDTO.getType());
tabpanel.setHeight(FULL_SIZE);
tab.setLabel(menuTabboxDTO.getLabel());
tab.setClosable(menuTabboxDTO.isClosable());
tab.setDisabled(menuTabboxDTO.isDisabled());
tab.setParent(tabs);
tabpanel.setParent(tabpanels);
}

if (tabpanels.getChildren().size() > 0) {
initPanel((MenuTabpanel) tabpanels.getChildren().get(0));
}
}

protected void initPanel(MenuTabpanel panel) {
Executions.getCurrent().setAttribute(ZKConstants.TAB_SELECTED_OBJECT,
panel.arg);
if (!panel.isInitial()) {
panel.initUI();
}
}

public void onSelect() {
initPanel((MenuTabpanel) this.getSelectedPanel());
}

link publish delete flag offensive edit

answered 2009-03-21 00:32:33 +0800

Mandy gravatar image Mandy
18

sorry, place not here!

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: 2008-09-11 20:56:40 +0800

Seen: 937 times

Last updated: Mar 21 '09

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