Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi,
I am trying to figure out how to best layout my ZK 5.0.4 based UI such that a custom task bar that I have created is always placed at the very bottom of the browser window? In a similar way that Windows does it. The plan is to be able to place minimized windows on to that task bar from which they can be reopen or maximized.
Any advice would be appreciated.
Trevor
Trevor,
This should get you started:
<window width="300px" height="750px" border="normal" style="padding: 25px;">
You can put whatever components here and the toolbar will stay at the bottom of the window.
The key is the use of the separator component with the vflex attribute.
<separator vflex="1"/>
<toolbar id="tb" sclass="vista" height="20px" align="end">
<toolbarbutton image="http://www.zkoss.org/zksandbox/img/live.gif"
onClick='alert("Live")' />
<toolbarbutton image="http://www.zkoss.org/zksandbox/img/defender.gif"
onClick='alert("Defender")' />
<toolbarbutton image="http://www.zkoss.org/zksandbox/img/battery.gif"
onClick='alert("Battery")' />
<toolbarbutton image="http://www.zkoss.org/zksandbox/img/network.gif"
onClick='alert("Network")' />
<toolbarbutton image="http://www.zkoss.org/zksandbox/img/volumn.gif"
onClick='alert("Volumn")' />
<toolbarbutton label="12:55 PM"
onClick='alert("time")' />
</toolbar>
</window>
Kind regards,
Todd
A second way is to place the toolbar in the SOUTH area of a borderlayout.
best
Stephan
Many thanks Todd & Stephan,
In Todd's code example, the window is set to a specific height and width in pixels. If the taskbar is to be placed at the very bottom of the browser, how then can I tell the window (or a border layout) to size according to the actual available space of the browser window? Setting height="100%" and width="100%" doesn't seem to work.
The reason I ask this question is that I don't want to limit the size of my application to a specific height and width. I want it to take up the available space in the browser.
Best,
Trevor
Trevor,
Sorry for the confusion - I just put the window height and width in there to make it easier to see. If you want to make the window maximize itself, simply change the <window> tag to look like this:
<window vflex="true" border="normal">
That should do it...
Todd
Hi Todd,
Unfortunately setting the window to vflex="true" did not solve the problem. Specifically when the following code is executed, the window did not take up the entire width and height of the available space in the browser:
<window vflex="true" border="normal" style="padding: 25px;">
You can put whatever components here and the toolbar will stay at the bottom of the window.
The key is the use of the separator component with the vflex attribute.
<separator vflex="1"/>
<toolbar id="tb" sclass="vista" height="20px" align="end">
<toolbarbutton image="http://www.zkoss.org/zksandbox/img/live.gif"
onClick='alert("Live")' />
<toolbarbutton image="http://www.zkoss.org/zksandbox/img/defender.gif"
onClick='alert("Defender")' />
<toolbarbutton image="http://www.zkoss.org/zksandbox/img/battery.gif"
onClick='alert("Battery")' />
<toolbarbutton image="http://www.zkoss.org/zksandbox/img/network.gif"
onClick='alert("Network")' />
<toolbarbutton image="http://www.zkoss.org/zksandbox/img/volumn.gif"
onClick='alert("Volumn")' />
<toolbarbutton label="12:55 PM"
onClick='alert("time")' />
</toolbar>
</window>
I've been using a borderlayout in my app (as previously suggested by Stephan), and I can confirm that it did not work for that either.
Trevor
Hi ashishd,
I was using a border layout all along (with a task bar located at the "south") and it was still not working. If you hadn't asked your question, I wouldn't have checked again and come to the realization that the borderlayout component was contained within a window. If I take the window out of the picture and make the border layout the main container, it behaves correctly.
Many thanks to you, Todd and Stephan for guiding me though this one!
best,
Trevor
I work with a borderlayout that contents a second borderlayout in the south:
So i work in this way: (only pieces)
. . .
<zk . . . >
<window id="outerIndexWindow" apply="${indexCtrl}" border="none" width="100%" height="100%">
<borderlayout id="borderlayoutMain" height="100%">
. . .
<!-- MODULE CONTENT AREA -->
<center id="center" border="none" margins="0,0,0,0"
flex="true" autoscroll="true"
style="background-color: #D6DCDE; padding: 5px">
. . .
</center>
<!-- STATUS BAR AREA -->
<south id="south" border="none" height="22px"
splittable="false">
<div id="divSouth" align="left"
style="float: left; padding: 0px" width="100%">
<borderlayout width="100%" height="22px">
<west border="none" width="50px">
<!-- The MessageBar. Comps are created in the Controller -->
<window id="winMessageBar"
apply="${messageBarCtrl}" border="none" width="50px"
height="22px" />
</west>
<center border="none">
<!-- The StatusBar. Comps are created in the Controller -->
<window id="winStatusBar"
apply="${statusBarCtrl}" border="none" width="100%"
height="22px" />
</center>
</borderlayout>
</div>
</south>
</borderlayout>
</window>
</zk>
best
Stephan
Thanks for clarifying Stephan,
To my surprise I could not get your code sample to work in my application code. I then started to experiment with my app and eventually got the layout working with the taskbar at the very bottom. What I had to do was ensure that the borderlayout component was not contained in an include component. What I mean by this is that the following would sample just would not work:
index.zul
<zk . . . >
<window id="outerIndexWindow" apply="${indexCtrl}" border="none" width="100%" height="100%">
<include src='mainBorderlayout.zul"/>
</window>
</zk>
mainBorderlayout.zul
<zk>
<borderlayout id="borderlayoutMain" height="100%">
. . .
<!-- MODULE CONTENT AREA -->
<center id="center" border="none" margins="0,0,0,0"
flex="true" autoscroll="true"
style="background-color: #D6DCDE; padding: 5px">
. . .
</center>
<!-- STATUS BAR AREA -->
<south id="south" border="none" height="22px"
splittable="false">
<div id="divSouth" align="left"
style="float: left; padding: 0px" width="100%">
<borderlayout width="100%" height="22px">
<west border="none" width="50px">
<!-- The MessageBar. Comps are created in the Controller -->
<window id="winMessageBar"
apply="${messageBarCtrl}" border="none" width="50px"
height="22px" />
</west>
<center border="none">
<!-- The StatusBar. Comps are created in the Controller -->
<window id="winStatusBar"
apply="${statusBarCtrl}" border="none" width="100%"
height="22px" />
</center>
</borderlayout>
</div>
</south>
</borderlayout>
</zk>
The only way I seemed to be able to get it to work is by placing your example in its entirety without using include tags in the index.zul, pretty much the way you specified in your code example. So it seems that the layout functionality does not work properly when include tags are involved. Do you think this is a bug or just a nuance with the way ZK works?
best
Trevor
Hmmm, i must say that i don't work with include.
I do all 'included' things with an window container and it's own controller created with Executions.createComponents(...) and have in no time problems with this construction.
Have a look on the several 'modes' for Include.
best
Stephan
Asked: 2010-10-07 06:23:33 +0800
Seen: 351 times
Last updated: Oct 13 '10