PDA

View Full Version : CSS Styles on Buttons



dwelch
16 Dec 2009, 9:19 AM
Hey guys, I'm relatively new to GWT/GXT and this is my first time posting so let me know if I'm being too vague or leaving out details (gently if possible, brutal if necessary :s)

I've read a few books on GWT & GXT and finally started to develop a simple app. So far, things have run pretty smooth and I've built a few test case apps interacting with the server using RPC, but I'm running into an issue where GXT buttons are not being styled at all.

I've loaded the necessary resources, linked to the ext-all.css and nearly everything else looks to be displaying correctly, just not buttons. Can anyone offer any advice?

Attached is a screen shot of the running app, and my EntryPoint class is below. The bolded section is where I'm adding the button.



public class EntryPoint implements com.google.gwt.core.client.EntryPoint {

private LayoutContainer north;
private ContentPanel west, center;
private TabPanel mainTabPanel;

@Override
public void onModuleLoad() {
// Register our theme here

// Initialize components
initializeComponents();

// Build our view
buildView();
}

private void initializeComponents() {
north = new LayoutContainer();

center = new ContentPanel(new FitLayout());
mainTabPanel = new TabPanel();
mainTabPanel.setResizeTabs(true);
mainTabPanel.setTabScroll(true);
mainTabPanel.setAnimScroll(true);

TabItem defaultTab = new TabItem();
defaultTab.setClosable(false);
defaultTab.setText("Welcome");
defaultTab.addText("Hello World");
mainTabPanel.add(defaultTab);
center.add(mainTabPanel);


west = new ContentPanel();
west.setHeading("QuickBar");
west.setLayout(new AccordionLayout());
ContentPanel west1 = new ContentPanel();
west1.setHeading("My Favorites");
Button testButton = new Button("Test New Tabs");
testButton.setEnabled(true);
testButton.setIconStyle("my-icon");
testButton.addSelectionListener(new SelectionListener<ButtonEvent>() {

@Override
public void componentSelected(ButtonEvent ce) {
TabItem item = new TabItem();
item.setClosable(true);
item.setText("Tab Item");

item.setLayout(new FitLayout());
item.add(new Label("Test Content"));

mainTabPanel.add(item);
}
});
west1.add(testButton);
west.add(west1);

// more accordian tabs here


}

private void buildView() {
Viewport vp = new Viewport();
BorderLayout layout = new BorderLayout();
vp.setLayout(layout);

BorderLayoutData northData = new BorderLayoutData(LayoutRegion.NORTH,
20);
northData.setMargins(new Margins(5, 5, 0, 5));

BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST, 150);
westData.setCollapsible(true);
westData.setFloatable(true);
westData.setSplit(true);
westData.setMargins(new Margins(5, 0, 5, 5));

BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);
centerData.setMargins(new Margins(5));

north.setBorders(true);
west.setBorders(true);
center.setBorders(true);

vp.add(north, northData);
vp.add(west, westData);
vp.add(center, centerData);

RootPanel.get().add(vp);
}

}
Thanks in advance :)

dwelch
16 Dec 2009, 9:20 AM
My apologies. Just like sending an email, I forgot the attachment :">

Arno.Nyhm
17 Dec 2009, 8:18 AM
i replay your example with my system. it display the button.

you can double check if you have all resources:
open your project in firefox and look with firebug and open the network tab. there you see which image files are missing

dwelch
17 Dec 2009, 9:10 AM
Thanks for your quick reply Arno. I did load this up in FireBug and did not see any 404's. I've checked the resource files and, from what I can tell, the necessary files are *physically* in the folder they need to be.

I did notice in FireBug that there is no request going out for the image bundles. Do I need to explicitly set the style somewhere? Or could this be a theme related issue that I'm unaware of?

Thanks for any help

Arno.Nyhm
17 Dec 2009, 10:27 AM
no idea :-(

maybe you post here your welcomeGWT.html file

dwelch
20 Dec 2009, 2:17 PM
Just wanted to post back in case someone *somehow* ends up in the same situation I did.

Turns out I was reading some older (or just misguided) tutorials that stated I should include the ExtJS framework and reference the ext-all.css file for my GXT project. The resources I should have been using came with the GXT download.

Thanks for your help Arno... and patience while I clog up the forums ;)