demos\blackmajic\canvas\blob.sdf
  1 Form {
  2   verticalAlign: full
  3   horizontalAlign: full
  4   layout: forms
  5   rows: "d,4dlu,f:d:g,14dlu,d,d"
  6   columns: "d:g"
  7   widgets {
  8     {
  9       GroupBox {
 10         horizontalAlign: center
 11         bounds {
 12           x: "0"
 13           y: "5"
 14         }
 15         layout: forms
 16         rows: "2dlu,d"
 17         columns: "d,d,d,d,d,d"
 18         widgets {
 19           {
 20             PushButton {
 21               borders {
 22                 line [ cornerArc="6" ]
 23               }
 24               fgColor: "brightForeground"
 25               bgColor: "Sage.controlLtGradient, Sage.controlDkGradient"
 26               bounds {
 27                 x: "0"
 28                 y: "1"
 29                 width: "50dlu"
 30               }
 31               value: "Split Blob"
 32               name: "split"
 33               buttonStyle: toolbar
 34               focusable: false
 35               selectionPainter {
 36                 bgColor: "Sage.controlLtGradient, Sage.controlDkGradient" [ direction="vertical_bottom" ]
 37               }
 38               rolloverPainter {
 39                 bgColor: "Sage.controlLtGradient+10, Sage.controlDkGradient+10" [ direction="vertical_bottom" ]
 40               }
 41             }[onAction="splitBlob()"]
 42           }
 43           {
 44             PushButton {
 45               borders {
 46                 line [ cornerArc="6" ]
 47               }
 48               fgColor: "brightForeground"
 49               bgColor: "Sage.controlLtGradient, Sage.controlDkGradient"
 50               bounds {
 51                 x: "2"
 52                 y: "1"
 53                 width: "50dlu"
 54               }
 55               value: "Rejoin Blob"
 56               name: "join"
 57               buttonStyle: toolbar
 58               focusable: false
 59               selectionPainter {
 60                 bgColor: "Sage.controlLtGradient, Sage.controlDkGradient" [ direction="vertical_bottom" ]
 61               }
 62               rolloverPainter {
 63                 bgColor: "Sage.controlLtGradient+10, Sage.controlDkGradient+10" [ direction="vertical_bottom" ]
 64               }
 65             }[onAction="rejoinBlob()"]
 66           }
 67           {
 68             CheckBox {
 69               bounds {
 70                 x: "4"
 71                 y: "1"
 72                 width: "50dlu"
 73               }
 74               value: "Gravity"
 75               borders {
 76                 line [ cornerArc="6" ]
 77               }
 78               focusable: false
 79               fgColor: "brightForeground"
 80               bgColor: "Sage.controlLtGradient, Sage.controlDkGradient"
 81               initialState: selected
 82             }[onAction="toggleGravity()"]
 83           }
 84         }
 85       }
 86     }
 87     {
 88       Canvas {
 89         name: "blobCanvas"
 90         bounds {
 91           x: "0"
 92           y: "2"
 93         }
 94         templateName: "canvas"
 95         scriptURL: "js/blobsallad.js"
 96       } [ onShown="startBlob();invokeLater(blobCanvas.focus())", onHidden="stopBlob()"]
 97     }
 98     {
 99       Label {
100         horizontalAlign: center
101         bounds {
102           x: "0"
103           y: "0"
104         }
105         value:<< <html>
106         BlobSalad is an HTML 5 canvas demo developed by <b><a href="http://dev.opera.com/author/1050631">Bjorn Lindberg</a></b><br/>
107             The browser version can be seen at <b><a href="http://blobsallad.se/">http://blobsallad.se/</a></b>, and
108             the article about the demo can be found
109             <b><a href="http://dev.opera.com/articles/view/blob-sallad-canvas-tag-and-javascrip/">here</a></b>&nbsp;
110         </html>
111         >>
112         supportHyperLinks: true
113       }[onAction="window.browse(window.nativeEvent.actionCommand)"]
114     }
115     {
116       Label {
117         columnSpan: 1
118         horizontalAlign: center
119         bounds {
120           x: "0"
121           y: "4"
122         }
123         value: "Click to select and drag/throw blob around"
124       }
125     }
126   }
127 }
128 
129