extjs-mvc 0.3.10 → 0.4.0.a

data/lib/extjs-mvc.rb

@@ -1,40 +1,78 @@
+require 'fileutils'
+require 'pathname'
+require 'yaml'
+require 'json'
+require 'extlib/inflection'
+
 module ExtJS
-    class MVC
-      @@success_property = :success
-      @@message_property = :message
-      @@root = :data
-      cattr_accessor :success_property
-      cattr_accessor :message_property
-      cattr_accessor :root
-      
-      require 'model/base'
-      
-      # Detect orm, include appropriate mixin.
-      if defined?(ActiveRecord)
-        require 'model/active_record'
-      elsif defined?(DataMapper)
-        require 'model/data_mapper'
-      elsif defined?(MongoMapper)
-        require 'model/mongo_mapper'
-      else
-        raise StandardError.new("extjs-mvc could not detect an ORM framework.  Be sure to include your ORM framework before initializing extjs-mvc Gem.")
+  module MVC
+    VERSION = "0.4.0"
+    
+    ROOT = File.dirname(__FILE__)
+    
+    ##
+    # Do autoloads here
+    #
+    require 'extjs-mvc/settings'
+    
+    autoload :UI,         'extjs-mvc/ui'
+    autoload :Generator,  'extjs-mvc/generator'
+    autoload :BuilderManager, 'extjs-mvc/builder'
+    autoload :Plugin,     'extjs-mvc/plugin'
+    autoload :Stats,      'extjs-mvc/stats'
+    autoload :Update,     'extjs-mvc/update'
+    autoload :Text,       'extjs-mvc/test'
+    
+    class Error < StandardError
+      def self.status_code(code = nil)
+        return @code unless code
+        @code = code
       end
 
-      # Rails-style Array#extract_options! used heavily
-      if defined?(Merb)
-        require 'core_ext/array/extract_options'
+      def status_code
+        self.class.status_code
       end
+    end
+    
+    class AppNotFound   < Error; status_code(1) ; end
+    class AppAlreadyExists < Error; status_code(2) ; end
+    class FileExists < Error; status_code(3) ; end
+    class BuilderError < Error; status_code(4) ; end
+    
+    
+    
+    ##
+    # Add more error classes here
+    #
+    #class GemfileNotFound  < BundlerError; status_code(10) ; end
+    #class GemNotFound      < BundlerError; status_code(7)  ; end
 
-      # ExtJS Component and Store wrappers
-      require 'extjs/component'
-      require 'extjs/data/store'
+    class << self
+      attr_writer :ui
 
-      # Component/Store view-helpers
-      require 'helpers/component'
-      require 'helpers/store'
-
-      # Controller mixin.  Works for both Rails and Merb.
-      require 'controller/controller'
-   end
+      def configure
+        @configured ||= begin
+          ##
+          # perform some config here?
+          #
+          #configure_gem_home_and_path
+          true
+        end
+      end
+      
+      ##
+      # Ensure we're running within a rails app unless generating a new app ($ xmvc generate app foo)
+      #
+      def ensure_in_app
+        unless ARGV.empty? || ARGV.first == 'help' || (File.exists?('app') && File.exists?('config') && File.exists?('config/environment.json'))
+          raise ExtJS::MVC::AppNotFound.new("This command must be executed from the root of an extjs-mvc application")
+        end
+      end
+      
+      def ui
+        @ui ||= UI.new
+      end
+    end
+  end
 end
 

data/lib/js/App.js

