swat.obsolete/apps/qooxdoo-examples/example/SplitPane_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>Test for Splitpane functionality.</p>
  16   </div>
  17
  18   <script type="text/javascript">
  19
  20   qx.core.Init.getInstance().defineMain(function()
  21   {
  22     var frame = new qx.ui.layout.CanvasLayout;
  23     frame.setLocation(20, 48);
  24     frame.setBottom(48);
  25     frame.setRight(300);
  26     frame.setBackgroundColor("#134275");
  27     frame.setPadding(20);
  28     frame.addToDocument();
  29
  30     // the splitpane itself
  31     var splitpane = new qx.ui.splitpane.HorizontalSplitPane("1*", "2*");
  32     splitpane.setEdge(0);
  33     frame.add(splitpane);
  34
  35     // left Widget
  36     var leftWidget = new qx.ui.form.TextArea("LeftWidget");
  37     leftWidget.setWrap(true);
  38     leftWidget.setBackgroundColor(new qx.renderer.color.Color("white"));
  39     leftWidget.setWidth("100%");
  40     leftWidget.setHeight("100%");
  41
  42     // rightWidget (another splitpane)
  43     var rightWidget = new qx.ui.splitpane.VerticalSplitPane;
  44     rightWidget.setHeight("100%");
  45     rightWidget.setWidth("100%");
  46
  47     // add widgets to splitpane
  48     splitpane.addLeft(leftWidget);
  49     splitpane.addRight(rightWidget);
  50
  51
  52
  53     // right top widget
  54     var topWidget = new qx.ui.form.TextArea("Right Top Widget");
  55     topWidget.setBackgroundColor(new qx.renderer.color.Color("white"));
  56     topWidget.setHeight("100%");
  57     topWidget.setWidth("100%");
  58
  59     // right bottom widget
  60     var bottomWidget = new qx.ui.embed.Iframe("http://www.qooxdoo.org");
  61     bottomWidget.setHeight("100%");
  62     bottomWidget.setWidth("100%");
  63
  64     // add widgets to right splitpane
  65     rightWidget.addTop(topWidget);
  66     rightWidget.addBottom(bottomWidget);
  67   });
  68   </script>
  69 </body>
  70 </html>