Vaadin 7 - layout questions

I am doing some experimenting with Vaadin 7 - beta 11. I could use some help on the following questions:

  1. I tried creating a Panel object - but it looks like the addComponent method no longer exists. Am I missing something or did something change in that area?

  2. Can someone tell me what is wrong with the following code? When I create a war file and run it, I get the label, text field, password field and button, and the button works. But it is all scrunched over on the left side of the page - nothing I’ve tried seems to let me center any of it. What am I doing incorrectly?

Thanks very much,

nbc


@Theme("JART_Admin")
public class JART_AdminUI extends UI {
	private static final long serialVersionUID = 1L;
	private static final VRSNLogger Logger = VRSNLogger.getLogger(JART_AdminUI.class);
	private HorizontalLayout hl_Title = null;
	private HorizontalLayout hl_Login = null;
	private Label lTitle = null;
	private TextField txt_UserName = null;
	private PasswordField txt_Password = null;
	private VerticalLayout vl_MainContent = null;
	
	public void init(VaadinRequest request) {
		hl_Title = new HorizontalLayout();
		hl_Title.setWidth("100%");
		
		lTitle = new Label("JART Administration");
		hl_Title.addComponent(lTitle);
		hl_Title.setComponentAlignment(lTitle, Alignment.MIDDLE_CENTER);
		
		txt_UserName = new TextField("User Name:");
		txt_Password = new PasswordField("Password :");
		
		VerticalLayout vl_Login = new VerticalLayout();
		vl_Login.setSizeUndefined();
		Button 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());
			}
		});
		
		vl_Login.addComponent(txt_UserName);
		vl_Login.addComponent(txt_Password);
		vl_Login.addComponent(bLogin);
		hl_Login = new HorizontalLayout();
		hl_Login.setWidth("100%");
		hl_Login.addComponent(vl_Login);
		hl_Login.setComponentAlignment(vl_Login, Alignment.MIDDLE_CENTER);
		
		vl_MainContent = new VerticalLayout();
		vl_MainContent.setSizeFull();
		vl_MainContent.addComponent(hl_Title);
		vl_MainContent.addComponent(hl_Login);
		
		setContent(vl_MainContent);
	}

}
  1. The Panel API was changed to only accept setContent(); a single Component. You need to create an intermediary layout yourself, e.g. a VerticalLayout.

  2. I copypasted your code, and both textfields and the button are centered for me (both Chrome and FF). The only difference was the theme; check that first.

Thanks for the info on the Panel.

As for the program, I commented out the @Theme line and it still won’t center for me - I tried it with both Firefox and Chrome… Strange…

nbc

Then this gets more interesting. I’d check the browser cache and widgetset version (possible conflicts with old ones) first. Which level doesn’t have the correct widgth/height anymore? (e.g. is the UI 100x100%, the main verticallayout as well, etc).

It is definitely getting more interesting… I had cleared the browser cache without any effect. However, I had created a directory WebContent/VAADIN/themes in which I copied ‘reindeer’ and my JART_Admin directories. I think those may have come from my Vaadin 6.x project. I deleted those 2 directories completely. I see that my ivy.xml file includes the vaadin-themes jar file reference and I have confirmed that the war file now includes vaadin-themes-7.0.0.beta11.jar. And now the behavior is slightly different. The first line (JART Administration) is still pasted to the left side of the screen. But the 2 text fields and the login button are properly centered on the screen. The part of the code that handles the title line now looks like this:


public void init(VaadinRequest request) {
		hl_Title = new HorizontalLayout();
		hl_Title.setWidth("100%");
		
		lTitle = new Label("JART Administration");
//		lTitle.setStyleName("vrsn-header-Title");
		hl_Title.addComponent(lTitle);
		hl_Title.setComponentAlignment(lTitle, Alignment.MIDDLE_CENTER);
		

I removed the setStyle line - once I get the layout, I’ll worry about making the font bigger and setting it bold etc.

The code that sets up the login info and then creates the entire page looks like this. Seems to me the centering should be the same for both Horizontal Layouts. But I’m missing something… I’ll let you know if I figure it out…


                txt_UserName = new TextField("User Name:");
		txt_Password = new PasswordField("Password :");
		
		VerticalLayout vl_Login = new VerticalLayout();
		vl_Login.setSizeUndefined();
		Button 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());
			}
		});
		
		vl_Login.addComponent(txt_UserName);
		vl_Login.addComponent(txt_Password);
		vl_Login.addComponent(bLogin);
		hl_Login = new HorizontalLayout();
		hl_Login.setWidth("100%");
		hl_Login.addComponent(vl_Login);
		hl_Login.setComponentAlignment(vl_Login, Alignment.MIDDLE_CENTER);
		
		vl_MainContent = new VerticalLayout();
		vl_MainContent.setSizeFull();
		vl_MainContent.addComponent(hl_Title);
		vl_MainContent.addComponent(hl_Login);
		
		setContent(vl_MainContent);

Thanks for your suggestions… What exactly did you mean about checking widgetset versions? What would I be looking for, and where? I don’t think that is causing the problem, but I would like to know what that means anyway…

