Stanford University Wiki

Main/CS349W Project3/SimpleWindow

< Main/CS349W Project3

229pages on
this wiki
Add New Page
Talk0 Share



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 to move, resize, minimize, and even remove these elements within the page.

What it DoesEdit

Developer SideEdit

In order to use our windowing kit, a developer needs to include a couple resources in their file system:

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

The Javascript and CSS should be added to the header, as:

 <script type="text/javascript" src="PATH/jquery-dev.js"></script>
 <script type="text/javascript" src="PATH/jquery-ui.js"></script>
 <script type="text/javascript" src="PATH/Windowing.js"<>/script>
 <link rel="stylesheet" href="PATH/styles.css" />

where PATH is the relative (or absolute) path to these resources

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 caption for the window, along with default size and position. For example, one such div might look like:

 <div class="window" caption="My Caption" style="height:100x; width:200px; position:absolute; left:95px; top:15px;">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:

 var myWindow = MakeWindow();
 myWindow.setCaption("This is a new window");
 myWindow.setContents('<p>This is some content to go in the window</p>');
 //add the window to the page using standard javascript

Since the implementation is browser-side javascript, the server only needs to apply the "Window" class to any div elements it wants to be rendered as windows.

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.


Window ex
For an example of the window system in action, click here.


The windowing system is implemented in javascript on top of jQuery, which allows it to have cross-browser support. Essentially, when the DOM is fully constructed, our javascript code traverses the DOM and removes the children of any element that has the class "window" from the document structure. These children are then wrapped in an inner-content div and placed back in the window div, along with some div's to create a header bar. The title of the header bar is taken from the 'caption' attribute of the original div. The look of the window is done using CSS styles, and background images for the title bar.

The functionality for dragging, resizing, and minimizing the windows is then added to the outer window div itself, using some of the jQuery UI tools. This allows for much of the functionality that we are used to from desktop windows.



A windowing approach to web organization allows for three main benefits. The first is economy of screen space. By packaging content in windows, users can decide what content they want to see at any given time. By allowing them to minimize windows they're not currently using, you can decrease the amount of scrolling that users need to do on a given page. This allows not only for better use of screen space, but also for user-customizable screen space.

The second major advantage of a windowing system is better organizational capabilities. A windowing system doesn't require the developer to figure out ahead of time how users are going to want the content arranged on the screen. In fact, it may not even be the case that all users want the content arranged the same way. With a windowing system, all of this is left in the hands of the user. The user can decide what content should be placed next to what other content, and which content is important enough to merit being near the top of the page, etc.

The third benefit of a windowing system for the web is porting to the browser an analogy that users are already familiar with from their desktops. This means that users don't need to interact with your website in a fundamentally different way than they interact with their desktops. Because you're using a system that is already familiar to users, it allows for a more accessible website.


The windowing analogy is arguably of limited applicability on the web. It is not necessarily always the case that web pages are attempting to display disparate sets of data such that it makes sense to encapsulate it in windows. Often, different sets of data are simply given their own pages in a website and don't need to be accessed at the same time. The windowing analogy is more useful in cases where disparate sets of data may need to be displayed side-by-side.

A major shortcoming of the implementation as it stands is the lack of namespacing. Right now, the functions defined in the library could conflict with preexisting functions on the website. Also, the current implementation requires that users add the class "window" to any divs that should be made into windows. This also could cause some naming conflicts, if a particular web page already has div's that have the class name "window."

Future PossibilitiesEdit

The following is a list of features that could make the windowing system more reusable.

  • Namespacing- This feature would allow for the framework to be used in conjunction with preexisting javascript code more easily
  • Allowing the user to specify the class name for divs that will be made into windows- This will allow the windowing framework to be added to existing web pages with less fear of unintended behavior
  • Minimization- Users are used to being able to minimize windows to the bottom of the screen, and then restore them. In the current implementation, windows are minimized in place. This decision was somewhat based on limitations of the jQuery UI framework, as minimizing windows to the bottom of the screen breaks the dragging and resizing code. In order to allow minimization to the bottom of the screen, the windowing system would need to be rewritten without using jQuery.

Ad blocker interference detected!



Also on Fandom

Random Wiki