Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
I am using borderlayout for login screen. The North and South have header and footer and the center location will have inputs for username and password. I want the Login/password input to be in the center of the
<window title="" border="none" width="100%" height = "100%" mode="overlapped" position="center,center">
<style><![CDATA[
.header-title1 {
color: blue;
font-family: Tahoma;
font-size: 22px;
font-weight: bold;
}
]]></style>
<borderlayout>
<north>
<div>
<panel height="100px" width="100%">
<panelchildren>
<borderlayout>
<west border="none" style="background:transparent">
<hbox width="100%" height="100%" pack="center" align="center">
<label class="header-title1" value="MyProduct ></label>
</hbox>
</west>
<east border="none" style="background:transparent">
<image src="/images/productmf.png"></image>
</east>
</borderlayout>
</panelchildren>
</panel>
</div>
</north>
<center border="none">
<div>
<panel height="100px" width="400px">
<panelchildren>
<grid >
<rows>
<row>
Name:
<textbox id="nameTxb" ></textbox>
</row>
<row>
Password:
<textbox id="passwordTxb" type="password" ></textbox>
</row>
</rows>
</grid>
<button id="confirmBtn" label="confirm" ></button>
<label id="mesgLbl" ></label>
</panelchildren>
</panel>
</div>
</center>
<south border="none">
<div>
<hbox width="100%" height="100%" pack="center" align="center">
<label value="Copyright 2012 ABC Technologies" ></label>
</hbox>
</div>
</south>
</borderlayout>
</window>
Create 1 .zul page and name it "login_page.zul" and let its composer be LoginPageComposer.java.
Copy paste the following in login_page.zul:
<zk> <window height="200px" width="400px" id="window" border="normal" focus="true" apply="packageName.LoginPageComposer"> <grid sclass=""> <rows> <row align="center"> <label value="User Name"></label> <textbox id="username"></textbox> </row> <row align="center"> <label value="Password"></label> <textbox id="password" type="password"></textbox> </row> </rows> </grid> <grid sclass=""> <rows> <row align="center"> <label></label> <button id="login" label="confirm"></button> </row> </rows> </grid>
</window> </zk>
Copy paste the following in LoginComposer.java:
package test;
import org.zkoss.zk.ui.util.GenericForwardComposer; import org.zkoss.zul.Button; import org.zkoss.zul.Textbox; import org.zkoss.zul.Window;
public class LoginPageComposer extends GenericForwardComposer{
Window window;
Button login;
Textbox username, password;
public void onCreate$window(){
try{
window.doOverlapped();
window.setPosition("center");
} catch (Exception e) {
e.printStackTrace();
}
} }
Cheers, Sandeep
Asked: 2013-01-21 03:43:52 +0800
Seen: 79 times
Last updated: Jan 26 '13
I tried doing the same, the Panel is centering horizontally but not vertically. It is shifted to Horiz=Center and Vert = Top
praburaju ( 2013-01-26 03:57:18 +0800 )editYou will need to set <center vflex="1" > then use vflex="1" style="vertical-align:center" on the div> element
jj ( 2013-01-26 19:07:23 +0800 )edit