Menu CSS avec GWT

Question

Quelqu'un peut-il me dire comment intégrer un menu CSS avec GWT? J'ai trouvé un bon site appelé http://www.cssmenumaker.com/ et j'aime le menu qu'il crée, mais je ne sais pas comment je peux l'intégrer dans le reste de mon application GWT. Comment puis-je faire interagir les liens dans le menu avec GWT.

Toute aide serait appréciée.

Answer 1

J'ai encore trouvé un autre moyen d'y parvenir. J'ai utilisé GQuery pour sélectionner tous les éléments avec un nom de classe. Dans mon code HTML, je mets ce nom de classe sur tous les éléments de ma liste auxquels j'ai besoin d'une action associée. Ensuite, j'appelle hookUpMenu() dans la méthode onModuleLoad() et utilise les méthodes historiques intégrées pour gérer le changement de page.

J'ai ensuite implémenté l'interface ValueChangeHandler pour gérer les changements de page et permuter le contenu dedans et dehors.

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); 
    } 
} 

Un extrait de HTML:

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

Answer 2

On dirait que j'ai posté un peu trop tôt. Voici ce que j'ai pu trouver, s'il vous plaît aider si vous avez une façon plus élégante de le faire:

Mon fichier HTML statique avec mon menu ressemble à ceci:

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

J'ai pu pour enregistrer l'événement de souris et l'écouter en l'affectant à cet élément. Le principal inconvénient que je vois est que je dois le faire pour chaque élément de menu. Voici un code que j'ai trouvé:

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"); 
    } 
}); 

Quelqu'un at-il un meilleur moyen?

Answer 3

Utilisez des fragments d'uri en tant qu'adresses de lien pour les emplacements de vue gwt et implémentez un écouteur d'historique. Avec cette approche votre application GWT ne lie pas les événements au menu et au lieu répond simplement au fragment uri changer (via écouteur d'histoire)

À titre d'exemple, les liens dans le menu peut pointer vers:

/staticPage1. html

/staticPage2.html

/gwt.html#token1

/gwt.html#token2

Le n vous pouvez avoir des liens dans le menu pointer vers des pages non-gwt et d'autres pointer vers une page qui héberge votre application gwt. Votre écouteur d'historique peut alors déclencher les vues dans votre application gwt. J'utilise actuellement cette approche avec un menu css et gwt.