GWT onResize & mouse up - gwt

I have a window resizeHandler, it is working fine. Except that I'm just interested in the final dimension of the window, in other words, I'm interested in the dimension of the window when the mouse button is released. Is there a way I can listen to window mouse events?
I've written a piece of code that accomplishes my goal but I'd prefer something more obvious. resizeRequestId is a field:
private void processResize() {
final Timer timer = new Timer() {
final Size windowSize = getWindowDimention();
final int requestId = ++resizeRequestId;
#Override
public void run() {
final boolean isLatestRequest = requestId == resizeRequestId;
if (isLatestRequest) {
//DO SOMETHING WITH windowSize
}
}
};
timer.schedule(100);
}

The browser doesn't pass along events that happen outside of the page, and the window resize counts as outside the page. That said, you still get a hook for resize actions of the entire browser window:
Window.addResizeHandler(new ResizeHandler() {
public void onResize(ResizeEvent event) {
//get, process window resize behavior
}
});
For some browsers and some resizes, you'll get lots of events as the mouse moves, and for others, you'll only get the complete one. In firefox, for example, the resize handle in the corner sends every change that is made, while the side handles each send only once the user releases the mouse. Minimizing and maximizing the window also result in a single event.

Colin is right.
Moreover, if you do a lot of calculations "on resize" (e.g. forceLayout), it is a good idea to add a Timer. This way the calculations will be fired once every...10th of second?
final Timer resizeTimer = new Timer() {
#Override
public void run() {
mainPanel.forceLayout();
}
};
Window.addResizeHandler(new ResizeHandler() {
public void onResize(ResizeEvent event) {
int height = event.getHeight();
mainPanel.setHeight(height + "px");
resizeTimer.cancel();
resizeTimer.schedule(100);
}
});
That's it

Related

continuous actions to be performed when I long tapped MGWT button until the touch end event fired

I want to invoke a method continuously when I used MGWT button long tap handler, this should be done until I release the button. i.e; until the touch end event fired. For this I had written Timer inside the MGWT Button's long tap handler.I continuously calling the my task method inside the run method of the Timer. my code:
upButton.addLongTapHandler(new LongTapHandler() {
#Override
public void onLongTap(LongTapEvent event) {
upBtnTimer = new Timer() {
#Override
public void run() {
if(getValue() >= maxValue){
Window.alert("max val reached");
upBtnTimer.cancel();
}else{
setValue(getValue() + RATE);
}
}
};
upBtnTimer.scheduleRepeating(100);
}
});
And I also wrote touch end handler to the upButton. this is:
upButton.addTouchEndHandler(new TouchEndHandler() {
#Override
public void onTouchEnd(TouchEndEvent event) {
if(upBtnTimer!=null){
upBtnTimer.cancel();
upBtnTimer = null;
}
}
});
this is OK when I'm testing my mobile application on browser, but when I installed my application in iOS/Android device, this is not working. Only single tap event firing.
If you are clear with my requirement please tell me if there is another approach to do this. Thanks in advance.

GWT Delaying an action after an event trigger

I want to have the user click a button, then they will see a "Toast" message popup, which fades away , then the action that the button click performs should happen. What is the best way to do this? Should I trigger a Timer on catching the click event and let it timeout (While the toast is being displayed ) and then call the handling code or is there any built in delay mechanism in event handling I can use?
I don't want my toast to be involved at all in the event handling
If I really follow your requirements the following code should do:
// interface of the "Toast" no matter what the implementation actually is
public interface Toast
{
void open( String message );
void closeFadingAway();
}
// calling code
public class ClientCode
{
private static final int myDelay = 1000; // 1 second in millis
private Toast myToast;
void onMyAction()
{
myToast.open( "Your action is being handled..." );
Scheduler.get().scheduleFixedDelay( new RepeatingCommand()
{
#Override
public boolean execute()
{
myToast.closeFadingAway();
performAction();
return false; // return false to stop the "repeating" = executed only once
}
}, myDelay );
}
void performAction()
{
// do something interesting
}
}
Now, if you actually mean to be able to interrupt the action when the user presses some button in the toast this is a different story.
If you are using a popup panel you could use the addCloseHandler on the popup panel and from here call the method that would have otherwise been called by the button.
popUpPanel.addCloseHandler(new CloseHandler<PopupPanel>(){
#Override
public void onClose(CloseEvent<PopupPanel> event) {
// TODO Do the closing stuff here
}
});
So when the PopupPanel disappears and the close event triggers you can do your magic there.

popuppanel show up beneath the widget

