Window system (Desktop) in JavaScript (IE only) : Desktop « GUI Components « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Event
7. Event onMethod
8. Form Control
9. GUI Components
10. HTML
11. Javascript Collections
12. Javascript Objects
13. Language Basics
14. Node Operation
15. Object Oriented
16. Page Components
17. Security
18. Style Layout
19. Table
20. Utilities
21. Window Browser
Microsoft Office Word 2007 Tutorial
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
C# / C Sharp
C# / CSharp Tutorial
ASP.Net
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
PHP
Python
SQL Server / T-SQL
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
JavaScript DHTML » GUI Components » Desktop 
Window system (Desktop) in JavaScript (IE only)

<HTML>
<HEAD>
<TITLE>Fortis Demo</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

</HEAD>

<BODY BGCOLOR="white" TEXT="black" LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0">

<SCRIPT LANGUAGE="JavaScript">
  var MAXWIN = 32;
  for(var i = 0; i < MAXWIN; i++)
    document.write('<DIV ID="FORTIS_W'+ i +'" STYLE="position: absolute"></DIV>');
</SCRIPT>
  
  <!-- fortis.js -->
  <SCRIPT>
//  File:          fortis.js
//  Description:  Core Fortis functionalities
//  Version:      0.34 alpha

/////////////////////////////////////////////////////////////////////////////////////////
/*
  Project: Fortis 

  Version: 0.34 alpha

  Copyright  2001-2002 Daniele Pagano
  
  What is it: Fortis is a windowing environment that runs in a single
              dynamic IE DHTML page. It can be used by itself or with
              other page components as it is minimally intrusive. It boasts
              a window bar (like in MS Windows 9x), global menu and status
              bar, and windows that can contain other (arbitrary) web pages.
              It can be used for easily creating web applications, either
              by generating API calls and windows content on the fly from a
              server, for static client-server applicatins, or for 
              client-only solutions. For more information and documentation 
              visit www.esaurito.com/fortis.

  Requirements: Microsoft Internet Explorer 5 or later.

  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation; either version 2 of the License, or
  (at your option) any later version.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License
  along with this program; if not, write to the Free Software
  Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA

  You can contact the author by email at [email protected]
  
  Installation: add these elements to your page anywhere within your BODY 
    tag and before your code.


        var MAXWIN = 100;
        for(var i = 0; i < MAXWIN; i++)
          document.write('<DIV ID="FORTIS_W'+ i +'" STYLE="position: absolute"></DIV>');



      The value of MAXWIN determines the maximum number of windows that
    can be created. Change it at will, but a very large number will slow
    down page loading.
      You may want to adjust the URL for the modules if they reside in a
    different directory than your page.

    
*/
/////////////////////////////////////////////////////////////////////////////////////////

// FORTIS CLASS SINGLETON 
// !!NOT CODE-ENFORCED!! This is the ONLY instance of the environment, DO NOT change the
// variable name because plenty of code relies on it.
window.fortis = new FortisEnvironment();

// You should leave this here as well
fortis.init();

// Fortis Environment class
//  The environment. Contains and handles windows and settings.
//
//  Params: none (the constructor is called above for you)
//
//  Properties/Objects for public use:
//     statusbar:  a status bar at the bottom of the window
//
//  Exported classes for publis use: 
//      Window:   for window creation and handling
//      WinStyle: for window styling
//
//  Exported constants: see Constants section in constructor
//
//  Methods for public use:
//      setStyle:         sets default style for new windows
//      setMenu:          sets system menu
//      setBackground:    sets background image
//      showAll:          shows all windows
//      hideAll:          hides all winodws
//      minimizeAll:      minimizes all open windows
//      restoreAll:       restores all minimized winodws
//      endModal:         comes out of any modal windows state
//
function FortisEnvironment() 
{
  // Containers and counters:
  this.winArray = [];         //  Holds all window objects created
  this.divCount = 0;          //  Keeps count of layers with id's created 
                              //    (to generate unique id's)
  this.winCount = 0;          //  Holds position of last DIV that was
                              //    a window;
  this.zidx = 1;              //  Z-index tracker
  this.shadowDivs = [];       //  Holds ID's of divs used in dragging

  this.maxiwin = [];          //  Holds all maximized windows

  this.topUsed = 0;           // Pixels used on the top of the page by system windows
  this.botUsed = 0;           // Pixels used on the bottom of the page by system windows

  // Constants

  // Window Style masks
  this.WS_IFRAME  = 1;     // prepares an IFRAME as the contnent of the window
  this.WS_TITLE   = 2;     // adds a draggable title bar
  this.WS_CLOSE   = 4;     //  adds a close button*
  this.WS_MAX     = 8;     // adds a maximize button*
  this.WS_MIN     = 16;    //  adds a minimize button*
  this.WS_SIZE_NS = 32;    //  allows the window to be resized North-South**
  this.WS_SIZE_EW = 64;    // allows the window to be resized East-West**
  this.WS_WORKS   = 127;   // IFRAME, close, minimize, maximize, both size (DEFAULT)
  this.WS_BLANK   = 128;   // Blank window
    //*  : if selected, title bar is also created
    //** : if selected, IFRAME is also created

  // Environment classes

  // -- Window class --
  //  Manages windows.
  //
  //  Params:
  //    title:  the title of the window
  //    src:    the URL of the page this window will contain
  //    left:    the position in pixels from the left margin (or 'center')
  //    top:    the position in pixels from the top margin (or 'center')
  //    width:  the width of the window in pixels
  //    height:  the width of the window in pixels
  //    style:  the style of the window (a fortis.WinStyle object)
  //      -  default: use Environment settings.
  //
  //  Properties for public use:
  //    winN:    the position in the array of of DIV's of the page.
  //    div:    reference to the DIV object in the DOM. Can be used
  //            to manipulate the window arbitrarly.
  //    winId:  the string that, using fortis.winArray, can be evaluated
  //            anywhere to return a reference to the Window object. Used
  //            to refer to the window in generic event programming.
  //    title:  the HTML contained in the title bar.
  //    style:  the style of the class (a fortis.WinStyle object)
  //
  //  Methods for public use:
  //      (see at the top of each declaration for details)
  //
  //    addComponent:   adds a component to the window
  //    setStyle:       sets the window style
  //    applyStyle:      applies the style to the window
  //    hide:            hides the window
  //    show:            show the window
  //    refresh:        refreshes the IFRAME and focuses
  //    lock:           does not allow window closing
  //    unlock:         inverts lock effect
  //    moveTo:          moves the window to a coordinate or position
  //    moveBy:          moves the window by some amount
  //    setSize:        sets the size of the window
  //    min:            minimizes the window
  //    maxrestore:     maximizes or restores the maximized window
  //    goModal:        makes the window modal
  //    addButton:      adds a custom button to the window

    function Window(title, src, left, top, width, height, style)
    {
      //  Finds the next DIV to take over
      var d = document.all.tags('DIV');
      this.winN = fortis.winCount++;
      this.div = d['FORTIS_W' + this.winN];

      //  Registers in the winArray
      var winPos = fortis.winArray.length;
      fortis.winArray[winPosthis;
      this.winId = "fortis.winArray[" + winPos + "]";

      // Sets basic properties
      this.title = title;
      this.setSize(width, height);
      this.moveTo(left, top);
      
      // Brings it to top
      this.div.style.zIndex = fortis.zidx++;
                
      // if no style use a blank one (overridden by environment)
      if(!style)
        this.style = fortis.style;
      else
        this.style = style;

      this.div.style.visibility = 'hidden';      // hidden by default
      this.div.style.backgroundColor = this.style.bgcolor;
      this.div.style.color = this.style.fgcolor;
      this.div.style.overflow = this.style.over;
      this.div.style.borderStyle = 'outset';
      this.div.style.borderWidth = 'thin';
      this.div.style.borderColor = this.style.bgcolor;

      this.styleX = 0;
      this.styleY = 0;

      // Sets the windows content (SRC)
      if(src)
        this.src = src;

      // Applies style
      this.applyStyle();

  }

  
  // -- Window method: setStyle --
  //  sets the window style
  //
  //  Params:    style: a valid fortis.WinStyle structure instance
  //
  //  Returns:  undefined

  function Window.prototype.setStyle(style)
  {
      this.style = style;
  }


  // -- Window method: applyStyle --
  //  applies the current style (including IFRAME) to the window.
  //  useful to recall on window resize.
  //
  //  Params:    none
  //
  //  Returns:  undefined

  function Window.prototype.applyStyle()
  {

   // Clears previous content first
      this.div.innerHTML = '';

   // Checks if title bar was implied
      if( (this.style.winstyle & fortis.WS_CLOSE||
          (this.style.winstyle & fortis.WS_MIN)   ||
          (this.style.winstyle & fortis.WS_MAX)
         )
         this.style.winstyle = this.style.winstyle | fortis.WS_TITLE;

   // Checks if IFRAME was implied
      if( (this.style.winstyle & fortis.WS_SIZE_EW||
          (this.style.winstyle & fortis.WS_SIZE_NS)
         )
         this.style.winstyle = this.style.winstyle | fortis.WS_IFRAME;

   // Creates title bar
      if(this.style.winstyle & fortis.WS_TITLE)
      {
        this.TB = this.addComponent();
        this.TB.style.backgroundColor = this.style.bgcolor;
        this.TB.style.color = this.style.fgcolor;
        this.TB.style.fontFamily = this.style.font;
        this.TB.style.fontWeight = 'bold';
        this.TB.style.fontSize = this.style.fsize + 'pt';
        this.TB.style.textIndent = '1pt';
        this.TB.style.borderStyle = 'solid';
        this.TB.style.borderWidth = 'thin';
        this.TB.style.borderColor = this.style.bgcolor;
        this.TB.style.padding = '1';
        this.TB.style.pixelLeft = 0;
        this.TB.style.pixelTop = 0;
        this.TB.style.pixelHeight = 22;
        this.TB.style.pixelWidth = this.width-4;
        if(this.style.barimg)
          this.TB.style.backgroundImage = 'url(' + this.style.barimg + ')';
        this.TB.style.cursor = 'default';
        this.TB.onselectstart="return false;";
        var title = '<DIV STYLE="position:absolute; left:23px; top:2px;"' + this.title + '</DIV>';
        if(this.style.icon)
          title = '<DIV style="position: absolute;"><IMG SRC="' + this.style.icon + 
                   '" WIDTH="16" HEIGHT="16"></DIV>' + title;
        this.TB.innerHTML = title;

        // Sets dragging event
        if(!this.isMaximized)
          this.TB.onmousedown = this.winId + '.startDrag();';

        this.styleX = 2;
        this.styleY = 22;
      }
      
      var fromleft = 27;

      // Creates close button
      if((this.style.winstyle & fortis.WS_CLOSE)  && !this.isModal)
      {
        var clsbtn = "<DIV ALIGN='center' STYLE='font-weight:900; font-family: sans-serif; font-size: 9px'>X</FONT><DIV>";
        this.CB = this.addButton(clsbtn, this.width - fromleft,  this.styleY, 1816
          this.winId + ".hide();"'#CCCCCC', 'black');
        fromleft += 20;
      }

      // Creates maximize/restore button
      if((this.style.winstyle & fortis.WS_MAX&& !this.isModal)
      {
        if(this.isMaximized)
          var mb = '8';
        else
          var mb = '0';

        var maxbtn = "<DIV ALIGN='center' STYLE='font-weight:900; font-family: sans-serif; font-size: 9px'>" + mb + "</FONT><DIV>";
        this.MXB = this.addButton(maxbtn, this.width - fromleft,  this.styleY, 1816
          this.winId + ".maxrestore();"'#CCCCCC', 'black');
        fromleft += 20;
      }

      // Creates minimize button
      if((this.style.winstyle & fortis.WS_MIN&& fortis.winbar  && !this.isModal)
      {
        var minbtn = "<DIV ALIGN='center' STYLE='font-weight:900; font-family: sans-serif; font-size: 9px'>_</FONT><DIV>";
        this.MNB = this.addButton(minbtn, this.width - fromleft,  this.styleY, 1816
          this.winId + ".min();"'#CCCCCC', 'black');
      }

      // Creates sizing handle
      if( ((this.style.winstyle & fortis.WS_SIZE_NS|| (this.style.winstyle & fortis.WS_SIZE_EW)) 
          && !this.isMaximized)
      {
        this.DC = this.addComponent();
        this.DC.style.color = this.style.bgcolor;
        this.DC.style.borderStyle = 'none';
        this.DC.style.pixelLeft = this.width - 14;
        this.DC.style.pixelTop = this.height - 14;
        this.DC.style.pixelHeight = 12;
        this.DC.style.pixelWidth = 12;
        this.DC.style.overflow = 'hidden';
        
        if((this.style.winstyle & fortis.WS_SIZE_NS&& (this.style.winstyle & fortis.WS_SIZE_EW))
        {
          this.DC.style.cursor = 'nw-resize';
          this.sizable = 'nw';
        }
        else if(this.style.winstyle & fortis.WS_SIZE_EW)
        {
          this.DC.style.cursor = 'w-resize';
          this.sizable = 'ew';
        }
        else
        {
          this.DC.style.cursor = 'n-resize';
          this.sizable = 'ns';
        }
        
        this.DC.style.zIndex = 2;
        this.DC.onselectstart="return false;";
        this.DC.innerHTML = '//';
        this.DC.onmousedown = this.winId + '.startResize();';
      }

      // Creates IFRAME (and shadow div for dragging)
      if(this.style.winstyle & fortis.WS_IFRAME)
      {
        this.sdid = 'FORTIS_SD' + fortis.divCount++;
        this.ifid = 'FORTIS_IF' + fortis.divCount++;
        this.div.innerHTML += '<DIV id="' + this.sdid + '" style="position: absolute;"></DIV><IFRAME id="' + 
                              this.ifid + '" style=" position: absolute;"></IFRAME>';
            
        var c = this.SD = this.div.all.tags("DIV")[this.sdid];
        c.style.pixelLeft = 0;
        c.style.pixelTop = this.styleY;
        c.style.pixelWidth = this.width - this.styleX*2;
        c.style.pixelHeight = this.height - this.styleY-4;
        c.style.zIndex = 0;

        if(!this.sdplace)
          this.sdplace = fortis.shadowDivs.length;

        fortis.shadowDivs[this.sdplace= c;

        c = this.IF = this.div.all.tags("IFRAME")[this.ifid];
        c.style.pixelLeft = 0;
        c.style.pixelTop = this.styleY;
        c.style.pixelWidth = this.width - this.styleX*2;
        c.style.pixelHeight = this.height - this.styleY-4;
        c.style.zIndex = 1;    
        if(this.src)
          c.src = this.src;
      }

  }

  // -- Window method: addComponent --
  //  Adds a component to the Window
  //
  //  Params:    none
  //
  //  Returns:  reference to the blank DIV just created

    function Window.prototype.addComponent()
    {
      var cid = 'FORTIS_C' + fortis.divCount++;
      
      this.div.innerHTML += '<DIV ID="' + cid + '" STYLE="position: absolute;"></DIV>'; 
      
      var c = this.div.all.tags("DIV")[cid];

      return c;
    }    

  // function Window.prototype.startDrag
  //  This function is meant to be called by an event handler and
  //    enables window dragging. It is not meant to be called by itself.

    function Window.prototype.startDrag() 
    {
      if(event.button == && !event.altKey && !event.ctrlKey && !event.shiftKey)
      
        this.dragStartX = event.offsetX + 
          event.srcElement.style.pixelLeft + 6;
          
        this.dragStartY = event.offsetY +
          event.srcElement.style.pixelTop + 6;
          
        if(!this.isModal)
          this.div.style.zIndex = fortis.zidx++;

        for(var i = 0; i < fortis.shadowDivs.length; i++)
          fortis.shadowDivs[i].style.zIndex = 2;
 
        if (window.FMS_menuCount)
        {
          window.FMS_menuLock = true;
        }

        document.onmousemove = fortis.doDrag;
        document.onmouseup = fortis.endDrag;
        fortis.dw = this;
            
        event.returnValue = false;
      }
    }

  // function Window.prototype.startResize
  //  This function is meant to be called by an event handler and
  //    enables window resiziong. It is not meant to be called by itself.

    function Window.prototype.startResize() 
    {
      if(event.button == && !event.altKey && !event.ctrlKey && !event.shiftKey && this.sizable)
      {         
        if(this.sizable == 'nw' |this.sizable == 'ew')
          this.dragStartX = event.offsetX + event.srcElement.style.pixelLeft + 6;
        else
          this.dragStartX = 0;
          
        if(this.sizable == 'nw' |this.sizable == 'ns')
          this.dragStartY = event.offsetY + event.srcElement.style.pixelTop + 6;
        else
          this.dragStartY = 0;

        if(!this.isModal)
          this.div.style.zIndex = fortis.zidx++;

        for(var i = 0; i < fortis.shadowDivs.length; i++)
          fortis.shadowDivs[i].style.zIndex = 2;
 
        if (window.FMS_menuCount)
        {
          window.FMS_menuLock = true;
        }

        document.onmousemove = fortis.doResize;
        document.onmouseup = fortis.endResize;
        fortis.dw = this;
            
        event.returnValue = false;
      }
    }


  // -- Window method: lock --
  //  Does not allow a window to be closed and executes some other
  //  code instead
  //
  //  Params:    code: JScript code to be executed instead of closing
  //
  //  Returns:  undefined

    function Window.prototype.lock(code
    {
      this.isLocked = true;
      this.lockedCode = code;
    }

  // -- Window method: unlock --
  //  Allows closing of a previosuly locked window
  //
  //  Params:    none
  //
  //  Returns:  undefined

    function Window.prototype.unlock() 
    {
      this.isLocked = false;
    }


  // -- Window method: hide --
  //  Hides the window and removes it from the window bar
  //
  //  Params:    none
  //
  //  Returns:  undefined

    function Window.prototype.hide() 
    {
      if(this.isLocked)
        eval(this.lockedCode)
      else
      {
        this.div.style.visibility = 'hidden';
        if(fortis.winbar)
          fortis.winbar.remove(this);
      }
    }

    
  // -- Window method: show --
  //  Shows the window and adds it to the window bar
  //  or brings it to focus if it is already visible.
  //
  //  Params:    none
  //
  //  Returns:  undefined

    function Window.prototype.show() 
    {
      if(this.div.style.visibility == 'visible')
        this.div.style.zIndex = fortis.zidx++;
      else
      {
        if(fortis.winbar && !this.isMinimized)
          fortis.winbar.add(this);
        this.div.style.visibility = 'visible';
        this.div.style.zIndex = fortis.zidx++;
        this.isMinimized = false;
      }
    }

  // -- Window method: refresh --
  // Refreshes the IFRAME of the window with the specified title
  // (if it exists) with the specified URL. The window must already
  // contain IFRAME capabilities in its style.
  //
  //  Params:    url:   URL to set the IFRAME's SRC at
  //
  //  Returns:  undefined

  function Window.prototype.refresh(url)
  {
    this.src = url;
    this.IF.src = url;
    this.show();
  }

  // -- Window method: min --
  //  Minimizes the window (hides it but keeps it on the window bar)
  //
  //  Params:    none
  //
  //  Returns:  undefined

    function Window.prototype.min() 
    {
      this.div.style.visibility = 'hidden';
      this.isMinimized = true;
    }

  // -- Window method: maxrestore --
  //  Maximizes the window or restores it if maximized
  //
  //  Params:    none
  //
  //  Returns:  undefined

    function Window.prototype.maxrestore() 
    {
      // Restores
      if(this.isMaximized)
      {
        this.isMaximized = false;;

        this.moveTo(this.restX, this.restY);
        this.setSize(this.restW, this.restH);

        fortis.maxiwin[this.winId0;
      }
      else // Maximizes
      {
        var clw = document.body.clientWidth;
        var clh = document.body.clientHeight;

        this.isMaximized = true;
        this.restX = this.x;
        this.restY = this.y;
        this.restH = this.height;
        this.restW = this.width;

        this.moveTo(0, fortis.topUsed+4);
        this.setSize(clw, clh - fortis.topUsed - fortis.botUsed - 2);

        fortis.maxiwin[this.winIdthis;
      }
    }


  // -- Window method: moveTo --
  //  Moves the window to the indicated client co-ordinates
  //
  //  Params:    x, y:  position to move to. Each can be
  //                  - a positive number : pixel coordinates
  //                  - 'center': centered in the browser window on 
  //                    the corresponding axis. Position is not enforced
  //                    after this function call.
  //
  //  Returns:  undefined

    function Window.prototype.moveTo(x,y
    {
      if(isNaN(x))
      {
        if(x.toLowerCase() == 'center')
          this.div.style.pixelLeft = this.x = document.body.clientWidth/2  this.width/2;
      }
      else
      {
        if(x >= 0)
          this.div.style.pixelLeft = this.x = + x;
        else
          this.div.style.pixelLeft = this.x = 0;
 &nbs