netzke-core 0.8.3 → 0.8.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ece4a46f4a0c3492187c9ae655f1eeca26dfdd55
-  data.tar.gz: 7cd2bbee3fc83355f8d3f043706d5849646a093d
+  metadata.gz: 55fca10ef68267045dcd10e37b97ae453c7ec861
+  data.tar.gz: bf701fb44bcb1d3ce8eeb588d605506037c2ad7d
 SHA512:
-  metadata.gz: 4011ff3d2e6a8990b4a52f354eb8dea35b5bcc45d88870deb240d883835ed0796268fe540fdaec46ad5587934864165a8da7ef7dc655f47d32d635ba35c70671
-  data.tar.gz: 0acff09f2bd2eadfec95b50a337067234ec62cd6b453f16432edb4ef17c11218143ddc8c4e081cbeb30b7a75950e976a9b560027173f27f24c85f4ec2db31171
+  metadata.gz: a8ab0114b06c034a7f2916b529fcfd2d6812573b880676e05de202d8bf5bc8e5feffee6619f21c402cff5415ac12293d39026d2aaa6e178787722d19b06547d8
+  data.tar.gz: 3116eebeb560d37dbadafdc12c2694d6c76c9b58f12015770ddea379621dd26e5308e28a0813f646ff7fb0f9614f96a19024fa6cf87ea77d681249226da80c8c

data/CHANGELOG.md

@@ -1,3 +1,14 @@
+# v0.8.4 - 2013-05-22
+* bug fix
+  * Re-enable session expiration detection
+  * Do not crash on a rare situation when an endpoint is being called on an non-existing child component
+* improvements
+  * Add `serverexception` event on `Netzke.directProvider`, subscribe to it to handle server exceptions
+  * Endpoint calls will now pass Ext.direct.Exception to the provided callback function in case of server exception
+  * A component will clean-up the loading mask when a server exception occurs during dynamic component loading
+  * `netzkeFeedback` now shows multiple messages in a single slide banner
+  * Implement multi-instance child component loading with different configuration (see MultiInstanceLoading in the test app)
+
 # v0.8.3 - 2013-03-22
 * support Rails 3.2.13
 

data/Gemfile

@@ -6,6 +6,7 @@ gem 'haml'
 
 group :test do
   gem 'capybara'
+  gem 'selenium-webdriver'
   gem 'database_cleaner'
   gem 'rspec-rails'
   gem 'pry-rails'

data/README.md

@@ -8,7 +8,7 @@ Some knowledge of Sencha Ext JS will be needed in order to fully understand this
 
 ## Rationale
 
