Mastering Ext.Direct, Part 1

5. September 2009 – 20:07

Preface

My first idea how to the name this article was “Ext.Direct for Dummies” just because I feel as a one as long as Ext.Direct is concerned. I’ve first heard about it during Ext Conference in April and I think that it is one of the brightest ideas of Ext 3.x release. Nevertheless, I had no time do dig into into it and to understand the concepts fully.

Now I’ve decided to take a journey of discovering what is under hood, how to setup client and server side and how to use Ext.Direct effectively in applications. If you want, I invite you to travel with me.

Who is this article for

It is for developers who are familiar (at least) with basic javascript and Ext object oriented programming, who are able to setup a web page and have it running from a http server and who can code in a server-side programming language. (I will use PHP in this article so PHP developers will have a slight advantage.)

What is Ext.Direct anyway

Rich Internet Applications (RIA) consist of two parts: client side and server side. Client cannot call server functions directly but sends requests, server processes them calling the appropriate functions and returns results back to client.

Let’s say we have a server side class Car that has methods start, go and stop. From the client viewpoint, we need to ask server: Please, start the Car, then go with it and then stop it.

Now, imagine that we could directly call

Car.start();
Car.go();
Car.stop();

and these would call server side methods of server side class Car. Nice, isn’t it? You need to remember only one set of class names and their methods, code is neat and less bug prone.

And that is what Ext.Direct does. You export list of server side classes and their methods that should be made available for client to call and Ext.Direct takes care of the rest so that you can really use Car.start() in your code.

What we need

  1. a working http server we have an access to. It can be installed on the local computer but it must be present. file:///something links will not work
  2. a server side (scripting) language enabled in the above server. If you will use PHP, you need 5+ version to take advantage of ReflectionClass
  3. Ext JS 3.0.0 library or latest Ext version built from SVN, if you have purchased Ext Premium Membership
  4. Ext.Direct Pack
  5. Firefox with Firebug installed
  6. If you use PHP, FirePHP is strongly recommended

Initial setup

  1. create directory direct under your http server document root. Name does not matter in fact but I will use direct as the root for testing in this article.
  2. extract ExtJS into ext subdirectory under direct
  3. extract content of php subdirectory from Ext.Direct Pack under direct
  4. extract content of FirePHPCore-x.x.x into firephp subdirectory under direct

At this point, your direct directory listing should read the following:

+ cache/
+ classes/
+ data/
+ ext/
+ ExtDirect/
+ firephp/
  api.php
  router.php

The first test

We still need to do some work before we can see it running. First, create config.php file with the following content:

<?
// vim: sw=4:ts=4:fdc=4:nospell
 
// authentication would come here in the real world
 
// switch it to false if you do not want to use FirePHP
// $useFirePHP would be false also for a production system
$useFirePHP = true;
 
// require FirePHP files
if($useFirePHP) {
	require_once("firephp/lib/FirePHPCore/FirePHP.class.php");
	require_once("firephp/lib/FirePHPCore/fb.php");
}
 
// define empty fb() function so code does not break 
// on any forgotten fb() calls later
else {
	function fb() {};
}
 
// eof
?>

We also need index.php so we have something to run:

<?require_once("config.php");?>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
  <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="ext/ext-all-debug.js"></script>
  <title id="page-title">Mastering Ext.Direct by Saki</title>
  <script type="text/javascript" src="api.php"></script>
  <script type="text/javascript">
  	Ext.Direct.addProvider(Example.API);
  </script>
</head>
<body>
</body>
</html>

Ext.Direct Pack comes with example PHP classes (Echo, Exception, File and Time) and with api.php file. You can leave classes untouched for the moment but edit api.php to read the following:

<?php
require_once("config.php");
 
session_start();
 
// Include ExtDirect PHP Helpers
require_once('ExtDirect/API.php');
require_once('ExtDirect/CacheProvider.php');
 
// disable caching for development, enable for production
//$cache = new ExtDirect_CacheProvider('cache/api_cache.txt');
$api = new ExtDirect_API();
 
$api->setRouterUrl('router.php'); // default
 
// disable caching for development, enable for production
//$api->setCacheProvider($cache);
 
$api->setNamespace('Example');
$api->setDescriptor('Example.API');
$api->setDefaults(array(
    'autoInclude' => true,
    'basePath' => 'classes'
));
 
$api->add(
    // these are example classes from Ext.Direct PHP stack
    array(
        // real class name is Class_Echo, therefore prefix
        'Echo' => array('prefix' => 'Class_'),
 
        // real class name is Class_Exception, therefore prefix
        'Exception' => array('prefix' => 'Class_'),
        'Time',
        'File'
    )
);
$api->output();
 
$_SESSION['ext-direct-state'] = $api->getState();
 
// eof
?>