I am new to GWT and the web stuff.
I am working out my own project based on
http://code.google.com/p/cloud-tasks-io/source/browse/#svn%2Ftrunk%2FCloudTasks-AppEngine%2Fsrc%2Fcom%2Fcloudtasks%2Fclient
I am trying to use popup/dialog. The popup and dialog always show behind the widget. I keep googling around and the most relevant I found is this
http://groups.google.com/group/gwt-google-apis/browse_thread/thread/40db4fcbe10d2060 which does not provide any answer. Anyway, I have 3rd party library, bst-player 1.3, which uses flash. So I disabled it(later remove it too), the popup just won't come to the top! It is still hiding behind the widget.
I have learned that popuppanel/dialogpanel alikes do not need to get added to another widget. A different way of saying is that it is not a normal widget in a sense that it cannot attach to a parent but it attaches itself to the dom to guarantee being on top (from GWT composite widget )
I am at my wit end and I am here at SO ...
UPDATE
Here is my Popup class
public class PopUp {
static PopupPanel simplePopup;
public static void init() {
simplePopup = new PopupPanel(true);
simplePopup.hide();
simplePopup.setVisible(false);
// DOM.setIntStyleAttribute(simplePopup.getElement(), "zIndex", 3);
}
public static void showpopupmsg(String msg, int left, int top) {
if (simplePopup == null) {
init();
}
if (msg != null && !msg.equalsIgnoreCase("")) {
simplePopup.ensureDebugId("cwBasicPopup-simplePopup");
simplePopup.setWidget(new HTML(msg));
simplePopup.setVisible(true);
simplePopup.setPopupPosition(left, top);
simplePopup.setWidth("475px"); //575
simplePopup.setGlassEnabled(true);
simplePopup.show();
}
}
public static void show(String message){
if (simplePopup == null) {
init();
}
simplePopup.setGlassEnabled(true);
simplePopup.setTitle(message);
simplePopup.center();
}
}
Here is how I am calling
tasksTable.doneColumn.setFieldUpdater(new FieldUpdater<TaskProxy, Boolean>() {
public void update(int index, TaskProxy task, Boolean value) {
String msg = "Here is the popup. All the way underneath";
Widget source = tasksTable;
int left = source.getAbsoluteLeft() - 50;
// source.getAbsoluteLeft() + 25;
int top = source.getAbsoluteTop() - 25;
PopUp.showpopupmsg(msg, left, top); //Here is the calling method
TaskRequest request = requestFactory.taskRequest();
TaskProxy updatedTask = request.edit(task);
updatedTask.setDone(value);
request.updateTask(updatedTask).fire();
}
});
Here is how the Popup is beneath the widget.
The source of the problem has been quite elusive since I am still new to the webapp, yet, I finally solve it myself. The culprit is the CSS. It is defining the z-index for the whole thing to quite high as seen in the following code line 1333.
http://code.google.com/p/cloud-tasks-io/source/browse/trunk/CloudTasks-AppEngine/war/CloudTasks.css#1333
I have doubted about the z-index before and try it out with a paltry value 3 as seen in the commented out code segment of Popup class in question. I have to uncomment it and set it to 101.
DOM.setIntStyleAttribute(simplePopup.getElement(), "zIndex", 101);
I was , you know, #$%###$*.
z-index is only decides which widget should show on top..
the widget popup is under benath might be having z-index value high.
set the z-index for popup thru css (recomended) or DOM will work for you
According to my feeling, using static methods of your "PopUp" object is a bit strange...
In that way, I think things a relative to the top rather than caller object.
Maybe you could consider make your class 'Popup' extending 'popupanel'
and in your calling code, just make
new PopUp(msg,left,top).show() ;
I recently wrote my own solution for a popup panel that needs to be aligned with its caller. The solution consists out of an PopupPanel extension and a Button extension.
The button extension has an instance of the panel extension, and the moment it is clicked it gives its coordinates and width and height to its panel.
#Override
public void onClick(ClickEvent event) {
if (optionsPanel.isShowing()) {
optionsPanel.hide();
} else {
optionsPanel.setButtonBounds(new Bbox(
getAbsoluteLeft(), getAbsoluteTop(), getOffsetWidth(), getOffsetHeight()));
optionsPanel.show();
}
}
(The Bbox class is just a convenience class I could use for wrapping coordinates; write your own class or 4 methods for that matter)
The main work is then done in the onLoad() override of the PopupPanel, in which the coordinates of the button are used to position the panel;
#Override
protected void onLoad() {
super.onLoad();
if (null == bounds) {
super.hide();
} else {
left = (int) bounds.getX();
top = (int) bounds.getMaxY();
setPopupPosition(left, top);
}
}
(bounds are the coordinates of the button; getMaxY() == bottom coordinate of button)

Using drag mouse handlers with GWT canvas

