webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/Image_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>This is a test for the qx.ui.basic.Image constructor. It supports automatic preloading through qx.io.image.Preloader, with error and load
  16     QxEvents which will be fired, and cross-browser PNG with extended alpha channels.</p>
  17
  18     <p>PNG file in HTML (in Internet Explorer this should not be transparent):</p>
  19     <img src="../../../../framework/source/resource/icon/crystalsvg/48/hardware-info.png" width="48" height="48"/>
  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     var i1 = new qx.ui.basic.Image("icon/48/favourite.png", 48, 48);
  28     with(i1)
  29     {
  30       setTop(48);
  31       setLeft(20);
  32     };
  33
  34     d.add(i1);
  35
  36
  37
  38     var i2 = new qx.ui.basic.Image("icon/48/favourite.png", 48, 48);
  39     with(i2)
  40     {
  41       setTop(48);
  42       setLeft(100);
  43     };
  44
  45     d.add(i2);
  46
  47
  48
  49
  50     var i3 = new qx.ui.basic.Image("icon/48/favourite.png", 96, 96);
  51     with(i3)
  52     {
  53       setTop(120);
  54       setLeft(60);
  55       setResizeToInner(true);
  56     };
  57
  58     /*
  59     i3.addEventListener("load", function() {
  60       new QxDebug("Bigger Symbol", "Preferred (Original) Size: " + this.getPreferredBoxWidth() + "x" + this.getPreferredBoxHeight());
  61     });
  62     */
  63
  64     d.add(i3);
  65
  66
  67
  68
  69     var i4 = new qx.ui.basic.Image("icon/48/favourite.png", 24, 24);
  70     with(i4)
  71     {
  72       setTop(120);
  73       setLeft(20);
  74       setResizeToInner(true);
  75     };
  76
  77     /*
  78     i4.addEventListener("load", function() {
  79       new QxDebug("Smaller Symbol", "Preferred (Original) Size: " + this.getPreferredBoxWidth() + "x" + this.getPreferredBoxHeight());
  80     });
  81     */
  82
  83     d.add(i4);
  84
  85
  86
  87
  88     var i5 = new qx.ui.basic.Image("http://www.google.com/images/google_sm.gif");
  89     with(i5)
  90     {
  91       setTop(300);
  92       setLeft(20);
  93     };
  94
  95     /*
  96     i5.addEventListener("load", function() {
  97       new QxDebug("Google Image", "Preferred (Original) Size: " + this.getPreferredBoxWidth() + "x" + this.getPreferredBoxHeight());
  98     });
  99     */
 100
 101     d.add(i5);
 102
 103
 104
 105
 106
 107     // Icon Themes
 108     qx.manager.object.ImageManager.getInstance().createThemeList(d, 300, 48);
 109
 110
 111   });
 112   </script>
 113 </body>
 114 </html>