Hello,

I needed context menu component, but surprisingly it does not exit for
current version, so decided to roll my own, even though i have very little
Wicket experience and know absolutely nothing about jquery, so im like that
dog :) 
<http://apache-wicket.1842946.n4.nabble.com/file/n4659306/7TjIrsT.jpg> 

Anyway I managed to get something working like this (maybe it will be
helpful for someone or maybe someone smarter will show me my mistakes):
1. Added https://github.com/sebfz1/wicket-jquery-ui dependency.
2. Chosen to use this jquery plugin:
http://medialize.github.io/jQuery-contextMenu/index.html
3. After spending some time I managed to create Behavior like this:

public class ContextMenuBehavior extends JQueryAbstractBehavior {

    private static final long serialVersionUID = 1L;

    private String selector;

    private List<MenuItem> menuItems;

    public ContextMenuBehavior(String selector, List<MenuItem> menuItems) {
        super("contextMenu");
        this.selector = selector;
        this.menuItems = menuItems;

        add(new JavaScriptResourceReference(ContextMenuBehavior.class,
"jquery.ui.position.js"));
        add(new JavaScriptResourceReference(ContextMenuBehavior.class,
"jquery.contextMenu.js"));
        add(new CssResourceReference(ContextMenuBehavior.class,
"jquery.contextMenu.css"));
    }

    @Override
    protected String $() {
        // build menu items for jquery
        StringBuilder items = new StringBuilder("items: {");
        int nbOfMenuItems = menuItems.size();
        for (int i = 0; i < nbOfMenuItems; i++) {
            MenuItem menuItem = menuItems.get(i);
            items.append("'").append(menuItem.getId()).append("': {name:
'").append(menuItem.getTitle().getObject()).append("', icon:
'").append(menuItem.getIcon()).append("'}");
            if (i < nbOfMenuItems - 1) {
                items.append(",");
            }
        }
        items.append("}");
        return String.format("$(function(){$.contextMenu({selector: '%s',
callback: function(key, options) {var m = 'clicked: ' + key; window.console
&& console.log(m) || alert(m); }, %s});});", selector, items.toString());
    }

}

4. $() method just prints jquery context menu initialization stuff from
here: http://medialize.github.io/jQuery-contextMenu/demo.html

5. Now when add this behavior to Page and add div class="userContextMenu" to
html right click on it gives me context menu so its working. Clicking on
menu also shows me simple alert message as it is in callback parameter.

6. So far so good, but now Im interested in how to link this to wicket
component listener. I will put this menu on multiple links, so i would like
to receive both on which link user clicked for context menu and which menu
item he have chosen. How would you implement this? Also am I even on the
right track? Is it good approach? Im sorry if this is stupid question :)



--
View this message in context: 
http://apache-wicket.1842946.n4.nabble.com/Wicket-context-menu-component-tp4659306.html
Sent from the Users forum mailing list archive at Nabble.com.

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org

Reply via email to