Hi,
I am a Java-Programmer and new to GWT and I have a problem with using
an background-image on a DockPanel. I have 1 DockPanel with 3
VerticalPanels. The left and right VerticalPanels should only include
a background-image. The content of the Website is going to be placed
into the middle VerticalPanel.
I have put an image with the name "body.jpg" into the public folder,
where also the html-file is stored. If I specify in a CSS-file, that
the image should be used for the general background it does work. But
if I specify that it should only be used with the VerticalPanels, it
does not work.
I have the following Java-Code:
//=======================================
package testPackage01.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.HistoryListener;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.DecoratedTabPanel;
import com.google.gwt.user.client.ui.DockPanel;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.VerticalPanel;
public class Module01 implements EntryPoint, HistoryListener {
public void onModuleLoad() {
DecoratedTabPanel tabPanel = new DecoratedTabPanel();
tabPanel.setWidth("50%");
tabPanel.setAnimationEnabled(true);
HTMLPanel htmlPanelTab1 = new HTMLPanel(
"<h2>WELCOME!</h2>"
+ "<p>Lorem ipsum dolor sit
amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. </p>");
tabPanel.add(htmlPanelTab1, "Tab1");
HTMLPanel htmlPanelTab2 = new HTMLPanel(
"<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec
in dui ac ligula fringilla tincidunt. Quisque massa ante, porta non,
rutrum eu, euismod nec, est. Aliquam nisi lectus, porttitor ac, auctor
id, placerat id, urna. Vestibulum viverra, augue in lacinia vehicula,
eros nulla pulvinar eros, vel eleifend urna purus eget velit. Nulla
facilisi. Morbi vel ipsum a turpis iaculis scelerisque. Sed elit.
Vestibulum dictum, elit sed dignissim lobortis, mauris metus lacinia
justo, sit amet convallis velit neque ac ante. Morbi rhoncus commodo
libero. Nunc in odio. Nullam volutpat metus. Phasellus pellentesque
quam vel lorem. Mauris tempus, diam a tristique bibendum, augue orci
pellentesque elit, sit amet consectetur ligula dui eget justo.</p>");
tabPanel.add(htmlPanelTab2, "Tab2");
HTMLPanel htmlPanelTab3 = new HTMLPanel(
"<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec
in dui ac ligula fringilla tincidunt. Vestibulum viverra, augue in
lacinia vehicula, eros nulla pulvinar eros, vel eleifend urna purus
eget velit. Nulla facilisi. Morbi vel ipsum a turpis iaculis
scelerisque. Sed elit. Vestibulum dictum, elit sed dignissim lobortis,
mauris metus lacinia justo, sit amet convallis velit neque ac ante.
Morbi rhoncus commodo libero. Nunc in odio. Sed facilisis. Praesent
vitae sem. Sed tincidunt massa ac nunc. Mauris blandit enim nec odio
convallis vulputate. Integer sem felis, dictum vitae, hendrerit nec,
ornare ut, urna. Nullam volutpat metus. Phasellus pellentesque quam
vel lorem. Mauris tempus, diam a tristique bibendum, augue orci
pellentesque elit, sit amet consectetur ligula dui eget justo.</p>");
tabPanel.add(htmlPanelTab3, "Tab3");
HTMLPanel htmlPanelTab4 = new HTMLPanel(
"<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec
in dui ac ligula fringilla tincidunt. Quisque massa ante, porta non,
rutrum eu, euismod nec, est. Aliquam nisi lectus, porttitor ac, auctor
id, placerat id, urna. Vestibulum viverra, augue in lacinia vehicula,
eros nulla pulvinar eros, vel eleifend urna purus eget velit. Nulla
facilisi. Morbi vel ipsum a turpis iaculis scelerisque. Sed elit.
Vestibulum dictum, elit sed dignissim lobortis, mauris metus lacinia
justo, sit amet convallis velit neque ac ante. Morbi rhoncus commodo
libero. Mauris blandit enim nec odio convallis vulputate. Integer sem
felis, dictum vitae, hendrerit nec, ornare ut, urna. Nullam volutpat
metus. Phasellus pellentesque quam vel lorem. Mauris tempus, diam a
tristique bibendum, augue orci pellentesque elit, sit amet consectetur
ligula dui eget justo.</p>");
tabPanel.add(htmlPanelTab4, "Tab4");
DockPanel mainDock = new DockPanel();
mainDock.setHorizontalAlignment(DockPanel.ALIGN_CENTER);
VerticalPanel westPanel = new VerticalPanel();
VerticalPanel eastPanel = new VerticalPanel();
westPanel.setWidth("25%");
eastPanel.setWidth("25%");
mainDock.add(westPanel, DockPanel.WEST);
mainDock.add(tabPanel, DockPanel.CENTER);
mainDock.add(eastPanel, DockPanel.EAST);
// Return the content
tabPanel.selectTab(0);
// tabPanel.ensureDebugId("cwTabPanel");
//=========== SETTING STYLE-NAMES ===========
westPanel.addStyleName("sidePanels");
eastPanel.addStyleName("sidePanels");
//====== ADDING STUFF TO THE ROOTPANEL ======
RootPanel.get().add(mainDock);
//============================================
}
public void onHistoryChanged(String historyToken) {
// TODO Auto-generated method stub
}
}
//=======================================
My CSS-file looks as follows:
//=======================================
body {
margin: 0;
padding: 0;
/* background: #ffffff; */
/* background-image: url("body.jpg");*/
}
/*.gwt-VerticalPanel {
background-image: url("body.jpg");
} */
.sidePanels {
background-image: url("body.jpg");
}
//=======================================
The following is written in my XML-file:
//=======================================
<module>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name='com.google.gwt.user.User'/>
<!-- Specify the app entry point class. -->
<entry-point class='testPackage01.client.Module01'/>
<inherits name="com.google.gwt.user.theme.chrome.Chrome"/>
<stylesheet src="Module01.css" />
</module>
//=======================================
Does anyone know where the problem is?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/Google-Web-Toolkit?hl=en
-~----------~----~----~----~------~----~------~--~---
