Desktop Demo code : Desktop « GUI Components « JavaScript DHTML

Desktop Demo code


$Id: new_core_test.html,v 1.43 2003/02/04 06:46:09 russcoon Exp $
Copyright (c) 2000-2003 Alex Russell
Licensed under the Academic Free License version 1.1

  <title>A complex sample page</title>

  <script language="JavaScript" type="text/javascript">
    // possible config opts, use specially named array "NWconfig"
    var NWconfig = new Array();
    // NWconfig["isProduction"]=true;
  <script language="JavaScript" type="text/javascript" src="winScripts/netWindows.js"></script>
  <script language="JavaScript" type="text/javascript">
      //widget includes

    // __env__.onLoad will be emitted when the page loads, so connect our init function to it
    __sig__.connect(__env__, __env__.onLoad, null, envInit);

    // test named searching
    // __config__.addSearchId("pyCal","pyMail");

    //keystroke handler for outputting theme information, shift-t
    __env__.setKeystroke('t', true, false, false, null, function(){__theme__.outputTheme();});
    function envInit(){
      create_console('<<debugging console initialized>>', 0, 0, 'right', 'top', 400, 300, 100);
      var winObj = NW_WIDGET_window_create_load_append(300, 300, 100, 100, 'netWindows news', "on the web, no one knows you're a dog, but they sure as hell know you can't spell", 'news.html');
      winObj.setKeystroke('t', true, false, false, null, function(){stdout('foo');});
  <style type="text/css">
    body, div, span, p {
      font-family: helvetica, arial, sans-serif;
      letter-spacing: 1px;  

    .hide {
      visibility: hidden;

    .themeImg {
      position: absolute; 
      left: 0px; 
      padding: 0px;


<body onSelectStart="return false;">

<!-- theme buttons and the like -->
  <img onClick="__theme__.setThemeByName('blue');" src="images/blues_block.gif" width="20" height="20" style="top: 0px;" hspace=0 vspace=0 border="0" align="left" alt="blue theme" class="themeImg">
  <img onclick="__theme__.setThemeByName('green');" src="images/greens_block.gif" width="20" height="20" style="top: 20px;" hspace=0 vspace=0 border="0" align="left" alt="green theme" class="themeImg">
  <img onclick="__theme__.setThemeByName('red');" src="images/reds_block.gif" width="20" height="20" style="top: 40px;" hspace=0 vspace=0 border="0" align="left" alt="red theme" class="themeImg">
  <img onclick="__theme__.setThemeByName('orange');" src="images/oranges_block.gif" width="20" height="20" style="top: 60px;" hspace=0 vspace=0 border="0" align="left" alt="orange theme" class="themeImg">
  <img onclick="__theme__.setThemeByName('yellow');" src="images/yellows_block.gif" width="20" height="20" style="top: 80px;" hspace=0 vspace=0 border="0" align="left" alt="yellow theme" class="themeImg">
  <img onclick="__theme__.setThemeByName('system');" src="images/tans_block.gif" width="20" height="20" style="top: 100px;" hspace=0 vspace=0 border="0" align="left" alt="default theme" class="themeImg">
  <div nwType="button" class="hide" width="100" height="20">
    <div nwProperty="text">News</div>
    <div nwProperty="doOnClick">NW_WIDGET_window_create_load_append(300, 300, 100, 100, 'netWindows news', 'news', 'news.html');</div>
    <div nwProperty="styleList">left: 23px; top: 1px; position:absolute;</div>
  <div nwType="button" class="hide" width="100" height="20" tooltip="EXPERIMENTAL: click this button to toggle alpha-selection on or off.">
    <div nwProperty="text">Alpha Focus</div>
    <div nwProperty="doOnClick">if(__env__.alphaFocus){__env__.alphaFocus=false; this.setText('Alpha: Off');}else{__env__.alphaFocus=true; this.setText('Alpha: On');}</div>
    <div nwProperty="styleList">left: 23px; top: 23px; position:absolute;</div>

  <!-- the NetWindows logo, bottom right -->
  <div width=205 height=35 style="position: absolute; bottom: 0px; right: 100px; width: 205px; height: 35px; padding: 0px 0px 0px 0px; overflow:hidden;">
    <a href="">
    <img src="images/netWindows_bottom_left.gif" border=0 hspace="0" vspace="0">

  <div width=225 height=20 style="position: absolute; bottom: 0px; right: 283px; width: 260px; height: 25px; padding: 0px 0px 0px 0px; overflow: hidden; filter: Alpha(Opacity=50); z-Index: 1000;"><p style="font: normal normal normal xx-small sans-serif; padding: 5px; left:225px; top:0px; height: 15px;"> is &copy; 2000-2001 <a href="">Alex Russell.</a></p></div>



Related examples in the same category

1.Window system (Desktop) in JavaScript (IE only)