OpenLaszlo kompilieren und auf Webserver SOLO veröffentlichen

Die Entwicklung von OpenLaszlo in einer Testumgebung ist eine Seite der Medaille. Die andere betrifft das SOLO-Deployment, v.a. von DHTML-Lösungen. Hier kommt Licht ins Dunkel:

1. Kompilieren

Vor dem Kompilieren natürlich noch das eventuelle proxied-Attribut von <canvas> auf false setzen und den Debugger rausnehmen für den möglichen Produktiveinsatz.

In der Entwicklungsumgebung wird wie gewohnt kompiliert, indem man die Anwendung aufruft. In einer Standard-Umgebung geschieht dies mit dem Link http://localhost:8080/lps-VER.x.y/pfad-zu-applikation/app.lzx?lzr=runtime. Die kursiven Teile sind jeweils variabel an das Projekt anzupassen.

2. Applikationspaket schnüren

Auf der Browserseite wird nun die Applikation und zusätzlich eine von OpenLaszlo gelieferte Entwicklerleiste angezeigt. Auf der Leiste im Fall der SOLO-Bereitstellung (ohne OpenLaszlo-Server) auf den SOLO-Schaltknopf klicken. Es erscheint der sogenannte „Setup SOLO DHTML Application Deployment“-Wizard.

Der Pfadname zur Applikation müsste bereits eingetragen sein. Falls nicht, es ist der relative Pfad unterhalb des Applikationshauptverzeichnisses – z.B. my-apps/meine-applikation/xyz.lzx.

Der Titel für die Webseite muss nur ausgefüllt werden, wenn man die generierte Standardseite übernehmen möchte. Somit ist in den meisten Fällen einfach nur ein Klick auf „Continue…“ nötig.

Der nächste Bildschirm ist selbsterklärend und dient für die meisten nur noch als Klickübung auf „Continue…“.

Die fertig gepackte ZIP-Datei mit dem OpenLaszlo-Code und den Bibliotheken liegt als Link bereit zum Download.

3. Einbinden in eine Webseite

Folgende Angaben sind zwingend nötig, um die OpenLaszlo-Applikation SOLO in einer bestehenden Webseite als DHTML zu integrieren (SWF siehe unten!):

<html>
<head>
  <script type="text/javascript"
          src="lps/includes/embed-compressed.js"> <!-- 1 -->
  </script>
  <script type="text/javascript">
    lz.embed.lfc('lps/includes/lfc/LFCdhtml.js',  <!-- 2 -->
                 'lpsresources');                 <!-- 3 -->
  </script>
.
.
</head>
<body>
  <script type="text/javascript">
    lz.embed.dhtml({url: 'app.lzx.js',            <!-- 4 -->
                    bgcolor: '#FFFFFF',
                    width: '200', height: '200',
                    id: 'lzapp'});
  </script>
  <noscript>
    Einige Worte des Bedauerns für Nicht-Javascript-User.
  </noscript>
.
.
</body>
</html>

Kurze Erklärungen dazu:

Diese Grundeinstellung funktionierte lokal und auf einem Test-Webserver. Bereits beim Versuch der einfachen Integration in eine CMS-Umgebung (z.B. Drupal) kann es zu Problemen kommen. Dies liegt zum Beispiel an Pfadmanipulationen des Webservers, worauf die OpenLaszlo-Bibliotheken nicht mehr richtig eingebunden werden.

Dazu setzt man folgendes um:

  • Die OpenLaszlo-Applikation in ein eigenes Unterverzeichnis ablegen. Dieses mit z.B. mit Hilfe einer .htaccess-Datei vor Pfadmanipulationen seitens des Webservers schützen (RewriteEngine off).
  • Bei <!– 1 –> einen absoluten Pfades angeben, inkl. http(s) und der Domain.
  • Bei <!– 2 –> ebenfalls einen absoluten Pfad eintragen.
  • Bei diesem Punkt herrscht noch weitverbreitetes Unwissen, aber es kam vor, dass bei <!– 3 –> die Angabe zu lps/resources geändert werden musste, um die Applikation zum Laufen zu bekommen.
  • <!– 4 –> ist der Pfad zur eigenen Anwendung und sollte ebenfalls absolut sein.
  • Innerhalb der Applikation können ebenfalls Pfadangaben vorkommen, z.B. zu Ressourcen. Diese sind dann ohne http(s) einzutragen, aber ebenfalls Absolut (ohne Domain) zu halten. Z.B. Liegt eine Ressource dann unter http://www.domain.xyz/pfad/zur/applikation/foto.jpg, dann ist anzugeben: /pfad/zur/applikation/foto.jpg.

Bei SWF-Verteilung fallen die Zeilen <!– 2 –> und <!– 3 –> von oben weg. Zeile <!– 4 –> sieht so aus:

  <script type="text/javascript">
    lz.embed.swf({url: 'app.lzx.swf8.swf?&lzr=swf8&lzproxied=false',            <!-- 4 -->
                    allowfullscreen: 'false', bgcolor: '#FFFFFF',
                    width: '200', height: '200',
                    id: 'lzapp', accessible: 'false',
                    cancelmousewheel: false});

    lz.embed.lzapp.onloadstatus = function loadstatus(p) {
      // p = percentage of load progress
    }

    lz.embed.lzapp.onload = function loaded() {
      // done loading
    }
  </script>
Advertisements

About this entry