summaryrefslogtreecommitdiff
path: root/swat/apps/qooxdoo-examples/showcase/Showcase_1.html
blob: 015c178579bfd84f096d678f6da4c78cbac4f543 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>qooxdoo &raquo; Demo</title>
  <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
  <!--[if IE]>
  <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
  <![endif]-->
  <script type="text/javascript" src="../../script/qx.js"></script>
</head>
<body>
  <script type="text/javascript" src="../../script/layout.js"></script>

  <div id="demoDescription">
    <p>A small example how a webmail application can look and feel using qooxdoo.</p>
  </div>

  <script type="text/javascript">
  qx.core.Init.getInstance().defineMain(function()
  {
    var doc = qx.ui.core.ClientDocument.getInstance();

    var dockLayout = new qx.ui.layout.DockLayout;

    dockLayout.setLocation(20, 48);
    dockLayout.setDimension(700, 500);
    dockLayout.setBackgroundColor("white");
    dockLayout.setBorder(qx.renderer.border.BorderPresets.getInstance().black);

    doc.add(dockLayout);

    var menubar = new qx.ui.menu.MenuBar;
    var toolbar = new qx.ui.toolbar.ToolBar;
    var tree = new qx.ui.tree.Tree("Inbox");
    var status = new qx.ui.basic.Atom("Status", "icon/16/network.png");

    tree.setWidth(200);
    tree.setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
    tree.add(new qx.ui.tree.TreeFolder("Drafts"));
    tree.add(new qx.ui.tree.TreeFolder("Sent"));
    tree.add(new qx.ui.tree.TreeFolder("Trash"));
    tree.add(new qx.ui.tree.TreeFolder("Junk"));

    status.setWidth(null);
    status.setBorder(qx.renderer.border.BorderPresets.getInstance().thinInset);
    status.setHorizontalChildrenAlign("left");
    status.setPadding(2, 4);
    status.setBackgroundColor("threedface");

    dockLayout.addTop(menubar);
    dockLayout.addTop(toolbar);
    dockLayout.addBottom(status);
    dockLayout.addLeft(tree);



    var btns = [
      { text : "New", icon : "icon/16/mail-new.png" },
      { text : "Send/Receive", icon : "icon/16/mail-send.png" },
      { text : "Adressbook", icon : "icon/16/appointment.png" }
    ];

    for (var i=0; i<btns.length; i++) {
      toolbar.add(new qx.ui.toolbar.ToolBarButton(btns[i].text, btns[i].icon));
    };



    var filemnu = new qx.ui.menu.Menu;
    var editmnu = new qx.ui.menu.Menu;
    var optimnu = new qx.ui.menu.Menu;
    var helpmnu = new qx.ui.menu.Menu;

    filemnu.add(new qx.ui.menu.MenuButton("New Mail"));
    filemnu.add(new qx.ui.menu.MenuButton("Exit"));

    editmnu.add(new qx.ui.menu.MenuButton("Cut"));
    editmnu.add(new qx.ui.menu.MenuButton("Copy"));
    editmnu.add(new qx.ui.menu.MenuButton("Paste"));

    optimnu.add(new qx.ui.menu.MenuButton("View"));
    optimnu.add(new qx.ui.menu.MenuButton("Settings"));

    helpmnu.add(new qx.ui.menu.MenuButton("Help"));
    helpmnu.add(new qx.ui.menu.MenuButton("About"));

    var filemn = new qx.ui.menu.MenuBarButton("File", filemnu);
    var editmn = new qx.ui.menu.MenuBarButton("Edit", editmnu);
    var optimn = new qx.ui.menu.MenuBarButton("Options", optimnu);
    var helpmn = new qx.ui.menu.MenuBarButton("Help", helpmnu);

    menubar.add(filemn, editmn, optimn, new qx.ui.basic.HorizontalSpacer, helpmn);
    doc.add(filemnu, editmnu, optimnu, helpmnu);








    var ld = [];
    var lt = [ "Image", "Text", "PDF", "Illustration", "Document" ];

    for (var i=0, t; i<333; i++)
    {
      t=Math.round(Math.random()*4);
      ld.push({ subject : { text : "Subject " + i }, from : { text : "qooxdoo User" }, date : { text : "01/26/2006" }});
    };

    var lc =
    {
      subject : { label : "Subject", width : 200, type : "text" },
      from : { label : "From", width : 100, type : "text" },
      date: { label : "Date", width : 100, type : "text" }
    };

    var view = new qx.ui.listview.ListView(ld, lc);

    view.setLocation(220, 95);
    view.setDimension(499, 430);
    view.setBorder(qx.renderer.border.BorderPresets.getInstance().inset);

    doc.add(view);
  });
  </script>
</body>
</html>