With the introduction of the iPhone many of the leading RIA frameworks have been investigating ways to apply the same technologies which we use for building RIAs to mobile application development. Fully-fledged browsers on smartphones (iPhone, Android, Palm/webOS, and others) make it possible to run large JavaScript applications on phones, but there are some challenges every project faces:

• Performance optimization necessary for mobile devices.
• More modular JavaScript libraries to reduce initial parse time.
• Adjusting component design to smaller screens and the fact the many mobile apps are using finger based touch instead of mouse pointers and keyboard.
• Touch-enabling existing components to support full user interaction on multi-touch devices.
• Installation of RIAs as native applications on the phone, typically solved by the application of a framework like PhoneGap or Appcelerator providing a headless browser inside the app, into which the RIA is loaded.
• Tools for automatic packaging for deployment as W3C or Opera widget as well as Adobe AIR 2.0 application.
• Access to native phone APIs out of JavaScript or ActionScript.

OpenLaszlo faces the same challenges, when you try to deploy run apps on mobile devices, either hosted or as an installable application.

Mobile OpenLaszlo – the past

There have been some initiatives by Laszlo in the past year to create a mobile runtime for OpenLaszlo, and there has been a proof-of-concept for a J2ME based mobile app, Project Orbit. In 2006 Sun started a cooperation with Laszlo code-named Orbit. The idea was to create a Java bytecode generator for OpenLaszlo, compiling LZX source code into Java bytecode. The project scope was reduced, and in 2007 a proof-of-concept was shown running an OpenLaszlo DHTML application inside a J2ME Java stack, loaded into the Rhino scripting engine. Many OpenLaszlo community members and companies using the technology expected a mobile runtime in the not-to-distant future, but unfortunately that never happened.

The technical approach the engineers on the project chose resembles the approach of the excellent PhoneGap framework, where you can build a native application for a range of devices and just load HTML/JavaScript content into the application using a WebView/UIWebView component – which is a headless browser. If you don’t know PhoneGap, check the About PhoneGap page first. The advantage of that approach is clear: You don’t need to generate a native application out of your source code, but can re-use JavaScript code for a number of devices with a WebView like component, running on top of an abstraction layer provided by the framework.

Deploying mobile OpenLaszlo apps

We all – the OpenLaszlo community members – have been waiting since 2007 for any sign that Laszlo will start working on a mobile runtime, or that there is at least some initiative for mobile OpenLaszlo apps using a light-weight approach. Unfortunately nothing happened. That’s a bit surprising, since there are enough open standards and open source frameworks available at no cost, which can be combined with OpenLaszlo to provide powerful mobile app development capabilities.

Knowing how little it would take to build proof-of-concepts for OpenLaszlo apps running on smartphones through PhoneGap, as a W3C widget or mobile Flash/AIR app I’ve decided to initiate the Mobile OpenLaszlo project as a community R&D or labs project to show what can be done with OpenLaszlo on mobile devices NOW, without huge investments into new runtimes – based on the ongoing improvement of the OpenLaszlo platform funded by Laszlo and other sponsors.

Click the image for a larger version.

The idea is to create a set of tools and proof-of-concepts for mobile OpenLaszlo applications, using a range of existing standard, technologies and frameworks. The goal is to have OpenLaszlo applications running on smartphones, the Apple iPad and similar devices, devices supporting standards like W3C widget, Opera Widget, and JIL as well as to the runtimes supported by Adobe’s Open Screen Project (Flash 10.1 and Adobe AIR 2.0).

Why a separate initiative and not under the umbrella of OpenLaszlo?

Timing and development speed: With Laszlo things are just painfully slow. Everyone is expecting mobile support now, and not in maybe 2 years or later. After seeing other Laszlo initiatives – like the OpenLaszlo IDE announced in 2008- fade away, I’m careful to not see another good idea die. Laszlo’s communication around the OpenLaszlo project hasn’t been exactly clear in the past years. Wonder what the mobile strategy is for Laszlo Webtop or OpenLaszlo? Try to search for the term “mobile” on the corporate website, and all you get is an outdated product page. Same is true for the OpenLaszlo project roadmap, no sign of mobile support.

