• 16 February 2009
    4:48 pm

    My first Javeline application

    in Ajax.org, Tutorials

    For a couple of months now I am working with Javeline platform. Javeline platform or JPF is a platform for developing rich internet applications. The platform has matured enough and it had reached its second version with a lot of bug fixes full documentation and much more. More information you can find at ajax.org.
    javeline

    So let’s start building things and see in action how easy is to create fully Ajaxified web applications.

    First of all go at http://www.ajax.org/downloads and download the latest release of the platform.

    One small notice before we start is that in all the examples that are listed here I am going to use the debug version of the platform. Which means that if you use the release version your application will work even faster.

    When you have finished downloading, open your favorite editor and put the Javeline namespace at the very top of your document.
    Which is:

    "xmlns:j="http://www.javeline.com/2005/jml"

    You are doing that because JPF uses its own markup language which is called JML.

    After that you add the JPF script as well as the loader script.

    Next important part is that you have to load the skin for your application. Which you can do it by adding this in your code:

    <j:skin src="skins.xml" />

    For now we are going to use the default Javeline skin. I am going to write another tutorial on how to write your own skins.

    After you have done the basic configuration that is needed to run a JPF application let’s write something, the simplest thing in JPF is a label. A label in JPF is something like a div in pure HTML. Every Javeline tag starts with the j: so a label would be:

    <j:label>Hi</j:label>

    But let’s do something more interesting like a simple window in the browser.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:j="http://www.javeline.com/2005/jml" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="jpf_debug.js"></script>
    </head>
    <body>
        <j:skin src="skins.xml" />
 
        <j:modalwindow
          visible = "true"
          width   = "340"
          height  = "120">
            Hello world
        </j:modalwindow>
    </body>
</html>

    Here is how it looks:
    jpf example
    As you can see with just a few lines of code you can create a window inside your browser.

    The code is fairly simple as you can see and most of it is self explanatory. I have added a

    j:modalwindow

    tag which will create the javeline window element. Then I have set the

    visible="true"

    . You need always to specify the visible to true attribute in the elements that you want to be shown in the screen. Moreover I have set a with and a height.

    I will also add to the page:

    <j:loader>
    <div id="loadscreen" style="color:#555555; top:45%; left:45%; position:absolute;">Loading...</div>
</j:loader>

    which will show up and get hidden when our application is set-up and running

    All good and easy up until now.

    So lets see it in action. demo.

    Now will add some more things to our window.

    So if you want to add a minimize, maximize and close buttons to the window element is fairly simple in JPF you add the buttons attribute inside the window element like this:

    <j:window 
  buttons = "min|max|close" 
  visible = "true"
  width   = "340"  
  height  = "120" >
</j:window>

    The same goes if you want to specify a position or a title to your window.

    Also to make the example even nicer I added the ‘resizable’ attribute, which let’s the window to be resizable.

    So now our window element looks like this:

    <j:window 
  id        ="win" 
  modal     = "false" 
  buttons   = "min|max|close" 
  resizable = "true"
  visible   = "true"
  top       = "40%"
  left      = "40%"
  width     = "340"  
  height    = "120" 
  title     = "Demo window">
    interact with me!
</j:window>

    What I have added here is an id to the window so I can refer to it if is needed, I position it, add a title also three buttons min, max, and close and finally I added the ‘modal’ attribute which if is set to true would add a layer between the window and the rest in the background and also would disable everything apart from the window.

    So lets see it in action. demo.

    Try to play with it move it around or press the buttons to see how fast and responsive it is. The first time that I used JPF I was really amazed with the speed that things run even in Internet Explorer.

    And for finishing I will introduce you another basic element of JPF the:

    <j:appsettings  />

    This one as you may understood already is used to give the basic configuration that we want our application to have as defaults.

    In order to illustrate that, I will put the attribute drag-outline inside the appsettings.

    <j:appsettings drag-outline="true" />

    And now try our example again and you will notice what the drag-outline did.

    demo

    Here is the source of the examples above.

    Pretty cool e?

    So you get a basic idea of how easily you can do stuff with the Javeline Platform.

    And this is just a very small portion of the capabilities and the freedom that Javeline platform offers to the developer.

    Bye for now.

    7 Comments

     

    1. Lenin Ocaña Sep 4 at 23:45pm

      Excellent, I’m new here so i was looking for some site that explain how to use this.

    2. bone Aug 24 at 19:54pm

      Indeed javeline 2.0 was too buggy, but things have changed dramatically since then.

      In version 2.1 most issues have been resolved and even more features have been added.

      Personally I would recommended only for serious projects :).

    3. Nik Aug 24 at 16:54pm

      Very nice tutorial!
      I have read in a comment above that javeline 2.0 is very buggy.
      How is its status as of version 2.1 now?
      Can you recommend it for serious projects?

    4. bone Mar 20 at 10:42am

      Yes indeed the Javeline 2.0 is very buggy is something that we are aware of. But as you can see in the svn logs there is an active development going on.

      Also if you found any bugs or something that does not work as expected please post it on the forum, it will be very helpful for us in order to improve the Platform. Moreover if you are stuck in something there are people that can help you.

      Now for the forum the ajax.org website was launched a month ago so..

    5. ierpe Mar 17 at 13:19pm

      I got more docs about the Javeline Platform and tried couple of other things… its very buggy, and some tags do not work as they say it does…

      also their forum is empty, and I’m wondering if they really are going to develop this or not…?

    6. bone Feb 25 at 12:59pm

      Thanks, stay tuned more tutorials about Javeline Platform will follow.

    7. MiD-AwE Feb 25 at 12:36pm

      Nice tutorial. clear and straitforward. Thanks.

     

    Speak up

    Required but never displayed

This website requires a descent browser in order to work properly. Please download 'a browser' that is one.   To contact us, contact@observingthedos.com.