I am currently developing a paint-like application for GWT. I would like to add a mouse handler that runs when the user drags the mouse across the canvas(like making a square,etc;), the problem is that I'm not surewhat handler to use. Looking through the handlers implemented in canvas has lead me to some hints, but the documentation as to what event the apply to is scant.
Does anyone know how I should implement it? Thanks.
There is no "dragging" handler. You imlement "dragging" with MouseDown, MouseMove and MouseUp events.
class YourWidget extends Composite
{
#UiField
Canvas yourCanvas;
private boolean dragging;
private HandlerRegistration mouseMove;
#UiHandler("yourCanvas")
void onMouseDown(MouseDownEvent e) {
dragging = true;
// do other stuff related to starting of "dragging"
mouseMove = yourCanvas.addMouseMoveHandler(new MouseMoveHandler(){
public void onMouseMove(MouseMoveEvent e) {
// ...do stuff that you need when "dragging"
}
});
}
#UiHandler("yourCanvas")
void onMouseUp(MouseUpEvent e) {
if (dragging){
// do other stuff related to stopping of "dragging"
dragging = false;
mouseMove.remove(); // in earlier versions of GWT
//mouseMove.removeHandler(); //in later versions of GWT
}
}
}
I've messed around with this as well and produced this little thing awhile ago:
http://alpha2.colorboxthing.appspot.com/#/
I basically wrapped whatever I needed with a FocusPanel. In my case it was a FlowPanel.
From that program in my UiBinder:
<g:FocusPanel ui:field="boxFocus" styleName="{style.boxFocus}">
<g:FlowPanel ui:field="boxPanel" styleName="{style.boxFocus}"></g:FlowPanel>
</g:FocusPanel>
How I use the focus panel (display.getBoxFocus() seen below just gets the FocusPanel above):
display.getBoxFocus().addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
}
});
display.getBoxFocus().addMouseDownHandler(new MouseDownHandler() {
#Override
public void onMouseDown(MouseDownEvent event) {
}
});
display.getBoxFocus().addMouseMoveHandler(new MouseMoveHandler() {
#Override
public void onMouseMove(MouseMoveEvent event) {
}
});
display.getBoxFocus().addMouseUpHandler(new MouseUpHandler() {
#Override
public void onMouseUp(MouseUpEvent event) {
}
});
// etc!
To answer your question about what handler to use for "dragging" I haven't found a single handler to do that for me. Instead I used a MouseDownHandler, MouseMoveHandler, and a MouseUpHandler.
Use the MouseDownHandler to set a flag that determines when the users mouse is down. I do this so that when MouseMoveHandler is called it knows if it should do anything or not. Finally use MouseUpHandler to toggle that flag if the user has the mouse down or not.
There have been some flaws with this method (if the user drags their mouse off of the FocusPanel), but because my application was just a fun side project I haven't concerned myself with it too much. Add in other handlers to fix that if it becomes a big issue.

gwt Popup is not centered

I use gwt popup to show some messages, but it is not displayed in the
center
of the display event if i call popup.center(). Actually it is not centered
only the first time, if i close it and open it again every thing is ok,
but not the first time. How to fix that?
GWT.runAsync(new RunAsyncCallback() {
#Override
public void onSuccess() {
Image fullImage = new Image(optionImageName);
fullImage.setAltText("Loading image ...");
imagePopup.setWidget(fullImage);
imagePopup.center();
}
});
I found this question on http://www.devcomments.com/gwt-Popup-is-not-centered-at107182.htm, and today I have had this problem too. I found the answer and i will post it here for future reference.
I found that the problem is that the image is not loaded completed when you center the popup. This happens the first time only because the second time the image is somehow cashed by the browser.
The solution is to center it on the onLoad event as well.
GWT.runAsync(new RunAsyncCallback() {
#Override
public void onSuccess() {
Image fullImage = new Image(optionImageName);
fullImage.setAltText("Loading image ...");
fullImage.addLoadHandler(new LoadHandler() {
#Override
public void onLoad(LoadEvent event) {
imagePopup.center();
}
});
imagePopup.setWidget(fullImage);
imagePopup.center();
}
});
I had this problem as well. The reason that you have to call center twice is because the popup container is actually removed from the DOM when the popup is "hidden". This is problematic because your popup has to now "show" the contents of the popup before you can check that the image is loaded.
The issue with the implementation recommended is that the first call to center() will be done incorrectly if the image is not cached. The second call to center will correct it. On the browser, this causes a shift of the popup dialog box (which looks pretty bad).
I would recommend the following:
1. Put a waiting spinner in the same display and show that initially.
2. One the loadHandler is called, display the image, hide the spinner, and recenter.
public void onClick(ClickEvent event) {
// TODO Auto-generated method stub
final ADPopup popup = new ADPopup();
popup.setHeight("300px");
popup.setWidth("500px");
popup.setPopupPositionAndShow(new PopupPanel.PositionCallback() {
public void setPosition(int offsetWidth, int offsetHeight) {
// TODO Auto-generated method stub
int left = (Window.getClientWidth() - offsetWidth) / 3;
int top = (Window.getClientHeight() - offsetHeight) / 3;
popup.setPopupPosition(left, top);
}
});
popup.show();
}
Hope this Help.