在UIBinder中集中GWT元素

我想将一个TabLayoutPanel放在UIBinder中，并且没有任何运气。正如你在下面看到的，我已经尝试了所有我能想到的CSS技巧。任何人都可以协助在UIBinder中集中GWT元素

<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>

来源

2011-03-22 Jason

这里的问题是，这.gwt-TabLayoutPanel不会被应用到您的TabLayoutPanel。这是因为GWT UiBinder样式中的类名称将在生成的CSS中被模糊处理。

基本上有两种解决方案：

一）要么把你的.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}" >

这样，类名会被混淆无论是在样式定义中，还是在面板的类属性中。

现在你的面板应该居中。

来源

2011-03-23 21:16:06

还有另一种解决方案准确的情况下（顺便提及javadoc不建议新代码）。
在View：

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在主演示所以编辑为非标准的小部件主题变得更容易（菜单项，对话框等）。

来源

2011-03-23 22:50:51

如果样式名的混淆是因为别人提示只需添加问题：

@external .gwt-TabLayoutPanel;

到< UI：风格>部分。

来源

2011-03-24 07:49:36

我不使用的原因这个解决方案是，它样式应用于页面上的所有TabLayoutPanels，虽然它的本地定义在''中......我真的很喜欢每个UiBinder文件都有自己的“命名空间”的事实;我认为全局定义应该放在全局CSS文件中。 – 2011-03-24 08:56:48

居中的物品可以用这样的电池元件来完成：

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

来源

2011-07-17 18:47:40 mrbang

在UIBinder中集中GWT元素

回答

相关问题