netzke-basepack 0.4.2 → 0.5.1

data/lib/netzke/tab_panel.rb

@@ -1,36 +1,98 @@
 module Netzke
-  #
   # TabPanel
   # 
   # Features:
   # * Dynamically loads widgets for the tabs that get activated for the first time
   # * Is loaded along with the active widget - saves a request to the server
+  # * Provides the method markTabsOutdated to mark all inactive tabs as 'outdated', and calls "update" method on widgets in tabs when they get activated
   #
   # TODO:
   # * Stores the last active tab in persistent_config
+  # * Introduce a second or two delay before informing the server about a tab switched
   # 
   class TabPanel < Base
+    api :api_activate_tab
+    
     def self.js_base_class
       "Ext.TabPanel"
     end
 
     def self.js_extend_properties
       {
-        # loads widget into the panel if it wasn't loaded yet
-        :load_item_widget => <<-JS.l
-          function(panel) {
-            if (!panel.getWidget()) {
-              if (preloadedItemConfig = this.initialConfig[panel.widget+"Config"]){
-                // preloaded widget only needs to be instantiated, as its class and configuration have already been loaded
-                panel.add(new Ext.netzke.cache[preloadedItemConfig.widgetClassName](preloadedItemConfig));
-                panel.doLayout(); // always needed after adding a component
-              } else {
-                // load the widget from the server
-                panel.loadWidget(this.id + "__" + panel.widget + "__get_widget");
+        :id_delimiter => "___", # the default was "__", which conflicts with Netzke's double underscore notation
+        :defaults => {:layout => 'fit'}, # all tabs will be Ext.Panel-s with layout 'fit' ("fit-panels")
+        
+        :render => <<-END_OF_JAVASCRIPT.l,
+          function(el){
+            Ext.netzke.cache.#{short_widget_class_name}.superclass.render.call(this, el);
+            
+            // We do this all in +render+ because only at this moment the activeTab is actually activated
+            var activeTab = this.getActiveTab();
+            this.loadWidgetInto(activeTab);
+            this.on('tabchange', this.onTabChange, this);
+          }
+        END_OF_JAVASCRIPT
+        
+        :load_widget_into => <<-END_OF_JAVASCRIPT.l,
+          function(fitPanel){
+            var preloadedItemConfig = this[fitPanel.widget.camelize(true)+"Config"];
+            if (preloadedItemConfig){
+              // preloaded widget only needs to be instantiated, as its class and configuration have already been loaded
+              fitPanel.add(new Ext.netzke.cache[preloadedItemConfig.widgetClassName](preloadedItemConfig));
+              fitPanel.doLayout();
+            } else {
+              // load the widget from the server
+              this.loadAggregatee({id:fitPanel.widget, container:fitPanel.id});
+            }
+          }
+        END_OF_JAVASCRIPT
+        
+        :mark_tabs_outdated => <<-END_OF_JAVASCRIPT.l,
+          function(){
+            this.items.each(function(i){
+              if (this.getActiveTab() != i){
+                i.outdated = true
               }
+            }, this);
+          }
+        END_OF_JAVASCRIPT
+        
+        # bulkExecute in active tab
+        :execute_in_active_tab => <<-END_OF_JAVASCRIPT.l,
+          function(commands){
+            this.getActiveTab().getWidget().bulkExecute(commands);
+          }
+        END_OF_JAVASCRIPT
+        
+        :get_loaded_children => <<-END_OF_JAVASCRIPT.l,
+          function(){
+            var res = [];
+            this.items.each(function(tab){
+              var kid = tab.getWidget();
+              if (kid) { res.push(kid) }
+            }, this);
+            return res;
+          }
+        END_OF_JAVASCRIPT
+        
+        :on_tab_change => <<-END_OF_JAVASCRIPT.l
+          function(self, tab) {
+            // load widget into the panel if it wasn't loaded yet
+            if (!tab.getWidget()) {
+              this.loadWidgetInto(tab);
+            }
+            
+            // inform the server about active tab change
+            this.apiActivateTab({tab:tab.widget});
+            
+            // call "update" on the widget
+            if (tab.outdated) {
+              tab.outdated = false;
+              var widget = tab.getWidget();
+              if (widget && widget.update) {widget.update.call(widget)};
             }
           }
-        JS
+        END_OF_JAVASCRIPT
       }
     end
     
@@ -39,11 +101,9 @@ module Netzke
     end
 
     def js_config
-      # active_item_config = items.detect{|i| i[:active]}
       super.merge({
         :items => fit_panels,
-        :active_tab => id_name + '_active'
-        # :active_tab => active_item_config && id_name + '_active'
+        :active_tab => id_name + '_active' # id of the fit panel that is active
       })
     end
 
@@ -51,8 +111,8 @@ module Netzke
     def initialize(*args)
       super
       
-      # to remove duplicated active panels
-      seen_active = false
+      # to remove duplicated active tabs
+      first_active = nil
 
       items.each_with_index do |item, i|
         # if the item is provided without a name, give it a generated name
@@ -60,10 +120,18 @@ module Netzke
 
         # remove duplicated "active" configuration
         if item[:active]
-          item[:active] = nil if seen_active
-          seen_active = true
+          if first_active.nil?
+            first_active = item.name
+          else
+            item[:active] = nil
+          end
         end
       end
+      
+      # the first tab is forced to become active, if none was configured as active
+      items.first[:active] = true and first_active = items.first.name if first_active.nil?
+      
+      widget_session[:active_tab] = first_active
     end
     
     # the items are late aggregatees, besides the one that is configured active
@@ -76,23 +144,7 @@ module Netzke
       res
     end
 
-    def self.js_default_config
-      super.merge({
-        :id_delimiter => "___", # the default is "__", which conflicts with Netzke
-        :defaults => {:layout => 'fit'}, # all tabs will be Ext.Panel-s with layout 'fit' ("fit-panels")
-        :listeners => {
-          # when tab is activated, its content gets loaded from the server
-          :tabchange => {
-            :fn => <<-JS.l
-              function(self, tab){
-                this.loadItemWidget(tab);
-              }
-            JS
-          }
-        }
-      })
-    end
-    
+    # "Fit panels" - Panels with layout 'fit' that serve as containers for (dynamically) loaded widgets
     def fit_panels
       res = []
       items.each_with_index do |item, i|
@@ -106,5 +158,13 @@ module Netzke
       res
     end
     
+    def api_activate_tab(params)
+      widget_session[:active_tab] = params[:tab]
+      {}
+    end
+    
+    def get_active_tab
+      aggregatee_instance(widget_session[:active_tab])
+    end
   end
 end

data/lib/netzke/table_editor.rb

@@ -1,20 +1,54 @@
 module Netzke
-  #
+  # == TableEditor CURRENTLY NOT SUPPORTED AND MAY BE BROKEN. Instead, use GridPanel's adding/editing records in form.
+  # 
   # A widget used for editing a DB table. It contains a grid and a form which may display different DB fields,
   # configured by grid_columns and form_fields configuration options respectively
-  #
   class TableEditor < BorderLayoutPanel
     
     def self.js_extend_properties
-      super.merge({
-        :get_form_widget => <<-JS.l,
+      {
+        :init_component => <<-END_OF_JAVASCRIPT.l,
+          function(){
+            Ext.netzke.cache.#{short_widget_class_name}.superclass.initComponent.call(this);
+
+            var setCentralWidgetEvents = function(){
+              this.getCenterWidget().on('addclick', function(){
+                this.getFormWidget().getForm().reset();
+
+                var firstEditableField = null;
+                this.getFormWidget().getForm().items.each(function(f){
+                  if (!f.hidden && !f.disabled){
+                    firstEditableField = f;
+                    return false; // break the loop
+                  }
+                })
+                if (firstEditableField) firstEditableField.focus();
+
+                this.getFormWidget().ownerCt.expand();
+
+                this.getCenterWidget().getSelectionModel().clearSelections();
+                this.lastSelectedRow = null;
+                return false;
+              }, this)
+
+              this.getCenterWidget().on('rowclick', this.onRowClick, this);
+            };
+
+            this.getCenterWidget().ownerCt.on('add', setCentralWidgetEvents, this);
+            setCentralWidgetEvents.call(this);
+            
+          }
+        END_OF_JAVASCRIPT
+        
+        
+        :get_form_widget => <<-END_OF_JAVASCRIPT.l,
           function(){
-            return this.getRegionWidget(this.initialConfig.region);
+            return this.getRegionWidget(this.region);
           }
-        JS
+        END_OF_JAVASCRIPT
         
         # a grid row clicked
-        :on_row_click => <<-JS.l,
+        :on_row_click => <<-END_OF_JAVASCRIPT.l,
           function(grid, index, e){
             // don't react if the selection hasn't changed
         		if (index == this.lastSelectedRow) return false;
@@ -24,20 +58,20 @@ module Netzke
             var recordId = this.getCenterWidget().getStore().getAt(index).get('id');
             
             // load the form with the record id
-            this.getRegionWidget(this.initialConfig.region).loadRecord(recordId);
+            this.getRegionWidget(this.region).loadRecord(recordId);
           }
-        JS
+        END_OF_JAVASCRIPT
         
         # after the form is submitted, reload the grid
-        :on_form_actioncomplete => <<-JS.l
+        :on_form_actioncomplete => <<-END_OF_JAVASCRIPT.l
           function(grid, index, e){
             this.getRegionWidget('center').store.load()
           }
-        JS
-      })
+        END_OF_JAVASCRIPT
+      }
     end
 
-    def initial_config
+    def default_config
       # don't show the title on the top level
       super.merge!({:ext_config => {:title => false}})
     end
@@ -49,35 +83,6 @@ module Netzke
       })
     end
 
-    def self.js_after_constructor
-      super << <<-JS
-        var setCentralWidgetEvents = function(){
-          this.getCenterWidget().on('addclick', function(){
-            this.getFormWidget().getForm().reset();
-          
-            var firstEditableField = null;
-            this.getFormWidget().getForm().items.each(function(f){
-              if (!f.hidden && !f.disabled){
-                firstEditableField = f;
-                return false; // break the loop
-              }
-            })
-            if (firstEditableField) firstEditableField.focus();
-
-            this.getFormWidget().ownerCt.expand();
-
-            this.getCenterWidget().getSelectionModel().clearSelections();
-            this.lastSelectedRow = null;
-            return false;
-          }, this)
-        
-          this.getCenterWidget().on('rowclick', this.onRowClick, this);
-        };
-        this.getCenterWidget().ownerCt.on('add', setCentralWidgetEvents, this);
-        setCentralWidgetEvents.call(this);
-      JS
-    end
-
     def initial_aggregatees
       split_region  = config[:split_region] || :east
       split_size    = config[:split_size] || 200
@@ -88,7 +93,7 @@ module Netzke
           :ext_config           => {
             :title        => config[:grid_title] || config[:data_class_name].pluralize
           }
-        }.recursive_merge(config[:grid_config] || {}),
+        }.deep_merge(config[:grid_config] || {}),
         
         split_region => {
           :widget_class_name    => "FormPanel", 
@@ -105,7 +110,7 @@ module Netzke
               :fn => "function(f, a){this.ownerCt.ownerCt.onFormActioncomplete(f,a)}".l
             }}
           }
