Getting started with Openlaszlo – Framework for developing flash apps

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

  1. 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
  2. Double click and install the setup. For me on WinXP, it installs in the following location. C:Program FilesOpenLaszlo Server 4.4.0
  3. 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
  4. At any point in time when you want to stop the tomcat server, click the stopTomcat.bat file lying in the same folder.
  5. 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
  6. 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.
  7. 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.

  1. Create a file helloworld.lzx inside the Hello World folder
  2. 
      Hello World!
    
  3. Browse to the following location on your browser: http://127.0.0.1:8080/lps-4.4.0/Workspace/HelloWorld/helloworld.lzx
  4. Did you see HelloWorld! ? Bingo

Hello World! Explained

  1. Each and every openlaszlo code file have an extension .lzx
  2. Each and every laszlo code is wrapped inside <canvas></canvas> tag
  3. <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.
getting_started_with_openlaszlo

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:


  
    Hello World!
  
  

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.

Upcoming tutorial
In the next tutorials on openlaszlo, I will explain:

  1. 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?
  2. 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:
http://www.openlaszlo.org/lps3/docs/reference/

How to create a single button flash audio player using Openlaszlo?

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.12Serverlps-4.0.12Workspace . 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:

svn checkout http://abhinavsingh.googlecode.com/svn/trunk/ abhinavsingh-read-only

  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:

