将 css 从 GWT（动态地）设置为具有多个关联样式的元素

Question

我有一个 TabLayoutPanel 实例，其中可以动态设置选项卡的数量。因此，要对齐选项卡以填充屏幕的整个宽度，我需要

1) 用 auto 覆盖 gwt-TabTayoutPanel 默认值宽度 16384px !important (done);

2) 将 gwt-TabTayoutPanelTab 的宽度设置为适当的百分比值（例如 2 个选项卡 = 50%。3 个选项卡 = 33%，4 个选项卡 = 25% 等等). 我有一个简单的功能，就像这样（简化）：

双 css值 = 100.0/getWidgetCount();

（完成）

3) 现在我的问题来了：如何从 Java 设置 gwt-TabTayoutPanelTab 的宽度？我加粗了 Tabs 因为当我使用 this.getStyleName(); 我进入了 return gwt-TabLayoutPanel 而不是 gwt-TabLayoutPanelTab .

总而言之，我可以将我的问题分为两部分：

-如何从 GWT 访问 TabLayoutPanelTab css class?;

-如何使用我动态生成的百分比数字设置所述 class 宽度？;

编辑：正确编辑函数以确定百分比值。

Answer 1

-如何从 GWT 访问 TabLayoutPanelTab css class？;

int widgetCount = panel.getWidgetCount();
for(int i = 0; i < widgetCount; i++)
    System.out.println(panel.getTabWidget(i).getParent().getStyleName());
}

如您所见，无法直接访问选项卡。您可以做的是访问选项卡中的小部件，并获取它们的父项，即有问题的选项卡。

-如何使用我动态生成的百分比数字设置所述 class 宽度？;

如果您有一定数量的可能百分比，那么您可以在使用 !important 注释以覆盖其他所有内容。
如果前面的解决方案不能接受那么你只能使用内联css。 这意味着该元素必须已经加载到 DOM。 在您知道该元素已加载的代码中的某处，您可以这样调用：

int widgetCount = panel.getWidgetCount();
for(int i = 0; i < widgetCount; i++) {
  com.google.gwt.user.client.Element tabElement = panel.getTabWidget(i).getParent().getElement();
  tabElement.getStyle().setWidth(100/widgetCount, Unit.PCT);
}

将 css 从 GWT（动态地）设置为具有多个关联样式的元素

Set css from GWT (dynamically) to element with multiple styles associated

css

gwt

gwt-tablayoutpanel