-        }.recursive_merge(config[:form_config] || {})
+        }.deep_merge(config[:form_config] || {})
       }
     end
 

data/lib/netzke/tree_panel.rb

@@ -1,52 +1,51 @@
 class Netzke::TreePanel < Netzke::Base
-  interface :get_children
+  api :get_children
   
   def self.js_base_class
     "Ext.tree.TreePanel"
   end
   
-  def self.js_default_config
+  def self.js_common_config_for_constructor
     super.merge({
       :root => {:text => '/', :id => 'source'},
-      :loader => {:data_url => "config.interface.getChildren".l}
+      :loader => {:data_url => "config.api.getChildren".l}
     })
   end
   
   def self.js_extend_properties
     {
-      :on_widget_load => <<-JS.l,
-        function(){
-        }
-      JS
-      :refresh_handler => <<-JS.l,
+      :refresh_handler => <<-END_OF_JAVASCRIPT.l,
         function(){
           console.info('refresh!');
         }
-      JS
-      :add_handler => <<-JS.l,
+      END_OF_JAVASCRIPT
+
+      :add_handler => <<-END_OF_JAVASCRIPT.l,
         function(e){
           console.info(e);
         }
-      JS
-      :edit_handler => <<-JS.l,
+      END_OF_JAVASCRIPT
+
+      :edit_handler => <<-END_OF_JAVASCRIPT.l,
         function(e){
           console.info(e);
         
         }
-      JS
-      :delete_handler => <<-JS.l
+      END_OF_JAVASCRIPT
+
+      :delete_handler => <<-END_OF_JAVASCRIPT.l
         function(e){
           console.info(e);
         
         }
-      JS
+      END_OF_JAVASCRIPT
     }
   end
   
   def actions
     { :add    => {:text => 'Add'},
       :edit   => {:text => 'Edit'},
-      :delete => {:text => 'Delete', :disabled => true}
+      :del => {:text => 'Delete', :disabled => true}
     }
   end
   

