Стили из 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. Я пытался применить CSS Style с именем "avmenu", это применялось базовых стилей, но, конечно, не получило анимацию
2. Затем я попытался DOM.setElementAttribute(orgLbl.getElement(), "id", "avmenu"); , но это тоже не помогло.

Какой мой лучший вариант с минимальными затратами времени и усилий для достижения того же эффекта? Я, конечно, могу слушать события на Label, а затем менять стиль, но делать это для всех виджетов было бы излишним!

РЕДАКТИРОВАТЬ - Больше информации: я строю Меню, используя Label, и добавляю это в дерево <code>userMgmtLbl = new Label("User mgmt"); userMgmtLbl.setStyleName(HOME_MENU_LBL_STYLE); treeItem_1 = configParentTL.addItem(userMgmtLbl); userMgmtLbl.addClickHandler(Click logic)

Answer 1

Одна из проблем, с которыми вы сталкиваетесь, заключается в том, что Tree и TreeItem в GWT состоят из произвольных элементов div, а не ul и li, как в исходном html.(Если вы сомневаетесь, вы можете проверить DOM витрины GWT, чтобы увидеть, как создаются базовые виджеты).

Что это означает, что ваши селекторы, такие как "#avmenu li a: hover"больше не будет работать.

Если ваше навигационное меню статично, вам лучше всего использовать GWT ui-binders , которые в основном являются системой шаблонов gwts.Если вы используете HTMLPanel в качестве корневого виджета, вы можете эффективно использовать весь свой первоначальный дословный HTML-код и не беспокоиться о попытке объединить все элементы DOM в соответствующие виджеты.

Базовый виджет будет выглядеть примерно так:

NavigationWidget.java открытый финальный класс 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 из шаблонов, поэтому вы застряли со вторым div, если не хотите переключить селектор #avmenu на .avmenu

Answer 2

Опубликуйте, как вы строите меню в GWT.Вы, вероятно, не используете якоря внутри своих ярлыков, поэтому ваши стили hover явно не работают.