nbc

That described situation is the same I got when testing, didn’t even check the top label… oops :slight_smile:

The theme and widgetset versions should obviously match, and you can check them in the debug window by adding ?debug to your URL. if anything is wrong, there should be red lines among the output. The versions can mismatch if you update your Vaadin version and the browser caches either the theme or widgetset too agressively; in most situations, it isn’t an issue, but it’s an easy thing to check.

So it didn’t center the first horizontal layout for you either?

I just extracted the reindeer theme from the vaadin-themes.7.0… jar file and put it in WebContent/VAADIN/themes. I added an @Theme(“reindeer”) to the top of the code, and then added the line "lTitle.addStyleName(“v-label-h1”); to the code - note this is ‘addStyleName’, not ‘setStyleName’ which I was using before - not sure if that makes a difference - I know that setStyleName is what I was using in Vaadin6.x

The result was that the label line is now colored (sort of dark blue?) and the font is larger - but it is still stuck on the left side of the page, not centered. So clearly the theme code is working, but the layout is still wrong…

nbc

It appears that the width of a Label is 100% by default - so it lines up to the left side of the page. Setting the width to 10% or 20% allows it to be centered. Not sure how to calculate the actual width of an arbitrary text string - might have to be aligned by trial and error - but at least I know it can be done…

Thanks for the help,

Onward… :slight_smile:

nbc

All right - one more minor question on this program. Related to Themes. I got it to work by adding the reindeer theme to the code and adding the h1 style to my label.
Next step was to include my own theme (again). So I created a WebContent/VAADIN/themes/JART_Admin directory, and placed a file called ‘styles.css’ in it. The complete file looks like:


@import url(../reindeer/styles.css);

I also tried changing the text in the styles.css file to this - it didn’t work either…


@import "../reindeer/styles.css";

When I run the program with @Theme(“JART_Admin”) instead of @Theme(“reindeer”) I find the title and the login fields/button are again forced to the far left side of the page. If I change the theme to ‘reindeer’ it works. I have no other code in the JART_Admin theme directory. I removed the addStyle lines so I’m not even accessing the contents of the style explicitly. Any idea why this should fail??

Do I need to copy the reindeer files into my JART_Admin directory? Or do I only need to add the things I want to change there?

thanks,

nbc

With the latest Vaadin 7 betas, if you use a CSS theme, you need to import legacy-styles.css instead of styles.css.

You should not copy the standard themes or modify them in your project - instead of that, only add your rules and overrides in your own theme.

See also
this
and
this
tutorial for native SASS themes. Note that for those, before creating a WAR, you should compile the SCSS theme files to standard CSS using the Vaadin theme compiler - the first tutorial gives instructions for that. In a debugging environment, on-the-fly compilation is normally enabled.

That will help a lot - thanks! I erased the reindeer theme from my VAADIN/themes directory and re-created my JART_Admin theme. I started it with the line
@import url(…/reindeer/legacy-styles.css);

Right now, the new theme has only the styles.css file in the directory.

I have the file vaadin-themes-7.0.0.beta11.jar in my tomcat/webapps//WEB-INF/lib directory. When the program runs, the tomcat log gives me the following error:

Requested resource
[/VAADIN/themes/JART_Admin/favicon.ico] not found from filesystem or through class loader. Add widgetset and/or theme JAR to your classpath or add files to WebContent/VAADIN folder]

That is why I had copied the reindeer files to WebContent/VAADIN/themes - to get rid of that message. Is there a different way to accomplish that? Eventually, I will try working with the new styling code - but I’m just trying to get something working right now…

Thanks,

nbc

The favicon.ico file is optional, it will be shown as the tab icon in the browser etc. if it exists but you can also ignore the warning.

You can copy just that file if you want to use the default one from Vaadin or create one yourself, just make sure it is in the correct ICO format.

I did copy that file and it worked - thanks.

Now I’m sorry to be so thick-headed, but I’m having a problem with the scss files.

Following the tutorial mentioned above, I tried this - and it works:


@import url(../reindeer/legacy-styles.css);

$color : green;

.vrsn-header-Title {
    font-size:  28px;
    font-weight:    bold;
    font-style: italic;
    text-align: center;
    color: $color;
}

But when I tried to separate the css into two files, it fails - no errors in the tomcat log - but no formatting either. The two files look like:


styles.css::

@import "jart_admin.scss";

.jart_admin {
    @include jart_admin;
}


and jart_admin.scss

@import "../reindeer/reindeer.scss";

@mixin jart_admin {
    @include reindeer;

    $color : green;

    .vrsn-header-Title {
        font-size:  28px;
        font-weight:    bold;
        font-style: italic;
        text-align: center;
        color: $color;
    }
}

I assume I’ve got a typo somewhere - but I have not been able to locate it - anyone else see what I’ve done wrong?

Thanks,

nbc

Is the file you have styles.css or styles.scss? If the former, it doesn’t support @include etc.

In development mode, if you have a styles.scss but no styles.css, the .scss file is automatically compiled on the fly. For production deployments, you should compile the theme explicitly - see the tutorial.