data/lib/netzke/wrapper.rb

@@ -1,18 +1,42 @@
 module Netzke
+  # = Wrapper
+  # 
+  # Simple Ext.Panel with layout 'fit' that wraps up another Netzke widget. Can be useful in HTML pages where
+  # a widget should be dynamically configured, to not reload the entire page after configuration (Wrapper 
+  # will reload the widget automatically).
+  # 
+  # == Configuration
+  # * <tt>:item</tt> - configuration hash for wrapped widget
+  # 
+  # Example:
+  # 
+  #   netzke :wrapper, :item => {
+  #     :widget_class_name => "FormPanel",
+  #     :data_class_name => "User"
+  #   }
   class Wrapper < Base
-    def self.js_default_config
-      # make us an invisible 'fit'-layout panel
+    def self.js_extend_properties
       super.merge({
         :layout => 'fit',
-        :title  => false,
+        
+        # invisible
+        :header => false,
         :border => false,
-        :items  => ["new Ext.netzke.cache[config.itemConfig.widgetClassName](config.itemConfig)".l]
+        
+        :init_component => <<-END_OF_JAVASCRIPT.l,
+          function(){
+            Ext.netzke.cache.#{short_widget_class_name}.superclass.initComponent.call(this);
+
+            // instantiate the item
+            this.instantiateChild(this.itemConfig);
+          }
+        END_OF_JAVASCRIPT
       })
     end
 
     def initial_aggregatees
       {:item => config[:item]}
     end
+    
   end
-  
 end