style for GXT menu button - gwt

I see GXT Menu can only be set on CellButtonBase subclasses' instances through setMenu() method.
I'd like to show an image instead of a button and show a menu when user clicks that image. unfortunately, Image is not a subclass of CellButtonBase and thus I can't attach a GXT Menu to it.
so how can I make TextButton (which seems to be my only choice here) look like an image if I have to use it?
There's no documentation or examples on this subject. I asked on Sencha GXT forum support, but got no response.

ok, I found a way to do this without TextButton. add an Image and call menu.show(...) in click handler.
private void createMenu() {
menu = new Menu();
Image menuButtonImage = new Image(Resources.INSTANCE.nav_preferences());
menuButtonImage.addStyleName(CSS.header_bar_icon());
menuButtonImage.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
menu.showAt(getAbsoluteLeft(), getAbsoluteTop() + MENU_OFFSET_FROM_IMAGE_TOP);
}
});
menu.addShowHandler(new ShowEvent.ShowHandler() {
#Override
public void onShow(ShowEvent event) {
highlight();
}
});
menu.addHideHandler(new HideEvent.HideHandler() {
#Override
public void onHide(HideEvent event) {
removeHighlight();
}
});
menu.setStyleName(CSS.menu());
add(menuButtonImage);
}
private void addUserSettings() {
MenuItem userSettingsItem = new MenuItem("User Settings");
userSettingsItem.addSelectionHandler(new SelectionHandler<Item>() {
#Override
public void onSelection(SelectionEvent<Item> event) {
_coreLayout.showUserSettingsPage();
}
});
userSettingsItem.setStyleName(CSS.menu_item());
menu.add(userSettingsItem);
}
private void highlight() {
addStyleName(CSS.header_bar_icon_box_selected());
}
private void removeHighlight() {
removeStyleName(CSS.header_bar_icon_box_selected());
}

Related

Why am I not getting any events for my anchor element?

For a quite simple element
public static class ToolHtml extends Anchor {
private Long toolId;
public ToolHtml(ToolDetails toolDetails) {
this.toolId = toolDetails.getToolId();
this.setText(toolDetails.getName());
Style style = this.getElement().getStyle();
style.setColor("orange");
this.getElement().setId(DOM.createUniqueId());
}
public Long getToolId() {
return this.toolId;
}
}
I am trying to add some event handlers. I am interested in the DragStartEvent but not even the ClickEvent seems to work and I simply can't figure out why:
public void addOfferItem(ToolHtml toolHtml) {
Set<ToolHtml> toolHtmlSet = this.toolIdToToolHtml.get(toolHtml.getToolId());
if (toolHtmlSet == null) {
toolHtmlSet = new HashSet<>();
this.toolIdToToolHtml.put(toolHtml.getToolId(), toolHtmlSet);
}
toolHtml.getElement().setAttribute("contenteditable", "false");
toolHtml.getElement().setAttribute("draggable", "true");
toolHtml.addBitlessDomHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
LOGGER.fine("Click");
LOGGER.fine("Click");
LOGGER.fine("Click");
}
}, ClickEvent.getType());
toolHtml.addDomHandler((DragStartEvent event) -> {
LOGGER.fine("HANDLER DRAG START");
},
DragStartEvent.getType());
toolHtml.addDomHandler((DragStartEvent event) -> {
LOGGER.fine("DOM DRAG START");
},
DragStartEvent.getType());
toolHtml.addBitlessDomHandler((DragStartEvent event) -> {
LOGGER.fine("DRAG START");
},
DragStartEvent.getType());
toolHtmlSet.add(toolHtml);
// Attach/append to DOM
this.getElement().appendChild(toolHtml.getElement());
}
Does anybody know what the issue is here?
You append an element, not a Widget to which your handlers have been attached. You need to add a widget to a widget for all the functionality to work.
NB: Instead of toolHtml.addBitlessDomHandler you need to use
toolHtml.addClickHandler

CellTable click swallowed