@@ -0,0 +1,219 @@
+/**
+ * @class ExtMVC.App
+ * @extends Ext.util.Observable
+ * @cfg {Boolean} usesHistory True to automatically create required DOM elements for Ext.History,
+ * sets up a listener on Ext.History's change event to fire this.onHistoryChange. False by default
+ */
+ExtMVC.App = Ext.extend(Ext.util.Observable, {
+  /**
+   * @constructor
+   * Sets up the Application - adds events, sets up namespaces, optionally sets up history.
+   * Fires the 'before-launch' event before initializing router, viewport and history.
+   * Calls this.launch() once everything else is set up (override the 'launch' method to provide your own logic).
+   * Fires the 'launched' event after calling this.launch()
+   */
+  constructor: function(config) {
+    ExtMVC.App.superclass.constructor.apply(this, arguments);
+    
+    //apply configuration object and set up namespaces
+    Ext.apply(this, config || {});
+    window[this.name] = this;
+    
+    this.initializeNamespaces();
+    
+    // Ext.onReady(this.onReady, this);
+    
+    this.on('launched', function() {
+      /**
+       * TODO: This used to reside in initializeHistory but this.launch() needs to be
+       * called before this dispatches so it is temporarily here... ugly though
+       */
+      if (this.usesHistory) {
+        if (this.dispatchHistoryOnLoad === true) {
+          Ext.History.init(function(history) {
+            var hash   = document.location.hash.replace("#", "");
+            var params = this.router.recognise(hash);
+            
+            if (params) {this.dispatch(params);}
+          }, this);
+        } else {
+          Ext.History.init();
+        }
+      }      
+    }, this);
+  },
+  
+  /**
+   * @private
+   * Called when Ext.onReady fires
+   */
+  onReady: function() {    
+    if (this.fireEvent('before-launch', this)) {
+      this.initializeRouter();
+      // this.initializeViewport();
+      this.initializeEvents();
+
+      if (this.usesHistory === true) this.initializeHistory();     
+
+      this.launch();
+    }
+  },
+    
+  /**
+   * @property name
+   * @type String
+   * The application's name.  This is used when creating namespaces for models, views and controllers,
+   * and automatically set up as a global variable reference to this application. Read only.
+   */
+  name: 'MyApp',
+    
+  /**
+   * @property usesHistory
+   * @type Boolean
+   * True to automatically create required DOM elements for Ext.History,
+   * sets up a listener on Ext.History's change event to fire this.onHistoryChange. 
+   * False by default
+   */
+  usesHistory: false,
+
+  /**
+   * @prop dispatchHistoryOnLoad
+   * @type Boolean
+   * If usesHistory is true and dispatchHistoryOnLoad is also true, the OS will attempt to match
+   * any string currently after the # in the url and dispatch to it
+   */
+  dispatchHistoryOnLoad: true,
+  
+  /**
+   * Called when the application is booted up. Override this to provide your own startup logic (defaults to Ext.emptyFn)
+   */
+  launch: function() {
+    this.fireEvent('launched', this);
+  },
+  
+  /**
+   * @property params
+   * @type Object
+   * An object containing the most current parameters (usually decoded from a url using this.router)
+   * e.g. {controller: 'index', action: 'welcome', id: 10}
+   */
+  params: {},
+  
+  /**
+   * Dispatches a request to a registered controller. 
+   * @param {Object} dispatchConfig A config object which should look something like this:
+   * {controller: 'MyController', action: 'index'}, where 'MyController' is the key for a controller
+   * which has been registered to the controller.  If action is not specified, it defaults to 'index'
+   * @param {Object} scope The scope in which to fire the event (defaults to the controller)
+   * @param {Array} args An array of arguments which are passed to the controller action.
+   */
+  dispatch: function dispatch(dispatchConfig, scope, args) {
+    var dispatchConfig = dispatchConfig || {};
+    Ext.applyIf(dispatchConfig, {
+      action: 'index'
+    });
+    
+    this.params = dispatchConfig;
+    
+    var c = ExtMVC.getController(dispatchConfig.controller);
+    if (c != undefined) {
+      var action = c[dispatchConfig.action];
+      
+      if (typeof action == "function") action.apply(scope || c, args || []);
+      else throw new Error(String.format("Action '{0}' not found on Controller '{1}'", dispatchConfig.action, dispatchConfig.controller));
+    }
+  },
+  
+  /**
+   * Sets up a Router instance.  This is called automatically before onLaunch()
+   * Add routes using this.router.connect
+   */
+  initializeRouter: function() {
+    if (this.router == undefined) {
+      this.router = new ExtMVC.router.Router();
+      ExtMVC.router.Router.defineRoutes(this.router);
+    }
+  },
+  
+  /**
+   * Uses Ext.namespace to create packages view controllers, models and views
+   * E.g. if name = 'Blog' or this.name = 'Blog', this is the same as:
+   * Ext.ns('Blog', 'Blog.controllers', 'Blog.models', 'Blog.views')
+   */
+  initializeNamespaces: function initializeNamespaces(name) {
+    var name = name || this.name;
+    if (name) {
+      Ext.ns(name, name + '.controllers', name + '.models', name + '.views');
+    };
+  },
+  
+  /**
+   * Creates the necessary DOM elements required for Ext.History to manage state
+   * Sets up listeners on Ext.History's change event to fire the dispatch() action in the normal way.
+   * This is not called automatically as not all applications will need it
+   */
+  initializeHistory: function initializeHistory() {
+    this.historyForm = Ext.getBody().createChild({
+      tag:    'form',
+      action: '#',
+      cls:    'x-hidden',
+      id:     'history-form',
+      children: [
+        {
+          tag: 'div',
+          children: [
+            {
+              tag:  'input',
+              id:   'x-history-field',
+              type: 'hidden'
+            },
+            {
+              tag: 'iframe',
+              id:  'x-history-frame'
+            }
+          ]
+        }
+      ]
+    });
+    
+    Ext.History.on('change', this.onHistoryChange, this);
+  },
+  
+  /**
+   * Takes a history token (anything after the # in the url), consults the router and dispatches
+   * to the appropriate controller and action if a match was found
+   * @param {String} token The url token (e.g. the token would be cont/act/id for a url like mydomain.com/#cont/act/id)
+   */
+  onHistoryChange: function onHistoryChange(token) {
+    var match = this.router.recognise(token);
+    
+    if (match) {
+      this.dispatch(match, null, [{url: token}]);
+    };
+  },
+  
+  /**
+   * Sets up events emitted by the Application
+   */
+  initializeEvents: function initializeEvents() {
+    this.addEvents(
+      /**
+       * @event before-launch
+       * Fires before this application launches
+       * @param {ExtMVC.App} this The application about to be launched
+       */
+      'before-launch',
+
+      /**
+       * @event launched
+       * Fires once the application has been launched
+       * @param {ExtMVC.App} this The application which has been launched
+       */
+      'launched'
+    );
+  }
+});
+
+ExtMVC.App.define = function(config) {
+  ExtMVC.app = new ExtMVC.App(config);
+};

