Button not appearing in CustomLayout

HI i am stuck with a customlayout problem.
I defined a html, css and then use div tag to embed my button.
I would expect the button to appear, but what i got is just the button text (not the button itself).

what have i done wrong? dont understand how a simple code like the below can go wrong (or either i must be very stupid)

main java class


package com.example.myapp;

import com.vaadin.Application;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Label;
import com.vaadin.ui.Window;
import com.vaadin.ui.themes.Runo;
import com.vaadin.ui.*;
/**
 * The Application's "main" class
 */
@SuppressWarnings("serial")
public class MyVaadinApplication extends Application
{
    private Window window;

    @Override
    public void init()
    {
        window = new Window("My Vaadin Application");
        CustomLayout custom = new CustomLayout("mylayout");
        custom.addStyleName("styles");
        window.setContent(custom);
        setMainWindow(window);
        setTheme("Runo");
        Button button = new Button("Click Me4");
        custom.addComponent(button, "uploader");
        button.addListener(new Button.ClickListener() {
            public void buttonClick(ClickEvent event) {
                window.addComponent(new Label("Thank you for clicking"));
            }
        });
    }
    

mylayout.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>My Application</title>
</head>


 <div location="uploader"></div>

</html>

styles.css


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

Might it be that it is some kind of sizing problem? That the components are there but they are not just visible.

Try defining some sizes to test it out

window.setSizeFull();
custom.setSizeFull();

Also, use Chrome Inspector, Firebug for Firefox, or Developer Tools for Internet Explorer to check the elements and see if the componts are in the html tree.

Then, if it still doesn’t work, add ?debug at the end of your url in the browser and click the Analyze Layouts (AL) button to see if it gives you some feedback.

Good suggestion Jens!
I did the Firebug thing. I manage to find the button caption. So it does suggest vaadin did replace the location tag with the button itself.
Still lost me how come the button refuses to “popup.”


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<style type="text/css">
html, body {height:100%;margin:0;}
</style>
<link href="/myapp/VAADIN/themes/Runo/favicon.ico" type="image/vnd.microsoft.icon" rel="shortcut icon">
<link href="/myapp/VAADIN/themes/Runo/favicon.ico" type="image/vnd.microsoft.icon" rel="icon">
<title>My Vaadin Application</title>
<link rel="stylesheet" type="text/css" href="/myapp/VAADIN/themes/Runo/styles.css">
@import url(../runo/styles.css);
</link>
</head>
<body class="v-generated-body v-ff v-ff9 v-ff90 v-gecko v-win" scroll="auto">
<script type="text/javascript">
<iframe id="__gwt_historyFrame" src="javascript:false" style="position:absolute;width:0;height:0;border:0;overflow:hidden;" tabindex="-1">
<script src="/myapp/VAADIN/widgetsets/com.vaadin.terminal.gwt.DefaultWidgetSet/com.vaadin.terminal.gwt.DefaultWidgetSet.nocache.js?1324481788394" language="javascript">
<script defer="defer">
<script type="text/javascript">
<script type="text/javascript">
<div id="myapp-104365301" class="v-app v-theme-Runo v-app-MyVaadinApplication">
<div class="v-view" tabindex="1" style="">
<div class="v-loading-indicator-wait" style="position: absolute; display: none;"></div>
<div class="v-customlayout v-customlayout-styles styles" style="border: medium none; margin: 0pt; padding: 0pt; height: 0px; width: 1560px;">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>My Application</title>
<div location="uploader" style="">
<div class="v-button" tabindex="0" role="button">
<span class="v-button-wrap">
<span class="v-button-caption">Click Me5</span>
</span>
</div>
</div>
</div>
</div>
</div>
<noscript>You have to enable javascript in your browser to use an application built with Vaadin.</noscript>
<iframe id="com.vaadin.terminal.gwt.DefaultWidgetSet" src="javascript:''" style="position: absolute; width: 0pt; height: 0pt; border: medium none;" tabindex="-1">
</body>
</html>

Seems like the problem doesnt lie with the customlayout…
What i did is to strip the project of the html, and leaving it only with styles.css.

Everytime when i did setTheme(“mytheme”), the button fails to appear
And when i uncomment this line in my main application class, then it appears.

SO it appears to be a Theme problem.

Anyone encounter this before?

Btw, i am using the maven artefact id : vaadin-archetype-sample.

does your theme import a standard theme? like, is the first row of the css file a @import statement?

CustomLayouts are for injecting html into your site. I would recommend to strip the template just to the div like that:

<div location="uploader" />

The header and body are managed by vaadin and should not appear in any templates.

Good luck,
Marc