I've an combo box which is composed of a text field and a popup with a CellTable showing the suggestion items. The text field has a change handler that updates the CellTable's selection.
When typing a character and clicking an already selected suggestion, the first click is swallowed. The second click works and triggers the selection via the CellTable.addDomHandler(...).
Any idea why first click is swallowed?
Example code:
private static class SuggestFieldTextAndPopupSandbox extends SimplePanel {
private final TextField mText;
private CellTable<Handle<String>> mTable;
private SingleSelectionModel<Handle<String>> mTableSelection;
private SingleSelectionModel<Handle<String>> mSelection;
private ProvidesKey<Handle<String>> mKeyProvider = new SimpleKeyProvider<Handle<String>>();
private PopupPanel mPopup;
private List<Handle<String>> mData;
public SuggestFieldTextAndPopupSandbox() {
mData = Lists.newArrayList(new Handle<String>("AAA"), new Handle<String>("AAB"), new Handle<String>("ABB"));
mSelection = new SingleSelectionModel<Handle<String>>();
mText = new TextField();
mText.addKeyPressHandler(new KeyPressHandler() {
#Override
public void onKeyPress(KeyPressEvent pEvent) {
mPopup.showRelativeTo(mText);
}
});
mText.addBlurHandler(new BlurHandler() {
#Override
public void onBlur(BlurEvent pEvent) {
mTableSelection.setSelected(startsWith(mText.getValue()), true);
}
});
mText.addChangeHandler(new ChangeHandler() {
#Override
public void onChange(ChangeEvent pEvent) {
mText.setText(mText.getText().toUpperCase());
}
});
mTable = new CellTable<Handle<String>>(0, GWT.<TableResources>create(TableResources.class));
mTable.setTableLayoutFixed(false);
mTableSelection = new SingleSelectionModel<Handle<String>>(mKeyProvider);
mTable.setSelectionModel(mTableSelection);
mTable.addDomHandler(new ClickHandler() {
#Override
public void onClick(final ClickEvent pEvent) {
Scheduler.get().scheduleFinally(new ScheduledCommand() {
#Override
public void execute() {
mSelection.setSelected(mTableSelection.getSelectedObject(), true);
mText.setFocus(true);
mPopup.hide();
}
});
}
}, ClickEvent.getType());
mTable.addColumn(new TextColumn<Handle<String>>() {
#Override
public String getValue(Handle<String> pObject) {
return pObject.get();
}
});
mTable.setRowData(mData);
mPopup = new PopupPanel();
mPopup.setAutoHideEnabled(true);
mPopup.setWidget(mTable);
mPopup.setWidth("200px");
mPopup.setHeight("200px");
VerticalPanel p = new VerticalPanel();
p.add(mText);
setWidget(p);
}
private Handle<String> startsWith(final String pValue) {
final String val = nullToEmpty(pValue).toLowerCase();
int i = 0;
for (Handle<String> item : mData) {
String value = item.get();
if (value != null && value.toLowerCase().startsWith(val)) {
return item;
}
i++;
}
return null;
}
}
I reproduced your issue and here is the problem:
when you click on the suggestions the following is happening:
The text field is loosing focus which causes the corresponding ChangeEvent to be dealt with followed by the BlurEvent.
The click causes the popup to get the focus now which is why it is swallowed.
If you remove the ChangeHandler and the BlurHandler of the text field the issue disappears. But I think I found another solution
Try replacing the DOM handler of the mTable with a selection handler relative to the mTableSelection as follows:
mTableSelection.addSelectionChangeHandler(new Handler(){
#Override
public void onSelectionChange(SelectionChangeEvent event) {
Scheduler.get().scheduleFinally(new ScheduledCommand() {
#Override
public void execute() {
mSelection.setSelected(mTableSelection.getSelectedObject(), true);
mText.setFocus(true);
mPopup.hide();
}
});
}
});
Found a way how to properly solve this.
Skipping the blur handler when user hovers the suggestion list area seemed to fix that issue, at least from the tests that were done didn't see any more issues.
This was necessary because just before the user clicks a suggestion item, the text is blurred and it fires a selection change. This in turn cancels the selection made when user clicks an item.

change moved widget on drop with gwt-dnd 3.3.0

