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 » 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>
|
