在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元素

回答

相關問題