<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(“alterplayer.swf”, “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://mysite.com/songname.mp3″);
     
      so.write(“flashcontent”);
    </script>
  </body>
</html>

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.

How to get started with web development?

Many of my friends have asked me on how to start with web development. I am not expert but here in this post I would like to describe a few steps that might help one climb the ladder of web development fast. Kindly feel free to add to this blog post if you think some other methodology might be better off.

  1. Where do I start web development? Well the first and best place to start web development is your own system. Yes your very own personal computer. You don’t need a server on internet to start with. Infact I worked locally on my computer for about a month before I went for free hostings, shared hosting and finally VPS. Once you feel that you are comfortable enough with the tid-bits of web development, then you can move to one of them.
  2. How to configure my local computer for that? You have a number of options to start with. I personally started on Tomcat Server after my initial training at Oracle. Tomcat is suited if you are starting with JSP (Java Server/Servlet Pages) . I started by making a few basic pages like creating a login/registration system. I made a few and then hosted on my office computer. Distributed the links to a few around to get the much needed boost. (Yes if you are into web development you need a lot of encouragement and appreciation from others, else your enthusiasm can soon die out). However I soon realized that in todays world of web 2.0 Tomcat is not the thing. So I shifted to Apache.

    Next option you have is to go for Apache (which I use currently for all my developments). I have written 2 posts on how to configure your local system for the same. Read it here: Web Development Part 1 Apache MySQL PHP . If you are interested in starting on a unix machine (which is always the best thing to do) here is the post where I described: How to configure Ubuntu and LAMP on Windows.

  3. Things to concentrate upon initially? Before you go for any big big applications its better to get your basics right. I sucked for long while working with out dated styles and methodology. Here is a bunch of things which you should initially look to:
    • Choose the <div> style to create your HTML pages. I didn’t knew about this methodology and even went ahead to release Altertunes with <table> structure HTML pages.
    • While looking around on internet you will find loads and lot of framework offerings. They really make your work sooo simple. Takes all the burden away from you. Solves all cross browser compatibility for your application and what not. Find a list of frameworks I have tried before here: Essential Frameworks for web development
    • However one thing which you lose by using such frameworks is the insight. You never get to know what cross browser compatibility issues comes and how are they solved. They provide you easy ajax requests but you never get to know the methodology behind it. The biggest drawback which I find is that even for a simplest of application you always need to include whole bunch of files from framework hence making your application heavy for no reason.
    • Hence I finally went ahead coding everything from scratch and never ever used any framework for any of my works.
    • You need to learn how to prevent XSS (Cross browser scripting) and SQL Injection in your applications. Something very important for all your applications.

  4. Getting to a free hosting server: After initial play at your PC, its time to get to a free hosting server which brings in more knowledge and experience. I am lucky in the fact that I moved to X10 Hosting for the very first time. In my opinion they are one of the best in providing free hosts. The amount of features and largely the amount of support at their forums make them the best free hosting services around. I started with http://imoracle.x10hosting.com as my first ever site. Few applications which I build on that were:
    • User login and registration system, where user was authenticated by an link sent to him through email.
    • Inside I had a few basic applications including contact form, multiple picture uploads etc etc.
    • One of the finest feature I had in that was Gmail Contact Import script, which I made using PHP Curl application.
    • Last but not the least I built a chat application similar to browser based chat applications in google and yahoo mails. (Though not that efficient). That was first and the last time I used a framework for any of my application. It was built using Prototype Windows Class framework.

    I told you about these features as these were the applications which got me started initially. Helped me learn the tid bits of web development. May be you too can give a try to a few of them as your first few applications.

  5. Altertunes: Must be wondering why is this name up here again. Well I agree Altertunes fails as a full time product on web but then actually this self initiated project helped me learn all and everything about web development. It was hugely an ajax dominated website with ajax requests flowing in and out of everything you do inside. Basically the social networking aspect inside altertunes helped me learn most of the things. Key things inside altertunes which helped me develop my web dev skills are:
    • Social networking aspects like adding friends, sending personal messages, dedicating a song to your friends etc etc.
    • Importing Gmail, Yahoo and other email contacts. I initially used self made gmail address book import script. But then probably Gmail changed the ways on their mail and my script started failing. However I was lucky to find various services which helps you import mail contacts.
    • Creating of search bots for mp3. This was one of the things done in PERL instead of PHP. Read my blog on how to create an html parser using PERL here. This search bot was similar to any other search bot but it only used to index mp3 files in the database.
    • Use of various web services API’s like Artist Recommendation API by last.fm, Video API by YouTube, Pictures API by Google.
    • Features like creating your custom playlists, bookmarking artists, creation of analytic backend engine to provide users with the best recommended songs based on users listen history.
    • Finally, I learnt to make custom web players. Alterplayer which I made using OpenLaszlo, was something which I did out of PHP, MySQL, Apache.
    • Being at Oracle at that point in time, helped me in maintaining such a relational database with ease.
    • Auto suggest feature which is similar to google auto suggest. Altertunes used to offer you artist names as you typed in the name of the artist.
    • News from Google and Yahoo news. As there were no API’s available for this, I scrapped the google and yahoo news using PERL scripts and showed them to the users. (Illegal it was though) 😉

    However I must say that your website is not complete till you have all the look and feel and User Interface to lure the users. Initially I thought that the UI is coming up good but then as the features which I wanted to offer increased and with my sucking <table> structured HTML pages everything got screwed. However Altertunes helped me develop my web dev skills a hell lot and helped me understanding the right way of doing things. Probably picking up a small project for yourself is always the best idea, as then only you will always try to make your application look more professional.

  6. Time for a shared host : As the traffic increased on Altertunes I had to quickly shift to a shared hosting. I again went for a shared hosting at X10, where I bought a hosting server for around 80$ a year with 99% uptime till date. All my websites including Altertunes, My personal website and a few other under ground works of mine are hosted on the same shared host. Basically shared host assures you of more % uptime, more bandwidth and more forum support from X10. Those guys just go out of their ways at times to help you out.

    However you always have few drawbacks of a shared host:

    • First of all its a shared host i.e. a single CPU with many document roots (one root for each client) in it. At times hosting service providers over shoot the maximum allowed roots on a single CPU, which makes your CPU share low. And hence sucking performances.
    • Your site can go down even without a single error from your side. Yes this is the case which happened with me, when one of the other user on the same CPU set up a cron job (an automated job which runs every X hours) to take a backup of his server every 1 hour. Well in that case every single hour he used to consume maximum CPU cycles and hence all other users their started experiencing major downtimes. However X10 forum moderators are kind enough. They take immediate actions in such cases and ensure everything is fine.
    • You can’t have all PHP PEAR and Perl modules installed. I wanted to have a PHP PERL module installed for me by which I can write perl codes inside my PHP script. But as its a shared host and a package installed effects everyone on the CPU, I was denied by the X10 hosting admins.
    • Similarly for creating a upload meter application you need to have APC (Alternate PHP Cache) module enabled on your server. And I was again denied this package by the X10 hosting as they will cache all other users file which they might not want to.
    • Finally the biggest drawback is that you don’t have access to the httpd.conf i.e you apache server configuration file and your php.ini your php configuration file. Which at times you may want to change to meet your applications demand.

  7. Finally time for a VPS (Virtual Private Server) : When you start feeling you want a total control on your server and applications, its time to switch to a VPS. However they will cost you more than expected. I started with VPS at VPSFarm which I must say totally sucks. Doesn’t go well for me atleast with Zero support (‘Zero’ means zero). I took the Xen 1024 plan which costs around 40$ per month. However by the time my 1st month got over X10 started offering VPS too and with my experience and relations with them I immediately shifted to a VPS at X10. It too costs me same, around 35$ per month with more RAM and more Disk Space.

    However do not move to a VPS because you want to. It takes a lot of hard work to set it up and maintain it further. You basically have no support what so ever. Your mails not going, file not loading, server down, database not working. No one is accountable for that except you. But then you get all the controls on various configuration files which means you can fine tune the system to meet your needs.

    However one thing which I miss is the comfort of CPanel which used to come in by default with free host and shared hostings. I got so used to it in last 1 year.  Plus being from ECE background doesn’t helps me a great deal either. Anyways I suppose I am here to stay on VPS for long. I am slowly migrating all my websites to VPS. 

I guess this is all I had to share here in this post. If I have missed out on anything which many of you have asked me on chat and mails kindly feel free to ask it here. If I feel I need to add anything, will do so.

For experienced developers who accidentally read till here, feel free to add anything you want to. If you feel anything was wrong in my methodology and approach do let us all know. I am still learning.

All the best for all those starting out there.

Patience is the Key I will say finally.

——————————————————————————-
Other Posts you may want to read:
——————————————————————————-

Essential frameworks for web development

Hello developers,

Initially when I started working on Altertunes, I was unaware of the various frameworks which one can use for his website. Though I never have used any of them for Altertunes (main reason being the eagerness to do everything by myself), but may be some of you out there might be interested in having a look at the same:

  • http://prototypejs.org : Undoubtedly one of the best available framework for Ajax in the market. Prototype is a javascript framework that aims to ease development of dynamic web applications.
  • http://script.aculo.us : If you are looking to have all those fade-in and fade-out effects for your website, probably Scriptaculous does the best for your website. Scriptaculous provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly. Though I am not too sure, but I guess Ruby on Rails already comes packaged with Scriptaculous.
  • Prototype Windows Class : Another master piece which allows your website to have all those fancy popups, fade-in and fade-out effect.
  • Google Web Toolkit : Google Web Toolkit (GWT) makes it easier to write high-performance AJAX applications. You write your front end in the Java programming language and GWT compiles your source into highly optimized JavaScript.

Probably you will find hundred’s of them in the market right now. Above I have listed a few which I tried atleast once and got good performance. However there are various factors which decide what Ajax framework you should choose for your site. Most important being:

“It seems that a very light framework is required for a public site. If your visitors need to upload a large Javascript API, they may not visit further your website, depending on your page’s download times. When working on intranets, or professionnal services, it may be acceptable that the first access to the application may be longer, moreover when the website is used daily. Also think about on-demand Javascript and Javascript compression.” – by Michael Mahemoff

If you are looking to develop your site using flash, then there are again some excellent frameworks available in the market for the same. Two of the best which I know are:

  • OpenLaszlo : OpenLaszlo is an open source platform for creating zero-install web applications with the user interface capabilities of desktop client software. OpenLaszlo programs are written in XML and JavaScript and transparently compiled to Flash and DHTML. The Alterplayer used on Altertunes, was developed by me using OpenLaszlo. I am open for any suggestion or question you need for development in OpenLaszlo.
  • Red5 : It is an opensource flash server written in Java that supports Streaming audio and video, recording client streams and many other useful things which openlaszlo fails to do currently. So if you are looking to develop a voice chat application, Red5 is the way to go.

Above are just a few which I found useful on my way to Altertunes. There are several more untouched by me, which might be more powerful than the those I have listed above. If you find any, kindly post the same as comment here.

Happy Frameworking and web developement 😉