My experience with the OpenLaszlo team is very different in that respect: Responsive, excited about technical innovations, quickly adopting HTML5 features into the OpenLaszlo platform – true advantages of an open source based development approach. Laszlo should seriously consider to launch a non-profit OpenLaszlo foundation like the Dojo Foundation, to motivate companies and developers using OpenLaszlo to contribute, and to open up the decision making process for new features, the OpenLaszlo roadmap and a long term strategy. Complaining that there is not enough contribution from OpenLaszlo adopters – and not opening up – doesn’t work well, based on my experience. As a result of the current situation, I’m convinced that – without a non-profit OpenLaszlo foundation in place – the Mobile OpenLaszlo initiative should be run as a separate project, independent of Laszlo’s direct influence.

Mobile OpenLaszlo – Ubiquitous W3C Widgets and Mobile Apps with OpenLaszlo

Mobile OpenLaszlo will speed up development of tools and best practices for building mobile OpenLaszlo apps. Sharing ideas and concepts, putting those ideas into practice as proof-of-concepts and demonstrators, publishing tutorials on mobile OpenLaszlo development – all in a community driven open source project. Companies and OpenLaszlo community members interested are invited to join the project.

The Mobile OpenLaszlo source code is currently hosted at GitHub. The community discussion is lead the mobile OpenLaszlo mailing list, which is hosted at OpenLaszlo.org. Read this introduction on MobileOpenlaszlo in the Wiki, where you will find a other interesting pages on the project as well (OpenLaszlo & PhoneGap, OpenLaszlo & W3C Widgets, etc.). All source code will be published under the OSI certified MIT License.

As soon as an OpenLaszlo Foundation exists, all code and products built as part of the Mobile OpenLaszlo project would be immediately donated to such a non-profit foundation, which would have my full support. I believe that OpenLaszlo as a relevant RIA and mobile platform in today’s competitive market will only stand a chance if the contribution and sponsorship model is completely revised, and that would be to the benefit of Laszlo as a company as well.

After all the talk about the project, back to what we really want to see: First proof-of-concepts for Mobile OpenLaszlo in action. Well, here you go:

OpenLaszlo native Android App

This application is a small OpenLaszlo demo I wrote last year to show how some of the HTML5/CSS3 features can be used in OpenLaszlo today. The application is deployed as a native Android 2.1 application on the Google Nexus One smartphone, utilizing the excellent PhoneGap framework.

PhoneGap’s JavaScript API connecting directly to the phone’s hardware (in this case the accelerometer) can be called directly of of the LZX code, here’s an excerpt of the program code:

  <handler name="oninit">
    <![CDATA[
    var opt = {};
    opt.frequency = 100;
    if (typeof navigator != 'undefined' &&
      typeof navigator.accelerometer != 'undefined') {
      navigator.accelerometer.watchAcceleration(this.accelCallback, this.accelFailure, opt);
    }
    ]]>
  </handler>
  <method name="accelCallback" args="acc">
    // Landscape mode, acc.y translates to x position
    var newY = canvas.height/2 - acc.x * (canvas.height/20);
    var newX = canvas.width/2 - acc.y * (canvas.width/20);
    theText.updateShadow(newX, newY);
  </method>

Through the navigator object you can access the full PhoneGap JavaScript API. I will post a tutorial showing how you can build your own Android apps using OpenLaszlo & PhoneGap later this week, and post the link to the tutorial here.

W3C widget generation support

One of the first proof-of-concepts I built is an Apache Ant based tool for compiling an LZX file into a W3C/Opera widget available. Here is a screen casts showing how that can be used to directly convert an LZX file into a *.wgt file, packaged for installation:

When I told the OpenLaszlo team about the possibility to generate W3C widgets out of OpenLaszlo apps, the team showed a lot of interest and gave me the information I needed to integrate with the OpenLaszlo deployment tools (thanks, Tucker & Henry!). The next step was to get the Ant script running and some templates prepared to generate the *.wgt file, as a proof-of-concept. Once that worked, the decision was made to include such a functionality into the OpenLaszlo platform at some time in the near future, since the modifications can easily be made to the current deployment tool to generate a *.wgt instead of an *.zip file for deployment. The corresponding JIRA issue (LPP-9148) has been entered, you should find updated information on the implementation status there.

Join the Community!

