Openlaszlo is an open source framework which simplifies development of flash applications. Openlaszlo allows you to code your flash apps using xml style laszlo code, and thereafter you can compile your code to output a .swf file for production usage. I first came around openlaszlo while I was developing Alterplayer – open source flash mp3 player.
In this post I will demonstrate:
- Getting started with Openlaszlo – Setting up your dev enviornment
- Hello World! in Openlaszlo
- Upcoming tutorials
Setting up Openlaszlo development environment
- Download the latest openlaszlo release 4.4 from http://openlaszlo.org/download or alternatively download directly from http://download.openlaszlo.org/4.4.0/openlaszlo-4.4.0-windows-dev-install.exe
- Double click and install the setup. For me on WinXP, it installs in the following location. C:Program FilesOpenLaszlo Server 4.4.0
- Upon installation tomcat server will start automatically. If it doesn’t, click the following file to start the tomcat server. C:Program FilesOpenLaszlo Server 4.4.0Serverlps-4.4.0lpsutilsstartTomcat.bat
- At any point in time when you want to stop the tomcat server, click the stopTomcat.bat file lying in the same folder.
- Browse to the following location on your firefox, to see the opening welcome screen http://127.0.0.1:8080/lps-4.4.0/laszlo-explorer/index.jsp
- Create a folder inside C:Program FilesOpenLaszlo Server 4.4.0Serverlps-4.4.0, called Workspace. We will do all our development in this directory.
- Create a folder called HelloWorld inside Workspace. We will start developing our first project straight away
Hello World! in OpenLaszlo
Like in any other language and framework, we will learn how to write a Hello World! program.
- Create a file helloworld.lzx inside the Hello World folder
- Browse to the following location on your browser: http://127.0.0.1:8080/lps-4.4.0/Workspace/HelloWorld/helloworld.lzx
- Did you see HelloWorld! ? Bingo
Hello World! Explained
- Each and every openlaszlo code file have an extension .lzx
- Each and every laszlo code is wrapped inside <canvas></canvas> tag
- <text></text> is a class used for non-editable text fields. Here it will simply display Hello World! on the browser.
Debugging in Openlaszlo
One of the strong feature which comes packaged with openlaszlo, is it’s support for debugging. When you visited the above link in your browser, along with Helllo World! text you must have seen a debugger window too. Mainly because we had <canvas debug=”true”>, debug true in our code.
If you might have noticed, I have given an id to out <text></text> node. Lets see how can we make use of it while debugging. Suppose you didn’t get what you really wanted out of your code, for instance suppose you mistyped Hello World! as Helo World!. Simply go ahead and type the element id in the debugger window.
For instance here I will type in the id of the element i want to inspect i.e. id=”helloworld”. As I press enter, debugger shows me all the details about my element of interest.
Another thing you can do from within the code is, print out your debug logs on the debugger screen. For instance modify the above code as follows and refresh your app on the browser:
Above code will simply throw a string “I just printed a Hello World!” on the debugger string. In you application you can ever throw a variable value for debugging purpose.
In the next tutorials on openlaszlo, I will explain:
- How to create an alterplayer out of openlaszlo. Meanwhile I would like you to go through my previous post on openlaszlo: How to create a single button flash audio player using Openlaszlo?
- How to build an imoracle video player out of openlaszlo.
Both the projects will be opensource under GNU General Public License v3.
Also you may want to visit the following reference on openlaszlo official site: