You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Colin Rogers <Co...@objectconsulting.com.au> on 2013/06/13 04:15:45 UTC
Dynamic Context Menu using wicket-jquery-ui
Wicketeers,
I'm attempting to develop a reusable context menu component. I'm nearly there, but having a few issues, and thought I might share in the hope I might get some help. I realise that another person (bronius) is also having a go at this, but his implementation isn't using wicket-jquery-ui, which I am using and want to utilise.
http://www.otbcs.co.uk/wicketmenu.zip
The link above includes a zip to a quick start that contains the code. There isn't a lot to it, that isn't already done by wicket-jquery-ui.
Requirements;
* Open Menu on right click - menus to appear near or in relation to what was clicked. (done)
* Menus are dynamically defined - they are not created or rendered initially, on page creation, but are defined dynamically on button event and returned via Ajax for rendering. (done)
* Must allow multiple, different, menus on same page. (done)
* Must clear down intelligently - when another click elsewhere or escape etc., is pressed.
The issue I have at the moment is;
* Closing the menu only happens on another context-menu, successfully. I can have it close on an 'onclick' event, which is added to the page, but this in turn disables/ breaks standard links. In the example above, this is the case - the menu behaves nicely, but breaks the standard link.
* How would I close the menu on an 'escape' key press?
* While not that important; you can't reuse a menu and have it appear where it's clicked. At the moment, they just appear where they are placed. As 'items' can be re-used, this isn't so much of an issue.
Any help, advice or suggestions welcome!
Cheers,
Col.
EMAIL DISCLAIMER This email message and its attachments are confidential and may also contain copyright or privileged material. If you are not the intended recipient, you may not forward the email or disclose or use the information contained in it. If you have received this email message in error, please advise the sender immediately by replying to this email and delete the message and any associated attachments. Any views, opinions, conclusions, advice or statements expressed in this email message are those of the individual sender and should not be relied upon as the considered view, opinion, conclusions, advice or statement of this company except where the sender expressly, and with authority, states them to be the considered view, opinion, conclusions, advice or statement of this company. Every care is taken but we recommend that you scan any attachments for viruses.
Re: Dynamic Context Menu using wicket-jquery-ui
Posted by Sebastien <se...@gmail.com>.
Hi Colin,
Thank you! :)
Yes, I confirm you that the issue raised in the previous mail has been
solved...
Best regards,
Sebastien.
On Mon, Jun 17, 2013 at 3:54 AM, Colin Rogers <
Colin.Rogers@objectconsulting.com.au> wrote:
> Sebestien,
>
> I did get the chance to look at your first suggestion... and it was
> looking really good. Apologies for not getting the chance to reply. I
> really liked the change - and the 'issue' didn't seem too much of a
> problem, but I'm guessing you've solved it, from the looks of, below.
>
> Really chuffed you've added it to your stack - the example looks really
> cool...! :)
>
> Will have a proper delve into it tonight or tomorrow - but once again -
> awesome work! :D
>
> Cheers,
> Col.
>
RE: Dynamic Context Menu using wicket-jquery-ui
Posted by Colin Rogers <Co...@objectconsulting.com.au>.
Sebestien,
I did get the chance to look at your first suggestion... and it was looking really good. Apologies for not getting the chance to reply. I really liked the change - and the 'issue' didn't seem too much of a problem, but I'm guessing you've solved it, from the looks of, below.
Really chuffed you've added it to your stack - the example looks really cool...! :)
Will have a proper delve into it tonight or tomorrow - but once again - awesome work! :D
Cheers,
Col.
-----Original Message-----
From: Sebastien [mailto:sebfz1@gmail.com]
Sent: 16 June 2013 03:32
To: users@wicket.apache.org
Subject: Re: Dynamic Context Menu using wicket-jquery-ui
Hi Colin,
By trying to help you on this topic, I finally end up with a working ContextMenu implementation (so, I add it in
wicket-jquery-ui-6.8.2-SNAPSHOT...)
You can either use it or have a look at the code to complete your own if this one does not full-fit your needs...
ContextMenu:
https://github.com/sebfz1/wicket-jquery-ui/blob/master/wicket-jquery-ui/src/main/java/com/googlecode/wicket/jquery/ui/widget/menu/ContextMenu.java
ContextMenuBehavior:
https://github.com/sebfz1/wicket-jquery-ui/blob/master/wicket-jquery-ui/src/main/java/com/googlecode/wicket/jquery/ui/widget/menu/ContextMenuBehavior.java
The usage is the following:
final ContextMenu menu = new ContextMenu("menu", newMenuItemList()) {
private static final long serialVersionUID = 1L;
@Override
protected void onContextMenu(AjaxRequestTarget target, Component
component)
{
//the menu-item list can be modified here
//this.getItemList().add(new MenuItem("my new item"));
}
@Override
public void onClick(AjaxRequestTarget target, IMenuItem item)
{
}
};
this.add(menu);
final Label label = new Label("label", "my label"); label.add(new ContextMenuBehavior(menu)); this.add(label);
There is a demo here:
http://www.7thweb.net/wicket-jquery-ui/menu/ContextMenuPage
Hope you will like it,
Best regards,
Sebastien.
EMAIL DISCLAIMER This email message and its attachments are confidential and may also contain copyright or privileged material. If you are not the intended recipient, you may not forward the email or disclose or use the information contained in it. If you have received this email message in error, please advise the sender immediately by replying to this email and delete the message and any associated attachments. Any views, opinions, conclusions, advice or statements expressed in this email message are those of the individual sender and should not be relied upon as the considered view, opinion, conclusions, advice or statement of this company except where the sender expressly, and with authority, states them to be the considered view, opinion, conclusions, advice or statement of this company. Every care is taken but we recommend that you scan any attachments for viruses.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Dynamic Context Menu using wicket-jquery-ui
Posted by Sebastien <se...@gmail.com>.
Hi Colin,
By trying to help you on this topic, I finally end up with a working
ContextMenu implementation (so, I add it in
wicket-jquery-ui-6.8.2-SNAPSHOT...)
You can either use it or have a look at the code to complete your own if
this one does not full-fit your needs...
ContextMenu:
https://github.com/sebfz1/wicket-jquery-ui/blob/master/wicket-jquery-ui/src/main/java/com/googlecode/wicket/jquery/ui/widget/menu/ContextMenu.java
ContextMenuBehavior:
https://github.com/sebfz1/wicket-jquery-ui/blob/master/wicket-jquery-ui/src/main/java/com/googlecode/wicket/jquery/ui/widget/menu/ContextMenuBehavior.java
The usage is the following:
final ContextMenu menu = new ContextMenu("menu", newMenuItemList()) {
private static final long serialVersionUID = 1L;
@Override
protected void onContextMenu(AjaxRequestTarget target, Component
component)
{
//the menu-item list can be modified here
//this.getItemList().add(new MenuItem("my new item"));
}
@Override
public void onClick(AjaxRequestTarget target, IMenuItem item)
{
}
};
this.add(menu);
final Label label = new Label("label", "my label");
label.add(new ContextMenuBehavior(menu));
this.add(label);
There is a demo here:
http://www.7thweb.net/wicket-jquery-ui/menu/ContextMenuPage
Hope you will like it,
Best regards,
Sebastien.
Re: Dynamic Context Menu using wicket-jquery-ui
Posted by Sebastien <se...@gmail.com>.
Hi Colin,
Nice try :) It's not perfect for now but its interesting!
(actually bronius is also using wicket-jquery-ui, but not the Menu; he's
trying to integrate a context-menu plugin...)
So, for the short time I had today, here is my current feedback:
First, I am not yet convinced about the CloseMenusBahavior, so I did
public class OpenMenuBehaviour extends AjaxEventBehavior (instead of
CloseMenusBehavior)
Closing on-click somewhere (on the document) and on-escape can be easily
done using a jquery statement, so in ContextMenu I did:
@Override
protected void onInitialize() {
super.onInitialize();
this.setVisible( false );
// this.setOutputMarkupId( true ); //not needed, already handled by
setOutputMarkupPlaceholderTag
this.setOutputMarkupPlaceholderTag( true );
this.add(new JQueryAbstractBehavior("contextmenu-commands") {
private static final long serialVersionUID = 1L;
@Override
protected String $() {
String selector =
JQueryWidget.getSelector(ContextMenu.this);
StringBuilder builder = new
StringBuilder("jQuery(function() {");
builder.append("$(document).click(function(e) {
$('").append(selector).append("').hide(); });"); // hide on click
builder.append("$(document).keyup(function(e) { if (e.which
== 27) { $('").append(selector).append("').hide(); } });"); // hide on
escape
builder.append(" });");
return builder.toString();
}
});
}
The 'only' issue I have is with the link (the standard one, not the ajax)
because if I open the context menu, its visible flag is set to true (for
the menu to be displayed) but is not set to false on click or/and on
escape., so refreshing the page cause the menu to be displayed inline...
There is probably a nice way to fix this but I do not have yet in mind... ;)
Hope this helps (a little),
Best regards,
Sebastien.
On Thu, Jun 13, 2013 at 4:15 AM, Colin Rogers <
Colin.Rogers@objectconsulting.com.au> wrote:
> Wicketeers,
>
> I'm attempting to develop a reusable context menu component. I'm nearly
> there, but having a few issues, and thought I might share in the hope I
> might get some help. I realise that another person (bronius) is also having
> a go at this, but his implementation isn't using wicket-jquery-ui, which I
> am using and want to utilise.
>
> http://www.otbcs.co.uk/wicketmenu.zip
>
> The link above includes a zip to a quick start that contains the code.
> There isn't a lot to it, that isn't already done by wicket-jquery-ui.
>
> Requirements;
>
> * Open Menu on right click - menus to appear near or in relation
> to what was clicked. (done)
>
> * Menus are dynamically defined - they are not created or rendered
> initially, on page creation, but are defined dynamically on button event
> and returned via Ajax for rendering. (done)
>
> * Must allow multiple, different, menus on same page. (done)
>
> * Must clear down intelligently - when another click elsewhere or
> escape etc., is pressed.
>
> The issue I have at the moment is;
>
> * Closing the menu only happens on another context-menu,
> successfully. I can have it close on an 'onclick' event, which is added to
> the page, but this in turn disables/ breaks standard links. In the example
> above, this is the case - the menu behaves nicely, but breaks the standard
> link.
>
> * How would I close the menu on an 'escape' key press?
>
> * While not that important; you can't reuse a menu and have it
> appear where it's clicked. At the moment, they just appear where they are
> placed. As 'items' can be re-used, this isn't so much of an issue.
>
> Any help, advice or suggestions welcome!
>
> Cheers,
> Col.
>
>
> EMAIL DISCLAIMER This email message and its attachments are confidential
> and may also contain copyright or privileged material. If you are not the
> intended recipient, you may not forward the email or disclose or use the
> information contained in it. If you have received this email message in
> error, please advise the sender immediately by replying to this email and
> delete the message and any associated attachments. Any views, opinions,
> conclusions, advice or statements expressed in this email message are those
> of the individual sender and should not be relied upon as the considered
> view, opinion, conclusions, advice or statement of this company except
> where the sender expressly, and with authority, states them to be the
> considered view, opinion, conclusions, advice or statement of this company.
> Every care is taken but we recommend that you scan any attachments for
> viruses.
>