<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>Introduce qx.ui.menu.Menu which opens on qx.ui.toolbar.ToolBarMenuButtons.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var tb = new qx.ui.toolbar.ToolBar;
with(tb)
{
setTop(48);
setLeft(20);
setRight(335);
};
var m1 = new qx.ui.menu.Menu;
var mb1 = new qx.ui.menu.MenuButton("Folder");
var ms1 = new qx.ui.menu.MenuSeparator;
var mb2 = new qx.ui.menu.MenuButton("Word Document");
var mb3 = new qx.ui.menu.MenuButton("Text File");
var mb4 = new qx.ui.menu.MenuButton("Image");
m1.add(mb1, ms1, mb2, mb3, mb4);
d.add(m1);
var m2 = new qx.ui.menu.Menu;
var mb5 = new qx.ui.menu.MenuButton("Copy", "icon/16/edit-copy.png");
var mb6 = new qx.ui.menu.MenuButton("Move", "icon/16/edit-cut.png");
var mb7 = new qx.ui.menu.MenuButton("Delete", "icon/16/edit-delete.png");
m2.add(mb5, mb6, mb7);
d.add(m2);
var btns1 = [
{ type : "menu", icon : "file-new", label : "New", menu : m1 },
{ type : "menu", icon : "edit", label : "Edit", menu : m2 }
];
var btns2 = [
{ type : "button", icon : "up", label : "Upload" },
{ type : "button", icon : "down", label : "Download" }
];
var btns3 = [
{ type : "button", icon : "idea", label : "Tip" },
{ type : "button", icon : "help", label : "Help" }
];
var bars = [ btns1, btns2, btns3 ];
function changeLayout(e) {
this.setShow(e.getData());
};
var useParts = true;
for (var j=0; j<bars.length; j++)
{
var btns = bars[j];
if (useParts) {
var tbp = new qx.ui.toolbar.ToolBarPart;
};
for (var i=0; i<btns.length; i++)
{
var btn = btns[i];
switch(btn.type)
{
case "separator":
var o = new qx.ui.toolbar.ToolBarSeparator;
break;
case "menu":
var o = new qx.ui.toolbar.ToolBarMenuButton(btn.label, btn.menu, "icon/22/" + btn.icon + ".png", 22, 22);
// beautiful decoupling: toolbar buttons don't know about radio boxes
// uncomment this to omit changes on one button
// if (btn.icon != "upload")
d.addEventListener("changeLayout", changeLayout, o );
break;
case "button":
var o = new qx.ui.toolbar.ToolBarButton(btn.label, "icon/22/" + btn.icon + ".png");
// beautiful decoupling: toolbar buttons don't know about radio boxes
// uncomment this to omit changes on one button
// if (btn.icon != "upload")
d.addEventListener("changeLayout", changeLayout, o );
break;
};
if (useParts)
{
tbp.add(o);
}
else
{
tb.add(o);
};
};
if (useParts) {
tb.add(tbp);
};
};
d.add(tb);
var rd1 = new qx.ui.form.RadioButton("Show Icons and Label", "both");
var rd2 = new qx.ui.form.RadioButton("Show Icons", "icon");
var rd3 = new qx.ui.form.RadioButton("Show Label", "label");
with(rd1)
{
setTop(140);
setLeft(20);
setChecked(true);
};
with(rd2)
{
setTop(160);
setLeft(20);
};
with(rd3)
{
setTop(180);
setLeft(20);
};
var rbm = new qx.manager.selection.RadioManager();
rbm.add(rd1);
rbm.add(rd2);
rbm.add(rd3);
// beautiful decoupling: radio boxes don't know about toolbar buttons
rbm.addEventListener("changeSelected", function(e) {
d.dispatchEvent( new qx.event.type.DataEvent("changeLayout", e.getData().getValue() ) );
});
d.add(rd1, rd2, rd3);
// Alignment
var ra1 = new qx.ui.form.RadioButton("Left Aligned", "left");
var ra2 = new qx.ui.form.RadioButton("Centered", "center");
var ra3 = new qx.ui.form.RadioButton("Right Aligned", "right");
with(ra1)
{
setTop(140);
setLeft(220);
setChecked(true);
};
with(ra2)
{
setTop(160);
setLeft(220);
};
with(ra3)
{
setTop(180);
setLeft(220);
};
var ram = new qx.manager.selection.RadioManager();
ram.add(ra1);
ram.add(ra2);
ram.add(ra3);
d.add(ra1, ra2, ra3);
ram.addEventListener("changeSelected", function(e) {
tb.setHorizontalChildrenAlign(e.getData().getValue());
});
// Icon & Color Themes
qx.manager.object.ImageManager.getInstance().createThemeList(d, 20, 248);
qx.manager.object.ColorManager.getInstance().createThemeList(d, 220, 248);
});
</script>
</body>
</html>