Learn from Saki

Knowledge is power

This content is for registered users only. Please login.
Hello! To access your account, please Log in. Not a member? Sign up
  • Videos
  • Blog
  • Examples
  • Services
  • Add-ons
  • About

Mastering Ext.Direct, Part 2

September 7, 2009 by saki 3 Comments

Code in this post can be obsolete, however, principles and theory may still apply.

<<< Mastering Ext.Direct, Part 1

Adding server-side classes

After completing part 1, we have the basic setup running. Although Ext.Direct PHP stack example classes are fine for demonstrating the functionality we will need our own PHP classes in the real life. I’m not going to explain basics of PHP object oriented programming, anyway, there is a couple of things to point out. Let’s create (useless) class Car from part1. For that, create file classes/Car.php with the following content:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
&lt;?php
// vim: sw=4:ts=4:fdc=4:nospell
    class Car {
        /**
          * @remotable
          */
        public function start() {
            return "Started";
        } // eo function start
 
        /**
          * @remotable
          */
        public function go($speed) {
            return "The speed is $speed";
        } // eo function go
 
        /**
          * @remotable
          */
        public function stop() {
            return "Stopped";
        } // eo function stop
 
        public function repair() {
            return "Done";
        } // eo function repair
 
    } // eo class car
// eof
Then edit api.php and add Car to $api->add() call so that it reads:
1
2
3
4
5
6
7
8
9
10
11
// ...
$api-&gt;add(
    array(
        'Echo' =&gt; array('prefix' =&gt; 'Class_'),
        'Exception' =&gt; array('prefix' =&gt; 'Class_'),
        'Time',
        'File',
        'Car'
    )
);
// ...
Reload index.php and type in Firebug console:
1
Example.Car.start();
You should get the following response:
1
{"type":"rpc","tid":2,"action":"Car","method":"start","result":"Started"}
Now type:
1
Example.Car.repair();
Error, yes? Why? Take a deeper look at Car source code. Some methods have comments
1
2
3
        /**
          * @remotable
          */
but repair does not have it. And that is the single reason why it is not exported to API so it is not known to the client application. You can verify it by typing:
1
Example.API.actions.Car;
in Firebug console. If you want to know how is it done study ExtDirect_API PHP class in classes/API.php file and ReflectionClass documentation. In any case, it makes our life very easy as we only need to:
  • write server side classes
  • add the above comment to the methods that can be called remotely
Can it be simpler?

Returning values

Type in Firebug console:
1
console.log(Example.Car.start());
Now you see that the return value of the call is undefined despite of the fact that server side method returns string "Started". This leads us to a very important note: Ext.Direct calls are ASYNCHRONOUS. That means that the code execution does NOT wait until the call is finished but it immediately continues. So never try to use the return value, neither assume that you have data available at the line that follows the call. The value returned from the server side method call is wrapped in the request response and it arrives when it arrives. It can take milliseconds or seconds depending on the connection speed, server execution time and other factors. I will discuss response processing in the next part

Exceptions

Edit go method of our Car class so that it reads:
1
2
3
4
5
6
7
8
9
        /**
          * @remotable
          */
        public function go($speed) {
            if(0 &gt;= $speed || 200 &lt; $speed) {
                throw new Exception("Speed must be between 0 and 200");
            }
            return "The speed is $speed $unit";
        } // eo function go
and execute:
1
Example.Car.go(300);
You get the following response:
1
2
3
4
5
6
7
8
{"type":"exception","tid":3,
"message":"Speed must be between than 0 and 200",
"where":
"#0 [internal function]: Car-&gt;go(300)n
#1 /ddata1/devel/learnfromsaki.com/direct/ExtDirect/Router.php(176): call_user_func_array(Array, Array)n
#2 /ddata1/devel/learnfromsaki.com/direct/ExtDirect/Router.php(62): ExtDirect_Router-&gt;rpc(Object(stdClass))n
#3 /ddata1/devel/learnfromsaki.com/direct/router.php(23): ExtDirect_Router-&gt;dispatch()n
#4 {main}"}
You see that the response type changed from rpc (remote procedure call) to exception and the response contains member message that is the text of the Exception we’ve thrown at server side. So far so good, however, where member contains debugging data that, while useful for debugging, shouldn’t be disclosed in a production environment. You can freely throw exceptions while debugging your Ext.Direct application but you should consider another method(s) of handling errors for production systems. I will tackle it again later in this series.

Combining requests

Type the following:
1
Example.Car.start();Example.Car.go(80);Example.Car.stop();
The request is:
1
2
3
4
5
[
{"action":"Car","method":"start","data":null,"type":"rpc","tid":4},
{"action":"Car","method":"go","data":[80],"type":"rpc","tid":5},
{"action":"Car","method":"stop","data":null,"type":"rpc","tid":6}
]
and the response is:
1
2
3
4
5
[
{"type":"rpc","tid":4,"action":"Car","method":"start","result":"Started"},
{"type":"rpc","tid":5,"action":"Car","method":"go","result":"The speed is 80"},
{"type":"rpc","tid":6,"action":"Car","method":"stop","result":"Stopped"}
]
Ext.Direct combines requests that come within a configurable time frame into one to minimize the server round trips count.

Conclusion

Now we know a couple of basics:
  • we need to export API from server to client – Ext.Direct stack does a lot of dirty work for us
  • we can call server side methods directly at client prefixed with a configurable namespace (Example in our case)
  • we cannot use return values of client calls because calls are asynchronous
  • to add classes we need to add them to $api->add() call and add /** @remotable */ comments to methods
  • multiple requests and responses are combined in one if they come fast enough

Mastering Ext.Direct, Part 3 >>>

  • Author
  • Recent Posts
Follow me:
saki
I'm a well seasoned developer, consultant and educator of web applications based mainly on Sencha libraries, PHP, MySQL and Node.js. Besides (Apple) computers, I love photography and mountain biking.
Follow me:
Latest posts by saki (see all)
  • Ext, Angular, React, and Vue - June 27, 2019
  • The Site Resurgence - February 11, 2018
  • Configuring ViewModel Hierarchy - June 19, 2015

Filed Under: Know-how

Comments

  1. Nils dehl says

    September 8, 2009 at 9:13 am

    Thank you for this example saki. Well discribt. I am looking forward for Part 3 ;).

    Log in to Reply
  2. PA Parent says

    September 9, 2009 at 10:26 pm

    Wow! Thanks for the example! Can’t wait for Part III

    Log in to Reply
  3. LoBe says

    September 12, 2009 at 1:49 pm

    Thank you!

    Log in to Reply

We will be happy to hear back from you Cancel reply

You must be logged in to post a comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Categories

  • Addons (2)
  • Architecture (14)
  • Examples (2)
  • ExtJS (26)
  • Howtos (16)
  • Javascript (1)
  • Know-how (32)
  • Linux (1)
  • Mac OS X (2)
  • SASS/CSS (2)
  • Snippets (9)
  • Theory (14)
  • Touch (6)
  • Tutorials (5)
  • What is a … (9)

Tag cloud

abstract class accordion application button class cluster column component config css definition deprecated design education event example extension extjs factory function form grid html initComponent items javascript Know-how knowledge layout Linux listener mysql old panel pattern php plugin render snippet sql sqlite state table touch tree viewpoint

Membership

Become a Member
Affiliate Program

Support

FAQ
Contact

Legal

Terms and Conditions
Licensing
Privacy Policy

Copyright © 2021 · Dynamik-Gen on Genesis Framework · WordPress · Log in