situation
I'm writing a admintool to change a GWT based GUI via Browser.
I want the Admin to use drag and drop to create and change the GUI.
To realize the dnd I use gwt-dnd 3.3.0
I have a toolbar in my admintool, from which I can drag the different objects.
Every object in the toolbar is a plain HTML widget with text inside.
I would like to change the Widget when it is droped.It should change from the HTML widget to the original widget I like to use.
problem & tried solution
At the moment I can change the widget on Drop, then it throws an exception and the "moving widget" don't get removed from the page. The "moving widget" is still dragable and shows the "move designe"
I think this happens, because the Drag or Drophandler do not know the moving widget, because i changed the drop widget...
Here is the code:
dragController.addDragHandler(new DragHandler(){
public void onDragEnd(DragEndEvent event) {
...
}
public void onDragStart(DragStartEvent event) {
...
}
public void onPreviewDragEnd(DragEndEvent event)
throws VetoDragException {
final DragContext mycontent = event.getContext();
List<Widget> mywl = mycontent.selectedWidgets;
for(int i = 0; i < mywl.size(); i++)
{
String stemp = ((HTML)mywl.get(i)).getText();
if(stemp.contains("Container")&&!stemp.contains("SubContainer"))
{
FlowPanel mypanel = new FlowPanel();
HTML htmltemp = new HTML("Label");
htmltemp.setStyleName("edit-dndcontainer");
mypanel.add(htmltemp);
mypanel.setStyleName("edit-dndcontainer");
mywl.add(i, mypanel);
dragController.makeDraggable(mypanel);
mywl.get(i).removeFromParent();
mywl.remove(i+1);
mycontent.selectedWidgets = mywl;
}
else if(stemp.contains("Label"))
{
...
}
else
{
...
throw new VetoDragException();
}
}
}
public void onPreviewDragStart(DragStartEvent event)
throws VetoDragException
{
...
}
});
question
Is gwt-dnd the correct lib to use for this behaviour, or should I use native dnd of GWT?
How can I change the dnd-widget on drop with gwt-dnd?
Thanks for your help
My approach was not that bad, but instead of working with the DragContext, I have to work with the getSelectedWidgets().iterator() from the DragController.
edit
I switched my code to onDragEnd(), in this case I don't screw up the moving widget. And I changed the Draggable widget to a Panel. I just have to add and remove widgets from it.
answer
Samplecode:
dragController.addDragHandler(new DragHandler(){
public void onDragEnd(DragEndEvent event) {
Iterable<Widget> myiterable = myDragCTRL_subcont.getSelectedWidgets();
Widget mywidget = myiterable.iterator().next();
FlowPanel flowtemp = ((FlowPanel)mywidget);
flowtemp.add(new HTML("label"));
...
...
}
public void onDragStart(DragStartEvent event) {
...
}
public void onPreviewDragEnd(DragEndEvent event)
throws VetoDragException {
...
}
public void onPreviewDragStart(DragStartEvent event)
throws VetoDragException {
...
}
});

GWT: How to disable the anchor link event when clicked

I want to disable the anchor link event when it clicked one time. I used anchor.setenabled(false) but nothing happend. When I click the same button again the event e is true. I want false at that time.
public void onCellClick(GridPanel grid, int rowIndex, int colindex,EventObject e)
{
if(rowIndex==0 && colindex==2){
tomcatHandler = "Start";
anchorStart.setEnabled(false);
}else if(rowIndex==0 && colindex==3){
tomcatHandler = "Stop";
****anchorStop.setEnabled(false);
anchorStart.setEnabled(false);
anchorRestart.setEnabled(true);****
}else if(rowIndex==0 &&colindex==4){
tomcatHandler = "Restart";
anchorRestart.setEnabled(false);
}
AdminService.Util.getInstance().tomcat(tomcatHandler,new AsyncCallback<String>() {
#Override
public void onSuccess(String result) {
imageChangeEvent(result);
}
#Override
public void onFailure(Throwable caught) {
}
});}
Anchors in GWT have always had a problem with setEnabled() because HTML doesn't support such a property. A quick workaround is to create a new widget that subclasses GWT's Anchor, adding the following override:
#Override
public void onBrowserEvent(Event event) {
switch (DOM.eventGetType(event)) {
case Event.ONDBLCLICK:
case Event.ONFOCUS:
case Event.ONCLICK:
if (!isEnabled()) {
return;
}
break;
}
super.onBrowserEvent(event);
}
This disables the passing of the browser event to GWT's Anchor class (summarily disabling all related handlers) when the link is double clicked, focused or clicked and is in a disabled state.
Source
It doesn't seem to actually disable the anchor, but it does retain the status that has been set with anchor.setEnabled(), so just test that within your handler e.g.
myAnchor.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent evt) {
// write to filter and then call reload
if (((Anchor) evt.getSource()).isEnabled()) {
//do stuff
}
}
});

