Question

这是我使用DecoratorPanel构建的View。如何修改此项以显示背景图像？我看到很多应用CSS样式的例子，但我的CSS知识是有限的，所以如果这是要走的路，那么任何人都会有一个如何创建和应用CSS样式的工作示例。

这是我的代码 public class EditContactView extends Composite implements EditContactPresenter.Display { private final TextBox firstName; private final TextBox lastName; 私人最终FlexTable详情表;

      public EditContactView() {
        DecoratorPanel contentDetailsDecorator = new DecoratorPanel();
        contentDetailsDecorator.setWidth("18em");
        initWidget(contentDetailsDecorator);

        VerticalPanel contentDetailsPanel = new VerticalPanel();
        contentDetailsPanel.setWidth("100%");

        detailsTable = new FlexTable();
        detailsTable.setCellSpacing(0);
        detailsTable.setWidth("100%");         
        firstName = new TextBox();
        lastName = new TextBox();
        initDetailsTable();
        contentDetailsPanel.add(detailsTable);

        HorizontalPanel menuPanel = new HorizontalPanel();
        contentDetailsPanel.add(menuPanel);
        contentDetailsDecorator.add(contentDetailsPanel);
      }

      private void initDetailsTable() {
        detailsTable.setWidget(0, 0, new Label("Firstname"));
        detailsTable.setWidget(0, 1, firstName);
        detailsTable.setWidget(1, 0, new Label("Lastname"));
        detailsTable.setWidget(1, 1, lastName);
        firstName.setFocus(true);
      }

      public HasValue<String> getFirstName() {
        return firstName;
      }

      public HasValue<String> getLastName() {
        return lastName;
      }

      public Widget asWidget() {
        return this;
      }

    }

Answer 1

关于设置样式名称 - 您只需在您想要的任何窗口小部件上调用setStyleName（“myDecoratedPanelStyle”） - Example并检查gwt如何在standard.css中添加样式gwt-TextBox

在.css文件中添加.myDecoratedPanelStyle

myDecoratedPanelStyle 
{
   background-image:url('path/paper.gif');
   background-color:#cccccc;
}

同时参考 - https://developers.google.com/web-toolkit/doc/latest/DevGuideUiCss

将背景图像应用于GWT装饰器面板

1 个答案: