home mail me! syndication

overthinkings

by Ruben Daniels

Javeline Platform 101

TelePort

I’ve said before that Javeline Platform is an Ajax framework. TelePort is the part of Platform that actually makes it that. TelePort is the Asynchronous communication library that uses Javascript And Xml(=Ajax) to communicate to a server without refreshing the page. For a basic breakdown of what Ajax is see this article.

Web services
The first RPC protocol I’ve come in touch with was XML-RPC. It is the brainchild of Dave Winer. Back in 2001 I wrote a JavaScript library called vcXMLRPC which used the xmlHttpRequest Object to send the XML-RPC messages from a webpage to the server without refreshing the page. RPC stands for Remote Procedure Calling. In essence this means you call a function on one computer and it will be executed on another computer. XML-RPC describes how the call is encoded in XML.

Microsoft, IBM and others thought this was a very good idea. It could solve the very difficult IT problem of integrating different services. Within large organizations many different systems exists of all sorts of vendors. It’s very difficult to connect these proprietary interface to eachother (i.e. a CRM application on Linux and an oracle system on windows). If they both use some form of RPC using an agreed format then suddenly it becomes a simple problem; they speak the same language. These big companies together with Dave and the W3C among others started working on a standard called SOAP, which is basically an enterprise version of XML-RPC.

Well, over time several other protocols were created. A group of people doing a lot of javascript based RPC thought it would be nicer to encode the messages using javascript itself. So they created JSON-RPC. With all the hype around web services the PHP developers felt it was too bloated. Why not just use REST to get the xml. If you want to call the method getUsers. Just call http://www.example.com/rpc.php?func=getUsers and you are done. No extra protocol needed. In particular for non-enterprise solutions this is a very easy way.

Javeline TelePort is esentially a communication library that can speak all these protocols. The way you specify the RPC definition is such that you can easily change the protocol or interface without your application being affected.

So how does it work?
The first example is a small Javeline application that calls the Flickr API and requests pictures based on a search keyword. Flickr uses the XML-RPC protocol. The API from Flickr is not the simplest, but I thought it to be a nice first example of Ajax in Platform.

Javeline Markup Language

<j:teleport>
   <j:rpc id="flickr"
      protocol="XMLRPC"
      url="http://www.flickr.com/services/xmlrpc/"
      receive="flickrResult">
      <method name="flickr.photos.search" />
   </j:rpc>
</j:teleport>

This is the JML definition of the web service. The basic structure is always the same. The RPC tag tells Platform which protocol to use and to which url to post. The receive attribute specifies which function is called when one of the method calls return. We have specified a single method called flickr.photos.search.

JavaScript

//Call the Flickr API
flickr["flickr.photos.search"]({
   api_key : '5258414d2df91d81b106d9170b980821',
   text : search_value,
   per_page : 50,
   page : 1
});

//Receive the result
function flickrResult(data, status, extra){
   if(state == __RPC_ERROR__){
      alert("Sorry, we were unable to get a result");
   }
   else if(state == __RPC_TIMEOUT__){
      if(extra.retries < RETRY)
         return flickr.retry(extra.id);
      else alert("Sorry, www.flickr.com timed out");
   }
   else{
      //Process the data
   }
}


In javascript we call the RPC method with the search value from the textbox. When it returns the function is called. This function is called in three cases. The call can be successfull, timed out or have an error. Processing the data is outside the scope of this section (see SmartBindings). The extra object contains all sorts of information about the call. It has a reference to the xmlHttpRequest object as well as the call id. TelePort can retry a call for you automatically using the retry method.

As you might have noticed, the XML-RPC protocol doesnt use named variables. Other protocols like SOAP, POST and JSON do:

Javeline Markup Language

<j:rpc id="comm" protocol="POST"
   url-eval="HOST_PATH+'/webapp.php'"
   method-name="func" autoroute="true">
   <j:method name="login">
      <j:variable name="username" />
      <j:variable name="password" />
      <j:variable name="status" />
   </j:method>
   <j:method name="getUsers" />
   <j:method name="renameUser">
      <j:variable name="name" />
   </j:method>
</j:rpc>

This TelePort definition calls the methods using the POST protocol. It will call the specified url with ?func=method_name as specified in the method-name attribute.

JavaScript

comm.setCallback("login", function(data){
   alert(data);
});
comm.login("ruben", "passwd", "online");

The setCallback method can be used to specify a callback function other than doing that using a receive attribute on the TelePort definition. Other features of TelePort include combining multiple calls in one call and rerouting calls to circumvent certain security features of the browser.

Pages: 1 2 3 4 5 6 7 8 9 10 11

11 Comments »

  Kai Tischler wrote @ October 4th, 2007 at 12:12 am

Hello Ruben !

I have already sent two emails to the Javeline team via the “info@javeline.nl” email
address, but unfortunately I got no response :-(

So I am contacting You directly here via this blog entry; because I have fallen in love with Your layout engine almost immediately :-) ! I am currently doing some research with regard to layout in the native contemporary browsers, and Your approach seems to be really unique ! I have played around with it a little bit and am so impressed right now that I want to leverage Your layout engine ! I know that I can use the packager to extract only parts out of all the Javeline SDK stuff; but I couldn’t make it extract the layout parts … in fact I couldn’t get it to work at all …

I am also very much excited about Javeline in its whole glory, but this particular blog comment shall address the issue of leveraging Your layout engine separately. Is there a technical way to do it ? And what about licensing then ? Or do You know of other layout engines for browsers which are as capable as Yours seems to be ?

I am looking forward to the comments to come !

Cheers

Kai

  Ruben wrote @ October 4th, 2007 at 9:45 am

Hi Kai,

I just found your e-mail. It got lost in the spam box somehow. You will get a reply from me on that. It is possible to extract the layout engine using the packager. For what purpose would you like to use it? Please register to the internals mailinglist at http://developer.javeline.net/mailinglists.php and sent your answers there so the community can follow them as well.

Kind Regards,

Ruben

  overthinkings » Contextmagic and Repeat wrote @ October 22nd, 2007 at 2:49 pm

[…] this was the first time you read about Javeline PlatForm, this article is a good place to start learning more about this Web Application […]

  Mehmet KURT wrote @ January 2nd, 2008 at 4:27 pm

Please ! Help Me…

Using for Framework Javeline… Help Me??

  bharath wrote @ February 9th, 2008 at 3:25 pm

hi , my name is bharath
i have a doubt in ajax connectivity

how to connect an ajax application to database using jdbc…
can u plz clarify my doubt.. with sample example with coding.
thanx & regards.

  Ruben wrote @ February 14th, 2008 at 8:32 am

Hi Bharath,

Ajax applications connect to a backend. Most popular nowadays is to use REST to connect to a backend. This backend can be written in PHP, Perl, ASP, JSP or any other language. It’s the responsibility of that language to connect to a database using jdbc.

In Javeline PlatForm you would do something like this:

<j:teleport>
   <j:rpc id="comm" protocol="POST">
      <j:method name="getUsers" url="http://example.com/users.php">
         <j:variable name="group_id" />
      </j:method>
   </j:rpc>
</j:teleport>

<j:model id="myUsers" load="rpc:comm.getUsers(10)" />

<j:list model="myUsers">
   <j:bindings>
     <j:caption select="@username" />
     <j:icon select="@icon" />
     <j:traverse select="user" />
   </j:bindings>
</j:list>

or if you want to use the javascript approach with Javeline PlatForm you’d do:


var http = new jpf.http();
var data = http.getXml(”http://example.com/users.php?group_id=10″, function(data, state, extra){
   if(state == __HTTP_SUCCESS__){
      alert(”My XML: ” + data.xml);
   }else{
      alert(”An error has occurred”);
   }
});

Please note that these code examples are for v0.9.8 of Javeline PlatForm which will be released shortly.

Kind Regards,

Ruben

[…] early version of Javeline PlatForm and up untill that moment I had only positioned elements using anchoring. I did remember a nice feature that Visual Basic had, where I could align an element to one of the […]

[…] supports Anchoring, Alignment and position using a grid (similar to a table in […]

  Michal wrote @ January 29th, 2009 at 4:19 pm

Hi There,

Guys, I have gone thru the documentation available on javeline.com website nevertheless I am still unable to start with it. There are several examples which I have browse as well but would you have something like tutorial or learn by example so, I can quickly adopt and use your framework?

Thank you,
Michal

  Martijn wrote @ July 6th, 2009 at 1:14 pm

I’m trying to send a form in JPF. I use a set of form elements checkbox, textbox, etc. I would like to send all these elements with Teleport to a php-script to put the values in a database. I get it to work if I declare the variables within the tags. This seems not very efficient to me.

Is it possible (like plain HTML), to submit all the form elements in one, without declaring them again within the Teleport-tags?

I.e.:

  Ruben wrote @ July 6th, 2009 at 2:51 pm

Hi Martijn,

Yes of course. There is a demo on this online here:
http://www.ajax.org/#demos/elements.s.submission

It uses a list bound to the data, but I’m sure you can see that it works the same with form elements bound to the xml.

Kind Regards,
Ruben

Your comment

HTML-Tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>