swat/apps/qooxdoo-examples/example/Atom_1.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>qooxdoo &raquo; Demo</title>
  <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
  <!--[if IE]>
  <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
  <![endif]-->
  <script type="text/javascript" src="../../script/qx.js"></script>
</head>
<body>
  <script type="text/javascript" src="../../script/layout.js"></script>

  <div id="demoDescription">
    <p>qx.ui.basic.Atom is the parent class for buttons, menu entries, icons, checkboxes. While you can do,
    you usually don't have to instantiate qx.ui.basic.Atom directly.</p>
  </div>

  <script type="text/javascript">
  qx.core.Init.getInstance().defineMain(function()
  {
    var d = qx.ui.core.ClientDocument.getInstance();

    // test no1
    var nl1 = new qx.ui.basic.Atom("Test #1", "icon/16/reload.png", 16, 16);
    nl1.setTop(48);
    nl1.setLeft(20);
    nl1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
    nl1.setBackgroundColor(new qx.renderer.color.Color("white"));
    nl1.setPadding(4);
    d.add(nl1);

    // test no2
    var nl2 = new qx.ui.basic.Atom("Test #2");
    nl2.setTop(48);
    nl2.setLeft(120);
    nl2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
    nl2.setBackgroundColor(new qx.renderer.color.Color("white"));
    nl2.setPadding(4);
    d.add(nl2);

    // test no3
    var nl3 = new qx.ui.basic.Atom(null, "icon/16/reload.png");
    nl3.setTop(48);
    nl3.setLeft(200);
    nl3.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
    nl3.setBackgroundColor(new qx.renderer.color.Color("white"));
    nl3.setPadding(4);
    d.add(nl3);

    // test no4
    var nl4 = new qx.ui.basic.Atom("<span style='font-size:14px'>Some great HTML</span><br/>for <b>you</b>", "icon/32/reload.png");
    nl4.setTop(48);
    nl4.setLeft(250);
    nl4.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
    nl4.setBackgroundColor(new qx.renderer.color.Color("white"));
    nl4.setPadding(4);
    d.add(nl4);

    // test no5
    var nl5 = new qx.ui.basic.Atom(qx.util.Textile.textilize("*File Information*:\nJPEG-Photo\nCreated: 01/03/05"), "icon/48/icons.png");
    with(nl5)
    {
      setTop(200);
      setLeft(20);
      setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
      setPadding(3, 6);
    };
    d.add(nl5);
  });
  </script>
</body>
</html>