add minimize button for a window?

Hi all,
I am concerning about adding new functions for a window. Is it possible to add new ‘buttons’ next to the close button for example minimize or maximize… and give listeners for them?
Thanks.

I’d also like to add custom buttons to the top border next to the close (“X”) button. I’d appreciate some guidance on the best way to achieve this, as I am very new to Vaadin.
Thanks

There is no trivial way of doing this. I would recommend to create a new “WindowWithMinimizeButton” -component for it by extending Window both on the server- and client-side. Probably won’t be too hard even though it sounds a bit scary :)

To add few custom buttons next to close buttons, I extended vaadin Window to create my own Window component. But, the way vaadin Window code is written makes the extension very hard. The method “constructDOM” has everything to build the window, there is no way just modify the header alone. If I layout everything by myself, I may break feature like drag-ability and such supported by vaadin Window class. The reason is there are few private members used inside this function, makes it hard to extend it. Is there a way to get around this issue.

I guess there’s no good way around it, only bad ones, such as copy-pasting the whole class, or inserting new DOM elements directly inside the generated window DOM after it is done.

Considering that a Window is a fundamental container, and not a peripheral widget, it will be better for Vaadin toolkit if there weren’t too many flavors of Window implementations and variations. So I’d like to make a case for Vaadin to enhance the current implementation of Window to include a Maximize button (aka “+” button on a Mac window), and a Minimize button (aka “-” button on a Mac window), in addition to the existing Close(X) button on the window header.

The + button would maximize or bring back to regular size, within the application window.
The meaning of “-” button can be tricky because there is no standard tray of closed windows in Vaadin applications. So, when the “-” button is clicked, Vaadin can merely send an event for the application to deal with with and not do anything else. In fact, it can do the same for the “+” button and let the application deal with the event and resize the Window appropriately.

I guess you could extend this concept and allow the application to add as many header buttons as it needs, and deal with the actions when the user clicks on the buttons.

Would this be a feature that Vaadin dev group might agree with and take on for development? I run a little dev. group (very very new to Vaadin) that might be able to take the existing Vaadin Window code and modify it to include this feature, and contribute back to Vaadin. But, I am afraid that our lack of Vaadin background might cause us delivering code with beginner’s mistakes.

But more importantly, do the Vaadin developer and user community even think this is a worthwhile enhancement? It seems very fundamental to me to have windows with the “x”,“+”, and “-” buttons (& possibly custom buttons) on the window header, but I am curious to hear what others think.

I’m totally sure there’s a specific ticket about this issue in our Trac, but I just can’t seem to find it.

Anyhow, I agree, there’s probably a need for this kind of feature.

For a workaround, you could try to hack it together AbsoluteLayout and some CSS. Add an AbsoluteLayout as the root layout for the window, and then reposition some buttons over the window header with CSS (there’s currently a bug in AbsoluteLayout that prevents you from using negative values as the coordinates from the server-side).

Here it is:


http://dev.vaadin.com/ticket/3400

How do I say “Pretty please, with cherry on top” in Suomi to get Vaadin to work on this ticket? :slight_smile:

One more button that is quite useful is the Hide/Show toolbar button as you find in Mac Finder windows, and a few other Mac apps like Preview. (If what I am saying isn’t clear, please look at annotation # 8 at http://support.apple.com/kb/ht3737 )

Thanks

Hmm, probably something like “olkaa niin kilttejä, pliis” might work :slight_smile:

No worries, our Mac/PC/Linux ratio is somewhere along 10/5/5 (my personal best guess), so most of us know what you’re talking about :slight_smile:

Sorry to bring up the old thread, I also have the same need to customize sub window’s title bar to add some buttons.
Is there any progress about this?

Many thanks,

No real progress, I believe.

I think you could probably hack this using AbsoluteLayout and little CSS using negative offsets. Add an AbsoluteLayout as the first component in the Window, and a couple of buttons inside that, then position those buttons using top and left over the window header.

Thanks Jouni, will try your suggestion.

Hi Jouni,
Just tried your suggestion, however, title bar is drawn over the button…
Is there anyway to make the button display over the title bar?
Thanks in advance,

Specify a z-order in the css for the button.
That should do the trick

André

Here’s my class:

public class EnhancedWindow extends Window {
	public EnhancedWindow() {
		super("Enhanced window");
		
		VerticalLayout mainLayout = new VerticalLayout();
		mainLayout.setSizeFull();
		setContent(mainLayout);

		AbsoluteLayout al = new AbsoluteLayout();
		mainLayout.addComponent(al);
		
		al.addComponent(new Button("[]"), "top:-20px; right:40px; z-index:100;");
	}
}

Try with various value of z-index but it doesn’t work. Do I need to hack button CSS?
If I add “position:absolute” to above new BUtton(), it results in exception:

com.vaadin.event.ListenerMethod$MethodException
Cause: java.lang.NumberFormatException: empty String
    at com.vaadin.event.ListenerMethod.receiveEvent(ListenerMethod.java:507)
    at com.vaadin.event.EventRouter.fireEvent(EventRouter.java:161)
    at com.vaadin.ui.AbstractComponent.fireEvent(AbstractComponent.java:1154)
    at com.vaadin.ui.Button.fireClick(Button.java:371)
    at com.vaadin.ui.Button.changeVariables(Button.java:193)
    at com.vaadin.terminal.gwt.server.AbstractCommunicationManager.handleVariables(AbstractCommunicationManager.java:1094)
    at com.vaadin.terminal.gwt.server.AbstractCommunicationManager.doHandleUidlRequest(AbstractCommunicationManager.java:590)
    at com.vaadin.terminal.gwt.server.CommunicationManager.handleUidlRequest(CommunicationManager.java:266)
    at com.vaadin.terminal.gwt.server.AbstractApplicationServlet.service(AbstractApplicationServlet.java:476)
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:290)
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
    at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:233)
    at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:191)
    at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:127)
    at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:102)
    at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:109)
    at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:298)
    at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:852)
    at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.process(Http11Protocol.java:588)
    at org.apache.tomcat.util.net.JIoEndpoint$Worker.run(JIoEndpoint.java:489)
    at java.lang.Thread.run(Thread.java:619)
Caused by: java.lang.NumberFormatException: empty String
    at sun.misc.FloatingDecimal.readJavaFormatString(FloatingDecimal.java:994)
    at java.lang.Float.parseFloat(Float.java:422)
    at com.vaadin.ui.AbsoluteLayout$ComponentPosition.setCSSString(AbsoluteLayout.java:199)
    at com.vaadin.ui.AbsoluteLayout.addComponent(AbsoluteLayout.java:120)
    at com.example.cms_prototype.EnhancedWindow.<init>(EnhancedWindow.java:19)
    at com.example.cms_prototype.AccordionPanel$AccordionSearchs$1.buttonClick(AccordionPanel.java:54)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
    at java.lang.reflect.Method.invoke(Method.java:597)
    at com.vaadin.event.ListenerMethod.receiveEvent(ListenerMethod.java:487)
    ... 21 more

Oh, sorry, I forgot to mention that the root layout of the window can’t be a Vertical or HorizontalLayout, or even a GridLayout, since they all clip the contents of them to the outer border of the layout.

So try using a CssLayout instead as your mainLayout. If you need expand ratios, try the WeeLayout or DashLayout add-ons from the Directory.

Please, I have the same problem, Can someone help me?
Is someone there that can say me if exists a “MinimizableWindow” component developed
also by third party developers? May you show the right code?
TX

Finally, I was able to make a small add-on that does just this. See the new
ToolbarWindow add-on in the Directory.

Hi,
I tried using the ToolBarWindow add-on, but i am getting these exceptions appearing on the UI side, in the main window and the subwindow respectively

"
Widgetset does not contain implementation for org.vaadin.jouni.animator.AnimatorProxy. Check its @ClientWidget mapping, widgetsets GWT module description file and re-compile your widgetset. In case you have downloaded a vaadin add-on package, you might want to refer to add-on instructions. Unrendered UIDL:
-Unrendered UIDL
-org.vaadin.jouni.animator.AnimatorProxy(NO CLIENT IMPLEMENTATION FOUND) id=PID16 eventListeners={0:anim,}
"

"
Widgetset does not contain implementation for org.vaadin.jouni.animator.AnimatorProxy. Check its @ClientWidget mapping, widgetsets GWT module description file and re-compile your widgetset. In case you have downloaded a vaadin add-on package, you might want to refer to add-on instructions. Unrendered UIDL:
-Unrendered UIDL
-org.vaadin.jouni.animator.AnimatorProxy(NO CLIENT IMPLEMENTATION FOUND) id=PID16 eventListeners={0:anim,}
"

please help.

Regard,
Ahmer