Changes between Version 1 and Version 2 of TechnicalDocumentation


Ignore:
Timestamp:
Feb 7, 2011, 5:24:52 PM (11 years ago)
Author:
jannekevdp@…
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • TechnicalDocumentation

    v1 v2  
    1 =Technical Documentation=
     1= Technical Documentation =
    22
    3 ==Javascript Classes==
     3== Javascript Classes ==
    44The DbNP Project contains several Javascript classes which can dynamically add functionality to the pages which are developed. All of these classes rely on the jQuery library so make sure jQuery is available before using any of these classes. Note that I am using the Grails notation of including Javascript as the whole project is built in [http://www.grails.org Grails]. Note that I tend to use ([http://developer.yahoo.com/yui/compressor/ yui compressed]) minified Javascript and css for the production version of the application using an if statement.
    55
    6 ===Ontology Chooser===
     6=== Ontology Chooser ===
    77The Ontology Chooser integrates with the [http://bioportal.bioontology.org/ontologies/ NCBO Ontologies] and build upon the jQuery-ui autocomplete functionality.
    88
    9 ====Code====
     9==== Code ====
    1010Source can be found here:
    1111[https://trac.nbic.nl/gscf/browser/trunk/web-app/js/ontology-chooser.js ontology-chooser.js]
    1212[https://trac.nbic.nl/gscf/browser/trunk/web-app/js/ontology-chooser.min.js ontology-chooser.min.js]
    1313
    14 ====Usage====
     14==== Usage ====
    1515First require the Ontology Chooser Javascript code in your project (note the minified Javascript):
    1616 <g:if env="production">
    … …  
    4040 </script>
    4141
    42 ====After initialization====
     42==== After initialization ====
    4343After initializing the ontology fields and selecting one of the provided suggestions in the ontology autocomplete list, three hidden fields will be automatically inserted (if they do not yet exist) into the DOM. Or (if they ''do'' exist) their values will be changed accordingly:
    4444 <input type="hidden" name="fieldName-concept_id" value="..."/>
    … …  
    5050Upon selecting one of the provided suggestions these hidden fields will be filled
    5151
    52 ====CSS====
     52==== CSS ====
    5353The following style sheet elements are used by the ontology chooser. This CSS is already included in the default application wide stylesheet. However, if one would like to implement this somewhere else, this CSS can be used to tweak the look and feel:
    5454 .ui-autocomplete .ui-menu-item {
    … …  
    6464 }
    6565
    66 ====Example====
     66==== Example ====
    6767A screenshot of what the above example looks like:<br />
    6868[[Image:dbnp-ontology-all.png]]<br />
    … …  
    7373 <input type="hidden" name="myOntology-full_id" value="http://ncicb.nci.nih.gov/xml/owl/EVS/Thesaurus.owl#A_Mouse" />
    7474
    75 ====Advanced Example====
     75==== Advanced Example ====
    7676For more advanced behavior, the Ontology Chooser can be instantiated to automatically show and hide a DOM element. This functionality is useful for showing a submit button when there are search results and the user has actually selected one of the results, or hide the submit button when there are no results. You can use this by instantiating the Ontology Chooser like this:
    7777 $(function() {
    … …  
    8989 &lt;/div&gt;
    9090
    91 ===Select Add More===
     91=== Select Add More ===
    9292Select Add More is a Javascript class which is able to dynamically insert an entry to a select element which -upon selecting- causes a jQuery-ui dialog window to open. The look & feel and behaviour can be defined according to your needs.
    9393
    94 ====Code====
     94==== Code ====
    9595Source can be found here:
    9696[https://trac.nbic.nl/gscf/browser/trunk/web-app/js/SelectAddMore.js SelectAddMore.js]
    9797[https://trac.nbic.nl/gscf/browser/trunk/web-app/js/SelectAddMore.min.js SelectAddMore.min.js]
    9898
    99 ====Usage====
     99==== Usage ====
    100100First require the Javascript code in your project (note the minified Javascript):
    101101 <g:if env="production">
    … …  
    127127This code will insert an option with 'add / modify..' as a label, and when selecting it a jQuery dialog will be opened with url '/gscf/templateEditor' and passing '?entity=...' as get variable (as defined by the ''vars'' argument). Whenever the dialog is closed, the ''onClose'' function is executed.
    128128
    129 ====GSCF Grails example====
     129==== GSCF Grails example ====
    130130Instead of writing the select element yourself, within the GSCF template you could also write the following code which automatically renders a select element with ''rel='template'''. Note that this results in a (Blowfish) encrypted entity for security sake:
    131131 <wizard:templateElement name="template" description="Template" entity="${dbnp.studycapturing.Study}" addDummy="true">
    … …  
    133133 </wizard:templateElement>
    134134
    135 ====CSS====
     135==== CSS ====
    136136The actual style which is used by the Javascript class is user definable. In the example above the class is instantiated with the ''modify'' class. Below is the css for this example:
    137137
    … …  
    145145 }
    146146
    147 ====Example====
     147==== Example  ====
    148148A screenshot of what the above example looks like:<br />
    149149[[Image:SelectAddMore.png]]
    … …  
    152152[[Image:SelectAddMore.dialog.png]]
    153153
    154 ===Table Editor===
     154=== Table Editor ===
    155155The table editor provides multi-edit functionality to ''tables''. These tables are defined as a set of HTML elements which -in the user interface- show a table. This can be the table element, but could as well be a set of div elements.
    156156
    157 ====Code====
     157==== Code ====
    158158Source can be found here:
    159159[https://trac.nbic.nl/gscf/browser/trunk/web-app/js/table-editor.js table-editor.js]
    160160[https://trac.nbic.nl/gscf/browser/trunk/web-app/js/table-editor.min.js table-editor.min.js]
    161161
    162 ====Usage====
     162==== Usage ====
    163163First require the Javascript code in your project (note the minified Javascript):
    164164 <g:if env="production">
    … …  
    191191''Note that this should be done after the DOM is ready (see the ontology chooser how to do that).''
    192192
    193 ====Example====
     193==== Example ====
    194194A screenshot of what it would look like:<br />
    195195[[Image:TableEditor.png]]<br />