Re: Wicket context menu component
Yes I agree, thanks again :) -- View this message in context: http://apache-wicket.1842946.n4.nabble.com/Wicket-context-menu-component-tp4659306p4659544.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
Re: Wicket context menu component
Hi Bronius,
You're welcome!
Yes, the usage you performed is the intended one. In your case however,
maybe you can optimize it, because when a menu-item is clicked, both
IMenuItem#onClick() and Menu#onClick() are triggered (in that order). So
instead of a 'switch' statement in Menu#onClick(), you can implement the
IMenuItem(s)#onClick().
For instance, if you extend the ContextMenu to a dedicated class (embedding
the selectedLink member, the menu-items and their #onClick), then you'll
have a nicer code IMO...
Thanks & best regards,
Sebastien.
On Mon, Jun 17, 2013 at 1:58 PM, bronius wrote:
> Hi Sebastien,
>
> Thats great news, I prefer to use library version as it has a lot of
> advantages over rolling my own solution. I tried yours and it works fine
> for
> me. I think example of how to recognize which link was clicked in demo
> would
> be helpful for others, as context menu will certainly need this for real
> world scenario. Here how I did it (let me know if thats how its intended to
> use):
> final ContextMenu menu = new ContextMenu("menu", Arrays.asList(menuItem1,
> menuItem2, menuItem3, menuItem4)) {
>
> private static final long serialVersionUID = 1L;
>
> private AjaxFallbackLink selectedLink = null;
>
> @SuppressWarnings("unchecked")
> @Override
> protected void onContextMenu(AjaxRequestTarget target,
> Component
> component)
> {
> selectedLink = ((AjaxFallbackLink)component);
> }
>
> @Override
> public void onClick(AjaxRequestTarget target, IMenuItem item)
> {
> switch (item.getTitle().getObject()) {
> case "Context menu 1":
> if (selectedLink != null) {
> selectedLink.onClick(target);
> }
> break;
> case "Context menu 2":
> System.out.println("Clicked " +
> item.getTitle().getObject() + " on " +
> selectedLink.getModelObject().getNickname());
> break;
> case "Context menu 3":
> System.out.println("Clicked " +
> item.getTitle().getObject() + " on " +
> selectedLink.getModelObject().getNickname());
> break;
> case "Context menu 4":
> System.out.println("Clicked " +
> item.getTitle().getObject() + " on " +
> selectedLink.getModelObject().getNickname());
> break;
> }
> }
> };
>
> Big thanks and best regards! :)
>
> bronius
>
Re: Wicket context menu component
Hi Sebastien,
Thats great news, I prefer to use library version as it has a lot of
advantages over rolling my own solution. I tried yours and it works fine for
me. I think example of how to recognize which link was clicked in demo would
be helpful for others, as context menu will certainly need this for real
world scenario. Here how I did it (let me know if thats how its intended to
use):
final ContextMenu menu = new ContextMenu("menu", Arrays.asList(menuItem1,
menuItem2, menuItem3, menuItem4)) {
private static final long serialVersionUID = 1L;
private AjaxFallbackLink selectedLink = null;
@SuppressWarnings("unchecked")
@Override
protected void onContextMenu(AjaxRequestTarget target, Component
component)
{
selectedLink = ((AjaxFallbackLink)component);
}
@Override
public void onClick(AjaxRequestTarget target, IMenuItem item)
{
switch (item.getTitle().getObject()) {
case "Context menu 1":
if (selectedLink != null) {
selectedLink.onClick(target);
}
break;
case "Context menu 2":
System.out.println("Clicked " +
item.getTitle().getObject() + " on " +
selectedLink.getModelObject().getNickname());
break;
case "Context menu 3":
System.out.println("Clicked " +
item.getTitle().getObject() + " on " +
selectedLink.getModelObject().getNickname());
break;
case "Context menu 4":
System.out.println("Clicked " +
item.getTitle().getObject() + " on " +
selectedLink.getModelObject().getNickname());
break;
}
}
};
Big thanks and best regards! :)
bronius
--
View this message in context:
http://apache-wicket.1842946.n4.nabble.com/Wicket-context-menu-component-tp4659306p4659541.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
Re: Wicket context menu component
Hi Bronius,
As (just) said in another thread, I did implement a ContextMenu in
wicket-jquery-ui.
http://apache-wicket.1842946.n4.nabble.com/Dynamic-Context-Menu-using-wicket-jquery-ui-td4659437.html
But, if you still wish/prefer continue implementing the context-menu
plugin, please post a quick-start of your current work in the
wicket-jquery-ui's group so I can see what's happens with your
implementation...
Thanks & best regards,
Sebastien.
On Thu, Jun 13, 2013 at 12:12 AM, bronius wrote:
> Ok thanks again for helping out! :)
> Well I found that 'options.$trigger.attr("id")' from parameters returns id
> of link pressed (did not try yet on wicket side, but I think it should
> work)
> and 'key' returns which context menu was pressed. Now my links represents
> users and context menu some actions to do on users (say view profile). So
> now I kinda can set user id as link id and then retrieve link id from
> 'options.$trigger.attr("id")' and load user and do action from context
> menu
> on it. But for some reason it does not feel right :) Is it ok to implement
> it like that? What do you think? I don't have much wicket experience, but
> wicketish way for me seems that context menu behavior could be added to
> link
> component and then from that behavior I could invoke link's onClick lets
> say. How would you would go forward from here for that kind of use case?
>
>
>
> --
> View this message in context:
> http://apache-wicket.1842946.n4.nabble.com/Wicket-context-menu-component-tp4659306p4659436.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
>
>
Re: Wicket context menu component
Ok thanks again for helping out! :)
Well I found that 'options.$trigger.attr("id")' from parameters returns id
of link pressed (did not try yet on wicket side, but I think it should work)
and 'key' returns which context menu was pressed. Now my links represents
users and context menu some actions to do on users (say view profile). So
now I kinda can set user id as link id and then retrieve link id from
'options.$trigger.attr("id")' and load user and do action from context menu
on it. But for some reason it does not feel right :) Is it ok to implement
it like that? What do you think? I don't have much wicket experience, but
wicketish way for me seems that context menu behavior could be added to link
component and then from that behavior I could invoke link's onClick lets
say. How would you would go forward from here for that kind of use case?
--
View this message in context:
http://apache-wicket.1842946.n4.nabble.com/Wicket-context-menu-component-tp4659306p4659436.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
Re: Wicket context menu component
Hi, glad to read it is almost working :)
getQueryParameterValue("options") does return anything because it's not
transmitted server side (due to CallbackParameter.context("options"), which
does not pass the parameter to the ajax callback). But even you did
transmit it, you probably got an "[object]" string.
As per your example, I would think that you are probably interested to the
'key'... But if you want to check what's happening client side, best is to
debug the call to the function using Firefox with Firebug (or Chrome
equivalent for instance) and see what you have in 'key' and 'options'
object. Then you will know what to transmit server side via the ajax
callback. For instance (I did not check the doc):
CallbackParameter.resolved("menuId", "options.id")
Hope this helps,
Sebastien.
Re: Wicket context menu component
Hi thanks for help! With your explanations and MenuBehavior example I made it
work. Now one last thing is to recognize which link was chosen for context
menu. I see this documentation about callback:
(function) callback
Specifies the default callback to be used in case an item does not
expose its own callback.
The default callback behaves just like item.callback.
Example: {callback: callback: function(key, opt){ alert("Clicked on " +
key + " on element " + opt.$trigger.attr("id")); }}
Is opt.$trigger.attr("id") what I want? How does this work out? I debugged
my select event for RequestCycleUtils.getQueryParameterValue("options") but
it returns nothing.
Here is my current working version of context menu:
public class ContextMenuBehavior extends JQueryBehavior implements
IJQueryAjaxAware {
private static final long serialVersionUID = 1L;
private String selector;
private List menuItems;
private Map menuItemsMap = new HashMap();
private JQueryAjaxBehavior onSelectBehavior;
public ContextMenuBehavior(String selector, List menuItems) {
super("contextMenu");
this.selector = selector;
this.menuItems = menuItems;
for (MenuItem menuItem : menuItems) {
menuItemsMap.put(menuItem.getId(), menuItem);
}
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"));
}
// Methods //
@Override
public void bind(Component component) {
super.bind(component);
component.add(this.onSelectBehavior = this.newOnSelectBehavior());
}
// Events //
@Override
public void onConfigure(Component component) {
super.onConfigure(component);
this.setOption("select",
this.onSelectBehavior.getCallbackFunction());
}
@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: %s, %s});});", selector,
onSelectBehavior.getCallbackFunction(), items.toString());
}
@Override
public void onAjax(AjaxRequestTarget target, JQueryEvent event) {
if (event instanceof SelectEvent) {
IMenuItem item = this.menuItemsMap.get(((SelectEvent)
event).getKey());
if (item != null) {
item.onClick(target);
}
}
}
protected JQueryAjaxBehavior newOnSelectBehavior() {
return new JQueryAjaxBehavior(this) {
private static final long serialVersionUID = 1L;
@Override
protected CallbackParameter[] getCallbackParameters() {
return new CallbackParameter[] {
CallbackParameter.explicit("key"), CallbackParameter.context("options") };
}
@Override
protected JQueryEvent newEvent() {
return new SelectEvent();
}
};
}
protected static class SelectEvent extends JQueryEvent {
private final String key;
public SelectEvent() {
super();
this.key =
RequestCycleUtils.getQueryParameterValue("key").toString();
}
public String getKey() {
return this.key;
}
}
}
--
View this message in context:
http://apache-wicket.1842946.n4.nabble.com/Wicket-context-menu-component-tp4659306p4659381.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
Re: Wicket context menu component
Hi,
I think what is missing you is the AjaxBehavior / Event / jQuery event
binding.
Basically, your ContextMenuBehavior (CMB) should embed an ajax behavior
(JQueryAjaxBehavior, let's say AB). A common Event object (E) should be
shared between CMB & AB. Note that CMB should implement IJQueryAjaxAware
the its instance (this) should be passed to AB's contructor.
Once bound to the CMB (see #bind() ), you can get the
AB#getCallbackFunction() (if using wicket-jquery-ui-6.x) that you will
transmit to the jQuery function 'callback' like this:
"{ selector: '.the selector', callback: " + ab.getCallbackFunction() + " }".
At this stage, AB should be invoked when the jQuery event is fired, and you
can do things in CMD#onAjax(AjaxRequestTarget target, JQueryEvent event).
(note the JQueryEvent here)
The question is now how you transmit an additional information to AB (means
wicket side).
First, you need to know what parameter context-menu will give you when the
callback is triggered. If I see that the callback have 2 parameters (key
and options), I will suppose that the key is the menu-id I am interested to
get back, so in AB:
protected CallbackParameter[] getCallbackParameters()
{
return new CallbackParameter[] {
CallbackParameter.explicit("key") //considering key is the
menu-item key, see CallbackParameter javadoc
CallbackParameter.context("option"),
};
}
Once invoked AB will create a new E. What you need is a custom event that
have a key property (ie: getKey()) which have the value coming the jquery
callback:
protected static class MyCallbackEvent extends JQueryEvent
{
private final String key;
public MyCallbackEvent()
{
this.key =
RequestCycleUtils.getQueryParameterValue("key").toString(); //the menu key!
}
public String getKey()
{
return this.key;
}
}
Here we are, in the onAjax above, get the key, eventually the menu-item
associated to the key, and fire a custom event (for instance onClick,
onMenuClicked, onWhatYouWant)
if (event instanceof MyCallbackEvent )
{
String key = ((MyCallbackEvent)event).getKey();
MenuItem item = null; // FIXME: get the menu item using the key from
the List
this.onClick(target, item); //the custom event
}
If you encounter other problem(s), you can post a quickstart on the
wicket-jquery-ui googlegroup. (but my home PC is currently under
re-installation so feel free to investigate a little bit on your own
before... ;))
Best regards,
Sebastien.
On Mon, Jun 10, 2013 at 12:14 PM, bronius wrote:
> Hi,
>
> Yes I checked it. I also was reading this:
> http://code.google.com/p/wicket-jquery-ui/wiki/HowToCreatePlugin2. However
> context menu plug in was not standard here is jquery example:
> $(function(){
> $.contextMenu({
> selector: '.context-menu-one',
> callback: function(key, options) {
> var m = "clicked: " + key;
> window.console && console.log(m) || alert(m);
> },
> items: {
> "edit": {name: "Edit", icon: "edit"},
> "cut": {name: "Cut", icon: "cut"},
> "copy": {name: "Copy", icon: "copy"},
> "paste": {name: "Paste", icon: "paste"},
> "delete": {name: "Delete", icon: "delete"},
> "sep1": "-",
> "quit": {name: "Quit", icon: "quit"}
> }
> });
>
> $('.context-menu-one').on('click', function(e){
> console.log('clicked', this);
> })
> });
> Now the problem is I don't have knowledge about jquery, but from what I
> understand it creates context menu instance with parameters: selector,
> callback and items. Differently from menu it does not have any markup
> (items are passed as parameters and thats it) and also jquery syntax is
> different. Menu jquery example is just like this:
> $(function() {
> $( "#menu" ).menu();
> });
> Thats why I extended JQueryAbstractBehavior, as jquery initialization is
> quite different. What I implemented shows context menu, and callback
> function is invoked(from jquery parameter), but I lack knowledge on how to
> convert that callback function to wicket one. Menu example is ok, but its
> different and also it seems I understand what separate methods do, but
> because of my inexperience I lack bigger picture understanding how
> everything works together. Any help is really appreciated :)
>
>
>
> --
> View this message in context:
> http://apache-wicket.1842946.n4.nabble.com/Wicket-context-menu-component-tp4659306p4659334.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
>
>
Re: Wicket context menu component
; > > > > } > > > > > > 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 > > > > > > > > >
Re: Wicket context menu component
Hi,
Yes I checked it. I also was reading this:
http://code.google.com/p/wicket-jquery-ui/wiki/HowToCreatePlugin2. However
context menu plug in was not standard here is jquery example:
$(function(){
$.contextMenu({
selector: '.context-menu-one',
callback: function(key, options) {
var m = "clicked: " + key;
window.console && console.log(m) || alert(m);
},
items: {
"edit": {name: "Edit", icon: "edit"},
"cut": {name: "Cut", icon: "cut"},
"copy": {name: "Copy", icon: "copy"},
"paste": {name: "Paste", icon: "paste"},
"delete": {name: "Delete", icon: "delete"},
"sep1": "-",
"quit": {name: "Quit", icon: "quit"}
}
});
$('.context-menu-one').on('click', function(e){
console.log('clicked', this);
})
});
Now the problem is I don't have knowledge about jquery, but from what I
understand it creates context menu instance with parameters: selector,
callback and items. Differently from menu it does not have any markup
(items are passed as parameters and thats it) and also jquery syntax is
different. Menu jquery example is just like this:
$(function() {
$( "#menu" ).menu();
});
Thats why I extended JQueryAbstractBehavior, as jquery initialization is
quite different. What I implemented shows context menu, and callback
function is invoked(from jquery parameter), but I lack knowledge on how to
convert that callback function to wicket one. Menu example is ok, but its
different and also it seems I understand what separate methods do, but
because of my inexperience I lack bigger picture understanding how
everything works together. Any help is really appreciated :)
--
View this message in context:
http://apache-wicket.1842946.n4.nabble.com/Wicket-context-menu-component-tp4659306p4659334.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
Re: Wicket context menu component
Hi Sebastien,
On Mon, Jun 10, 2013 at 11:04 AM, Sebastien wrote:
> Hi,
>
> Did you looked at the Menu implementation? I think it should be close to
> what you want to achieve:
>
> https://github.com/sebfz1/wicket-jquery-ui/blob/master/wicket-jquery-ui/src/main/java/com/googlecode/wicket/jquery/ui/widget/menu/MenuBehavior.java
>
> Here, the way to retrieve the menu-item id is done by:
> CallbackParameter.resolved("id", "ui.item.context.id")
>
> Pay attention with this sample because the menu rendering is done
> component-side, not by the behavior (Menu needs a markup)
>
I haven't checked how wicket-jquery-ui code related to Menu looks like but
you can check org.apache.wicket.markup.html.border.BorderBehavior for an
example of a behavior with a markup. It uses MarkupStream - i.e. very deep
internals of Wicket rendering machinery.
>
> You can find a dummy sample of component/behavior implementation here:
>
> https://github.com/sebfz1/wicket-jquery-ui/blob/master/wicket-jquery-ui-samples/src/test/java/MyJQueryLabel.java
>
> Hope this helps,
> Sebastien.
>
>
> On Mon, Jun 10, 2013 at 1:37 AM, bronius wrote:
>
> > 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 menuItems;
> >
> > public ContextMenuBehavior(String selector, List
> 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
> >
> >
>
Re: Wicket context menu component
Hi,
Did you looked at the Menu implementation? I think it should be close to
what you want to achieve:
https://github.com/sebfz1/wicket-jquery-ui/blob/master/wicket-jquery-ui/src/main/java/com/googlecode/wicket/jquery/ui/widget/menu/MenuBehavior.java
Here, the way to retrieve the menu-item id is done by:
CallbackParameter.resolved("id", "ui.item.context.id")
Pay attention with this sample because the menu rendering is done
component-side, not by the behavior (Menu needs a markup)
You can find a dummy sample of component/behavior implementation here:
https://github.com/sebfz1/wicket-jquery-ui/blob/master/wicket-jquery-ui-samples/src/test/java/MyJQueryLabel.java
Hope this helps,
Sebastien.
On Mon, Jun 10, 2013 at 1:37 AM, bronius wrote:
> 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 menuItems;
>
> public ContextMenuBehavior(String selector, List 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
>
>
Wicket context menu component
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 menuItems;
public ContextMenuBehavior(String selector, List 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
