Add the widget App.form.AceEditorField.

.gitignore

@@ -8,6 +8,7 @@ databases/
 errors/
 private/
 sessions/
+static/plugin_ace/
 static/plugin_dbui/dbui-debug.js
 static/plugin_dbui/dbui-min.js
 static/plugin_extjs/

controllers/plugin_dbui.py

@@ -163,9 +163,12 @@ def debug():
     # css files
     response.files.extend(dbui.get_file_paths(plugin.extjs_css, ext='.css'))
     response.files.extend(dbui.get_file_paths(plugin.dbui_css, ext='.css'))
+    response.files.extend(dbui.get_file_paths(plugin.ace_css, ext='.css'))
     response.files.extend(dbui.get_file_paths(plugin.app_css, ext='.css'))
 
     # debug version of the javascript libraries
+    response.files.extend(dbui.get_file_paths(plugin.ace_libmin, ext='.js'))
+    
     response.files.extend(dbui.get_file_paths(plugin.mathjax_libmin, ext='.js'))
     response.files.extend(dbui.get_file_paths(plugin.extjs_js, ext='.js'))
     response.files.extend(dbui.get_file_paths(plugin.dbui_js, ext='.js'))
@@ -217,9 +220,12 @@ def index():
     # css files
     response.files.extend(dbui.get_file_paths(plugin.extjs_css, ext='.css'))
     response.files.extend(dbui.get_file_paths(plugin.dbui_css, ext='.css'))
+    response.files.extend(dbui.get_file_paths(plugin.ace_css, ext='.css'))
     response.files.extend(dbui.get_file_paths(plugin.app_css, ext='.css'))
 
     # compressed version of the javascript libraries
+    response.files.extend(dbui.get_file_paths(plugin.ace_libmin, ext='.js'))
+
     response.files.extend(dbui.get_file_paths(plugin.mathjax_libmin, ext='.js'))
     response.files.extend(dbui.get_file_paths(plugin.extjs_libmin, ext='.js'))
     response.files.extend(dbui.get_file_paths(plugin.dbui_libmin, ext='.js'))

languages/fr-fr.py

@@ -73,6 +73,7 @@
 'publications': 'publications',
 'Publisher': 'Éditeur',
 'publishers': 'éditeur',
+'Python Code': 'Python Code',
 'Ratio': 'Ratio',
 'Report': 'Rapport',
 'Report Numbers': 'Numéro du rapport',

models/db_core.py

@@ -167,6 +167,7 @@ db.define_table("new_fields",
     Field("string", "string"),
     Field("list_string", "list:string"),
     Field("dictionary", "json"),
+    Field("python_code", "text"),
     migrate="new_fields.table")
 
 # NOTE: if we remove the json validator its seem to work ?

models/plugin_dbui.py

@@ -42,6 +42,9 @@ plugins = PluginManager('dbui',
                         dbui_libmin='static/plugin_dbui/dbui-min.js',
                         dbui_script='static/plugin_dbui/main.js',
                         
+                        ace_libmin='static/plugin_ace/src-min-noconflict/ace.js',
+                        ace_css='static/plugin_ace/css/editor.css',
+                        
                         extjs_css='static/plugin_extjs/resources/css/ext-all.css',
                         extjs_js=['static/plugin_extjs/adapter/ext/ext-base.js',
                                   'static/plugin_extjs/ext-all-debug-w-comments.js'],

models/widgets_fields.py

@@ -20,6 +20,9 @@ fieldsModifier.configure_field('dictionary', dictCfg={"string": "test",
                                                       "float": 0.01,
                                                       "date": "not implemented"})
 
+fieldsModifier.configure_field('python_code', height=120,
+                                              xtype='xaceeditorfield',)
+
 #
 # publications
 #

models/widgets_forms.py

@@ -32,6 +32,14 @@ formModifier.link_comboboxes(master=virtdb.harvester_selector.id_projects,
                              slave=virtdb.harvester_selector.id_teams,
                              masterHasSlaveData='harvesters')
 
+#
+# new fields
+#
+formModifier = dbui.FormModifier('new_fields')
+formModifier.configure(width=400,
+                       defaults={'width': 270})
+
+
 #
 # Create fieldSet for the publication form
 #

static/plugin_dbui/CHANGELOG

 --------------------------------- CHANGE LOG ----------------------------------
 
 HEAD
-  - New widget Ext.Form.DictField
+  - New widget Ext.Form.DictField, Ext.form.AceEditorField
 
 0.4.14.1 (Sep 2013)
   - The viewport can open a tab at startup.

static/plugin_dbui/src/editorfield.js

+/**
+ * The AceEditorField is a wrapping of the ACE editor
+ * (http://http://ace.c9.io/#nav=about)
+ *
+ * NOTE: The Ext.form.SliderField is a good example to understand
+ * how to build the custom field.
+ *
+ * The type of this component is xaceeditorfield.
+ *
+ * @extends Ext.form.Field
+ * @version
+ *
+ */
+Ext.namespace('App.form');
+
+/**
+ * @class App.form.AceEditorField
+ *
+ */
+App.form.AceEditorField = Ext.extend(Ext.form.Field, {
+
+    /**
+     * @cfg {integer} fontSize the font size in pixels
+     */
+    fontSize: 10,
+
+    /**
+     * @cfg {string} language the programming language javascript, python, ....
+     */
+    language: 'python',
+
+    /**
+     * @cfg {string} theme
+     */
+    theme: 'crimson_editor',
+
+    /**
+     * private attributes
+     */
+    editor: null,
+
+    /**
+     * private method requests by the component model of ExtJS
+     */
+    beforeDestroy: function () {
+
+        "use strict";
+
+        Ext.destroyMembers(this, 'editor');
+        App.form.AceEditorField.superclass.beforeDestroy.call(this);
+    },
+
+    /**
+     * Return the value of this field
+     */
+    getValue: function () {
+
+        "use strict";
+
+        if (this.editor) {
+            return this.editor.getValue();
+        }
+
+        return undefined;
+    },
+
+    /**
+     * private hanlder to render the editor super seeding the base class method
+     *
+     * @param {Ext.Element} ct The container to render to.
+     * @param {Object} position The position in the container to render to.
+     */
+    onRender: function (ct, position) {
+
+        "use strict";
+
+        App.form.AceEditorField.superclass.onRender.call(this, ct, position);
+
+        this.wrap = this.el.wrap({cls: 'x-form-text'});
+        this.resizeEl = this.positionEl = this.wrap;
+
+        this.editor = ace.edit(this.wrap.id);
+        this.editor.getSession().setMode('ace/mode/' + this.language);
+        this.editor.setFontSize(this.fontSize);
+
+        if (this.theme) {
+            this.editor.setTheme('ace/theme/' + this.theme);
+        }
+    },
+
+    /**
+     * Set the value for this field
+     * @param {Object} value
+     */
+    setValue: function (value) {
+
+        "use strict";
+
+        App.form.AceEditorField.superclass.setValue.call(this, value);
+
+        if (this.editor) {
+            this.editor.setValue(value);
+            this.editor.clearSelection();
+            this.editor.moveCursorTo(0, 0);
+        }
+    }
+});
+
+Ext.reg('xaceeditorfield', App.form.AceEditorField);
\ No newline at end of file