Web applications generated using JRapid are, by default, single page applications that open floating windows with lists and forms. This means they behave and look much like a desktop native application.
In this post I’ll show you how to add minimize functionality to these windows. We’ll trigger this by double clicking on the window title. The window will be minimized to the bottom right corner of the browser window and will be restored by a single click on the docked element.
By adding custom JavaScript in the Main.js file as explained here, we will use the delegate method provided by JQuery to bind a function to the double click event on the window title.
This code creates a container for the minimized windows if it is not already present and adds new div elements for each minimized window after hiding them. It sets the label with the title of the window and attaches another function to the click event on this element that will remove the label from the minimized windows container and set the original window as visible again.
Some custom CSS has to be added too using the Main.css file as explained here. This is to provide some nice styling to the labels, but also to place the minimized windows container at the bottom right of the browser window.
A key concept here is the use of delegate. As described in the JQuery documentation, it attaches a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements. This is what allows us to attach the handler function to windows that will be opened in the future.
Our Main.js looks like this:
And the Main.css includes this code:
No comments:
Post a Comment