Drag and Drop in GWT 2.4

I have a custom widget that is actually an image, and i would like to be able to drag it inside an AbsolutePanel and get its coordinates every time. I would like to use the new DND API from GWT 2.4, but i'm having a hard time to implement it. Can someone propose the basic steps i must take?
The new DnD API introduced with GWT 2.4 doesn't currently support the AbsolutePanel (see the implementations of the HasAllDragAndDropHandlers interface). Looking at the implementation of FocusPanel it shouldn't be too hard to enable it for other panels.
Here's a quick proof of concept on how to solve your problem:
public void onModuleLoad() {
DragImage image = new DragImage();
image.setUrl(Resources.INSTANCE.someImage().getSafeUri());
final DropAbsolutePanel target = new DropAbsolutePanel();
target.getElement().getStyle().setBorderWidth(1.0, Unit.PX);
target.getElement().getStyle().setBorderStyle(BorderStyle.SOLID);
target.getElement().getStyle().setBorderColor("black");
target.setSize("200px", "200px");
// show drag over effect
target.addDragOverHandler(new DragOverHandler() {
#Override
public void onDragOver(DragOverEvent event) {
target.getElement().getStyle().setBackgroundColor("#ffa");
}
});
// clear drag over effect
target.addDragLeaveHandler(new DragLeaveHandler() {
#Override
public void onDragLeave(DragLeaveEvent event) {
target.getElement().getStyle().clearBackgroundColor();
}
});
// enable as drop target
target.addDropHandler(new DropHandler() {
#Override
public void onDrop(DropEvent event) {
event.preventDefault();
// not sure if the calculation is right, didn't test it really
int x = (event.getNativeEvent().getClientX() - target.getAbsoluteLeft()) + Window.getScrollLeft();
int y = (event.getNativeEvent().getClientY() - target.getAbsoluteTop()) + Window.getScrollTop();
target.getElement().getStyle().clearBackgroundColor();
Window.alert("x: " + x + ", y:" + y);
// add image with same URL as the dropped one to absolute panel at given coordinates
target.add(new Image(event.getData("text")), x, y);
}
});
RootPanel.get().add(image);
RootPanel.get().add(target);
}
And here the custom panel
public class DropAbsolutePanel extends AbsolutePanel implements HasDropHandlers, HasDragOverHandlers,
HasDragLeaveHandlers {
#Override
public HandlerRegistration addDropHandler(DropHandler handler) {
return addBitlessDomHandler(handler, DropEvent.getType());
}
#Override
public HandlerRegistration addDragOverHandler(DragOverHandler handler) {
return addBitlessDomHandler(handler, DragOverEvent.getType());
}
#Override
public HandlerRegistration addDragLeaveHandler(DragLeaveHandler handler) {
return addBitlessDomHandler(handler, DragLeaveEvent.getType());
}
}
and image class:
public class DragImage extends Image {
public DragImage() {
super();
initDnD();
}
private void initDnD() {
// enables dragging if browser supports html5
getElement().setDraggable(Element.DRAGGABLE_TRUE);
addDragStartHandler(new DragStartHandler() {
#Override
public void onDragStart(DragStartEvent event) {
// attach image URL to drag data
event.setData("text", getUrl());
}
});
}
}