As web pages gain both functionality and content, they often develop visual clutter that can frustrate users. An extreme example would be something like HavenWorks, where so much information is crammed into the space that the page is practically unusable. The desktop GUI has windows to help organize all the user's information: allowing the user to re-position material, rearrange it, and hide or close it when it is not needed. People are used to GUI windows as a way of practically managing large amounts of content, and as web applications become increasingly complex, it makes sense for the window to make a jump to the web page.
We developed a simple library that allows developers create windows in their web pages, simply by adding a class to the content they want in a window. End users will be able move, resize, minimize, and even remove these elements within the page.
What it doesEdit
A developer using our library needs to include a couple resources in their file system:
- Our stylesheet, which styles the generated windows appropriately
- The background image for the window header
Something goes in here
Finally, to make content a window, the developer just needs to wrap the content in a div and apply the "window" class to it. The developer can also supply a title for the window. For example, one such div might look like:
<div class="window">I am a window!</div>
We aimed to make creating windows as painless and fluid as possible for the web developer. Thus, he or she can simply modify an existing html document with divs to create new windows. However, it is also possible to functionally create windows, if the developer wants to generate one dynamically. To create a simple window, a developer could just write:
Something goes in here
Clients see simple windows within the developer's web page. These windows can be:
- Moved by clicking and dragging on the title bar
- Resized by clicking and dragging the resize icon in the lower right
- Minimized by clicking on the "-" icon in the upper right
- Restored by clicking on the "+" icon in the upper right when the window is minimized
- Closed by clicking on the "x" icon in the upper right
Only non-minimized windows can be minimized, and only minimized windows can be restored. The icon for "-" changes to "+" when the window is minimized, and back to "-" when it is restored. The minimize action and restore action both have smooth transitions, and the close action has a simple fade animation.
For an example of the window system in action, click here.