src/direct/Direct.js

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