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

Developer SideEdit

A developer using our library needs to include a couple resources in their file system:

  1. JQuery javascript library, which our library uses
  2. Our javascript library, containing the code to generate windows from the DOM
  3. Our stylesheet, which styles the generated windows appropriately
  4. The background image for the window header

Our javascript library needs to be included in the page, which can be done with the following line:

 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

Client SideEdit

Clients see simple windows within the developer's web page. These windows can be:

  1. Moved by clicking and dragging on the title bar
  2. Resized by clicking and dragging the resize icon in the lower right
  3. Minimized by clicking on the "-" icon in the upper right
  4. Restored by clicking on the "+" icon in the upper right when the window is minimized
  5. 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.





Future PossibilitiesEdit

Ad blocker interference detected!

Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.