So far, so good… Now you can navigate to http://yourserver/direct/index.php and if everything went right you will see the blank page and no errors in Firebug.

Open Firebug console and type the following:

Example.Time.get();

You can see that request is sent to server:

{"action":"Time","method":"get","data":null,"type":"rpc","tid":2}

and that response comes back:

{"type":"rpc","tid":2,"action":"Time","method":"get","result":"09-05-2009 19:46:38"}

You can try other classes and methods:

Example.Echo.send("Test to be echoed");
Example.File.list(".");
Example.Time.get();

and you can also put fb($someVariable) statement in various places of php code if you want to know what’s going on here and there.

Conclusion

We have set up very minimum of Ext.Direct server and client side. The main purpose of this part is to get acquainted with basic components of this technology.

Mastering Ext.Direct, Part 2 >>>


StumbleUpon Toolbar

  1. 12 Responses to “Mastering Ext.Direct, Part 1”

  2. Thank you very much for this introduction to Ext.Direct. As a debug tool, maybe Formaldehyde is best suited. Taken from the google project page: \

    By Miguel on Sep 7, 2009

  3. Saki -

    Thanks for the great walk through introducing people to Ext.Direct and how to get it setup.

    I look forward to seeing the additional parts of the series!

    By Aaron Conran on Sep 7, 2009

  4. Thanks for article. It’s great… I have ideas about Ext.Direct now.

    By Salih Gedik on Sep 13, 2009

  5. Hmm,
    Seems to be a cool idea… But aside from removing some of the coding load off the client-side, I don\’t fully see how this will make my application any better or easier to code…

    I like the idea (as the name implies) that I can make direct server-side function calls from the client. But how does this speed the application up?

    Essentially, I\’m looking for the value of this EXTjs 3.x feature. If it does indeed make coding easier or my application faster (for the client-side), then I will certainly look to update my apps…

    By LoreZyra on Sep 20, 2009

  6. I’m not sure if Ext.Direct speeds up a running application, however, it speeds up development of applications tremendously. Main points:

    - same API client and server side
    - less typing – overhead code is now in Ext
    - less typing also means less (typo) bugs
    - less typing also means shorter, simpler application

    By Saki on Sep 20, 2009

  7. Hi, I found your article while I look for something I can explain Ext.Direct easily to my members of company.
    I want to translate this article and I want to put translated article with your credit on my blog and using it for lecture. Can I do it?

    By prographica on Oct 16, 2009

  8. Thank you for this sir!

    By Cameron on Oct 28, 2009

  9. Hey Saki,

    Thanks for very interesting and useful post.

    I\’ve got a question in regards to Ext.direct.

    I\’m trying to wire Ext.form with Ext.direct.
    Everything seems fine, except Ext does not like results returned by Ext.direct.

    Form looks as follows:
    var fp = new Ext.form.FormPanel({
    api: {
    submit: NRemote.UserService.addPic
    },
    fileUpload: true,
    width: 500,
    frame: true,
    ….
    buttons: [{
    text: \’Save\’,
    handler: function(){
    if(fp.getForm().isValid()){
    fp.getForm().submit({
    waitMsg: \’Uploading…\’,
    success: function(fp, o){
    msg(\’Success\’, \’Processed file \

    By Mike Bevz on Mar 23, 2010

  10. “‘+o.result.filename+’” on the server’);
    },
    failure: function(fp, o){
    msg(’Error’, ‘Error:’+o.result.msg);
    }
    });
    }
    }
    }

    —-

    For backend I’m using standard PHP stack from Ext http://www.extjs.com/products/extjs/download.php?dl=extdirectpack

    —
    When I’m trying to upload a file, I’ve got a failure response all the time. I crawled internet a bit, and some people write that Ext.form expects JSON response not in Ext.direct format: “result”:{”success”:true,”msg”:”Some expection”}}
    When I return success=true – success handler work just fine, however, I don’t like the idea of modification of the standard stack.

    Do you know what I’m doing wrong? Should I set results handlers differently?

    Thanks for reply,

    By Mike Bevz on Mar 23, 2010

  11. Hi,

    i have post my problem on this link

    http://www.sencha.com/forum/showthread.php?135180-Ext.Direct-Grid-for-ASP.net-response-not-parse&p=607694#post607694

    the issue is with the ext direct grid with ASP.net, if anyone have any idea please help

    thanks,

    By Asif Raza on May 30, 2011

  12. This guy stole your post: http://jay.f2fsolutions.net/?mid=textyle&page=6&category=132&document_srl=1978

    By Samaritan on Jul 2, 2011

  13. Fine way of explaining, and fastidious post to obtain data regarding my presentation topic, which i am going to convey in school.

    By Jeff Dailey on Apr 19, 2013

Post a Comment

Saki’s Blog is proudly powered by WordPress Entries (RSS) and Comments (RSS). Theme by Bob