Today I would like to compare a activescaffold rails 3.0 controller index action waterfall chart with one of a rails 3.1 controller.
You will see a big difference in these charts because of the asset pipeline feature. Asset pipeline is merging your js and css assets into one big file which improves your webperformance because of reduced http requests.
In addition I m using css data-uri feature for background images. Please note that ie6 and ie7 do not support data-uris.
ActiveScaffold Asset Pipeline Comparison
December 22, 2011
ActiveScaffold, Rails ActiveScaffold, Asset Pipeline 5 Comments
ActiveScaffold Unobtrusive Javascript and TinyMCE
December 3, 2011
ActiveScaffold, Rails ActiveScaffold, javascript, tinymce, unobtrusive 2 Comments
My last post covered the topic how ActiveScaffold and Unobtrusive Javascript may fit together. This time I would like to give you an example.
It s Activescaffold’s TinyMCE Bridge. It s a perfect example, cause it s a pure javascript feature.
Let’s take a look at the bridge file using obtrusive javascript:
Loading tinymce editor
Obtrusive Javascript
def active_scaffold_input_text_editor(column, options) options[:class] = "#{options[:class]} mceEditor #{column.options[:class]}".strip html = [] html << send(override_input(:textarea), column, options) html << javascript_tag("tinyMCE.execCommand('mceAddControl', false, '#{options[:id]}');") if request.xhr? html.join "\n" end
We use an activescaffold input override to add javascript code to our textareas.
Unobtrusive Javascript
$('form.as_form').live('as:form_loaded', function(event) { var as_form = $(this).closest("form"); as_form.find('textarea.as_mceEditor').each(function(index, elem) { tinyMCE.execCommand('mceAddControl', false, $(elem).attr('id')); }); return true; });
A listener to activescaffold form_load event, finding all textareas and adding tinyMCE control.
Submitting tinymce editor
Obtrusive Javascript
def onsubmit if ActiveScaffold.js_framework == :jquery submit_js = 'tinyMCE.triggerSave();$(\'textarea.mceEditor\').each(function(index, elem) { tinyMCE.execCommand(\'mceRemoveControl\', false, $(elem).attr(\'id\')); });' if using_tiny_mce? else submit_js = 'tinyMCE.triggerSave();this.select(\'textarea.mceEditor\').each(function(elem) { tinyMCE.execCommand(\'mceRemoveControl\', false, elem.id); });' if using_tiny_mce? end [super, submit_js].compact.join ';' end
We use form submit method override to add javascript code, which will call tinyMCE.triggerSave method.
Unobtrusive Javascript
$('form.as_form').live('as:form_submit', function(event) { var as_form = $(this).closest("form"); if (as_form.has('textarea.as_mceEditor').length > 0) { tinyMCE.triggerSave(); } return true; });
A listener to activescaffold form_submit event, finding all textareas using tinyMCE and calling triggerSave.
Removing tinymce editor
Obtrusive Javascript
def active_scaffold_includes(*args) if ActiveScaffold.js_framework == :jquery tiny_mce_js = javascript_tag(%| var action_link_close = ActiveScaffold.ActionLink.Abstract.prototype.close; ActiveScaffold.ActionLink.Abstract.prototype.close = function() { $(this.adapter).find('textarea.mceEditor').each(function(index, elem) { tinyMCE.execCommand('mceRemoveControl', false, $(elem).attr('id')); }); action_link_close.apply(this); }; |) if using_tiny_mce? else .... end super(*args) + (include_tiny_mce_if_needed || '') + (tiny_mce_js || '') end
Ok, we add a javascript code snippet to activescaffold includes in case using_tiny_mce? returns true. Javascript code will link into action link.close action management and will remove our tiny_mce_editor. To be honest I do not like that solution at all. 🙂
Unobtrusive Version
$('form.as_form').live('as:form_unloaded', function(event) { var as_form = $(this).closest("form"); as_form.find('textarea.as_mceEditor').each(function(index, elem) { tinyMCE.execCommand('mceRemoveControl', false, $(elem).attr('id')); }); return true; });
A listener to activescaffold form_unload event, finding all textareas and removing tinyMCE control.
Summary
Did we achieve our goals?
We ve separated javascript code from ruby code. which improves code quality and maintainability. You do not have to be an activescaffold expert anymore to add javascript functionality to forms, form_columns, list_columns. You just need to know javascript.
Hope that helps.