How to build an OpenLaszlo DHTML application using

Question

I've read about OpenLaszlo's lzdeploy tool, but there seems to be only little documentation available.

It should be possible to build an OpenLaszlo DHTML application using Apache Ant (e.g. as part of an automated build process). How can the lzc and lzdeploy tool be used out of Ant to generate a compiled version of an OpenLaszlo application for the DHTML runtime, including the wrapper page?

Answer 1

Here is a full Ant build script which you can use with OpenLaszlo 5.0 (haven't tested with older versions).

<?xml version="1.0" encoding="UTF-8"?>
<project name="olApp" default="build" basedir=".">

  <description>Ant Build Script for OpenLaszlo DHTML App</description>

  <!-- OpenLaszlo canvas app filename -->
  <property name="app.file" value="testapp.lzx" />

  <!-- LPS home folder -->
  <property name="lps.home" value="PLEASE SET YOUR LPS_HOME FOLDER HERE!!!" />

  <!-- Build timestamp -->
  <property name="build.timestamp" value="will be the set through script below" />
  <script language="javascript">
    var date = new Date();
    var stamp = new java.text.SimpleDateFormat("yyyyMMdd-HHmmss").format(date);
    olApp.setProperty("build.timestamp", stamp);
  </script>

  <property name="project.folder" value="will be set through the script below" />
  <script language="javascript">
    var lpsHome = olApp.getProperty("lps.home"),
    basedir = olApp.getProperty("basedir"),
    fileSep = java.lang.System.getProperty("file.separator"),
    projectFolder = "app";
    olApp.setProperty("project.folder", projectFolder)
  </script>


  <!-- Default directories  -->
  <property name="lzx.dir" location="${basedir}/lzx" />
  <property name="build.dir" location="${basedir}/build" />
  <property name="temp.dir" location="${build.dir}/tmp" />
  <property name="release.dir" location="${basedir}/release" />

  <!-- CLASSPATH for Laszlo compiler lzc -->
  <path id="laszlo.compiler.classpath">
    <pathelement location="${lps.home}/WEB-INF/lps/server/build"/>
    <pathelement location="${lps.home}/WEB-INF/classes"/>
    <fileset dir="${lps.home}/WEB-INF/lib" includes="**/*.jar"/>
  </path>

  <target name="info"
          description="Dump useful configuration information before build">
    <echo message="Using LPS in ${lps.home}" />
    <echo message="Editor appl path relative to $LPS_HOME is  $LPS_HOME/${project.folder}" />
    <echo message="Timestamp for this build is ${build.timestamp} "/>
  </target>


  <target name="clean" depends="info"
          description="Delete all temporary and generated files and folders.">
    <!-- If the application file has been compiled using the
         browser developer console, remove all generate files. -->
    <script language="javascript">
      var file = olApp.getProperty("app.file");
      olApp.setProperty("masterSpriteFile", 
      file.substr(0,file.indexOf(".lzx")) + ".sprite.png");
    </script>
    <delete>
      <fileset dir="${lzx.dir}">
        <include name="**/*.sprite.png"/>
        <include name="**/*.swf10.swf"/>
        <include name="**/*.lzx.js"/>
      </fileset>
    </delete>
    <delete dir="${lzx.dir}/lps"/>
    <delete file="${lzx.dir}/${app.file}.js" />
    <delete file="${lzx.dir}/${app.file}.swf10.swf" />
    <delete file="${lzx.dir}/${masterSpriteFile}" />
    <echo message="Property app.file set to ${app.file}" />
    <delete dir="${build.dir}" />
    <delete dir="${release.dir}" />
  </target>

  <target name="init" depends="clean"
          description="Create all directories for the build process.">
    <mkdir dir="${temp.dir}" />
    <mkdir dir="${temp.dir}/lzxcompile" />
    <mkdir dir="${temp.dir}/lzdeploy" />
    <mkdir dir="${build.dir}" />
    <mkdir dir="${release.dir}" />
  </target>

  <target name="build" depends="init,compile-lzx"
          description="Compile Java and LZX source (SWF10 and DHTML), and copy the versions into the release folder.">
  </target>


  <!-- Copy LZX, JSP and other text files into folder ${temp.dir}.
       We don't want to pollute the source folder with files generated
       during compilation. -->
  <target name="copy-files-temp" depends="init">
    <echo message="Copying files from ${lzx.dir} to ${temp.dir}/lzxcompile" />
    <copy todir="${temp.dir}/lzxcompile">
      <fileset dir="${lzx.dir}" casesensitive="no">
        <!-- Include any file type here you want to package into the
             deployed application. -->
        <include name="**/*.lzx" />
        <include name="**/*.xml" />
        <include name="**/*.jsp" />
        <include name="**/*.html" />
        <include name="**/*.js" />
        <include name="**/*.css" />
        <include name="**/*.gif" />
        <include name="**/*.jpg" />
        <include name="**/*.mp3" />
        <include name="**/*.pdf" />
        <include name="**/*.png" />
        <include name="**/*.swf" />
        <include name="**/*.ttf" />
      </fileset>
    </copy>
  </target>

  <!-- Compile the LZX code for both the DHTML and SWF10 runtime -->
  <target name="compile-lzx" depends="init,copy-files-temp" >
    <echo message="Compiling LZX app for SWF10 and DHTML runtime (SOLO)"/>
    <script language="javascript">
      var lzxFile = olApp.getProperty("app.file");
      var timestamp = olApp.getProperty("build.timestamp");
      var fileNoending = lzxFile.substr(0,lzxFile.indexOf(".lzx"));
      olApp.setProperty("app.file.timestamp",
      fileNoending + "." + timestamp + ".lzx");
    </script>
    <move file="${temp.dir}/lzxcompile/${app.file}"
          tofile="${temp.dir}/lzxcompile/${app.file.timestamp}" />
    <!-- SWF10 with Laszlo Debugger enabled -->
    <antcall target="_solo-compile-file">
      <param name="file" value="${temp.dir}/lzxcompile/${app.file.timestamp}" />
      <param name="runtime" value="swf10" />
      <param name="debug" value="--debug"/>
      <param name="output" value="${temp.dir}/lzdeploy/swf10-debug.zip" />
    </antcall>
    <antcall target="_unzip-lzdeploy-package">
      <param name="output" value="${temp.dir}/lzdeploy/swf10-debug.zip" />
      <param name="targetFolder" value="${temp.dir}/lzdeploy/swf10-debug" />
    </antcall>
    <!-- FIX: lzdeploy bug workaround
         The SWF10 file is currently not added to the ZIP file, need to
         copy it over -->
    <copy file="${temp.dir}/lzxcompile/${app.file.timestamp}.swf10.swf"
          tofile="${temp.dir}/lzdeploy/swf10-debug/${app.file.timestamp}.swf10.swf" />

    <!-- DHTML with Laszlo Debugger enabled -->
    <antcall target="_solo-compile-file" >
      <param name="file" value="${temp.dir}/lzxcompile/${app.file.timestamp}" />
      <param name="runtime" value="dhtml" />
      <param name="debug" value="--debug"/>
      <param name="output" value="${temp.dir}/lzdeploy/dhtml-debug.zip" />
    </antcall>
    <antcall target="_unzip-lzdeploy-package">
      <param name="output" value="${temp.dir}/lzdeploy/dhtml-debug.zip" />
      <param name="targetFolder" value="${temp.dir}/lzdeploy/dhtml-debug" />
    </antcall>

    <!-- DHTML without Laszlo Debugger -->
    <antcall target="_solo-compile-file" >
      <param name="file" value="${temp.dir}/lzxcompile/${app.file.timestamp}" />
      <param name="runtime" value="dhtml" />
      <param name="output" value="${temp.dir}/lzdeploy/dhtml.zip" />
    </antcall>
    <antcall target="_unzip-lzdeploy-package">
      <param name="output" value="${temp.dir}/lzdeploy/dhtml.zip" />
      <param name="targetFolder" value="${temp.dir}/lzdeploy/dhtml" />
    </antcall>

    <!-- Copy the files for each app version - including dependencies - 
         into the release folder. -->
    <copy todir="${release.dir}/swf10-debug">
      <fileset dir="${temp.dir}/lzdeploy/swf10-debug/">
        <include name="**/*.*" />
      </fileset>
    </copy>
    <copy todir="${release.dir}/dhtml">
      <fileset dir="${temp.dir}/lzdeploy/dhtml/">
        <exclude name="${app.file.timestamp}.swf10.swf" />
        <include name="**/*.*" />
      </fileset>
    </copy>
    <copy todir="${release.dir}/dhtml-debug">
      <fileset dir="${temp.dir}/lzdeploy/dhtml-debug/">
        <exclude name="${app.file.timestamp}.swf10.swf" />
        <include name="**/*.*" />
      </fileset>
    </copy>
  </target>

  <!-- Compile the file and create the ZIP package with resources -->
  <target name="_solo-compile-file">
    <echo message="Creating application package for ${file}"/>
    <echo message="Using LPS_HOME: ${lps.home}"/>
    <echo message="args: --runtime=${runtime}  ${debug} --output ${output}"/>
    <java classpathref="laszlo.compiler.classpath"
          classname="org.openlaszlo.utils.DeployMain"
          fork="yes"
          failonerror="true">
      <jvmarg value="-Xmx1024M"/>
      <jvmarg value="-DLPS_HOME=${lps.home}"/>
      <arg line="--runtime=${runtime} --output ${output} ${debug} ${file}"/>
    </java>
  </target>

  <!-- Unzip the OpenLaszlo deployment ZIP file -->
  <target name="_unzip-lzdeploy-package">
    <echo message="Unzipping lzdeploy package ${output}" />
    <!--unzip src="${zip.target.file}" dest="${temp.zip.extracted}"-->
    <unzip src="${output}" dest="${targetFolder}">
      <patternset>
        <exclude name="widget-icon.png" />
        <exclude name="config.xml" />
        <!-- exclude name="index.html" /-->
        <exclude name="**/*.lzx" />
        <exclude name="**/*.css" />
      </patternset>
    </unzip>
  </target>

</project>

Put the build script into a subfolder of $LPS_HOME (OpenLaszlo server home) called testapp. Create a subdirectory LZX, with an OpenLaszlo canvas application called testapp.lzx. I've added an image resource into the subfolder resources to test if resources are packaged correctly into the SOLO compiled application folders.

$LPS_HOME
└── testapp
    ├── build.xml
    └── lzx
        ├── resources
        │   └── Winnie-the-Pooh.jpg
        └── testapp.lzx

Got into $LPS_HOME, and run "ant build". The build process should run through, and you should have the resulting folder structure:

testapp
├── build
│   └── tmp
│       ├── lzdeploy (more files)
│       └── lzxcompile (more files)
├── build.xml
├── lzx
│   ├── resources
│   │   └── Winnie-the-Pooh.jpg
│   └── testapp.lzx
└── release
    ├── dhtml
    │   ├── index.html
    │   ├── lps (more files)
    │   ├── resources
    │   │   └── Winnie-the-Pooh.jpg
    │   ├── testapp.20120810-125652.lzx.js
    │   └── testapp.20120810-125652.sprite.png
    ├── dhtml-debug
    │   ├── index.html
    │   ├── lps (more files)
    │   ├── resources
    │   │   └── Winnie-the-Pooh.jpg
    │   ├── testapp.20120810-125652.lzx.js
    │   └── testapp.20120810-125652.sprite.png
    └── swf10-debug
        ├── index.html
        └── lps (more files)

The build process has generated three versions of the OpenLaszlo app: SWF with debug, DHTML/HTML5 with and without debug mode enabled. All JavaScript and SWF files have a timestamp attached, which means a new version of the application will not be pulled from the browser cache. If point your browser to the release folder, clicking on any of the three folders (swf10-debug, dhtml, dhtml-debug) should open the SOLO compiled app.

Add your own scripts to upload the release to a webserver, that should not be difficult.