swat/apps/qooxdoo-examples/example/SplitPane_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>Test for Splitpane functionality with enabled live resize.</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     splitpane.setLiveResize(true);
  34     frame.add(splitpane);
  35
  36     // left Widget
  37     var leftWidget = new qx.ui.form.TextArea("LeftWidget");
  38     leftWidget.setWrap(true);
  39     leftWidget.setBackgroundColor(new qx.renderer.color.Color("white"));
  40     leftWidget.setWidth("100%");
  41     leftWidget.setHeight("100%");
  42
  43     // rightWidget (another splitpane)
  44     var rightWidget = new qx.ui.splitpane.VerticalSplitPane;
  45     rightWidget.setHeight("100%");
  46     rightWidget.setWidth("100%");
  47     rightWidget.setLiveResize(true);
  48
  49     // add widgets to splitpane
  50     splitpane.addLeft(leftWidget);
  51     splitpane.addRight(rightWidget);
  52
  53
  54
  55     // right top widget
  56     var topWidget = new qx.ui.form.TextArea("Right Top Widget");
  57     topWidget.setBackgroundColor(new qx.renderer.color.Color("white"));
  58     topWidget.setHeight("100%");
  59     topWidget.setWidth("100%");
  60
  61     // right bottom widget
  62     var bottomWidget = new qx.ui.embed.Iframe("http://www.qooxdoo.org");
  63     bottomWidget.setHeight("100%");
  64     bottomWidget.setWidth("100%");
  65
  66     // add widgets to right splitpane
  67     rightWidget.addTop(topWidget);
  68     rightWidget.addBottom(bottomWidget);
  69   });
  70   </script>
  71 </body>
  72 </html>