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
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
stop. From the client viewpoint, we need to ask server: Please,
go with it and then
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
- 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
- a server side (scripting) language enabled in the above server. If you will use PHP, you need 5+ version to take advantage of ReflectionClass
- Ext JS 3.0.0 library or latest Ext version built from SVN, if you have purchased Ext Premium Membership
- Ext.Direct Pack
- Firefox with Firebug installed
- If you use PHP, FirePHP is strongly recommended
- create directory
directunder your http server document root. Name does not matter in fact but I will use
directas the root for testing in this article.
- extract ExtJS into
- extract content of php subdirectory from Ext.Direct Pack under
- extract content of FirePHPCore-x.x.x into
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:
We also need
index.php so we have something to run:
Mastering Ext.Direct by Saki Ext.Direct.addProvider(Example.API);
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:
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:
You can see that request is sent to server:
and that response comes back:
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.
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 >>>
- Ext, Angular, React, and Vue - 27. June 2019
- The Site Resurgence - 11. February 2018
- Configuring ViewModel Hierarchy - 19. June 2015
I would like to thank you for the efforts you have put in writing this website.
I am hoping to see the same high-grade blog posts by you in the future as well.
In truth, your creative writing abilities has inspired me to get my own, personal website now 😉
There is certainly a great deal to know about this issue.
I really like all the points you’ve made.