Basic MDI (Multiple Document Interface) question

[Zakaluka]

Hello all,

I have been looking into doing an MDI application with GWT. Is it
possible to do such a thing with plain GWT, i.e. without using any
additional libraries like SmartGWT, Ext GWT, etc?

I have searched in this forum, but the latest posts seem to be from
2009 (most are even older) and all the projects they reference are
dead.

I was thinking that DecoratedPopupPanel with a Composite of some sort
inside it might do the trick, but I'd love to hear if someone already
has such a system operational.

Thank you for your time,

zak.

[Ed]

No problem. I do everything without any external lib (don't wanne be
dependent of them).
I would start by looking at code like the gwt windows manager and
learn from it:
http://code.google.com/p/gwtwindowmanager/

- Ed

[Armishev, Sergey]

I build my whole MDI Web app with http://code.google.com/p/gwtwindowmanager/
-Sergey

- Ed

--
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-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

_____________________________________________________
This electronic message and any files transmitted with it contains
information from iDirect, which may be privileged, proprietary
and/or confidential. It is intended solely for the use of the individual
or entity to whom they are addressed. If you are not the original
recipient or the person responsible for delivering the email to the
intended recipient, be advised that you have received this email
in error, and that any use, dissemination, forwarding, printing, or
copying of this email is strictly prohibited. If you received this email
in error, please delete it and immediately notify the sender.
_____________________________________________________

[Zakaluka]

Thank you both for the suggestion. I'm looking into it now.

Sergey, are you still using the GwtWM project?

Regards,

zak.

On Dec 6, 8:52 am, "Armishev, Sergey" <sarmis...@idirect.net> wrote:
> I build my whole MDI Web app withhttp://code.google.com/p/gwtwindowmanager/

> For more options, visit this group athttp://groups.google.com/group/google-web-toolkit?hl=en.

[darkflame]

I dont use a completely full windowing system as such, but my review
website does use extensive popups to enter data while still looking at
other information if you wish.
It does this more or less exactly as you suggested, decorated popups
containing composites.
The only modifcations I did was to get the "x" in the corner so you
can close the popups.

http://www.rateoholic.co.uk/

You have to login to demo the windowing (ie, when you go to post or
edit reviews, they are new windows).
You can login via OpenID though.

In addition I used a combination of iframes to switch between
different main "views" of the app without any code needing to reload.
Its all still very rough around the edges, but I think it shows the
power of what GWT can do.

[Armishev, Sergey]

I just support this project that I built back in 2009. And it is using GWT 1.5.3. So you need some prototyping if you want to start using it on latest GWT. I know about one problem in GWT 2 that I found (and easily fixed) that one name violates CamelCase convention that GWT compiler now testing. You probably need to test it on new browsers as well since library has no new development from 2008.
-Sergey

Regards,

zak.

For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[Armishev, Sergey]

One more point to consider. This MDI solution is hard to use on mobile phones

[Zakaluka]

Thank you for the link. It's always better to see the code's
effects. that's something along the lines of what I was thinking of,
except not making the popups modal.

Looks like the GwtWM project uses SimplePanels within an
AbsolutePanel. I'm going to try these 2 techniques out and see which
one works better.

Regards,

zak.

[Zakaluka]

Sergey,

Thanks for the information. I'm going to re-create the GwtWM in the
latest GWT and see how it goes (just the very basics).

As for mobile, you are very correct. I'm setting the project to use
different GUIs for phones, desktops and tablets.

Regards,

zak.

[Zakaluka]

Just an update in case anyone else is looking into this - I ended up
extending the DialogBox class to add in resize support, a custom
caption that includes close and maximize/"resize" buttons and handlers
for some additional events (like double-clicking on the caption).
Because DialogBox comes with built-in drag support, it was much
easier. Also, I find it more lightweight than re-creating even a
simple window manager in GWT.

Thank you all, again, for your help.

Regards,

z.

[Andrea Boscolo]

Interesting.
Can you share the "resize" part if by resize you mean via mouse?

[Zakaluka]

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;