從HTML，CSS到GWT世界的樣式

Question

我在HTML和CSS中有一些代碼，其中HTML如下所示：

<div id="avmenu">
<h2 class="hide">Menu:</h2>
<ul>
<li><a href="#">Welcome!</a></li>

我的CSS看起來像這樣：

#avmenu
{
Style details
}

#avmenu li a:hover
{
Style details
}

a:hover{ Hover styles }

因此，當您將鼠標懸停在菜單上時，上面的代碼會顯示一個菜單項並執行一些動畫，例如顏色更改等。 我已經展示了足以解釋手頭問題的最小風格。

現在我將其遷移到GWT。 我們使用Label作為菜單項，我也想在GWT中實現相同的效果。 這是我嘗試過的

1. 我嘗試應用名為“avmenu”的CSS樣式，這應用了基本樣式，但當然沒有得到動畫
2. 然后我嘗試了DOM.setElementAttribute(orgLbl.getElement(), "id", "avmenu"); 但這也沒有幫助。

什么是我最好的選擇，用最少的時間和精力來達到同樣的效果？ 我當然可以在Label上聽事件然后更改樣式，但是對所有小部件執行此操作將是一種矯枉過正的行為！

編輯 - 更多信息：我正在使用Label構建菜單，並將其添加到樹userMgmtLbl = new Label("User mgmt"); userMgmtLbl.setStyleName(HOME_MENU_LBL_STYLE); treeItem_1 = configParentTL.addItem(userMgmtLbl); userMgmtLbl.addClickHandler(Click logic) userMgmtLbl = new Label("User mgmt"); userMgmtLbl.setStyleName(HOME_MENU_LBL_STYLE); treeItem_1 = configParentTL.addItem(userMgmtLbl); userMgmtLbl.addClickHandler(Click logic)

Answer 1

發布如何在GWT中構建菜單。 您可能沒有在標簽內使用錨點，因此您的：懸停樣式顯然無效。

Answer 2

您遇到的一個問題是GWT中的Tree和TreeItem由任意div組成，而不是原始html中的ul和li。 （當你無疑可以檢查GWT 展示的DOM時，看看底層小部件是如何創建的）。

這意味着您的選擇器，例如“＃avmenu li a：hover”將不再有效。

如果您的導航菜單是靜態的，那么您最好的選擇可能是使用GWT ui-binders ，它們基本上是gwts模板系統。 如果您使用HTMLPanel作為根窗口小部件，則可以逐字有效地使用所有原始HTML，而不必擔心嘗試將所有DOM元素混合到相應的窗口小部件中。

基本小部件看起來像這樣：

NavigationWidget.java public final class YourWidget擴展Composite {

  YourWidget() {
    initWidget(binder.createAndBindUi(this));
  }

  private static final Binder binder = GWT.create(Binder.class);
  interface Binder extends UiBinder<Widget, YourWidget> {}
}

NavigationWidget.ui.xml

<ui:UiBinder
   xmlns:gwt="urn:import:com.google.gwt.user.client.ui"
   xmlns:ui="urn:ui:com.google.gwt.uibinder">

  <gwt:HTMLPanel>
    <div id="avmenu">
      <h2 class="hide">Menu:</h2>
      <ul>
      <li><a href="#">Welcome!</a></li>
    </div>
  </gwt:HTMLPanel>

</ui:UiBinder>

順便說一句，在這個示例中，HTMLPanel將自己的DIV添加到DOM，使第二個div有點多余。 不幸的是，gwt中的小部件沒有一種簡單的方法來設置模板的ID屬性，所以除非你想將#avmenu選擇器切換到.avmenu，否則你會遇到第二個div。