If you are interest in the Mobile OpenLaszlo project, please feel free contact me directly (rajubitter[at]gmail.com), join the mailing list and become involved. If you are interested in professional consulting for building OpenLaszlo widgets or mobile OpenLaszlo apps, the project will soon host a list of contributors (developers and companies) offering professional service for building mobile OpenLaszlo applications.

Last year – in a discussion about what could be the next feature for a multi-runtime RIA platform like OpenLaszlo – the former OpenLaszlo director Jim Grandy came up with the idea of generating either JavaScript or OpenLaszlo’s XML based LZX source code out of exisiting SWF files. Today heise.de reported the launch of project Gordon by Munich based Tobias Schneider. Gordon is “An open source Flash™ runtime written in pure JavaScript”. You’ll find some demos of the current version of Gordon here, and the source code is available on githup. Technically Gordon translates the SWF tags into SVG through a JavaScript SVG renderer. The project wiki contains information on the supported browsers as well as the supported SWF tags (SWF 1.0).

Check this picture of one of the oldest Future Splash demos (Future Splash is the old name of Flash before the technology was bought by Macromedia) running on an iPhone through Gordon.

Gordon - rendering an old Future Splash demo on the iPhone

That reminds me of the Henry Minky’s demo rendering OpenLaszlo’s XML into SVG (instead of Flash or JavaScript code). The question is, how much of the advanced interactivity the SWF format offers can be reproduced using SVG? An interesting post in the Open Web Advocacy Group titled “A Rant about SVG” discusses the various technical difficulties around using SVG and JavaScript in modern browsers.

Without being an expert on the SVG subject I have the feeling that there are still a few shortcomings if you plan to build full applications using SVG – if you plan to have the apps running in the various versions of IE in the market. But Gordon is definitely an interesting project, very much welcomed by anyone interested in an more open standards way of building Flash-like apps for the web.

Just after finishing my last post on downloadable font support, I saw another update to OpenLaszlo trunk, containing the code to support rounded corners in the JavaScript/DHTML runtime. Here’s a a screenshot of the application in SWF10:

OpenLaszlo rounded corners in SWF10

While that has been possible in Flash for years, here’s the more interesting part: the same application running in DHTML, showing the rounded corners for Webkit, Safari and Firefox. It should work in Chrome as well, but there’s a still a small bug which will be fixed:

For a re-design of the OpenLaszlo components these features will give the OpenLaszlo team a lot more flexibility. At the same time application performance should increase (less views need to be generated) and download size should be drastically reduced (due to the lack of multiple request made to the art assets used for skinning).

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 visually 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 inspired 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):

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 across runtimes.

I believe this demo underlines what I’ve said in my previous blog, that OpenLaszlo can be one of the key technologys 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 would 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.

