As per a recommendation from a previous question, I tried building my own login window instead of using the old LoginScreen. I have managed to get my ViewManager working, and it now displays the login window, but there are a couple of minor issues that I have not been able to resolve. Any help or pointers here would be appreciated.
Issue # 1 - unable to center the login window. The code for the login window looks like this:
public class LoginScreen extends VerticalLayout{
private static final long serialVersionUID = 1L;
private static final VRSNILogger Logger = VRSNLogger.getLogger(LoginScreen.class);
private Button bLogin = null;
private Label l_ReportProblem = new Label("If you are unable to log in, please click the link below to report the problem");
private TextField txt_UserName = null;
private PasswordField txt_Password = null;
private VerticalLayout myPage = null;
public LoginScreen(VRSN_UI myUI){
myPage = this;
setSizeFull();
addComponent(new VRSN_PageHeader(myUI.getAppTitle()));
Panel loginPanel = new Panel("Enter UserId/Password to log in");
bLogin = new Button("Login");
bLogin.addClickListener(new ClickListener(){
private static final long serialVersionUID = 1L;
@Override
public void buttonClick(ClickEvent event) {
Logger.info("Login button pressed");
Logger.info("\tUser Name: " + txt_UserName.getValue());
}
});
txt_UserName = new TextField("User Name: ");
txt_Password = new PasswordField("Password: ");
loginPanel.addComponent(txt_UserName);
loginPanel.addComponent(txt_Password);
loginPanel.addComponent(bLogin);
addComponent(loginPanel);
setComponentAlignment(loginPanel, Alignment.MIDDLE_CENTER);
}
}
Code for Page Header (base class) =============
package com.vrsn.config.pgm;
import com.vrsn.common.utils.VRSNLogger;
import com.vaadin.server.ThemeResource;
import com.vaadin.ui.Alignment;
import com.vaadin.ui.Embedded;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
public class VRSN_PageHeader extends HorizontalLayout{
private static final long serialVersionUID = 1L;
private static final VRSNLogger Logger = VRSNLogger.getLogger(VRSN_PageHeader.class);
private Embedded iVRSN_Logo = null;
private Label l_PgmTitle = null;
public VRSN_PageHeader(String title){
buildPageHeader(title, true);
}
public VRSN_PageHeader(String title, boolean bLogo){
buildPageHeader(title, bLogo);
}
public void buildPageHeader(String title, boolean bLogo){
l_PgmTitle = new Label(title);
l_PgmTitle.setStyleName("vrsn-header-Title");
l_PgmTitle.setHeight("-1px");
setWidth("100%");
addComponent(l_PgmTitle);
setExpandRatio(l_PgmTitle, 1.0f);
setComponentAlignment(l_PgmTitle, Alignment.MIDDLE_LEFT);
if(bLogo == true){
ThemeResource tResource = new ThemeResource("VRSN/img/VRSN_Logo.jpg");
iVRSN_Logo = new Embedded("", tResource);
addComponent(iVRSN_Logo);
setExpandRatio(iVRSN_Logo, 0.0f);
setComponentAlignment(iVRSN_Logo, Alignment.MIDDLE_RIGHT);
}
}
}
Code for Page Header ================
package com.vrsn.config.pgm;
import com.vrsnt.common.utils.VRSNLogger;
public class Pgm_PageHeader extends VRSN_PageHeader {
private static final long serialVersionUID = 1L;
private static final VRSNLogger Logger = VRSNogger.getLogger(Pgm_PageHeader.class);
public Pgm_PageHeader(String title) {
super(title);
}
public Pgm_PageHeader(String title, boolean bLogo){
super(title, bLogo);
}
}
The attached screenshots show that the UserName and Password fields and the login button are left aligned on the page. What do I need to do to center them? Seems simple enough, but I’m missing something…
Issue #2
Clicking the login button simply prints the text from the Username field at the moment, as you can see from the code. But if you look at the 2 snapshots attached, you can see that the screen alternates from #1 to #2 every time the button is pressed. The page header constructor appears to be called only one time. So why does the page header layout change? The screenshot doesn’t show it, but the second snapshot has the VRSN logo scrolled off the right side of the screen - and the title squished up against the left side of the page… What am I doing wrong here?
I had tried that too - but clearly I’m doing it incorrectly. What is wrong with this code?
public LoginScreen(VRSN_UI myUI){
myPage = this;
setSizeFull();
Panel loginPanel = new Panel("Enter UserId/Password to log in");
bLogin = new Button("Login");
bLogin.addClickListener(new ClickListener(){
private static final long serialVersionUID = 1L;
@Override
public void buttonClick(ClickEvent event) {
Logger.info("Login button pressed");
Logger.info("\tUser Name: " + txt_UserName.getValue());
}
});
txt_UserName = new TextField("User Name: ");
txt_Password = new PasswordField("Password: ");
VerticalLayout vl = new VerticalLayout();
vl.setWidth("100%"); // ***** Tried with and without this line....
vl.addComponent(txt_UserName);
vl.addComponent(txt_Password);
vl.addComponent(bLogin);
vl.setComponentAlignment(txt_UserName, Alignment.MIDDLE_LEFT);
vl.setComponentAlignment(txt_Password, Alignment.MIDDLE_CENTER);
vl.setComponentAlignment(bLogin, Alignment.MIDDLE_RIGHT);
loginPanel.addComponent(vl);
// loginPanel.addComponent(txt_UserName);
// loginPanel.addComponent(txt_Password);
// loginPanel.addComponent(bLogin);
addComponent(loginPanel);
}
When I do this, I sort of expect to see the 3 components offset across the page, but they are all lined up on the left side.
So what is the correct way to get this centered? An example would obviously help - I thought I understood layouts, but I’m
missing something here…
Sorry - that had no effect either - tried with and without setting the width of various parts to 100%, tried with and without setting the alignment of the panel - any other suggestions? I’ve got to be doing something simple incorrectly here…
thanks,
nbc
Latest code:
public LoginScreen(AIKI_UI myUI){
myPage = this;
// myUI.getPage().setTitle("VDN Interface Program (VIPR)");
// setSizeFull(); // *** Tried with and without this
addComponent(new DSI_PageHeader(myUI.getAppTitle()));
Panel loginPanel = new Panel("Enter UserId/Password to log in");
bLogin = new Button("Login");
bLogin.addClickListener(new ClickListener(){
private static final long serialVersionUID = 1L;
@Override
public void buttonClick(ClickEvent event) {
Logger.info("Login button pressed");
Logger.info("\tUser Name: " + txt_UserName.getValue());
}
});
txt_UserName = new TextField("User Name: ");
txt_Password = new PasswordField("Password: ");
VerticalLayout vl = (VerticalLayout) loginPanel.getContent();
// vl.setWidth("100%"); // ** Tried with and without this
vl.addComponent(txt_UserName);
vl.addComponent(txt_Password);
vl.addComponent(bLogin);
vl.setComponentAlignment(txt_UserName, Alignment.MIDDLE_LEFT);
vl.setComponentAlignment(txt_Password, Alignment.MIDDLE_CENTER);
vl.setComponentAlignment(bLogin, Alignment.MIDDLE_RIGHT);
addComponent(loginPanel);
setComponentAlignment(loginPanel, Alignment.MIDDLE_CENTER); // ** Tried with and without this
}
I believe the problem is that the Panel defaults to 100% width. So even if you center it, the content will appear to the left. I find that FireBug is a great tool for looking at the space allocated to a component so you can see if it is larger than expected which affects alignment.
This code works for me. Note the loginPanel.setSizeUndefined():
setSizeFull();
final TextField txt_UserName = new TextField("User Name: ");
PasswordField txt_Password = new PasswordField("Password: ");
Panel loginPanel = new Panel("Enter UserId/Password to log in");
loginPanel.setSizeUndefined();
Button bLogin = new Button("Login");
bLogin.addClickListener(new ClickListener() {
private static final long serialVersionUID = 1L;
@Override
public void buttonClick(ClickEvent event) {
log.info("Login button pressed");
log.info("\tUser Name: " + txt_UserName.getValue());
}
});
loginPanel.addComponent(txt_UserName);
loginPanel.addComponent(txt_Password);
loginPanel.addComponent(bLogin);
addComponent(loginPanel);
setComponentAlignment(loginPanel, Alignment.MIDDLE_CENTER);
I have a feeling I’m going to be very embarrassed when I finally figure this out. I just copied your code directly into my program and it still shows the text on the far left side. I am going to play with it a bit more, and if I don’t figure it out, I will post my entire program - it is only 2 or 3 small classes at the moment and see if someone can see what I’m doing wrong. Seems like my infrastructure is incorrect - but I don’t see where yet. I’ll post the entire program later tonight if necessary…
Well, I’m still not sure what I’m doing wrong, but the problem is related to the ViewManager class that I’ve created. When I plug in the login screen directly into the main panel (using setContent(new LoginScreen())) the text fields are properly centered. When I try to do the same thing with my ViewManager, it is not. I was attempting to modify a ViewManager class I found on the Vaadin site a long time back that I’ve used with Vaadin 6.8.x, but obviously my porting attempt to Vaadin 7 has failed - but at least I now know where to look…
Conclusion - my use of Views and Navigation in Vaadin 7 is not yet correct, and that appears to be causing my problems. I will dig deeper into the Navigation classes and that should fix the alignment issues…
