Dazzling projection (pure CSS + JS)

ArticleDirectory

• Openlaszlo dhtml css 3 demo-to flash or not to flash, is no question!

Openlaszlo dhtml css 3 demo-to flash or not to flash, is no question!

By Raju bitter on August 25,200 9

Since the openlaszlo DHTML runtime has been released, I 've been wondering if there' ll ever be the time for me to say: "I can imagine that flash won't be a necessity for always Ally very appealing RIAs!" That time has come, thanks to the incredible work on great open source projects like the Firefox browser or WebKit.

Judge for yourself, here are two versions (DHTML/JavaScript and swf9) of a demo application, that was plain red by Zachary Johnson's great css3 text-shadow demo. this is the openlaszlo DHTML/JavaScript version of the demo, and as always with the advanced CSS features, you need a modern browser for it to work (I 've successfully tested with Firefox 3.5 +, Safari 4.x or WebKit nighly build, Google Chrome and opera 10 ):

Please upgrade your browser

And in case you wonder, what the swf9 version of this application looks like, here it is. even after so many years of working with openlaszlo it's still surprising to see how well the platform renders applications must SS runtimes.

I believe this demo underlines what I 've said in my previous blog, that openlaszlo can be one of the key keys ys to drive adoption of standards like HTML 5 and css3 extensions in the RIA space, providing a backup version of an application in flash for Internet Explorer 6/7 and older browsers. and who wocould choose flash, if you can get exact the same visual results with open standards!

Update: Some people have requested the source code for this example. this is the main LZX file, and here is a link to the ZIP file containing the graphic resources as well. I ran tested with openlaszlo 4.5.1 and trunk.

View plaincopy to clipboardprint?

