swat.obsolete/apps/qooxdoo-examples/test/Popups_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 the qx.ui.popup.Popup widget. qx.ui.popup.Popups are planned as the source constructor for tooltips, menus, ...</p>
  16     <p>There is also a qx.manager.object.PopupManager which hides all registered qx.ui.popup.Popup instances which are configured to auto hide.
  17     This is a nice method to omit to show more than one qx.ui.popup.Popup together (omit multiple QxTooltips, ...).</p>
  18     <p>In this example we use a qx.ui.popup.PopupAtom. This is a popup with an automatically included qx.ui.basic.Atom, which
  19     allowes you to easily use it for messages to the user or something like this.</p>
  20   </div>
  21
  22   <script type="text/javascript">
  23   qx.core.Init.getInstance().defineMain(function()
  24   {
  25     var d = qx.ui.core.ClientDocument.getInstance();
  26
  27
  28     var w1 = new qx.ui.form.Button("Press");
  29     with(w1)
  30     {
  31       setTop(48);
  32       setLeft(20);
  33       setBackgroundColor(new qx.renderer.color.Color("#BDD2EF"));
  34       setWidth(100);
  35       setHeight(100);
  36       setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
  37       setHorizontalAlign("center");
  38     };
  39     d.add(w1);
  40
  41
  42     var w2 = new qx.ui.form.Button("Press");
  43     with(w2)
  44     {
  45       setTop(48);
  46       setLeft(140);
  47       setBackgroundColor(new qx.renderer.color.Color("#D1DFAD"));
  48       setWidth(100);
  49       setHeight(100);
  50       setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
  51       setHorizontalAlign("center");
  52     };
  53     d.add(w2);
  54
  55
  56
  57
  58
  59
  60
  61
  62     var p1 = new qx.ui.popup.PopupAtom("Hello World #1", "icon/16/paint.png");
  63     d.add(p1);
  64
  65     with(p1)
  66     {
  67       setBackgroundColor(new qx.renderer.color.Color("#FFFAD3"));
  68       setBorder(qx.renderer.border.BorderPresets.getInstance().black);
  69       setPadding(2, 4);
  70     };
  71
  72     w1.addEventListener("click", function(e)
  73     {
  74       p1.setTop(e.getPageY() + 3);
  75       p1.setLeft(e.getPageX() + 3);
  76       p1.show();
  77       p1.bringToFront();
  78     });
  79
  80
  81
  82     var p2 = new qx.ui.popup.PopupAtom("Hello World #2", "icon/32/clock.png");
  83     d.add(p2);
  84
  85     with(p2)
  86     {
  87       setBackgroundColor(new qx.renderer.color.Color("#DFFAD3"));
  88       setBorder(qx.renderer.border.BorderPresets.getInstance().black);
  89       setPadding(2, 4);
  90     };
  91
  92     w2.addEventListener("click", function(e)
  93     {
  94       p2.setTop(e.getPageY() + 3);
  95       p2.setLeft(e.getPageX() + 3);
  96       p2.show();
  97       p2.bringToFront();
  98     });
  99   });
 100   </script>
 101 </body>
 102 </html>