Changes between Version 1 and Version 2 of TechnicalDocumentation

Timestamp:

07-02-11 17:24:52 (3 years ago)

Author:

jannekevdp@…

Comment:

--

TechnicalDocumentation

@@ -1 @@
-=Technical Documentation=
+= Technical Documentation =
 
-==Javascript Classes==
+== Javascript Classes ==
 The 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.
 
-===Ontology Chooser===
+=== Ontology Chooser ===
 The Ontology Chooser integrates with the [http://bioportal.bioontology.org/ontologies/ NCBO Ontologies] and build upon the jQuery-ui autocomplete functionality.
 
-====Code====
+==== Code ====
 Source can be found here:
 [https://trac.nbic.nl/gscf/browser/trunk/web-app/js/ontology-chooser.js ontology-chooser.js]
 [https://trac.nbic.nl/gscf/browser/trunk/web-app/js/ontology-chooser.min.js ontology-chooser.min.js]
 
-====Usage====
+==== Usage ====
 First require the Ontology Chooser Javascript code in your project (note the minified Javascript):
  <g:if env="production">
@@ -40 +40 @@
  </script>
 
-====After initialization====
+==== After initialization ====
 After 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:
  <input type="hidden" name="fieldName-concept_id" value="..."/>
@@ -50 +50 @@
 Upon selecting one of the provided suggestions these hidden fields will be filled
 
-====CSS====
+==== CSS ====
 The 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:
  .ui-autocomplete .ui-menu-item {
@@ -64 +64 @@
  }
 
-====Example====
+==== Example ====
 A screenshot of what the above example looks like:<br />
 [[Image:dbnp-ontology-all.png]]<br />
@@ -73 +73 @@
  <input type="hidden" name="myOntology-full_id" value="http://ncicb.nci.nih.gov/xml/owl/EVS/Thesaurus.owl#A_Mouse" />
 
-====Advanced Example====
+==== Advanced Example ====
 For 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:
  $(function() {
@@ -89 +89 @@
  &lt;/div&gt;
 
-===Select Add More===
+=== Select Add More ===
 Select 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.
 
-====Code====
+==== Code ====
 Source can be found here:
 [https://trac.nbic.nl/gscf/browser/trunk/web-app/js/SelectAddMore.js SelectAddMore.js]
 [https://trac.nbic.nl/gscf/browser/trunk/web-app/js/SelectAddMore.min.js SelectAddMore.min.js]
 
-====Usage====
+==== Usage ====
 First require the Javascript code in your project (note the minified Javascript):
  <g:if env="production">
@@ -127 +127 @@
 This 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.
 
-====GSCF Grails example====
+==== GSCF Grails example ====
 Instead 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:
  <wizard:templateElement name="template" description="Template" entity="${dbnp.studycapturing.Study}" addDummy="true">
@@ -133 +133 @@
  </wizard:templateElement>
 
-====CSS====
+==== CSS ====
 The 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: 
 
@@ -145 +145 @@
  }
 
-====Example====
+==== Example  ====
 A screenshot of what the above example looks like:<br />
 [[Image:SelectAddMore.png]]
@@ -152 +152 @@
 [[Image:SelectAddMore.dialog.png]]
 
-===Table Editor===
+=== Table Editor ===
 The 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.
 
-====Code====
+==== Code ====
 Source can be found here:
 [https://trac.nbic.nl/gscf/browser/trunk/web-app/js/table-editor.js table-editor.js]
 [https://trac.nbic.nl/gscf/browser/trunk/web-app/js/table-editor.min.js table-editor.min.js]
 
-====Usage====
+==== Usage ====
 First require the Javascript code in your project (note the minified Javascript):
  <g:if env="production">
@@ -191 +191 @@
 ''Note that this should be done after the DOM is ready (see the ontology chooser how to do that).''
 
-====Example====
+==== Example ====
 A screenshot of what it would look like:<br />
 [[Image:TableEditor.png]]<br />