Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi All,
We have designed our screens like the following zul, but sometimes half Search button is hidden by the results section and sometimes the Print button is not displayed:
<?xml version="1.0" encoding="UTF-8" ?>
<zk xmlns:zk="http://www.zkoss.org/2005/zul">
<zk:window width="100%" height="100%">
<zk:borderlayout>
<zk:north title="Search Criteria:" collapsible="true">
<zk:grid >
<columns>
<column label="" width="150px" />
<column label="" />
</columns>
<zk:rows>
<zk:row>
<zk:label value="Booking:" />
<zk:textbox value="" />
</zk:row>
<zk:row>
<zk:button label="Search" />
</zk:row>
</zk:rows>
</zk:grid>
</zk:north>
<zk:center title="Results:" >
<zk:borderlayout >
<zk:center>
<listbox >
<listhead>
<listheader label="Full Name" sort="auto"/>
<listheader label="Gender" align="center" sort="auto"/>
<listheader label="Age" align="center" sort="auto"/>
</listhead>
<listitem>
<listcell label="Tom Anderson"/>
<listcell label="Male"/>
<listcell label="26"/>
</listitem>
<listitem>
<listcell label="John Chen"/>
<listcell label="Male"/>
<listcell label="23"/>
</listitem>
<listitem>
<listcell label="Carey Chen"/>
<listcell label="Female"/>
<listcell label="23"/>
</listitem>
<listitem>
<listcell label="Jean Anderson"/>
<listcell label="Female"/>
<listcell label="26"/>
</listitem>
</listbox>
</zk:center>
</zk:borderlayout>
</zk:center>
<zk:south height="28px">
<zk:borderlayout>
<zk:west border="none">
<zk:button label="Send" />
</zk:west>
<zk:center border="none">
<zk:label value="Status Message" />
</zk:center>
<zk:east border="none">
<zk:hbox >
<zk:button label="PDF" />
<zk:button label="EXCEL" />
<zk:button label="PRINT" />
</zk:hbox>
</zk:east>
</zk:borderlayout>
</zk:south>
</zk:borderlayout>
</zk:window>
</zk>
Does anyone know why? Are we doing something wrong?
Thanks!
your layout is very strange, why you need to give a "ZK" namespace in your zul(while your default namespace is already using zk)? it's really confusing.
Why is the layout strange?
We use the "ZK" namespace to make it clear that it is a zk component.
The layout should look something like this:
----------------------------------------------- | Search criteria | ----------------------------------------------- |Results | | | ----------------------------------------------- |Action| |Export| ------------------------------------------------
Does anyone know why the borderlayout is hiding the buttons sometimes?
Thanks!
Ive done some testing and it looks like its not missing, just hidden.
On our app we use just images not text, so Ive added text to the button as well as the image, but sometimes it is still cut off.
Here is an image of the error:
When using buttons is have created our own using the following code:
lang-addon.xml
<component>
<component-name>printbutton</component-name>
<extends>button</extends>
<component-class>com.components.PrintButton</component-class>
</component>
PrintButton.java
public class PrintButton extends MainButton
{
private String fileType = "";
private String reportTitle = "";
private String reportFile = "";
private static final String EXCEL = "EXCEL";
private static final String HTML = "HTML";
private static final String PDF = "PDF";
private String urlPath = "export";
....
public void setFileType( String fileType )
{
this.fileType = fileType;
String src = "";
String label = "";
if (HTML.equals(fileType))
{
src = "/img/print-icon.png";
label = "Print";
}
else if (EXCEL.equals(fileType))
{
src = "/img/excel-icon.png";
label = "Excel";
}
else if (PDF.equals(fileType))
{
src = "/img/pdf-icon.png";
label = "PDF";
}
else
{
src = "";
label = "File type not set";
}
setImage(src);
setLabel(label);
setWidth("50px");
}
public String getFileType( )
{
return fileType;
}
...
Example zul:
<zk:hbox>
<printbutton id="report" fileType="PDF" reportTitle="Daily Booking List" ignoreSecurity="true" />
<printbutton id="print" fileType="HTML" ignoreSecurity="true" />
<printbutton id="export" fileType="EXCEL" ignoreSecurity="true" />
</zk:hbox>
MainButton.java
public class MainButton extends Button
{
public MainButton ( )
{
setMold("trendy");
}
}
the problem is the way you declare your layout,
you should use a simpler way rather than do your layout just using Borderlayout,
Borderlayout is designed for dynamic purpose, and if your are not in that case, you should use HTML element or hlayout + vlayout to do it.
Thanks iantsai.
Could you please show me an example of the HTML element or hlayout + vlayout?
It's a style problem.
Attached a sample that have costs some hours if it does working. Thanks to Henrichen and myzkdemo(Gunter). (PS: Henri, myzkdemo and i drinking beer. Thanks)
It simulates a three region Toolbar with ButtonGroups on left - middle - right
You must modify it to your needs and put it in the SOUTH component of your borderlayout . ( works with zk version : 5.0.x)
<style>
<!-- remove white strips between the toolbars -->
.hboxRemoveWhiteStrips td.z-hbox-sep {width: 0; padding:0;}
</style>
. . .
<div sclass="z-toolbar" style="padding:0">
<hbox pack="stretch" sclass="hboxRemoveWhiteStrips"
width="100%">
<toolbar align="start"
style="float:left; border-style: none;">
<button id="btnHelp" height="24px"
image="/images/icons/light_16x16.gif"
tooltiptext="${c:l('btnHelp.tooltiptext')}" />
<button id="btnRefresh" height="24px"
image="/images/icons/refresh2_yellow_16x16.gif"
tooltiptext="${c:l('btnRefresh.tooltiptext')}" />
</toolbar>
<toolbar align="center"
style="float:left; border-style: none;">
<button id="btn_SearchDialogBranch" height="24px"
image="/images/icons/btn_search2_16x16.gif"
tooltiptext="${c:l('btnSearch.tooltiptext')}" />
<button id="btnPrintBranch" height="24px"
image="/images/icons/btn_print2_16x16.gif"
tooltiptext="${c:l('btnPrint.tooltiptext')}" />
</toolbar>
<toolbar align="end"
style="float:right; border-style: none;">
<button id="btnNew" height="24px"
tooltiptext="${c:l('btnNew.tooltiptext')}" />
<button id="btnEdit" height="24px"
tooltiptext="${c:l('btnEdit.tooltiptext')}" />
<button id="btnDelete" height="24px"
tooltiptext="${c:l('btnDelete.tooltiptext')}" />
<button id="btnSave" height="24px"
tooltiptext="${c:l('btnSave.tooltiptext')}" />
<button id="btnCancel" height="24px"
tooltiptext="${c:l('btnCancel.tooltiptext')}" />
<button id="btnClose" height="24px"
tooltiptext="${c:l('btnClose.tooltiptext')}" />
</toolbar>
</hbox>
</div>
or
myCssFile.css:
. . .
/* ------------------- TOOLBAR -------------------- */
/* remove white strips between the toolbars */
.hboxRemoveWhiteStrips td.z-hbox-sep {
width: 0;
padding: 0;
}
. . .
best
Stephan
Asked: 2010-10-26 17:09:43 +0800
Seen: 685 times
Last updated: Nov 08 '10