Changeset 260


Ignore:
Timestamp:
Mar 12, 2010, 4:12:53 PM (14 years ago)
Author:
duh
Message:
  • upgraded jquery-ui to latest version
  • implemented ontology chooser using jquery-ui's autocomplete functionality. The NCBO ontology chooser was not properly implemented to be used with other functionality like the table editor, etcetera. Hence the rewritten version. Example usage: <input type="text" name="..." rel="ontology-all-name" />
  • ontology chooser dynamically inserts three hidden fields if they are not present (concept_id, ontology_id and full_id) using the naming convention of inputname-ontology_id etc
  • updated the jquery-ui style to the latest version
  • added 'known issues' boxes to wizard pages
  • updated CSS to format ontology chooser results
  • updated wizard javascript
  • some changes to the wizard controller
Location:
trunk
Files:
20 added
10 edited

Legend:

Unmodified
Added
Removed

  • trunk/grails-app/conf/BootStrap.groovy

    r253 r260  
    183183                                name: 'Cage',type: TemplateFieldType.INTEGER))
    184184                        .addToFields(new TemplateField(
    185                                 name: 'Some double', type: TemplateFieldType.DOUBLE))
    186                         .addToFields(new TemplateField(
    187                                 name: 'Some ontology', type: TemplateFieldType.ONTOLOGYTERM))
     185                                name: 'SomeDouble', type: TemplateFieldType.DOUBLE))
     186                        .addToFields(new TemplateField(
     187                                name: 'SomeOntology', type: TemplateFieldType.ONTOLOGYTERM))
    188188                        .with { if (!validate()) { errors.each { println it} } else save()}
    189189

  • trunk/grails-app/controllers/dbnp/studycapturing/WizardController.groovy

    r257 r260  
    160160                        }.to "subjects"
    161161                        on("next") {
     162                                println params
    162163                                flash.errors = [:]
    163164

  • trunk/grails-app/taglib/dbnp/studycapturing/WizardTagLib.groovy

    r257 r260  
    630630                                        break
    631631                                case 'ONTOLOGYTERM':
    632                                         out << it.getClass()
     632                                        // @see http://www.bioontology.org/wiki/index.php/NCBO_Widgets#Term-selection_field_on_a_form
     633                                        // @see table-editor.js
     634                                        //out << it.getClass()
     635                                        out << textField(
     636                                                name: attrs.name + '_' + it.name,
     637                                                value: fieldValue,
     638                                                rel: 'ontology-all-name',
     639                                                size: 100
     640                                        )
    633641                                        break
    634642                                default:

  • trunk/grails-app/views/layouts/main.gsp

    r247 r260  
    88        <link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon"/>
    99        <g:javascript library="jquery"/>
    10         <script src="${createLinkTo(dir: 'js', file: 'jquery-ui-1.7.2.custom.min.js')}" type="text/javascript"></script>
    11         <link rel="stylesheet" href="${createLinkTo(dir: 'css/jquery-ui', file: 'jquery-ui-1.7.2.custom.css')}"/>
     10        <script src="${createLinkTo(dir: 'js', file: 'jquery-ui-1.8rc3.custom.min.js')}" type="text/javascript"></script>
     11        <link rel="stylesheet" href="${createLinkTo(dir: 'css/cupertino', file: 'jquery-ui-1.8rc3.custom.css')}"/>
    1212        <!-- layouthead //-->
    1313        <g:layoutHead/>

  • trunk/grails-app/views/wizard/index.gsp

    r257 r260  
    2323        <script type="text/javascript" src="${resource(dir: 'js', file: 'swfobject.js')}"></script>
    2424        <script type="text/javascript" src="${resource(dir: 'js', file: 'table-editor.js')}"></script>
     25        <script type="text/javascript" src="${resource(dir: 'js', file: 'ontology-chooser.js')}"></script>
    2526        <script type="text/javascript" src="${resource(dir: 'js', file: 'timepicker-0.2.1.js')}"></script>
    2627        <script type="text/javascript" src="${resource(dir: 'js', file: 'wizard.js')}"></script>
    27         <script type="text/javascript" src="http://bioportal.bioontology.org/javascripts/widgets/form_complete.js"></script>
    2828</head>
    2929<body>

  • trunk/grails-app/views/wizard/pages/_study.gsp

    r247 r260  
    1818        <span class="info">
    1919                <span class="title">Define the basic properties of your study</span>
    20                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet leo nec leo vehicula quis scelerisque elit pulvinar. Vivamus arcu dui, adipiscing eu vestibulum id, consectetur et erat. Aenean risus mauris, placerat et lacinia vulputate, commodo eget ligula. Pellentesque ornare blandit metus ac dictum. Donec scelerisque feugiat quam, a congue ipsum malesuada nec. Donec vulputate, diam eget porta rhoncus, est mauris ullamcorper turpis, vitae dictum risus justo quis justo. Aenean blandit feugiat accumsan. Donec porttitor bibendum elementum.
     20                Pick the study template of choice (currently a fixed set) and define your study values. In this prototype the
     21                templated fields (below the 'note' box) are not yet handled so you can leave them empty for now.
    2122        </span>
    2223       
    … …  
    5152        <wizard:templateElements entity="${study}" />
    5253
     54        <span class="info">
     55                <span class="title">Known issues</span>
     56                <ul>
     57                        <li>the templated fields appear in random order</li>
     58                        <li>the templated fields are not yet handled / stored</li>
     59                </ul>
     60        </span>
     61
    5362</wizard:pageContent>

  • trunk/grails-app/views/wizard/pages/_subjects.gsp

    r247 r260  
    1818        <span class="info">
    1919                <span class="title">Add subjects to your study</span>
    20                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet leo nec leo vehicula quis scelerisque elit pulvinar. Vivamus arcu dui, adipiscing eu vestibulum id, consectetur et erat. Aenean risus mauris, placerat et lacinia vulputate, commodo eget ligula. Pellentesque ornare blandit metus ac dictum. Donec scelerisque feugiat quam, a congue ipsum malesuada nec. Donec vulputate, diam eget porta rhoncus, est mauris ullamcorper turpis, vitae dictum risus justo quis justo. Aenean blandit feugiat accumsan. Donec porttitor bibendum elementum.
     20                In this screen you can add subjects to your study based on a given template. Note that the 'species' select will probably
     21                move to the template as an ontology reference and will not be asked anymore.
    2122        </span>
    2223
    … …  
    5657</g:if>
    5758
     59        <span class="info">
     60                <span class="title">Known issues</span>
     61                <ul>
     62                        <li>autocomplete fields (like ontologies) deselect the selected rows and hence don't replicate</li>
     63                        <li>ontology fields should replicate value <i>and</i> hidden fields</li>
     64                        <li>no client-side validation is performed to check the type of an input field actually matched that of the datamodel</li>
     65                        <li>table columns are randomized on view as they are currently not sorted</li>
     66                        <li>ontology hidden fields should be processed by the back-end as well (not yet implemented)</li>
     67                        <li>ontology fields now show suggestions for <i>all</i> available ontologies. This has to be narrowed down in the future.</li>
     68                </ul>
     69        </span>
     70
    5871</wizard:pageContent>

  • trunk/web-app/css/wizard.css

    r238 r260  
    241241    color: #fff;
    242242}
    243 
    244243/* END :: TABLE */
     244
     245/* START :: wizard autocomplete */
     246.ui-autocomplete .ui-menu-item {
     247    font-size: 10px;
     248}
     249.ui-autocomplete .about {
     250    font-size: 8px;
     251    color: #006DBA;
     252}
     253.ui-autocomplete .from {
     254    font-size: 8px;
     255    color: #666;
     256}
     257/* END :: wizard autocomplete */

  • trunk/web-app/js/table-editor.js

    r247 r260  
    1212 * $Date$
    1313 */
    14 function TableEditor() { }
     14function TableEditor() {
     15}
    1516TableEditor.prototype = {
    1617    tableIdentifier:    null,
    1718    rowIdentifier:      null,
    1819    columnIdentifier:   null,
     20    selected:           null,
    1921
    2022    /**
    … …  
    5153            filter: this.rowIdentifier,
    5254            stop: function() {
     55                // remember selected rows
     56                that.selected = $('.ui-selected', table);
     57
    5358                // bind on change to columns in rows
    54                 $('.ui-selected', table).each(function() {
    55                     that.attachColumnHandlers(this);
     59                that.selected.each(function() {
     60                    that.attachColumnHandlers(this,table);
    5661                })
    5762            }
    … …  
    6368     * @param row
    6469     */
    65     attachColumnHandlers: function(row) {
     70    attachColumnHandlers: function(row,table) {
    6671        var that = this;
    6772        var count = 0;
     73
     74        // define regular expressions
     75        var regAutoComplete = new RegExp("ui-autocomplete-input");
     76
    6877        $(this.columnIdentifier, $(row)).each(function() {
    6978            var input = $(':input', $(this));
    7079            // does this column contain an input field
    7180            if (input) {
    72                 var type = $(input).attr('type');
     81                var inputElement = $(input)
     82                var type = inputElement.attr('type');
    7383
    7484                switch (type) {
    … …  
    7686                        // text input
    7787                        var columnNumber = count;
    78                         $(input).bind('keyup', function() {
    79                             that.updateSingleInputElements(input, columnNumber, 'input');
    80                         })
     88
     89                        // handle special cases
     90                        // if (inputElement.attr('rel') && regBp.test(inputElement.attr('rel'))) {
     91                        if (regAutoComplete.test(inputElement.attr('class'))) {
     92                            // this is a jquery-ui autocomplete field
     93                            inputElement.bind('autocompleteclose', function() {
     94                                // TODO: autocompletion deselects rows... which is what we don't want
     95                                //       to happen of course...
     96                                that.updateSingleInputElements(input, columnNumber, 'input');
     97                            })
     98                        } else {
     99                            // regular text element
     100                            inputElement.bind('keyup', function() {
     101                                that.updateSingleInputElements(input, columnNumber, 'input');
     102                            });
     103                        }
    81104                        break;
    82105                    case 'select-one':
    83106                        // single select
    84107                        var columnNumber = count;
    85                         $(input).bind('change', function() {
     108                        inputElement.bind('change', function() {
    86109                            that.updateSingleInputElements(input, columnNumber, 'select');
    87110                        });
    … …  
    90113                        // checkbox
    91114                        var columnNumber = count;
    92                         $(input).bind('click', function() {
     115                        inputElement.bind('click', function() {
    93116                            that.updateSingleInputElements(input, columnNumber, 'input');
    94117                        });
    … …  
    108131
    109132            count++;
    110         })
     133        });
    111134    },
    112135
    … …  
    120143        var that = this;
    121144        var e = $(element);
    122         var c = e.parent();
    123         var r = c.parent();
    124         var t = r.parent();
     145        var c = e.parent();     // column
     146        var r = c.parent();     // row
     147        var t = r.parent();     // table
    125148        var v = this.getValue(e);
    126149        // TODO for multiples...
    … …  
    132155                var myVal = that.getValue(me);
    133156                if (myVal != v) {
    134                     that.setValue(me,v);
     157                    that.setValue(me, v);
    135158                }
    136159            })
    … …  
    160183     * @param value
    161184     */
    162     setValue: function(input,value) {
     185    setValue: function(input, value) {
    163186        var i = $(input);
    164187
    165188        switch (i.attr('type')) {
    166189            case 'checkbox':
    167                 return i.attr('checked',value);
     190                return i.attr('checked', value);
    168191                break;
    169192            default:

  • trunk/web-app/js/wizard.js

    r257 r260  
    3838    attachDateTimePickers();
    3939
    40     // table handlers
     40    // handle and initialize table(s)
    4141    attachTableEvents();
    4242    handleWizardTable();
    4343    new TableEditor().init('div.table', 'div.row', 'div.column');
    4444
    45     // accordeon(s)
     45    // initialize the ontology chooser
     46    new OntologyChooser().init();
     47
     48    // initialize accordeon(s)
    4649    $("#accordion").accordion();
    4750}
Note: See TracChangeset for help on using the changeset viewer.