data/lib/js/MVC.js

@@ -0,0 +1,260 @@
+/**
+ * @class ExtMVC
+ * ExtMVC 
+ * @singleton
+ */
+ExtMVC = Ext.extend(Ext.util.Observable, {
+  version: "0.7a",
+  
+  constructor: function() {
+    ExtMVC.superclass.constructor.apply(this, arguments);
+    
+    /**
+     * @property dispatcher
+     * @type Ext.lib.Dispatcher
+     * The dispatcher object which finds the right controller and action when ExtMVC.dispatch is called
+     */
+    // this.dispatcher = new Ext.lib.Dispatcher({
+    //   
+    // });
+  },
+  
+  dispatch: function() {
+    var dispatcher = this.dispatcher;
+    
+    return dispatcher.dispatch.apply(dispatcher, arguments);
+  },
+  
+  /**
+   * Sets the Ext.Application instance currently in use. This is currently required :/
+   * @param {Ext.Application} app The application currently in use
+   */
+  setApplication: function(app) {
+    this.app = app;
+    this.name = app.name;
+    
+    ExtMVC.model.modelNamespace = window[app.name].models;
+  },
+  
+  fields: {
+    
+  },
+  
+  registerFields: function(name, fields) {
+    this.fields[name] = fields;
+  },
+  
+  getFields: function(name) {
+    return this.fields[name];
+  },
+  
+  
+  
+  /**
+   * Registers a model class with Ext MVC
+   * @param {String} name The name to give this model
+   * @param {Object} config Model definition configuration
+   */
+  registerModel: function(name, config) {
+    this.registerClass('model', arguments);
+  },
+  
+  /**
+   * Registers a controller class with Ext MVC
+   * @param {String} name The name to give this controller
+   * @param {Object} config Controller definition configuration
+   */
+  registerController: function(name, config) {
+    this.registerClass('controller', arguments);
+  },
+  
+  /**
+   * Registers a view class with Ext MVC.
+   * @param {String} namesapce The namespace to add this view to
+   * @param {String} name The name to give this view
+   * @param {Object} config View definition configuration
+   */
+  registerView: function(namespace, name, config) {
+    this.registerClass('view', arguments);
+  },
+  
+  /**
+   * Abstraction for registering views, models and controllers
+   * @param {String} managerName The name of the class manager to register with
+   * @param {Array} args The args to pass to the manager's register method
+   */
+  registerClass: function(managerName, args) {
+    var manager = this.getClassManager(managerName);
+    
+    manager.register.apply(manager, args);
+  },
+  
+  /**
+   * @property classManagers
+   * @type Object
+   * {name: classManager} mappings used by this.getClassManager and this.registerClassManager
+   */
+  classManagers: {},
+  
+  /**
+   * @private
+   * Sets up model, view and controller class managers
+   */
+  initializeClassManagers: function() {
+    this.registerClassManager('model',      new ExtMVC.lib.ModelClassManager());
+    this.registerClassManager('view',       new ExtMVC.lib.ViewClassManager());
+    this.registerClassManager('controller', new ExtMVC.lib.ControllerClassManager());
+  },
+  
+  /**
+   * Returns the class manager for the given name
+   * @param {String} name The name of the manager (model, view or controller)
+   * @return {ExtMVC.lib.ClassManager} The class manager instance
+   */
+  getClassManager: function(name) {
+    return this.classManagers[name];
+  },
+  
+  /**
+   * Registers a class manager instance under a given name
+   * @param {String} name The name of the class manager
+   * @param {ExtMVC.lib.ClassManager} manager The ClassManager instance to register
+   */
+  registerClassManager: function(name, manager) {
+    this.classManagers[name] = manager;
+  },
+  
+  /**
+   * Returns the canonical controller instance for the given controller name
+   * @return {ExtMVC.Controller} The controller instance
+   */
+  getController: function(name) {
+    return this.getClassManager('controller').getInstance(name);
+  },
+  
+  /**
+   * Returns the constructor for a given model name
+   * @param {String} name The name of the model
+   * @return {Function} The model constructor
+   */
+  getModel: function(name) {
+    return this.getClassManager('model').getConstructor(name);
+  },
+  
+  /**
+   * Instantiates a model of the given name with the data supplied
+   * @param {String} modelName The name of the model to instantiate
+   * @param {Object} data Data object to instantiate the instance with
+   * @return {ExtMVC.Model} The new model instance
+   */
+  buildModel: function(modelName, data) {
+    return new (this.getModel(modelName))(data);
+  },
+  
+  /**
+   * Returns the constructor for a given view namespace/name combination
+   * @param {String} namespace The view namespace to look in
+   * @param {String} name The name of the view within the view namespace
+   * @return {Function} The view constructor
+   */
+  getView: function getView(namespace, name) {
+    return this.getClassManager('view').getConstructor(namespace, name);
+  },
+  
+  /**
+   * Returns a new view instance for the given namespace/name combo, using the supplied config
+   * @param {String} namespace The namespace to find the view from
+   * @param {String} name The view name
+   * @param {Object} config Optional config object
+   * @return {Ext.Component} The new view instance
+   */
+  buildView: function buildView(namespace, name, config) {
+    var constructor = this.getView(namespace, name);
+    
+    return new (constructor)(config);
+  },
+  
+  /**
+   * Loads packaged classes from a given url, calling a callback when they have been registered. Sample return:
+  <pre>
+  {
+    controllers: [
+      {
+        name: 'comments',
+        superclass: 'crud',
+        config: {
+          index: function() {
+            this.render('index', {
+              title: "Loaded on demand!"
+            });
+          }
+        }
+      }
+    ],
+    views: [
+      {
+        name: 'new',
+        namespace: 'comments',
+        config: {
+          xtype: 'scaffoldnew',
+          title: "New Comment"
+        }
+      }
+    ],
+    models: [
+      {
+        name  : 'Comment',
+        config: {
+          fields: [
+            {name: 'id',      type: 'int'},
+            {name: 'title',   type: 'string'},
+            {name: 'message', type: 'string'}
+          ]
+        }
+      }
+    ]
+  }
+  </pre>
+   * @param {String} url The url to retrieve the package from
+   * @param {Function} callback Optional callback function, called after the package has been read and registered
+   * @param {Object} scope The scope to execute the callback function in
+   */
+  loadOnDemand: function(url, callback, scope) {
+    Ext.Ajax.request({
+      url     : url,
+      scope   : scope    || this,
+      success: function(response) {
+        var pkg = Ext.decode(response.responseText);
+
+        Ext.each(pkg.controllers || [], function(config) {
+          this.registerController(config.name, config);
+        }, this);
+
+        Ext.each(pkg.models || [], function(config) {
+          this.registerModel(config.name, config);
+        }, this);
+
+        Ext.each(pkg.views || [], function(config) {
+          this.registerView(config.namespace, config.name, config);
+        }, this);
+
+        if (Ext.isFunction(callback)) callback.call(scope, pkg);
+      }
+    });
+  }
+});
+
+ExtMVC = new ExtMVC();
+
+// ExtMVC.initializeClassManagers();
+
+Ext.onReady(function() {
+  /**
+   * @property dispatcher
+   * @type Ext.lib.Dispatcher
+   * The dispatcher object which finds the right controller and action when ExtMVC.dispatch is called
+   */
+  ExtMVC.dispatcher = new ExtMVC.lib.Dispatcher();
+});
+
+Ext.ns('ExtMVC.router', 'ExtMVC.plugin', 'ExtMVC.controller', 'ExtMVC.view', 'ExtMVC.view.scaffold', 'ExtMVC.lib', 'ExtMVC.test');

data/lib/js/Presenter.js

@@ -0,0 +1,52 @@
+/**
+ * @class ExtMVC.Presenter
+ * @extends Ext.util.Observable
+ * Used as an interface between a controller and its views
+ */
+ExtMVC.Presenter = Ext.extend(Ext.util.Observable, {
+
+  constructor: function(config) {
+    ExtMVC.Presenter.superclass.constructor.apply(this, arguments);
+    
+    this.addEvents(
+      /**
+       * @event load
+       * Fires when all items in the Presenter have been loaded
+       */
+      'load'
+    );
+    
+    /**
+     * @property loaded
+     * @type Boolean
+     * True if all items that must be loaded before rendering have been
+     */
+    this.loaded = false;
+    
+    /**
+     * @property loading
+     * @type Boolean
+     * True while the loader is loading
+     */
+    this.loading = false;
+  },
+  
+  load: function() {
+    if (this.loaded || this.loading) return;
+    
+    this.each(function(item, index, length) {
+      var callback = function(index) {
+        return function() {
+          if (index == length) {
+            this.loaded = true;
+            this.loading = false;
+            
+            this.fireEvent('load');
+          }
+        };
+      }(index);
+      
+      item.on('load', callback, this, {single: true});
+    }, this);
+  }
+});