Hello Everyone,

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:

1. 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!
2. 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
3. Create a directory C:\OpenLaszlo Server 4.0.12\Server\lps-4.0.12\Workspace . I generally do all my laszlo specific development under Workspace directory. (Adjust the path as per your installation)
4. Create a folder inside Workspace named audioplayer
5. Start the laszlo server.

Building an audioplayer in laszlo:

Before we proceed you may checkout the code repository from Google Code Base:

1. 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
2. Create a file called main.lzx and copy paste the following lines of code in it:
   <canvas id=”miniplayer” medialoadtimeout=”120000″ bgcolor=”#FFFFFF” debug=”true”>
    
     <!– This file takes care of toggling for the play/pause button –>
     <include href=”playpausemultibutton.lzx”/>
    
     <!– Include the MP3 player class –>
     <include href=”player.lzx”/>
    
     <!– Main view containing everything within it –>
     <view x=”5″>
       <simplelayout axis=”x” spacing=”5″/>
       <!– PLAY-PAUSE BUTTON PANEL –>
       <view name=”buttonpanel” id=”buttonpanel” y=”1″ bgcolor=”#EEEEEE”>
         <multistatebutton id=”playpausetoggle” name=”playpausetoggle” bgcolor=”#EEEEEE”
         resource=”playpause_rsrc” align=”center” statenum=”0″ statelength=”2″ maxstate=”1″ onclick=”this.toggle()”>
           <method name=”toggle”>
             if (this.statenum == 0) {
               this.setStateNum(1);
               <!– if players is already loaded with a song just play it, otherwise load it again with mp3url –>
               if(audioplayer.nowplaying == false) {
                 audioplayer.setAttribute(“nowplaying”,true);
                 audioplayer.setResource(global.mp3url);
               }
               else {
                 audioplayer.play();
               }
             }
             else {
               this.setStateNum(0);
               audioplayer.stop();
             }
           </method>     
         </multistatebutton>
       </view>
      
       <!– Include the audioplayer class –>
       <player id=”audioplayer” width=”100%” height=”100%”/>
      
     </view>
   </canvas>
3. Create a file called playpausemultibutton.lzx and copy paste the following lines of code in it:
   <library>
     <resource name=”playpause_rsrc”>
        <!–  State: 0 –>
        <!– first  frame of state 1 = mouseup   image of the button –>
        <frame src=”icons/play_blue.png”/>
        <!– third  frame of state 1 = mousedown image of the button –>
        <frame src=”icons/pause_blue.png”/>

        <!–  State: 1 –>
        <!– first  frame of state 2 = mouseup image of the button –>
        <frame src=”icons/pause_blue.png”/>
        <!– third  frame of state 2 = mousedown image of the button –>
        <frame src=”icons/play_blue.png”/>
     </resource>
   </library>

4. Create a file called player.lzx and copy paste the following lines of code in it:
   <library>
    
     <!– THE AUDIOPLAYER PLAYING CLASS –>
     <class name=”player” extends=”view” visible=”true” play=”false”>
      
       <!– Attribute which captures the player nowplaying stat –>
       <attribute name=”nowplaying” value=”false”/>
      
       <!– Attribute which captures the player loading stat –>
       <attribute name=”loading” value=”false”/>
      
       <!– Write ‘onlastframe’ handler –>
       <handler name=”onlastframe”>
         this.setAttribute(“nowplaying”,false);
         this.setAttribute(“loading”,false);
         playpausetoggle.toggle();
       </handler>
      
       <!– Write ‘onloadperc’ handler –>
       <handler name=”onloadperc” args=”p”>
         if(p > 0) {
          
         }
         if(p &lt; 1) {
           audioplayer.setAttribute(“loading”,true);
         }
         else if(p == 1) {
           audioplayer.setAttribute(“loading”,”done”);
         }
       </handler>
      
       <!– Write ‘onunload’ handler –>
       <handler name=”onunload”>
         if(this.nowplaying) {
           this.setAttribute(“nowplaying”,false);
           this.stop();
         }
       </handler>
      
       <!– Write ‘onplay’ handler –>
       <handler name=”onplay”>
         this.setAttribute(“nowplaying”,true);
       </handler>
      
       <!– Write ‘onload’ handler –>
       <handler name=”onload”>
       </handler>
      
       <!– Write ‘onframe’ handler –>
       <handler name=”onframe”>
       </handler>
      
       <!– Write ‘onstop’ handler –>
       <handler name=”onstop”>
       </handler>
      
       <!– Write ‘ontimeout’ handler –>
       <handler name=”ontimeout”>
       </handler>
      
     </class>
    
   </library>
5. 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)
   <html>
     <head>
       <title>Flash Audio Player</title>
       <script type=”text/javascript” src=”swfobject.js”></script>
     </head>
     <body>
       <div id=”flashcontent” width=”100%”>
         This text is replaced by the Flash movie.
       </div>
       <script type=”text/javascript”>
         var so = new SWFObject(“main.lzx?lzt=swf&debug=true”, “singlebuttonplayer”, “100%”, “100%”, “7″, “#FFFFFF”);
         so.addParam(“quality”, “high”);
         so.addParam(“scale”, “exactfit”);
         so.addParam(“salign”, “LT”);
         so.addParam(“menu”, “false”);
         so.addParam(“wmode”, “opaque”);
         so.addParam(“allowScriptAccess”, “always”);
        
         //Set the mp3urlfor the song
         so.addVariable(“mp3url”,”http://127.0.0.1:8080/lps-4.0.12/Workspace/audioplayer/Liquid Tension Experiment – Acid Rain.mp3″);
        
         so.write(“flashcontent”);
       </script>
     </body>
   </html>
6. Create a folder called icons and copy the two icons which you checked out from the code repository.
7. 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
8. 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)
http://127.0.0.1:8080/lps-4.0.12/Workspace/audioplayer/mp3player_dev.html
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:
http://127.0.0.1:8080/lps-4.0.12/Workspace/audioplayer/main.lzx
and then check swf8 at the bottom of the page under compile options and press compile

From here on you have two options:

1. Either to use laszlo specific embedding strategy i.e. If you proceed with further steps after pressing compile, laszlo will give you a set of javascript files which you can use to embed your audio player.
2. 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:

1. Single Button Player which also shows the time
2. Single Button Player with progress bar and volume control
3. Audio Player capable of playing a whole mp3 playlist.
4. 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.

Document Reference:

1. http://www.openlaszlo.org/lps4/docs/
2. http://www.openlaszlo.org/lps3/docs/reference/
3. You can find some great help from the official forum http://forum.openlaszlo.org/

Let me know your feedbacks.

• Essential frameworks for web development (2)
• Getting started with Openlaszlo – Framework for developing flash apps (3)
• How to get started with web development? (9)
• Web Development – Part 1: Apache, MySQL, PHP (4)