webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/showcase/Showcase_1.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>qooxdoo &raquo; Demo</title>
   5   <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
   6   <!--[if IE]>
   7   <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
   8   <![endif]-->
   9   <script type="text/javascript" src="../../script/qx.js"></script>
  10 </head>
  11 <body>
  12   <script type="text/javascript" src="../../script/layout.js"></script>
  13
  14   <div id="demoDescription">
  15     <p>A small example how a webmail application can look and feel using qooxdoo.</p>
  16   </div>
  17
  18   <script type="text/javascript">
  19   qx.core.Init.getInstance().defineMain(function()
  20   {
  21     var doc = qx.ui.core.ClientDocument.getInstance();
  22
  23     var dockLayout = new qx.ui.layout.DockLayout;
  24
  25     dockLayout.setLocation(20, 48);
  26     dockLayout.setDimension(700, 500);
  27     dockLayout.setBackgroundColor("white");
  28     dockLayout.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
  29
  30     doc.add(dockLayout);
  31
  32     var menubar = new qx.ui.menubar.MenuBar;
  33     var toolbar = new qx.ui.toolbar.ToolBar;
  34     var tree = new qx.ui.tree.Tree("Inbox");
  35     var status = new qx.ui.basic.Atom("Status", "icon/16/network.png");
  36
  37     tree.setWidth(200);
  38     tree.setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
  39     tree.add(new qx.ui.tree.TreeFolder("Drafts"));
  40     tree.add(new qx.ui.tree.TreeFolder("Sent"));
  41     tree.add(new qx.ui.tree.TreeFolder("Trash"));
  42     tree.add(new qx.ui.tree.TreeFolder("Junk"));
  43
  44     status.setWidth(null);
  45     status.setBorder(qx.renderer.border.BorderPresets.getInstance().thinInset);
  46     status.setHorizontalChildrenAlign("left");
  47     status.setPadding(2, 4);
  48     status.setBackgroundColor("threedface");
  49
  50     dockLayout.addTop(menubar);
  51     dockLayout.addTop(toolbar);
  52     dockLayout.addBottom(status);
  53     dockLayout.addLeft(tree);
  54
  55
  56
  57     var btns = [
  58       { text : "New", icon : "icon/16/mail-new.png" },
  59       { text : "Send/Receive", icon : "icon/16/mail-send.png" },
  60       { text : "Adressbook", icon : "icon/16/appointment.png" }
  61     ];
  62
  63     for (var i=0; i<btns.length; i++) {
  64       toolbar.add(new qx.ui.toolbar.Button(btns[i].text, btns[i].icon));
  65     };
  66
  67
  68
  69     var filemnu = new qx.ui.menu.Menu;
  70     var editmnu = new qx.ui.menu.Menu;
  71     var optimnu = new qx.ui.menu.Menu;
  72     var helpmnu = new qx.ui.menu.Menu;
  73
  74     filemnu.add(new qx.ui.menu.Button("New Mail"));
  75     filemnu.add(new qx.ui.menu.Button("Exit"));
  76
  77     editmnu.add(new qx.ui.menu.Button("Cut"));
  78     editmnu.add(new qx.ui.menu.Button("Copy"));
  79     editmnu.add(new qx.ui.menu.Button("Paste"));
  80
  81     optimnu.add(new qx.ui.menu.Button("View"));
  82     optimnu.add(new qx.ui.menu.Button("Settings"));
  83
  84     helpmnu.add(new qx.ui.menu.Button("Help"));
  85     helpmnu.add(new qx.ui.menu.Button("About"));
  86
  87     var filemn = new qx.ui.menubar.Button("File", filemnu);
  88     var editmn = new qx.ui.menubar.Button("Edit", editmnu);
  89     var optimn = new qx.ui.menubar.Button("Options", optimnu);
  90     var helpmn = new qx.ui.menubar.Button("Help", helpmnu);
  91
  92     menubar.add(filemn, editmn, optimn, new qx.ui.basic.HorizontalSpacer, helpmn);
  93     doc.add(filemnu, editmnu, optimnu, helpmnu);
  94
  95
  96
  97
  98
  99
 100
 101
 102     var ld = [];
 103     var lt = [ "Image", "Text", "PDF", "Illustration", "Document" ];
 104
 105     for (var i=0, t; i<333; i++)
 106     {
 107       t=Math.round(Math.random()*4);
 108       ld.push({ subject : { text : "Subject " + i }, from : { text : "qooxdoo User" }, date : { text : "01/26/2006" }});
 109     };
 110
 111     var lc =
 112     {
 113       subject : { label : "Subject", width : 200, type : "text" },
 114       from : { label : "From", width : 100, type : "text" },
 115       date: { label : "Date", width : 100, type : "text" }
 116     };
 117
 118     var view = new qx.ui.listview.ListView(ld, lc);
 119
 120     view.setLocation(220, 95);
 121     view.setDimension(499, 430);
 122     view.setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
 123
 124     doc.add(view);
 125   });
 126   </script>
 127 </body>
 128 </html>