Button Login is not shown.

Hello, all:
This is my code:
MAIN CODE:

package com.example.services_online;

import com.vaadin.Application;
import com.vaadin.ui.*;

public class Services_onlineApplication extends Application {
	@Override
	public void init() {
		Window mainWindow = new Window("Services_online Application");
	   
	    mainWindow.setTheme("sampler");
		
	    mainWindow.addComponent(new login_cliente());
		setMainWindow(mainWindow);
	}

}

HERE, BUTTON LOGIN B1 IS NOT SHOWN:

package com.example.services_online;

import com.vaadin.ui.Button;
import com.vaadin.ui.CustomLayout;
import com.vaadin.ui.PasswordField;
import com.vaadin.ui.TextField;
import com.vaadin.ui.VerticalLayout;

@SuppressWarnings("serial")
public class login_cliente extends VerticalLayout {

    public login_cliente() {
        setMargin(true);

		// Create the custom layout and set it as a component in
        // the current layout
        
        
        CustomLayout custom = new CustomLayout("examplecustomlayout");
        addComponent(custom);

        // Create components and bind them to the location tags
        // in the custom layout.
        TextField username = new TextField();
        custom.addComponent(username, "username");

        PasswordField password = new PasswordField();
        custom.addComponent(password, "password");

        [b]
Button ok = new Button("Login");
        custom.addComponent(ok, "b1");
[/b]
        
        custom.addComponent(new link_customer(), "LINK");
    }
}

examplecustomlayout CODE: username and password components works fine:

<!-- 
	This customlayout uses inline styles and images as well. Notice that the
	URLs are relatice to the layout, which means you can open the layout offline
	in a WYSIWYG editor (or browser), and the images will work.
 -->

<table width="400px" align="left" cellspacing="10"
	style="color: #fff; padding: 20px; background: #656f7c url(../sampler/sample-desc-bg.png) repeat-x">
	<tr>
		<td colspan="2">
		<h1 style="margin-top: 0;">Client Login</h1>
		<td>
	</tr>
	<tr>
		<td align="right">User&nbsp;name:</td>
		<td>
		<div location="username"></div>
		</td>
	</tr>
	<tr>
		<td align="right">Password:</td>
		<td>
		<div location="password"></div>
		</td>
	</tr>
	<tr>
		<td align="right" colspan="2">
		[b]
<div location="b1" style="padding: 10px;"></div>
[/b]
		</td>
	</tr>
	<tr>
	  <td><div location="LINK"></div></td>
	</tr>
</table>

Button (Link) Create Account works fine.
11823.png

Ok, maybe I have to add this line:

In examplecustomlayout.html:

<td align="right" colspan="2">
		<img align="left" src="../icons/sampleicons/75-ButtonPush.gif" />
		<div location="b1" style="padding: 10px;"></div>
		</td>

but I do not like this method. I have to design a lot of the form. [Attach-1]

Maybe it would be better adding the button directly in main code.

Suggestions …
What do you recomend me to design a fast forms using styles, colours … ???.

  1. Maybe Using CustomLayouts is not recomend it because the output is not equal using different browsers.
    Attachment-2 and Attachment-3 is shown different with the same code.
    HTML, css is not represented equal in chromium than Mozilla Firefox … and forms are not the same .
    11824.png
    11825.png
    11826.png