swat.obsolete/apps/qooxdoo-examples/example/ButtonView_2.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>Yet Another qx.ui.pageview.buttonview.ButtonView Example</p>
  16   </div>
  17
  18   <script type="text/javascript">
  19     qx.core.Init.getInstance().defineMain(function()
  20     {
  21       var d = qx.ui.core.ClientDocument.getInstance();
  22
  23       var bs = new qx.ui.pageview.buttonview.ButtonView;
  24       bs.set({ left: 20, top: 48, right: 335, bottom: 48 });
  25       bs.setBarPosition("left");
  26
  27       var bsb1 = new qx.ui.pageview.buttonview.ButtonViewButton("Display", "icon/16/display.png");
  28       var bsb2 = new qx.ui.pageview.buttonview.ButtonViewButton("Organizer", "icon/16/organizer.png");
  29       var bsb3 = new qx.ui.pageview.buttonview.ButtonViewButton("Colorize", "icon/16/colors.png");
  30       var bsb4 = new qx.ui.pageview.buttonview.ButtonViewButton("Icons", "icon/16/icons.png");
  31       var bsb5 = new qx.ui.pageview.buttonview.ButtonViewButton("Paint", "icon/16/paint.png");
  32       var bsb6 = new qx.ui.pageview.buttonview.ButtonViewButton("Applications", "icon/16/run.png");
  33       var bsb7 = new qx.ui.pageview.buttonview.ButtonViewButton("System", "icon/16/control-center.png");
  34
  35       bsb1.setChecked(true);
  36
  37       bsb1.set({ iconPosition: "left", horizontalChildrenAlign: "left" });
  38       bsb2.set({ iconPosition: "left", horizontalChildrenAlign: "left" });
  39       bsb3.set({ iconPosition: "left", horizontalChildrenAlign: "left" });
  40       bsb4.set({ iconPosition: "left", horizontalChildrenAlign: "left" });
  41       bsb5.set({ iconPosition: "left", horizontalChildrenAlign: "left" });
  42       bsb6.set({ iconPosition: "left", horizontalChildrenAlign: "left" });
  43       bsb7.set({ iconPosition: "left", horizontalChildrenAlign: "left" });
  44
  45       bs.getBar().add(bsb1, bsb2, bsb3, bsb4, bsb5, bsb6, bsb7);
  46
  47       bs.getBar().setHorizontalChildrenAlign("center");
  48       bs.getBar().setVerticalChildrenAlign("bottom");
  49
  50       var p1 = new qx.ui.pageview.buttonview.ButtonViewPage(bsb1);
  51       var p2 = new qx.ui.pageview.buttonview.ButtonViewPage(bsb2);
  52       var p3 = new qx.ui.pageview.buttonview.ButtonViewPage(bsb3);
  53       var p4 = new qx.ui.pageview.buttonview.ButtonViewPage(bsb4);
  54       var p5 = new qx.ui.pageview.buttonview.ButtonViewPage(bsb5);
  55       var p6 = new qx.ui.pageview.buttonview.ButtonViewPage(bsb6);
  56       var p7 = new qx.ui.pageview.buttonview.ButtonViewPage(bsb7);
  57
  58       bs.getPane().add(p1, p2, p3, p4, p5, p6, p7);
  59
  60       var f1 = new qx.ui.form.TextField("Display Input");
  61       var f2 = new qx.ui.form.TextField("Sunshine Input");
  62       var f3 = new qx.ui.form.TextField("Paint Input");
  63       var f4 = new qx.ui.form.TextField("Icons Input");
  64       var f5 = new qx.ui.form.TextField("Images Input");
  65       var f6 = new qx.ui.form.TextField("Applications Input");
  66       var f7 = new qx.ui.form.TextField("System Input");
  67
  68       p1.add(f1);
  69       p2.add(f2);
  70       p3.add(f3);
  71       p4.add(f4);
  72       p5.add(f5);
  73       p6.add(f6);
  74       p7.add(f7);
  75
  76       var r1 = new qx.ui.form.RadioButton("Top", "top");
  77       var r2 = new qx.ui.form.RadioButton("Right", "right");
  78       var r3 = new qx.ui.form.RadioButton("Bottom", "bottom");
  79       var r4 = new qx.ui.form.RadioButton("Left", "left", null, true);
  80
  81       r1.setTop(50);
  82       r2.setTop(70);
  83       r3.setTop(90);
  84       r4.setTop(110);
  85
  86       p1.add(r1, r2, r3, r4);
  87
  88       var rm = new qx.manager.selection.RadioManager(null, [r1, r2, r3, r4]);
  89
  90       rm.addEventListener("changeSelected", function(e) {
  91         bs.setBarPosition(e.getData().getValue());
  92       });
  93
  94       d.add(bs);
  95     });
  96   </script>
  97 </body>
  98 </html>