OpenLaszlo CSS3 text-shadow demo

Following my two posts last week on OpenLaszlo, HTML5, CSS3 and open standards based Flash-like RIAs (OpenLaszlo, HTML 5 and CSS3 – driving adoption of open standards in RIAs, and OpenLaszlo and JavaScript/DHTML – migrating RIAs from Flash to Open Standards), I decided to put together a demo of what it would mean to have CSS3 features implemented across SWF and JavaScript/DHTML/Ajax runtime for OpenLaszlo. You can try this embedded application with either Safari 4.x, Webkit or Firefox 3.5+ – and probably Google Chrome, which I haven’t tested just tested, and worked fine.

In case you don’t have a modern browser installed on your machine, or have Internet Explorer only, check this video. Look how similar the application behaves within JavaScript/DHTML, SWF8 and SWF9!

Get the latest Flash Player to see this player.

If you are interested, here’s the source code for this proof-of-concept. This is no production-ready code. but it will make it clear with how little extra coding the CSS3 and HTML 5 features can be implemented in OpenLaszlo. Which means, if you don’t only want to build cool demo pages showing the HTML 5 and CSS3 extension features, join our effort to make OpenLaszlo the best RIA platform for building Flash-like, open standards based RIAs.

<?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 in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 * GPL_COPYRIGHT__END ****************************************************** -->
<canvas width="600" height="300" bgcolor="#eeeeee">

  <button x="10" y="10" text="Create shadow"
      onclick="shadowView.addBoxShadow();rotButton.setAttribute('enabled', true)" />

  <button id="rotButton" x="10" y="40" text="Rotate shadow" enabled="false"
      onclick="this.setAttribute('enabled', false);shadowView.rotateShadow()" />

  <view id="outer" x="50" y="100" width="400" height="140">
    <text id="shadowView" align="center" valign="middle" text="OpenLaszlo"
    	  fontsize="64" fontstyle="bold" clip="false" fgcolor="#0b5191">
      <!-- AS3 import statements -->
      <switch>
        <when property="$as3">
          <passthrough>
                        import flash.filters.DropShadowFilter;
          </passthrough>
        </when>
      </switch>

      <!-- Shadow distance -->
      <attribute name="distance" value="12" />

      <!-- Shadow angle -->
      <attribute name="angle" value="45" />

      <!-- xoffset for CSS DropBox -->
      <attribute name="__xoffset" value="0" />
      <!-- yoffset for CSS DropBox -->
      <attribute name="__yoffset" value="0" />

      <!-- Reference to the Flash DropShadowFilter object -->
      <attribute name="shadowfilter" value="null" />

      <animator name="shadowAnim" attribute="angle" from="45" to="405" duration="1500"
            start="false" onstop="rotButton.setAttribute('enabled', true)" />

      <method name="rotateShadow">
        this.shadowAnim.doStart();
      </method>

      <method name="addBoxShadow">
        if ($dhtml) {
          this.cssCalculateOffset();
          var cssString = "#333 "+ this.__xoffset +"px "+ this.__yoffset+"px 5px";
          this.getMCRef().style.textShadow = cssString;
        } else {
          var shadowView = new lz.view(this, {'width':this.width, 'height':this.height});
          /* DropShadowFilter constructor values:
           *  [distance:Number]
           *  [angle:Number]
           *  [color:Number]
           *  [alpha:Number]
           *  [blurX:Number]
           *  [blurY:Number]
           *  [strength:Number]
           *  [quality:Number]
           *  [inner:Boolean]
           *  [knockout:Boolean]
           *  [hideObject:Boolean])
           */
          this.shadowfilter = new flash.filters.DropShadowFilter(this.distance, this.angle,
          		0x333333, 1.0, 4, 4, 1, 2, false, false, false);
          updateSWFFilter();
        }
      </method>

      <handler name="onangle">
        if ($as2 || $as3) {
          shadowfilter.angle = this.angle;
          updateSWFFilter();
        } else if ($dhtml) {
          this.cssCalculateOffset();
          var cssString = "#333 " + this.__xoffset + "px " + this.__yoffset + "px 5px";
          this.getMCRef().style.textShadow = cssString;
        }
      </handler>

      <method name="updateSWFFilter">
        if ($swf8 ) {
          outer.sprite.getMCRef().filters = [shadowfilter];
        } else if ($as3) {
          this.sprite.getMCRef().filters = [shadowfilter];
        }
      </method>

      <method name="cssCalculateOffset">
        // CSS3 doesn't use angle, but x/y offset. So we need to
        // translate from angle and distance to x and y offset for CSS3.
        // Math.cos and Math.cos are based on radians, not degrees
        var radians = this.angle * Math.PI/180;
        this.__xoffset = Math.round(Math.cos(radians) * this.distance);
        this.__yoffset = Math.round(Math.sin(radians) * this.distance);
      </method>
    </text>
  </view>

</canvas>

Tagged as: ajax, css3, dhtml, html5, javascript, OpenLaszlo, opensource, openstandards