-[Sencha Ext JS]("http://www.sencha.com/products/extjs") is a powerful front-end framework, which is used for crafting web-apps that give the end user experience similar to that of a desktop application. It has an extensive set of widgets ('components'), and leverages a modular approach to its fullest: a developer can extend components (using Ext JS's own [class system]("http://docs.sencha.com/ext-js/4-1/#!/guide/class_system")), nest components using many powerful layouts, dynamically create and destroy them. The architecture of Ext JS is well-thought and very complete.
+[Sencha Ext JS]("http://www.sencha.com/products/extjs") is a powerful front-end framework, which is used for crafting web-apps that give the end user experience similar to that of a desktop application. It has an extensive set of widgets ('components'), and leverages a modular approach to its fullest: a developer can extend components (using Ext JS's own [class system]("http://docs.sencha.com/ext-js/4-1/#!/guide/class_system")), nest components using many powerful layouts, dynamically create and destroy them. The architecture of Ext JS is well thought out and very complete.
 
 However, with Ext JS being server-agnostic, it is not always a trivial task for a developer to bind Ext JS components to the server-side data *and* application business logic, especially in complex applications. Netzke as the solution that allows you to extend the modular approach to the server side.
 
@@ -25,11 +25,11 @@ Netzke Core takes the burden of implementing the following key aspects of the fr
 
 ...and more.
 
-All this extremely facilitates building fast, low-traffic, robust, and highly maintainable applications. As a result, your code scales much better in the sense of complexity, compared to using conventional MVC, where developers are pretty much limited with programming techniques they can apply.
+All this extremely facilitates building fast, low-traffic, robust, and highly maintainable applications. As a result, your code scales much better in the sense of complexity, compared to using conventional MVC, where developers are pretty much limited with the programming techniques that they can apply.
 
 ## HelloWorld component
 
-*This component is distributed as a part of the test application, see `test/core_test_app/components`.*
+*This component is distributed as a part of the test application, see `test/core_test_app/components/hello_world.rb`.*
 
 Ext JS files are not distributed with Netzke, so, make sure that they are located in (or sym-linked as) `YOUR_APP/public/extjs`.
 
@@ -365,6 +365,12 @@ This assumes that the Ext JS library is located/symlinked in `test/core_test_app
 
     $ EXTJS_SRC=cdn rake
 
+## Contributions and support
+
+Help developing Netzke by submitting a pull request when you think others can benefit from it.
+
+If you feel particularily generous, you can donate a couple of bucks a week at [GitTip](https://www.gittip.com/nomadcoder/).
+
 ## Useful links
 
 * [Project website](http://netzke.org)

data/javascripts/base.js

@@ -47,10 +47,6 @@ Netzke.isLoading=function () {
 // xtypes of cached Netzke classes
 Netzke.cache = [];
 
-Netzke.componentNotInSessionHandler = function() {
-  throw "Netzke: component not in Rails session. Define Netzke.componentNotInSessionHandler to handle this.";
-};
-
 Ext.define("Netzke.classes.Core.Mixin", {
   isNetzke: true, // to distinguish Netzke components from regular Ext components
 
@@ -111,6 +107,8 @@ Ext.define("Netzke.classes.Core.Mixin", {
     } else {
       for (var instr in instructions) {
         var args = instructions[instr];
+        if(args instanceof Object && Ext.isEmpty(args))
+          args = [];
 
         if (Ext.isFunction(this[instr])) {
           // Executing the method.
@@ -120,7 +118,7 @@ Ext.define("Netzke.classes.Core.Mixin", {
           if (childComponent) {
             childComponent.netzkeBulkExecute(args);
           } else if (Ext.isArray(args)) { // only consider those calls that have arguments wrapped in an array; the only (probably) case when they are not, is with 'success' property set to true in a non-ajax form submit - silently ignore that
-            throw "Netzke: Unknown method or child component '" + instr +"' in component '" + this.id + "'"
+            throw "Netzke: Unknown method or child component '" + instr + "' in component '" + this.id + "'"
           }
         }
       }
@@ -135,11 +133,20 @@ Ext.define("Netzke.classes.Core.Mixin", {
   },
 
   /**
-  * When an endpoint call is issued while the session has expired, this method is called. Override it to do whatever is appropriate.
+  * This method gets called by the server when the component to which an endpoint call was directed to, is not in the session anymore.
   * @private
   */
-  netzkeComponentNotInSession: function() {
-    Netzke.componentNotInSessionHandler();
+  netzkeSessionExpired: function() {
+    this.netzkeSessionIsExpired = true;
+    this.onNetzkeSessionExpired();
+  },
+
+  /**
+   * Override this method to handle session expiration. E.g. you may want to inform the user that they will be redirected to the login page.
+   * @private
+   */
+  onNetzkeSessionExpired: function() {
+    Netzke.warning("Component not in session. Override `onNetzkeSessionExpired` to handle this.");
   },
 
   /**

data/javascripts/ext.js

@@ -56,22 +56,37 @@ Ext.define('Netzke.FeedbackGhost', {
 Ext.define('Netzke.classes.NetzkeRemotingProvider', {
   extend: 'Ext.direct.RemotingProvider',
 
+  initComponent: function() {
+    this.callParent();
+    this.addEvent('serverexception'); // because 'exception' is reserved by Ext JS (but never used!)
+  },
+
+  listeners: {
+    // work-around the fact that 'exception' is never thrown by Ext JS
+    data: function(self, e) {
+      if (Ext.getClass(e) == Ext.direct.ExceptionEvent) {
+        this.fireEvent('serverexception', e);
+      }
+    }
+  },
+
   getCallData: function(t){
     return {
-      act: t.action, // rails doesn't really support having a parameter named "action"
-      method: t.method,
+      path: t.action,
+      endpoint: t.method,
       data: t.data,
-      type: 'rpc',
       tid: t.id
     }
   },
 
-  addAction: function(action, methods) {
-    var cls = this.namespace[action] || (this.namespace[action] = {});
-    for(var i = 0, len = methods.length; i < len; i++){
-      method = Ext.create('Ext.direct.RemotingMethod', methods[i]);
-      cls[method.name] = this.createHandler(action, method);
-    }
+  addEndpointsForComponent: function(componentPath, endpoints) {
+    var cls = this.namespace[componentPath] || (this.namespace[componentPath] = {});
+
+    Ext.Array.each(endpoints, function(ep) {
+      var methodName = ep.camelize(true),
+          method = Ext.create('Ext.direct.RemotingMethod', {name: methodName, len: 1, blah: 666});
+      cls[methodName] = this.createHandler(componentPath, method);
+    }, this);
   },
 
   // HACK: Ext JS 4.0.0 retry mechanism is broken
@@ -84,11 +99,25 @@ Ext.define('Netzke.classes.NetzkeRemotingProvider', {
   }
 });
 
+Netzke.directProvider = new Netzke.classes.NetzkeRemotingProvider({
+  type: "remoting",       // create a Ext.direct.RemotingProvider
+  url: Netzke.ControllerUrl + "direct/", // url to connect to the Ext.Direct server-side router.
+  namespace: "Netzke.providers", // Netzke.providers will have a key per Netzke component, each mapped to a hash with a RemotingMethod per endpoint
+  actions: {},
+  maxRetries: Netzke.core.directMaxRetries,
+  enableBuffer: true, // buffer/batch requests within 10ms timeframe
+  timeout: 30000 // 30s timeout per request
+});
+
+Ext.Direct.addProvider(Netzke.directProvider);
+
 // Override Ext.Component's constructor to enable Netzke features
 Ext.define(null, {
   override: 'Ext.Component',
   constructor: function(config) {
     if (this.isNetzke) {
+      // component loading index
+      this.netzkeLoadingIndex = 0;
 
       this.netzkeComponents = config.netzkeComponents;
       this.passedConfig = config;
@@ -116,18 +145,6 @@ Ext.define(null, {
   }
 });
 
-Netzke.directProvider = new Netzke.classes.NetzkeRemotingProvider({
-  type: "remoting",       // create a Ext.direct.RemotingProvider
-  url: Netzke.ControllerUrl + "direct/", // url to connect to the Ext.Direct server-side router.
-  namespace: "Netzke.providers", // namespace to create the Remoting Provider in
-  actions: {},
-  maxRetries: Netzke.core.directMaxRetries,
-  enableBuffer: true, // buffer/batch requests within 10ms timeframe
-  timeout: 30000 // 30s timeout per request
-});
-
-Ext.Direct.addProvider(Netzke.directProvider);
-
 // Methods/properties that each and every Netzke component will have
 Ext.define(null, {
   override: 'Netzke.classes.Core.Mixin',
@@ -159,34 +176,70 @@ Ext.define(null, {
   netzkeProcessEndpoints: function(config){
     var endpoints = config.endpoints || [];
     endpoints.push('deliver_component'); // all Netzke components get this endpoint
-    var directActions = [];
+
+    Netzke.directProvider.addEndpointsForComponent(config.path, endpoints);
+
     var that = this;
 
-    Ext.each(endpoints, function(intp){
-      directActions.push({"name":intp.camelize(true), "len":1});
-      this[intp.camelize(true)] = function(arg, callback, scope) {
+    Ext.each(endpoints, function(ep){
+      var methodName = ep.camelize(true);
+
+      /* add endpoint method to `this` */
+      this[methodName] = function(args, callback, scope) {
         Netzke.runningRequests++;
 
         scope = scope || that;
-        Netzke.providers[config.id][intp.camelize(true)].call(scope, arg, function(result, remotingEvent) {
-          if(remotingEvent.message) {
-            console.error("RPC event indicates an error: ", remotingEvent);
-            throw new Error(remotingEvent.message);
+
+        var cfgs = this.buildParentClientConfigs();
+        var remotingArgs = {args: args, configs: cfgs};
+
+        Netzke.providers[config.path][methodName].call(scope, remotingArgs, function(result, e) {
+          var callbackParam = e;
+
+          if (Ext.getClass(e) == Ext.direct.RemotingEvent) { // means we didn't get an exception
+            that.netzkeBulkExecute(result); // invoke the endpoint result on the calling component
+            callbackParam = that.latestResult;
           }
-          that.netzkeBulkExecute(result); // invoke the endpoint result on the calling component
-          if(typeof callback == "function") {
-            callback.call(scope, that.latestResult); // invoke the callback on the provided scope, or on the calling component if no scope set. Pass latestResult to callback
+
+          if (typeof callback == "function" && !scope.netzkeSessionIsExpired) {
+            callback.call(scope, callbackParam); // invoke the callback on the provided scope, or on the calling component if no scope set. Pass latestResult to callback in case of success, or the Ext.direct.ExceptionEvent otherwise
           }
+
           Netzke.runningRequests--;
         });
       }
     }, this);
 
-    Netzke.directProvider.addAction(config.id, directActions);
-
     delete config.endpoints;
   },
 
+  /**
+   * Array of client configs for each parent down the tree
+   * @private
+   */
+  buildParentClientConfigs: function() {
+    if (!this._parentClientConfig) {
+      this._parentClientConfig = [];
+      var parent = this;
+      while (parent) {
+        var cfg = parent.clientConfig || {};
+        cfg.id = parent.id;
+        this._parentClientConfig.unshift(cfg);
+        parent = parent.netzkeGetParentComponent();
+      }
+    }
+
+    return this._parentClientConfig;
+  },
+
+  /**
+   * @private
+   * Handles endpoint exceptions. Ext.direct.ExceptionEvent gets passed as parameter. Override to handle server side exceptions.
+   */
+  onDirectException: function(e) {
+    Netzke.warning("Server error. Override onDirectException to handle this.");
+  },
+
   /**
    * @private
    */
@@ -232,6 +285,7 @@ Ext.define(null, {
    * @param {Object} config Can contain the following keys:
    *   'container' - if specified, the instance (or id) of a panel with the 'fit' layout where the loaded component will be added to; the previously existing component will be destroyed
    *   'append' - if set to +true+, do not clear the container before adding the loaded component
+   *   'clone' - if set to +true+, allows loading multiple instances of the same child component
    *   'callback' - function that gets called after the component is loaded; it receives the component's instance as parameter
    *   'configOnly' - if set to +true+, do not instantiate the component, instead pass its config to the callback function
    *   'params' - object passed to the endpoint, may be useful for extra configuration
@@ -254,6 +308,7 @@ Ext.define(null, {
   netzkeLoadComponent: function(){
     var params;
 
+    // support 2 different signatures
     if (Ext.isString(arguments[0])) {
       params = arguments[1] || {};
       params.name = arguments[0];
@@ -264,14 +319,26 @@ Ext.define(null, {
     if (params.container == undefined) params.container = this;
     params.name = params.name.underscore();
 
-    // params that will be provided for the server API call (deliver_component); all what's passed in params.params is merged in. This way we exclude from sending along such things as :scope, :callback, etc.
+    /* params that will be provided for the server API call (deliver_component); all what's passed in params.params is
+    * merged in. This way we exclude from sending along such things as :scope and :callback */
     var serverParams = params.params || {};
-    serverParams.name = params.name;
+    serverParams["name"] = params.name;
+    serverParams["client_config"] = params.clientConfig;
+
+    // by which the loaded component will be referred in +netzkeComponentDelivered+
+    var itemId = params.name;
+
+    // multi-instance loading
+    if (params.clone) {
+      serverParams["index"] = this.netzkeLoadingIndex;
+      itemId += this.netzkeLoadingIndex; // << index
+      this.netzkeLoadingIndex++;
+    }
 
     // coma-separated list of xtypes of already loaded classes
-    serverParams.cache = Netzke.cache.join();
+    serverParams["cache"] = Netzke.cache.join();
 
-    var storedConfig = this.componentsBeingLoaded[params.name] = params;
+    var storedConfig = this.componentsBeingLoaded[itemId] = params;
 
     // Remember where the loaded component should be inserted into
     var containerCmp = params.container && Ext.isString(params.container) ? Ext.getCmp(params.container) : params.container;
@@ -284,8 +351,12 @@ Ext.define(null, {
       storedConfig.loadMaskCmp.show();
     }
 
-    // do the remote API call
-    this.deliverComponent(serverParams);
+    // Call the endpoint
+    this.deliverComponent(serverParams, function(e) {
+      if (Ext.getClass(e) == Ext.direct.ExceptionEvent) {
+        this.netzkeUndoLoadingComponent(params.name);
+      }
+    }, this);
   },
 
   /**
@@ -293,15 +364,8 @@ Ext.define(null, {
    * @private
   */
   netzkeComponentDelivered: function(config){
-    // retrieve the loading config for this component
-    var storedConfig = this.componentsBeingLoaded[config.name] || {};
-    var callbackParam;
-    delete this.componentsBeingLoaded[config.name];
-
-    if (storedConfig.loadMaskCmp) {
-      storedConfig.loadMaskCmp.hide();
-      storedConfig.loadMaskCmp.destroy();
-    }
+    var storedConfig = this.netzkeUndoLoadingComponent(config.itemId),
+        callbackParam;
 
     if (storedConfig.configOnly) {
       callbackParam = config;
@@ -329,12 +393,28 @@ Ext.define(null, {
     }
   },
 
+  /**
+   * Destroys the loading mask and removes the component from componentsBeingLoaded
+   * @private
+   */
+  netzkeUndoLoadingComponent: function(itemId) {
+    var storedConfig = this.componentsBeingLoaded[itemId] || {};
+    delete this.componentsBeingLoaded[itemId];
+
+    if (storedConfig.loadMaskCmp) {
+      storedConfig.loadMaskCmp.hide();
+      storedConfig.loadMaskCmp.destroy();
+    }
+
+    return storedConfig;
+  },
+
   /**
    * @private
    */
   netzkeComponentDeliveryFailed: function(params) {
-    var storedConfig = this.componentsBeingLoaded[params.componentName] || {};
-    delete this.componentsBeingLoaded[params.componentName];
+    var storedConfig = this.componentsBeingLoaded[params.itemId] || {};
+    delete this.componentsBeingLoaded[params.itemId];
 
     if (storedConfig.loadMaskCmp) {
       storedConfig.loadMaskCmp.hide();
@@ -377,7 +457,8 @@ Ext.define(null, {
   */
   netzkeInstantiateComponent: function(name) {
     name = name.camelize(true);
-    return Ext.createByAlias(this.netzkeComponents[name].alias, this.netzkeComponents[name])
+    var cfg = this.netzkeComponents[name];
+    return Ext.createByAlias(this.netzkeComponents[name].alias, cfg)
   },
 
   /**
@@ -399,27 +480,23 @@ Ext.define(null, {
 
   /**
   * Provides a visual feedback. TODO: refactor
+  * msg can be a string, an array of strings, an object in form {msg: 'Message'}, or an array of such objects.
   */
   netzkeFeedback: function(msg, options){
     if (this.initialConfig && this.initialConfig.quiet) return false;
 
     options = options || {};
 
-    if (this.feedbackGhost) {
-      this.feedbackGhost.showFeedback(msg, {delay: options.delay});
-    } else {
-      // there's no application to show the feedback - so, we do it ourselves
-      if (typeof msg == 'string'){
-        alert(msg);
-      } else {
-        var compoundResponse = "";
-        Ext.each(msg, function(m){
-          compoundResponse += m.msg + "\n"
-        });
-        if (compoundResponse != "") {
-          alert(compoundResponse);
-        }
-      }
+    if (typeof msg == 'string'){ msg = [msg]; }
+
+    var feedback = "";
+
+    Ext.each(msg, function(m){
+      feedback += m.msg || m + "<br/>"
+    });
+
+    if (feedback != "") {
+      this.feedbackGhost.showFeedback(feedback, {delay: options.delay});
     }
   },
 
@@ -465,7 +542,5 @@ Ext.define(null, {
       }, this);
       delete config.netzkePlugins;
     }
-  },
-
-  // netzkeOnComponentLoad: Ext.emptyFn // gets overridden
+  }
 });