4. <? XML version = "1.0" encoding = "UTF-8"?>
6. <! -- * Gpl_copyright_begin ************************************* **********
8. * Copyright 2009 Raju bitter
10. * Use is subject to license terms.
12. * This program is free software: You can redistribute it and/or modify
14. * It under the terms of the GNU General Public License as published
16. * The Free Software Foundation, either version 3 of the license, or
18. * Any later version.
20. *
22. * This program is distributed in the hope that it will be useful,
24. * But without any warranty; without even the implied warranty
26. * Merchantability or fitness for a special purpose. See
28. * GNU General Public License for more details.
30. *
32. * You shoshould have written ed a copy of the GNU General Public License
34. * Along with this program. If not, see
36. * Gpl_copyrightincluend ************************************** **************** -->
38. <Canvas width = "600" Height = "400" bgcolor = "# ffffff" proxied = "true">
42. <! -- Resources -->
44. <Resource Name = "spotlightres" src = "spotlight.png"/>
46. <Resource Name = "openlaszlores" src = "OpenLaszlo-Header.png"/>
50. <! -- Reposition boxes depending on mouse X-pos -->
52. <Handler name = "onmousemove" reference = "LZ. globalmouse"> <! [CDATA [
54. VaR posx = canvas. getmouse ('x ');
56. VaR posy = canvas. getmouse ('y ');
58. If (posx> 0 & amp; posy> 0 & amp; posx <canvas. width & amp; posy <canvas. height ){
60. Spotlight. setattribute ("X", (posX-spotlight.width/2 ));
62. Spotlight. setattribute ("Y", (posY-spotlight.height/2 ));
64. // Calculate Angel and distance
66. VaR xx = posx-canvas. width/2;
68. VaR YY = (posy-canvas. Height/2 );
70. VaR distance = math. SQRT (math. Pow (XX, 2) + math. Pow (YY, 2 ));
72. VaR angle = math. atan (yy/xx)/(math. PI/180 );
74. If (XX <0 ){
76. Angle + = 180
78. }
80. If (XX> = 0 & amp; YY <0 ){
82. Angle + = 360
84. }
86. Thetext. setattribute ("distance", distance/2 );
88. Thetext. setattribute ("angle", angle + 180 );
90. }
92. ]>
94. </Handler>
98. <Class name = "demotext" extends = "text">
100. <! -- As3 import statements -->
102. <Switch>
104. <When property = "$ as3">
106. <Passthrough>
108. Import flash. Filters. dropshadowfilter;
110. </Passthrough>
112. </When>
114. </Switch>
118. <! -- Shadow distance -->
120. <Attribute name = "distance" value = "12"/>
122. <! -- Shadow angle -->
124. <Attribute name = "angle" value = "0"/>
126. <! -- Blur X -->
128. <Attribute name = "blurx" value = "5"/>
130. <! -- Blur y -->
132. <Attribute name = "blury" value = "5"/>
136. <! -- Xoffset for CSS Dropbox -->
138. <Attribute name = "_ xoffset" value = "0"/>
140. <! -- Yoffset for CSS Dropbox -->
142. <Attribute name = "_ yoffset" value = "0"/>
146. <! -- Reference to the Flash dropshadowfilter object -->
148. <Attribute name = "shadowfilter" value = "null"/>
152. <Handler name = "oninit">
154. This. addboxshadow ()
156. </Handler>
160. <Method name = "addboxshadow">
162. If ($ DHTML ){
164. // LZ. Text clipping active, which wocould cut off the shadow in DHTML
166. // Workaround for http://jira.openlaszlo.org/jira/browse/LPP-8415
168. This. getmcref (). style. Overflow = "visible ";
170. This. getmcref (). firstchild. style. Overflow = "visible ";
172. This. getmcref (). firstchild. style. Clip = "";
174. This.css calculateoffset ();
176. VaR cssstring = "#333" + _ xoffset + "PX" + _ yoffset + "PX" + blurx + "PX ";
178. Debug. Write (cssstring );
180. This. getmcref (). style. textshadow = cssstring;
182. } Else {
184. /* Dropshadowfilter constructor values:
186. * [Distance: Number]
188. * [Angle: Number]
190. * [Color: Number]
192. * [ALPHA: Number]
194. * [Blurx: Number]
196. * [Blury: Number]
198. * [Strength: Number]
200. * [Quality: Number]
202. * [Inner: Boolean]
204. * [Knockout: Boolean]
206. * [Hideobject: Boolean])
208. */
210. This. shadowfilter = new flash. Filters. dropshadowfilter (this. distance, this. angle,
212. 0x333333, 0.95, this. blurx, this. blury, 1, 2, false );
214. // Have to remove mask on Sprite for swf8 Runtime
216. // Workaround for http://jira.openlaszlo.org/jira/browse/LPP-8426
218. If ($ as2 ){
220. This. Sprite. removemask ();
222. }
224. Updateswffilter ();
226. }
228. </Method>
232. <Handler name = "onangle">
234. If ($ as2 | $ as3 ){
236. This. shadowfilter. angle = This. angle;
238. This. shadowfilter. Distance = This. distance;
240. This. shadowfilter. blurx = This. blurx;
242. This. shadowfilter. blury = This. blurx;
244. Updateswffilter ();
246. } Else if ($ DHTML ){
248. This.css calculateoffset ();
250. VaR cssstring = "#333" + _ xoffset + "PX" + _ yoffset + "PX" + blurx + "PX ";
252. This. getmcref (). style. textshadow = cssstring;
254. }
256. </Handler>
260. <Method name = "updateswffilter">
262. This. Sprite. getmcref (). Filters = [This. shadowfilter];
264. </Method>
268. <Method name = "csscalculateoffset">
270. // Css3 doesn't use angle, but x/y offset. So we need
272. // Translate from angle and distance to x and y offset for css3.
274. // Math. Cos and math. Cos are based on radians, not degrees
276. VaR radians = This. Angle * Math. PI/180;
278. This. _ xoffset = math. Round (math. Cos (radians) * This. Distance );
280. This. _ yoffset = math. Round (math. Sin (radians) * This. Distance );
282. </Method>
286. </Class>
290. <Demotext align = "center" Y = "$ {canvas. Height/2-this.height}" id = "thetext" clip = "false"
292. Fontsize = "70" fontstyle = "bold" fgcolor = "# 2c657a" opacity = "1.0"> openlaszlo </demotext>
296. <View id = "wall" resource = "openlaszlores" Y = "$ {canvas. Height-180}"/>
300. <View id = "spotlight" x = "$ once {canvas. width/2-this.width/2} "Y =" $ once {canvas. height/2-this.height/2} "resource =" spotlightres "/>
302. </Canvas>

<? XML version = "1.0" encoding = "UTF-8"?> <! -- * Gpl_copyright_begin ************************************* * ********* Copyright 2009 Raju bitter * use is subject to license terms. * This program is free software: You can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the license, or * any later version. ** this program is distributed I N the hope that it will be useful, * but without any warranty; without even the implied warranty of * merchantability or fitness for a participant purpose. see the * GNU General Public License for more details. ** you shoshould have written ed a copy of the GNU General Public License * along with this program. if not, see 
 and if you built some other cool demos with css3 or HTML5 support, please ping me!