Question

我试图将一个TabLayoutPanel集中在一个uibinder中并且没有任何运气。正如你在下面看到的，我已经尝试了我能想到的每一个CSS技巧。有人可以帮忙吗？

<ui:style>

    .gwt-TabLayoutPanel {
        vertical-align: middle;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        border-top: 1px solid #666;
        border-left: 1px solid #999;
        border-right: 1px solid #666;

    }
</ui:style>

<g:VerticalPanel ui:field="userInterfacePanel" width="100%">
    <mapmaker:MapBox ui:field="mapBox"/>
    <g:TabLayoutPanel barHeight="20" ui:field="interfaceTabs" height="300px" width="80%" >
        <g:tab>
            <g:header>Lines</g:header>
            <g:Label>Select Line Data Here</g:Label>
        </g:tab>
        <g:tab>
            <g:header>Features</g:header>
            <g:Label>Select Features Data Here</g:Label>
        </g:tab>
        <g:tab>
            <g:header>Help</g:header>
            <g:Label>Help goes here</g:Label>
        </g:tab>
    </g:TabLayoutPanel>
    <g:HorizontalPanel>
        <g:Button>Generate KML</g:Button>
        <g:Button>Generate Shapefile</g:Button>
    </g:HorizontalPanel>
</g:VerticalPanel>

Answer 1

可以使用如下单元格元素对项目进行居中：

<g:HorizontalPanel width="100%" height="100%">
 <g:cell horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE">
  <g:Label>Hello Center</g:Label>
 </g:cell>
</g:HorizontalPanel>

Answer 2

问题在于，.gwt-TabLayoutPanel不会应用于您的TabLayoutPanel。那是因为GWT的UiBinder样式中的类名将在生成的CSS中模糊。

基本上有两种解决方案：

a）将.gwt-TabLayoutPanel的CSS放在普通的CSS文件中。使用

在HTML页面中包含该文件

<head>
  ...
  <link type="text/css" rel="stylesheet" href="My.css">
  ...
</head>

这样，类名不会被混淆。

b）或者（可能更好），在UiBinder <style>部分中，使用像.panel这样的任意类名，然后像这样更改代码：

<ui:style>

  .panel {
    vertical-align: middle;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    border-top: 1px solid #666;
    border-left: 1px solid #999;
    border-right: 1px solid #666;
  }
</ui:style>
...
    <g:TabLayoutPanel barHeight="20" ui:field="interfaceTabs"
         height="300px" width="80%" 
         addStyleNames="{style.panel}" >

这样，类名称将在样式定义和面板的class属性中进行模糊处理。

现在你的面板应该居中。

Answer 3

还有另一种解决方案完全针对jour case（在javadoc中提到的btw，因为不建议用于新代码）。
在视图中：

interface GlobalResources extends ClientBundle {
        @NotStrict
        @Source("../resources/css/global.css")   //legacy.css
        CssResource css();
}

查看构造函数：

        // Inject global styles.
        GWT.<GlobalResources>create(GlobalResources.class).css().ensureInjected();

这样就可以在没有混淆的情况下使用标准CSS。

global.css中：

.gwt-DialogBox .Caption {
    background: #E3E8F3;
    padding: 4px 24px 4px 8px;
    cursor: move;
    border-bottom: 1px solid #BBB;
    border-top: 0px solid white;
    text-align: center;
    font-family: Georgia, Times New Roman, sans-serif;
}

我在主要演示者中注入了GlobalResources，因此编辑标准小部件（MenuItem，DialogBox等）的主题变得更加容易。

Answer 4

如果样式名称的混淆是问题，其他人建议只需添加：

@external .gwt-TabLayoutPanel;

到＆lt; ui：style＆gt;一部分。

在UIBinder中居中GWT元素

4 个答案: