I have been working on OpenLaszlo for quite sometime now and found it every easy to build custom flash widgets using it. In my first tutorial on OpenLaszlo, we will together learn a few specs of Openlaszlo and then code a tiny little flash media player.
Getting started with Openlaszlo:
- Openlaszlo is a framework which allows you to build flash widgets easily and faster. Biggest advantage is that you need not write any action scripting for building your flash widget. In laszlo we write code in XML format (files saved with extension .lzx) and then Laszlo server compiles our .lzx files to output a flash .swf file. WOW!
- Download your copy of laszlo from http://openlaszlo.org/download and install. If you are on windows, installation is simple. Just double click the downloaded .exe file and it will install everything for you. For me my installation is at C:OpenLaszlo Server 4.0.12
- Create a directory C:OpenLaszlo Server 4.0.12Serverlps-4.0.12Workspace . I generally do all my laszlo specific development under Workspace directory. (Adjust the path as per your installation)
- Create a folder inside Workspace named audioplayer
- Start the laszlo server.
Building an audioplayer in laszlo:
Before we proceed you may checkout the code repository from Google Code Base:
- As I wrote before, laszlo code files have an extension called .lzx . Lets first see a demo and then we will learn the syntaxes etc. You can find the explanation of the codes below within the code as comments
- Create a file called main.lzx and copy paste the following lines of code in it:
- Create a file called playpausemultibutton.lzx and copy paste the following lines of code in it:
- Create a file called player.lzx and copy paste the following lines of code in it:
- Create a file called mediaplayer_dev.html and copy paste the following lines of code in it: (This is development environment file, mediaplayer.html is the production environment file which you can find in code repository)
- Create a folder called icons and copy the two icons which you checked out from the code repository.
- Copy an mp3 file from your hard disk and copy paste it in the folder. Then edit the mp3url in above code of mediaplayer_dev.html
- Copy and paste the swfobject.js file which you have checked out from code repository.
That all we need to test run our single button audio player. Now simply open the following URL in your browser: (edit it as per your folder names)
and you can see the audio player playing your mp3 song 🙂
Now we can see our file playing the mp3 well and we would like to generate a flash file out of our main.lzx file. For this laszlo have their inbuild compilers which will compile the flash file for you. Simply open the url:
and then check swf8 at the bottom of the page under compile options and press compile
From here on you have two options:
- Or you can use swfobject.js to embed your flash files in your website. (Recommended)
I assume you will use swfobject.js and in that case you may simply stop after pressing compile. See the folders and you can see two .swf files being generated into the folder. These are our final production level flash audio player files.
Now lets see how to use these .swf files in our pages. Simply rename them to alterplayer.swf and create a file called mediaplayer.html and copy paste the below code in it:
We did not much change from mediaplayer_dev.html. Simply replaced .lzx file with actual .swf file and the mp3url also change to your production level mp3 url.
Thats pretty much of what we actually wanted to have. 🙂
In future we will see how to build a:
- Single Button Player which also shows the time
- Single Button Player with progress bar and volume control
- Audio Player capable of playing a whole mp3 playlist.
- Audio Player with AJAX search enabled in it.
If you want to see the final version of flash player which we will slowly learn to develop, kindly visit Altertunes (my first ever site :))
Kindly let me know if you are having trouble in learning and running this player. I will more than happy to contribute and share further.
- You can find some great help from the official forum http://forum.openlaszlo.org/
Let me know your feedbacks.