src/direct/Direct.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7 /**
   8  * @class Ext.Direct
   9  * @extends Ext.util.Observable
  10  * <p><b><u>Overview</u></b></p>
  11  *
  12  * <p>Ext.Direct aims to streamline communication between the client and server
  13  * by providing a single interface that reduces the amount of common code
  14  * typically required to validate data and handle returned data packets
  15  * (reading data, error conditions, etc).</p>
  16  *
  17  * <p>The Ext.direct namespace includes several classes for a closer integration
  18  * with the server-side. The Ext.data namespace also includes classes for working
  19  * with Ext.data.Stores which are backed by data from an Ext.Direct method.</p>
  20  *
  21  * <p><b><u>Specification</u></b></p>
  22  *
  23  * <p>For additional information consult the
  24  * <a href="http://extjs.com/products/extjs/direct.php">Ext.Direct Specification</a>.</p>
  25  *
  26  * <p><b><u>Providers</u></b></p>
  27  *
  28  * <p>Ext.Direct uses a provider architecture, where one or more providers are
  29  * used to transport data to and from the server. There are several providers
  30  * that exist in the core at the moment:</p><div class="mdetail-params"><ul>
  31  *
  32  * <li>{@link Ext.direct.JsonProvider JsonProvider} for simple JSON operations</li>
  33  * <li>{@link Ext.direct.PollingProvider PollingProvider} for repeated requests</li>
  34  * <li>{@link Ext.direct.RemotingProvider RemotingProvider} exposes server side
  35  * on the client.</li>
  36  * </ul></div>
  37  *
  38  * <p>A provider does not need to be invoked directly, providers are added via
  39  * {@link Ext.Direct}.{@link Ext.Direct#add add}.</p>
  40  *
  41  * <p><b><u>Router</u></b></p>
  42  *
  43  * <p>Ext.Direct utilizes a "router" on the server to direct requests from the client
  44  * to the appropriate server-side method. Because the Ext.Direct API is completely
  45  * platform-agnostic, you could completely swap out a Java based server solution
  46  * and replace it with one that uses C# without changing the client side JavaScript
  47  * at all.</p>
  48  *
  49  * <p><b><u>Server side events</u></b></p>
  50  *
  51  * <p>Custom events from the server may be handled by the client by adding
  52  * listeners, for example:</p>
  53  * <pre><code>
  54 {"type":"event","name":"message","data":"Successfully polled at: 11:19:30 am"}
  55
  56 // add a handler for a 'message' event sent by the server
  57 Ext.Direct.on('message', function(e){
  58     out.append(String.format('&lt;p>&lt;i>{0}&lt;/i>&lt;/p>', e.data));
  59             out.el.scrollTo('t', 100000, true);
  60 });
  61  * </code></pre>
  62  * @singleton
  63  */
  64 Ext.Direct = Ext.extend(Ext.util.Observable, {
  65     /**
  66      * Each event type implements a getData() method. The default event types are:
  67      * <div class="mdetail-params"><ul>
  68      * <li><b><tt>event</tt></b> : Ext.Direct.Event</li>
  69      * <li><b><tt>exception</tt></b> : Ext.Direct.ExceptionEvent</li>
  70      * <li><b><tt>rpc</tt></b> : Ext.Direct.RemotingEvent</li>
  71      * </ul></div>
  72      * @property eventTypes
  73      * @type Object
  74      */
  75
  76     /**
  77      * Four types of possible exceptions which can occur:
  78      * <div class="mdetail-params"><ul>
  79      * <li><b><tt>Ext.Direct.exceptions.TRANSPORT</tt></b> : 'xhr'</li>
  80      * <li><b><tt>Ext.Direct.exceptions.PARSE</tt></b> : 'parse'</li>
  81      * <li><b><tt>Ext.Direct.exceptions.LOGIN</tt></b> : 'login'</li>
  82      * <li><b><tt>Ext.Direct.exceptions.SERVER</tt></b> : 'exception'</li>
  83      * </ul></div>
  84      * @property exceptions
  85      * @type Object
  86      */
  87     exceptions: {
  88         TRANSPORT: 'xhr',
  89         PARSE: 'parse',
  90         LOGIN: 'login',
  91         SERVER: 'exception'
  92     },
  93
  94     // private
  95     constructor: function(){
  96         this.addEvents(
  97             /**
  98              * @event event
  99              * Fires after an event.
 100              * @param {event} e The {@link Ext.Direct#eventTypes Ext.Direct.Event type} that occurred.
 101              * @param {Ext.direct.Provider} provider The {@link Ext.direct.Provider Provider}.
 102              */
 103             'event',
 104             /**
 105              * @event exception
 106              * Fires after an event exception.
 107              * @param {event} e The {@link Ext.Direct#eventTypes Ext.Direct.Event type} that occurred.
 108              */
 109             'exception'
 110         );
 111         this.transactions = {};
 112         this.providers = {};
 113     },
 114
 115     /**
 116      * Adds an Ext.Direct Provider and creates the proxy or stub methods to execute server-side methods.
 117      * If the provider is not already connected, it will auto-connect.
 118      * <pre><code>
 119 var pollProv = new Ext.direct.PollingProvider({
 120     url: 'php/poll2.php'
 121 });
 122
 123 Ext.Direct.addProvider(
 124     {
 125         "type":"remoting",       // create a {@link Ext.direct.RemotingProvider}
 126         "url":"php\/router.php", // url to connect to the Ext.Direct server-side router.
 127         "actions":{              // each property within the actions object represents a Class
 128             "TestAction":[       // array of methods within each server side Class
 129             {
 130                 "name":"doEcho", // name of method
 131                 "len":1
 132             },{
 133                 "name":"multiply",
 134                 "len":1
 135             },{
 136                 "name":"doForm",
 137                 "formHandler":true, // handle form on server with Ext.Direct.Transaction
 138                 "len":1
 139             }]
 140         },
 141         "namespace":"myApplication",// namespace to create the Remoting Provider in
 142     },{
 143         type: 'polling', // create a {@link Ext.direct.PollingProvider}
 144         url:  'php/poll.php'
 145     },
 146     pollProv // reference to previously created instance
 147 );
 148      * </code></pre>
 149      * @param {Object/Array} provider Accepts either an Array of Provider descriptions (an instance
 150      * or config object for a Provider) or any number of Provider descriptions as arguments.  Each
 151      * Provider description instructs Ext.Direct how to create client-side stub methods.
 152      */
 153     addProvider : function(provider){
 154         var a = arguments;
 155         if(a.length > 1){
 156             for(var i = 0, len = a.length; i < len; i++){
 157                 this.addProvider(a[i]);
 158             }
 159             return;
 160         }
 161
 162         // if provider has not already been instantiated
 163         if(!provider.events){
 164             provider = new Ext.Direct.PROVIDERS[provider.type](provider);
 165         }
 166         provider.id = provider.id || Ext.id();
 167         this.providers[provider.id] = provider;
 168
 169         provider.on('data', this.onProviderData, this);
 170         provider.on('exception', this.onProviderException, this);
 171
 172
 173         if(!provider.isConnected()){
 174             provider.connect();
 175         }
 176
 177         return provider;
 178     },
 179
 180     /**
 181      * Retrieve a {@link Ext.direct.Provider provider} by the
 182      * <b><tt>{@link Ext.direct.Provider#id id}</tt></b> specified when the provider is
 183      * {@link #addProvider added}.
 184      * @param {String} id Unique identifier assigned to the provider when calling {@link #addProvider}
 185      */
 186     getProvider : function(id){
 187         return this.providers[id];
 188     },
 189
 190     removeProvider : function(id){
 191         var provider = id.id ? id : this.providers[id];
 192         provider.un('data', this.onProviderData, this);
 193         provider.un('exception', this.onProviderException, this);
 194         delete this.providers[provider.id];
 195         return provider;
 196     },
 197
 198     addTransaction: function(t){
 199         this.transactions[t.tid] = t;
 200         return t;
 201     },
 202
 203     removeTransaction: function(t){
 204         delete this.transactions[t.tid || t];
 205         return t;
 206     },
 207
 208     getTransaction: function(tid){
 209         return this.transactions[tid.tid || tid];
 210     },
 211
 212     onProviderData : function(provider, e){
 213         if(Ext.isArray(e)){
 214             for(var i = 0, len = e.length; i < len; i++){
 215                 this.onProviderData(provider, e[i]);
 216             }
 217             return;
 218         }
 219         if(e.name && e.name != 'event' && e.name != 'exception'){
 220             this.fireEvent(e.name, e);
 221         }else if(e.type == 'exception'){
 222             this.fireEvent('exception', e);
 223         }
 224         this.fireEvent('event', e, provider);
 225     },
 226
 227     createEvent : function(response, extraProps){
 228         return new Ext.Direct.eventTypes[response.type](Ext.apply(response, extraProps));
 229     }
 230 });
 231 // overwrite impl. with static instance
 232 Ext.Direct = new Ext.Direct();
 233
 234 Ext.Direct.TID = 1;
 235 Ext.Direct.PROVIDERS = {};