I based my class on the ResizePanel found at
http://code.google.com/p/resizepanel/
. I initially extended the concept to include resizing from any edge/
corner, just like on Windows. However, that introduced too many
corner cases and required logic that greatly increased the complexity
of the resize computations. In order to allow the dialog box to be
resized on any computer without taxing it too much, I restricted it to
only being resized from the SE corner (bottom-right), same as
ResizePanel.
Here's some poorly pasted code below. I tried to create a general,
reusable library. However, there are certain things I do that are
specific to my project in the class. Still, the resize logic is
pretty simple.
The basic assumptions:
- When resizing, the caption and widget are set to minimum size. You
could resize them every time the mouse moves during resizing.
However, if the widget is complex, that will seriously slow down the
process. I found that it was just easier to set them to minimum size
(0px for widget, 32px for caption, in my case) and then reset their
size once the resizing is done. This looks ugly but is really fast on
all browsers I tested it on. Obviously, this could be made into a
flag but I haven't bothered to do that yet. Setting the caption
(especially if it is a custom one like mine) to a minimum size is
critical because, otherwise, it won't let you reduce the size of the
box.
- The logic computes the "direction" of the cursor. In this case,
direction really means location. If the cursor is in the South East
(SE), it initiates a resize computation. Otherwise, it lets the
dialog box do its default action.
- You have to override the setWidth(String) and setHeight(String)
functions to reduce the caption to its minimum size, otherwise, it'll
never shrink.
- Do not set width to 100% in the CSS for .dialogMiddleCenter (aka,
don't do what it says in the Javadocs for PopupPanel). Otherwise, the
widget will take up the full window width on certain browser and just
the minimum required on others. So much for "standard" CSS.
If you have any other questions, just let me know.
Regards,
z.
/**
* Called by each constructor to inject the cursor's CSS resource
and sink
* mouse events.
*/
protected void intialize() {
GWT.log("-->ResizeDialogBox.initialize()");
// Inject the CSS for the mice (not that it's doing any good).
ResizableDialogClientBundle.INSTANCE.cursorCss().ensureInjected();
// Capture the 4 mouse events that we are interested in.
sinkEvents(Event.ONMOUSEDOWN | Event.ONMOUSEMOVE | Event.ONMOUSEUP
| Event.ONMOUSEOVER);
// Initialize variables.
resizing = false;
diagonalCursorOffset = 10;
Scheduler.get().scheduleFinally(new ScheduledCommand() {
@Override
public void execute() {
// setSize("100%", "100%");
setSize("200px", "50px");
}
});
}
/**
* Will re-size the dialog box when it is dragged around from the SE
corner.
* To move, use the default behavior of dragging the caption.
*
* IMPORTANT NOTE: when resizing, the caption and content are set to
minimum
* size to increase the speed of the resizing, otherwise every mouse
movement
* would cause a view update, drastically slowing down the app.
*/
@Override
public void onBrowserEvent(Event event) {
// GWT.log("-->ResizableDialogBox.onBrowserEvent(Event)");
CursorCssResource.Direction dir = cursorResizeDirection(event);
if (event.getTypeInt() == Event.ONMOUSEOVER)
setCursor(dir);
switch (event.getTypeInt()) {
case Event.ONMOUSEDOWN:
// If it not on the edge for resizing, let the parent handle the
move
// event (or whatever else).
if (dir == CursorCssResource.Direction.NONE)
super.onBrowserEvent(event);
else {
if (!resizing)
resizing = true;
DOM.setCapture(getElement());
((ResizableDialogBoxCaption) getCaption()).setMinimumWidth();
setWidgetMinimumWidth();
setWidgetMinimumHeight();
}
break;
case Event.ONMOUSEMOVE:
// calculate and set the new size
if (resizing) {
int cursorX = DOM.eventGetClientX(event);
int cursorY = DOM.eventGetClientY(event);
int initialX = getAbsoluteLeft();
int initialY = getAbsoluteTop();
int width = getContentWidth();
int height = getContentHeight();
// No mirroring effect.
if (initialX < cursorX)
width = cursorX - initialX;
if (initialY < cursorY)
height = cursorY - initialY;
super.setWidth(width + "px");
super.setHeight(height + "px");
}
else
super.onBrowserEvent(event);
break;
case Event.ONMOUSEUP:
if (resizing) {
// reset variables for next resize
resizing = false;
DOM.releaseCapture(getElement());
// Give the children the good news.
onResize();
// reset cursor
setCursor(CursorCssResource.Direction.NONE);
// reset the caption
setWidgetOptimumWidth(getContentWidth());
setWidgetOptimumHeight(getContentHeight());
((ResizableDialogBoxCaption) getCaption())
.setOptimumWidth(getContentWidth());
}
else
super.onBrowserEvent(event);
break;
default: // Just in case, let daddy handle it.
super.onBrowserEvent(event);
}
}
/**
* Return the direction that the cursor should be resized to. Only
South-East
* (bottom right) is supported right now. This is because adding
support for
* every edge exponentially increases computation complexity, fringe
cases and
* quirky behavior.
*
* @param e
* The event that triggered the call.
* @return The direction that the cursor should point in.
*/
protected CursorCssResource.Direction cursorResizeDirection(Event e)
{
// GWT.log("-->ResizeDialogBox.cursorResizeDirection(Event)");
CursorCssResource.Direction cursor =
CursorCssResource.Direction.NONE;
int cursorX = DOM.eventGetClientX(e);
int cursorY = DOM.eventGetClientY(e);
// Remove the scroll amount so that we aren't checking an area off
the
// window.
int finalX = getOffsetWidth() + getAbsoluteLeft() -
Window.getScrollLeft();
int finalY = getOffsetHeight() + getAbsoluteTop() -
Window.getScrollTop();
// SE corner only (bottom-right).
if (cursorX >= finalX - diagonalCursorOffset && cursorX <= finalX
&& cursorY >= finalY - diagonalCursorOffset && cursorY <=
finalY)
cursor = CursorCssResource.Direction.SE;
return cursor;
}
On Dec 15, 5:45 am, Andrea Boscolo <andrew...@gmail.com> wrote:
> Interesting.
> Can you share the "resize" part if by resize you mean via mouse?
--
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
