Меню CSS с GWT

Question

Может кто-нибудь сказать мне, как интегрировать меню CSS с GWT? Я нашел отличный сайт под названием http://www.cssmenumaker.com/, и мне нравится меню, которое оно создает, но я не уверен, как я могу интегрировать это в остальную часть моего приложения GWT. Как сделать так, чтобы ссылки в меню взаимодействовали с GWT.

Любая помощь будет оценена.

Answer 1

Используйте фрагменты uri в качестве адресов ссылок для местоположений вида gwt и реализуйте прослушиватель истории. При таком подходе ваше приложение gwt не привязывает события к меню и вместо этого просто реагирует на изменение фрагмента uri (через прослушиватель истории)

Например, ссылки в меню могут указывать на:

/ staticPage1.html

/ staticPage2.html

/ gwt.html # token1

/ gwt.html # token2

Тогда вы можете иметь некоторые ссылки в меню, указывающие на страницы, не относящиеся к gwt, а другие - на страницу, на которой размещено ваше приложение gwt. Ваш слушатель истории может затем вызвать представления в вашем приложении gwt. В настоящее время я использую этот подход с меню CSS и GWT.

Answer 2

Я нашел еще один способ, которым это может быть достигнуто. Я использовал GQuery для выбора всех элементов с именем класса. В своем HTML-коде я помещаю это имя класса во все элементы списка, с которыми мне нужно связать действие. Затем я вызываю hookUpMenu() в методе onModuleLoad() и использую встроенные методы History для управления изменением страницы.

Затем я реализовал интерфейс ValueChangeHandler, чтобы обрабатывать изменения страницы и обмениваться контентом.

private void hookUpMenu() {
  $(".actionable").click(new Function() {
    @Override
    public boolean f(com.google.gwt.user.client.Event event) {
      handlePageChange($(event).attr("href"));
      return true;
    }
  });

  History.addValueChangeHandler(new HistoryManager());
}

private void handlePageChange(String href) {
  if (ClientUtil.isNotBlank(href)) {
    String[] split = href.split("#");
    String token = split[split.length-1];
    History.newItem(token);
  }
}

Фрагмент HTML:

<li><a class="actionable" href="#clientcode">Client Code</a></li>

Answer 3

Похоже, я отправил слишком рано. Вот что я смог придумать, пожалуйста, помогите, если у вас есть более элегантный способ сделать это:

Мой статический HTML-файл с моим меню выглядит так:

<li><a href="#" id="manage_events">Manage Events</a></li>

Мне удалось зарегистрировать событие нажатия мыши и прослушать его, назначив его этому элементу. Главный недостаток, который я вижу, заключается в том, что я должен делать это для каждого пункта меню. Вот код, который я придумал:

Element e = RootPanel.get("manage_events").getElement();
DOM.sinkEvents(e, com.google.gwt.user.client.Event.ONMOUSEDOWN);
DOM.setEventListener(e, new EventListener() {

    @Override
    public void onBrowserEvent(com.google.gwt.user.client.Event event) {
        Log.debug("test");
    }
});

У кого-нибудь есть лучший способ?