<?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="400" bgcolor="#FFFFFF" proxied="true">

  <!-- Resources -->
  <resource name="spotlightRes" src="spotlight.png" />
  <resource name="openlaszloRes" src="OpenLaszlo-Header.png" />

  <!-- reposition boxes depending on mouse x-pos -->
  <handler name="onmousemove" reference="lz.GlobalMouse"><![CDATA[
    var posX = canvas.getMouse('x');
    var posY = canvas.getMouse('y');
    if (posX>0 &amp;amp;&amp;amp; posY>0 &amp;amp;&amp;amp; posX<canvas.width &amp;amp;&amp;amp; posY<canvas.height) {
      spotlight.setAttribute("x", (posX-spotlight.width/2));
      spotlight.setAttribute("y", (posY-spotlight.height/2));
      // Calculate angel and distance
      var xx = posX - canvas.width/2;
      var yy = (posY - canvas.height/2);
      var distance = Math.sqrt(Math.pow(xx, 2) + Math.pow(yy, 2));
      var angle = Math.atan(yy/xx)/(Math.PI/180);
      if (xx<0){
        angle+=180
      }
      if(xx>=0 &amp;amp;&amp;amp; yy<0) {
        angle+=360
      }
      theText.setAttribute("distance", distance/2);
      theText.setAttribute("angle", angle+180);
    }
  ]]>
  </handler>

  <class name="demotext" extends="text">
      <!-- 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="0" />
      <!-- blur X  -->
      <attribute name="blurx" value="5" />
      <!-- blur Y -->
      <attribute name="blury" value="5" />

      <!-- 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" />

      <handler name="oninit">
        this.addBoxShadow()
      </handler>

      <method name="addBoxShadow">
        if ($dhtml) {
          // lz.text clipping active, which would cut off the shadow in DHTML
          // Workaround for http://jira.openlaszlo.org/jira/browse/LPP-8415
          this.getMCRef().style.overflow = "visible";
          this.getMCRef().firstChild.style.overflow = "visible";
          this.getMCRef().firstChild.style.clip = "";
          this.cssCalculateOffset();
          var cssString = "#333 "+ __xoffset +"px "+ __yoffset+"px "+ blurx + "px";
          Debug.write(cssString);
          this.getMCRef().style.textShadow = cssString;
        } else {
          /* 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, 0.95, this.blurx, this.blury, 1, 2, false, false, false);
          // Have to remove mask on sprite for SWF8 runtime
          // Workaround for http://jira.openlaszlo.org/jira/browse/LPP-8426
          if ($as2) {
            this.sprite.removeMask();
          }
          updateSWFFilter();
        }
      </method>

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

      <method name="updateSWFFilter">
          this.sprite.getMCRef().filters = [this.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>

  </class>

  <demotext align="center" y="${canvas.height/2-this.height}" id="theText" clip="false"
        fontsize="70" fontstyle="bold" fgcolor="#2c657a" opacity="1.0">OpenLaszlo</demotext>

  <view id="wall" resource="openlaszloRes" y="${canvas.height-180}" />

  <view id="spotlight" x="$once{canvas.width/2-this.width/2}" y="$once{canvas.height/2-this.height/2}" resource="spotlightRes" />
</canvas>

And if you built some other cool demos with CSS3 or HTML5 support, please ping me!

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!

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>

Since 2007 the OpenLaszlo team and community members have built a number of small demos showing how features of the upcoming CSS3 improvements like CSS 3D Transforms Module Level 3 and HTML 5 standard could be supported in OpenLaszlo. While those early demos showed us what could be done with HTML, JavaScript and CSS, Firefox 3.5 and Safarix 4.x have enough support and performance to build these features into OpenLaszlo. Test the performance of this OpenLaszlo rotation demo, the Safari/Webkit performance in DHTML runtime is better than Flash 8 right now.

I’ve built some demos with OpenLaszlo, showing very good performance of Firefox and Safari for HTML5/CSS 3 features. Here are two videos for all of you who are still using old browsers, everyone else can test the demos directly, if you follow the link to the original blog post:

OpenLaszlo CSS3 rotation – Koosh Balls
[See post to watch Flash video]

Webkit CSS based 3d transforms applied to OpenLaszlo DHTML
[See post to watch Flash video]

Another HTML 5 demo wich was twittered today shows a fancy animation (JavaScript tracing library, as it looks) and background music playing, all done with open standards based technology. Here’s a video of the application if you don’t have the latest browser installed.

The integration of these and even fancier features – like CSS 3D Transform – into existing JavaScript/Ajax libraries will be relatively easy to do, but how many of your users are going to be able to see the application with all these features? It all comes down to browsers and market shares, and here some numbers from Net Applications.  According to this blog post they get the data from 160 million users on a global level. Here are the number they present for August 09.

Net Applications - global market share of browser and versions

So much for people saying: Flash and Silverlight will be dead with HTML 5! Seeing these numbers it can be estimated that probably more than 30-40% of the Internet users by the end of 2010 will still use Internet Explorer, with only limited support in IE8 for HTML5.

Driving HTML 5 and CSS 3 adoption with OpenLaszlo

OpenLaszlo offers a solution here: the RIA platform has a solid Flash runtime, which has been developed for more than 8 years now. Currently supporting Flash8/Flash9, but you can test with Flash 10 as well.

OpenLaszlo Compiler - selecting a runtime

OpenLaszlo supports generation of Flash and JavaScript/Ajax application from the same code base, without making any changes to the code.  Don’t be tricked by the entry DHTML, the feature means you have JavaScript generated as output.

That means: you can start using all of the exciting new HTML 5 and CSS3 extension features, and still have a backup for IE users with the Flash version of the application. And OpenLaszlo apps run on iPhone and Palm Pre as well, which means: you are not limited to applications for PCs.

HTML 5 video – open video for the web?

The battle for open standards based web video continues. While it seemed that there could be a general agreement on codecs earlier this year, a few weeks ago it showed that it will be as difficult as expected to win support for one codec by makers of Firefox, Safari and Opera – not to talk about Microsoft and IE here. Technically it’s easy to include open standards based video into  OpenLaszlo DHTML applications, and the haXe team has proven that you can support codecs like Ogg and Vorbis in Flash as well.

Right now all of this is experimental: if you want to do web video, and offer an open standards based version of your application – you would have to develop two different versions. OpenLaszlo can help here as well, with a little bit of work full support of open video can be brought into the platform, and the community is working on that already.

And if you want to access the microphone and webcam out of your browser, Flash is still the only cross-platform solution able to doing that – despite all the Silverlight and JavaFX hype. Which means, with OpenLaszlo you have full support for the complete Flash features of the Flash version you are compiling for.

Sounds impressive? It is, and while the OpenLaszlo community has been shrinking in the last 2 years due to the heavy marketing of competing platforms, the technology is ready for a comeback: And you can be part of it!

Frédéric Saunier created a JIRA feature request in the Adobe bug database, asking for an open source version of Adobe Flash Player. In a blog post he has more details on what is meant by that:

A lot of things are currently moving around Flash technology, like the W3C hardly looking for royalty-free, open source solutions for HTML5. Open video player initiative. Silverlight 3 becoming now mature on Windows, Mac, and soon Linux. Google buying On2 video solution (the same video codec still in use by Flash Player). And many other things that some of you even better know than me.

Flash is not only a video and audio player. It has created a community, allowing ton of incredible developments to appear on the Internet. Its powerful capabilities to create user interfaces, Rich Internet Applications must became something that anybody can benefits by open-sourcing what at least can be open-sourced in the current player. Many things are quite over my understanding regarding marketing or legal issues under that. But I want that Adobe knows that people want an open source Flash Player.

Reading what people said on Twitter yesterday following the announce of Google buying ON2and the Ted Patrick’s blog post asking for people to log bugs and feature requests onbugs.adobe.com, I really want to tell Adobe that I want they open-source the Flash Player. I so have a look to the bugs.adobe.com website to find the appropriate issue on which to vote for. Surprisingly nobody never created an issue for it, it’s why I have created one.

I can only second Frédéric’s request and voted for it already – not that I think Adobe is going to react to this request. My experience with the FP-40 bug has showed me, that Adobe isn’t that good at communicating with us – the Flash community.

Since the first announcement of the DHTML runtime for OpenLaszlo in March 2006, the OpenLaszlo team has been working hard on improving the DHTML runtime – making it possible to run very large and complex RIAs as both Flash and Ajax/JavaScript applications. The release of a first version of OpenLaszlo with official support for DHTML came in March 2007. There was a lot of excitement around the release, but as it is with new technologies – some frustration as well. Anyone with technical expertise will admit that the support of as different runtimes as ActionScript2 bytecode and JavaScript 1.6 is not a trivial task.

Making the same application run in Firefox and Safari – and the little-loved and troublesome Internet Explorer 6 & 7- required probably more effort than originally estimated. As an OpenLaszlo user for 5 years – I did my first LZX coding in July 2004 – for a long time I was hesitant to use the DHTML runtime in projects, and there were some good reasons for that – at least in my eyes:

• Doubts about quality of DHTML support in older browser  - especially in IE6, but IE 7 as well
• Limited performance of large Ajax/JavaScript applications in older browsers – including Safari and Firefox back in 2007/early 2008
• Added risk in projects: I knew that the Flash runtime with OpenLaszlo 3.x was very solid, and didn’t want to lose the luxury of not having to care about cross-browser scripting
• Little knowledge of the DHTML runtime implementation within the OpenLaszlo server

Other community members were quicker in adopting the DHTML runtime, but I had the feeling that many of them were dissatisfied with the quality of the DHTML runtime in earlier versions of the OpenLaszlo server. With OpenLaszlo, the quality of a runtime very much depends on how actively the runtime is used by companies in larger, demanding projects. Using a runtime in such a project definitely speeds up work on bugs and new features – as could clearly be witnessed with the SWF9 runtime and g.ho.st’ involvement and sponsoring.

OpenLaszlo DHTML runtime ready for prime-time

Maybe this sounds provocative, but – based on my knowledge of the platform – I’d say that starting with the 4.4 release of OpenLaszlo the DHTML runtime is ready for prime-time. Which means, the OpenLaszlo team and external committers – especially André Bargull with his amazing free support of the platform – have done an excellent job at creating what I consider the leading platform for creating state-of-the-art JavaScript/Ajax application. If you see Laszlo Webtop running as a DHTML/JavaScript application, you’ll understand what I mean. I stress the word “application” here, very complex applications – and not simple RIAs or web widgets.

And the timing couldn’t be better, with new exciting CSS and HTML features supported by the better browser, like Firefox, Webkit/Safari and Opera. Opera is not fully supported, but based on my testing the DHTML runtime works well in Opera (officially, DHTML is supported on any browser that adheres to DOM2 and CSS2.1 standards, which Opera is very good at; “official support” by OpenLaszlo means, that work arounds  for standard non-compliance in browsers will be added to the platform).

OpenLaszlo multi-runtime – transitioning the web from Flash to open standards based RIAs

This is – what I believe – should be at the core of the strategy for OpenLaszlo:

“The only RIA framework capable of delivering Flash-like UIs for all browsers, powering the transition from Flash to open standards!”

Does that mean that I’d use OpenLaszlo to build pure DHTML/JavaScript applications now? You could do that, but I don’t see the real value of OpenLaszlo in delivering Ajax/JavaScript-only applications, if you plan to deploy the application for consumers using PCs (for mobile devices like the iPhone, it’s a different story, more on that later). If you have control over the browser which is used to access the OpenLaszlo application, providing only a DHTML/JavaScript application can be very interesting (take for example embedded devices like set-top-boxes, where you have Webkit pre-installed and no Flash Player, saving royalties).

I believe that the real power of the platform lies within the fact, that you can build very innovative Ajax applications showing many of the exciting new features supported in new versions of Firefox, Webkit, Safari and Opera – and still have a Flash backup  of your application for Internet Explorer and older versions of Firefox and Safari. Features like HTML5 video, HTML5 audio, downloadable fonts, push-to-client, and the 3D effects possible with Flash Player 10 and CSS transform.

Following such a strategy, we – the OpenLaszlo team, committers and active community members – should add these features to the platform:

• Open video and audio support with HTML5 video and audio tags (http://jira.openlaszlo.org/jira/browse/LPP-8290)
• Support for downloadable fonts in DHTML (http://jira.openlaszlo.org/jira/browse/LPP-8313)
• Support for box-shadow and text-shadow across DHTML and SWF runtime (http://jira.openlaszlo.org/jira/browse/LPP-8399)
• Support for persistent connections (push-to-client) across runtimes (utilizing RTMP for SWF – either BlazeDS or Red5, and Comet approaches for DHTML)
• x-axis rotation for all runtimes (already in TRUNK, just added that for Firefox with this changeset)
• Support for CSS transform in DHTML and the 3d effects in Flash Player 10 (here’s a proof-of-concept for CSS-based y-axis rotation I did a few weeks ago, and a Flash 10 demo Henry Minsky put together last summer, and the JIRA entry http://jira.openlaszlo.org/jira/browse/LPP-8338)

A new OpenLaszlo Dashboard – with multimedia and realtime features in the DHTML runtime

If you add these features to the platform, we could build a new, more fancy DHTML version of the Laszlo Dashboard, with new features like 3D effects in components, HTML 5 based video and audio playback, real-time chat in both Flash and DHTML runtime, custom-fonts in both SWF and DHTML:
[See post to watch Flash video]

OpenLaszlo on phones and mobile devices

With more powerful smart-phones appearing every few months – integrating modern JavaScript engines like Webkit – the DHTML runtime is even more valuable. The first generation of the iPhone could already run OpenLaszlo applications, as Ben Shine and Bret Simister proved with this application at the first iPhoneDevCamp in San Francisco, 2007. But the performance of the 1st and 2nd generation iPhone CPU wasn’t that good, and the initial download of the application and initialization took too long on those phones. That definitely changed with the Palm Pre and iPhone 3GS.

OpenLaszlo gives you a choice of DHTML applications for smartphones without Flash Players, and the additional Flash runtime for the upcoming Flash Player 10 beta in October 09, for both webOS/Palm Pre and Android phones.

A splendid 6th year of OpenLaszlo in 2010

On October 4th we can celebrate 5 years of OpenLaszlo as an open source project. I believe that the 6th year will bring the breakthrough for the DHTML runtime. I haven’t regretted my decision to not jump on the Adobe Flex train or switch over to pure Ajax development. Flash has been a huge success, is still very succesful, but I believe the technology has peaked. It is going to stay around, but it’s not going to play the role it has played for paving the way of RIAs, as it has done in the last 9 years. With OpenLaszlo, you can still use the fantastic features of Flash, like access to the camera and microphone, all the multimedia features. And at the same time you can participate in the next technical revolution of the web, a move from closed to open standards for highly-interactive, real-time rich Internet applications.

Open source projects like OpenLaszlo depend on the community as much as they depend on corporate sponsoring: OpenLaszlo nears its 5th anniversary as an open source success story in October 09. It’s only natural that bugs build up in a project over such a long time, and now the OpenLaszlo core team and committers ask the global OpenLaszlo community for help in cleaning up the OpenLaszlo JIRA bug database.

You are using OpenLaszlo in your projects? Have you ever wondered how you could get started contributing to OpenLaszo? Have you been watching the growth of the OpenLaszlo community, wondering where you could fit in? Well, here’s the answer: With the help of some OpenLaszlo core team members and external committers, we’re going to see what we can do to cut down the number of open tickets, encourage more people to get involved with the OpenLaszlo source, and last of all – have some fun.

It might have been a bit quiet around OpenLaszlo in the past months, but the quality of the DHTML runtime has been dramatically improved. Companies like Google have proven how JavaScript/Ajax can be used to build complex applications running inside the brower. Well, OpenLaszlo is part of the Ajax revolution. As the only major RIA framework supporting Flash and JavaScript/Ajax versions of the same applications – but I don’t have to tell you I guess.

How you can help?

• Review some of the bugs that are more than 2 years old to see if they are still valid. Try the test case and see if it is still a problem. Either comment in the bug (including the version in which you tested it), or send an email to the laszlo-dev list with the results and we’ll take care of dispensing it within JIRA
• Look for duplicates before filing a new bug. If you find some, let us know which are duplicates and we’ll consolidate them
• Pick an area of your interest/expertise in OpenLaszlo. Review the open bugs in that category and comment them with your findings (or send us an email).

I’ve been using OpenLaszlo since October 2004, and have been working as a community member and inside Laszlo with the OpenLaszlo team. I’ve to admit, it has been one of my best working experiences so far. We can see that people all around the globe are using the technology, let’s virtually connect and make OpenLaszlo even better.

Where’s the fun?
If that’s not enough, how about joining me for a fun 5 years of OpenLaszlo party in Munich in October? I’m still looking for other community members interested in joining me! The OpenLaszlo team did some Laszlo, Pizza and Beer parties over the in the U.S. a while back: who’s ready to join me for an OpenLaszlo,  Pretzel and Beer party in Munich? I can imagine that Keiji Ono would be willing to set up an OpenLaszlo, Sushi and Beer party in Japan, what do you think, Keiji-san?

When Larry Ellison spoke at JavaONE this year, he mentioned the importance of Java, JavaFX and OpenOffice for Oracle’s strategy around the merger with Sun.

“We encourage the OpenOffice group to quickly build their version of a spread sheet or a word app using JavaFX.”

And as the Channel Register reports:

The CEO has also made it clear he expects the Sun-backed OpenOffice project – and potential challenger to Microsoft’s Office – to dump AJAX and switch to Sun’s JavaFX for its web interface. Ellison’s declaration means he’s backing an emerging and largely Sun-only technology, while the majority of the web and the industry uses AJAX.

In classic alpha-Ellison mode, Oracle’s CEO committed his company to JavaFX in software and on devices and PCs: “We are very committed to see JavaFX exploited throughout Oracle and through Sun.”

“I’ve been meeting with all the different products groups inside of Sun, and one of the things I’m looking forward to is seeing libraries come out of the OpenOffice group that are JavaFX based,” Ellison said.

But how long is it going to take the C++ based OpenOffice and integrate it with the completely Java based Oracle middleware including a JavaFX frontend for the web? It’s definitely not the work of a few weeks, and there is already a web based office solutions that is 100% Java based, with better Microsoft Office file format compatibility: Thinkfree!

Thinkfree – Java based office solution for Windows, Linux, OS X, Netbooks, Android and MIDs
Thinkfree is owned by Haansoft, one of the largest Korean software companies, offering products like Hangul (HWP, the leading Korean text processing software), Asianux Linux and of course Thinkfree Office. Haansoft has been building word processors for 20 years now (starting in 1989), and still delivers the best-selling desktop office solution in South Korea.

Thinkfree has been developed since 2001. Originally developed as a desktop app, since 2006 the company offered a web based version of the software through Java Applet and Java Webstart technology. Thinkfree offers a bundle of products for different OS, devices and even server installations:

• Standard OS – Windows, Linux and OS X Edition
• Netbook Edition,  MID Edition
• Mobile – Android Edition
• Thinkfree Server for corporate networks
• Thinkfree Integrator – the server with APIs for integration with legacy systems
• Thinkfree Conversion Server

Thinkfree definitely would be a better candidate for migrating much web-integration layer to JavaFX. But the big question is: is JavaFX – in the current state – a good technology for achieving what Larry Ellison is asking for? Based on the feedback from the Java community, I’d say no. JavaFX currently is interesting for mobile apps, JavaFX TV and all the areas, where the speed and reliability of the JVM will add a lot of value to your software. Read Charles Ditzel’s blog post titled “What’s Wrong With JavaFX and What Needs Fixing ?” for a good description of what problems people seem to have with JavaFX.

Google on the other hand seems to very successful with the Google Apps Premier Edition offering. Large consulting companies like CapGemini already launched service offerings based on the product.

Google Apps Premier Edition & Cap Gemini
With the announcement of Google to move the Google Docs service offering out of beta, another strong competitor has entered the enterprise world of hosted office solutions. First signs that Google is ready to target enterprises with their office solution could be detected when Google signed a global partnership with CapGemini for the Google Apps Premier Edition – a service which CapGemini calls “Workplace Services”:

CapGemini is the first major professional services vendor to enter the Google Enterprise professional program and bring Google Apps Premier Edition to its mature and well-established desktop services practice, allowing clients to leverage years of its experience in incorporating new applications into existing IT infrastructures and ensure unrestricted movement between a Microsoft Office, Exchange/Outlook and Google Apps environments.

The partnership with CapGemini as early 2007 gave Google the credibility to say: you can migrate thousands of Windows PCs with Microsoft Office installed to netbooks or nettops running Linux and office within Firefox. Saving you considerable amounts of money through save license costs, low power consumption and heavily reduced IT management costs.

Web based office – Ajax or Java
If someone would have told me 6 years ago, that you can build a decent office solution running within the JavaScript engines of normal browsers, I wouldn’t have thought it’s possible. Google has built a very impressive application suite, that has been tested by thousands of people for almost 3 years now – and seems to be a very mature product.

Google Apps much more reflect the spirit of delivering light-weight office applications than large Java apps at a size of 50-100 MB. But there are still limitations to what you can do with JavaScript only. Just think of very large spreadsheets or office documents with hundreds of pages. I doubt that – even with the most modern browsers – memory management of the JavaScript engines can cope with such large amounts of data. But then applications like Google Apps are not built for that scenario, not for the power users of a Microsoft Office.

Java and JavaFX could be promising, if Oracle/Sun decide to come up with a Netbook/Mobile OS largely implemented in Java, and hopefully open source. Integrate that with a stripped down version of OpenOffice or Thinkfree Office and the Java appstore, and you would have a very interesting product. Google advantage is the integration of Google Apps with groupware functionality, Google Voice and Gmail. All these services have been used my millions of users, and based on what I’ve heard the integration is a lot easier than hiring a system integrator or Oracle to achieve the same. Google is far ahead of the competitors right now, and with Oracle and Sun it might still take a year until we see first versions of OpenOffice with a JavaFX UI.

And if you need proof of how hard Google attacks Microsoft in their key product market, take a look at the the just announced “Going Google” campaign. Here’s a video accompanying the “Going Google Campaign”: