Differences

This shows you the differences between two versions of the page.

--- doc:appunti:linux:lezioni:pmapper_dev [2010/04/28 19:42] – niccolo
+++ doc:appunti:linux:lezioni:pmapper_dev [2011/07/21 09:44] (current) – [Aggiungere un barra laterale] niccolo
@@ Line 2: / Line 2: @@
 p.mapper 4 utilizza estensivamente la libreria [[http://jquery.com/|jQuery]] ed alcune componenti del [[http://jqueryui.com/|plugin UI]] per disegnare il proprio layout. Vedremo come utilizzare la versione completa del plugin UI per aggiungere del contenuto dinamico all'interfaccia di p.mapper.
+===== Modificare il codice JavaScript =====
+Il codice JavaScript di p.mapper è compresso e unito nell'unico file **''javascript/pm_cjs.js''**. Invece di modificare questo file è possibile prendere il file sorgente interessato (ad esempio **''javascript/src/pm.query.js''**) e farne una copia in **''config/common/''** (viene caricato per ogni configurazione) oppure in **''config/default/''** (viene caricato solo per la configurazione //default//).
+Le modifiche alle funzioni JavaScript si effettuano in questo file e siccome questo file viene incluso dopo ''pm_cjs.js'', le sue definizioni sovrascriveranno quelle predefinite.
 ===== Aggiungere un barra laterale =====
@@ Line 38: / Line 44: @@
 Purtroppo il plugin UI non è nella sua versione completa, mancano ad esempio i widget //Accordion// e //Tabs//. Dopo aver scaricato dal sito l'archivio compresso, si scompatta il codice javascript e il foglio di stile, salvandoli rispettivamente nei file:
-  * **''javascript/jquery-ui-1.7.2.custom.min.js''**
+  * **''config/common/jquery-ui-1.7.2.custom.min.js''**
-  * **''templates/jquery-ui-1.7.2.custom.css''**
+  * **''config/common/jquery-ui-1.7.2.custom.css''**
-I due file devono essere richiamati dal file **''map.phtml''**, con opportuni tag nella sezione ''%%<head>%%''. I tag devono comparire dopo il caricamento del JavaScript e degli stili predefiniti:
+Per caricare un file **.js** o un file **.css** basta copiarlo nella directory **''config/common/''**, gli opportuni tag ''%%<script>%%'' e ''%%<link>%%'' vengono generati automaticamente.
+Se si vuol un controllo maggiore sull'ordine in cui il codice JavaScript e i fogli di stile vengono caricati, si può aggiungere direttamente il codice HTML nel file **''map.phtml''**, nella sezione ''%%<head>%%''.
 <code html>
-<script type="text/javascript" src="javascript/jquery-ui-1.7.2.custom.min.js"></script>
+<script type="text/javascript" src="config/common/jquery-ui-1.7.2.custom.min.js"></script>
-<link rel="stylesheet" href="templates/jquery-ui-1.7.2.custom.css" type="text/css" />
+<link rel="stylesheet" href="config/common/jquery-ui-1.7.2.custom.css" type="text/css" />
 </code>
 La **''%%<div id="uiLayoutWest">%%''** deve essere riempita con normale codice HTML, secondo la [[http://jqueryui.com/demos/|documentazione]] del plugin UI. Il tutto è contenuto nel file ''map.phtml'':
@@ Line 105: / Line 114: @@
 </code>
-Per //attivare// il codice JavaScript che trasforma il normale testo HTML in contenuto dinamico, si devono aggiungere due chiamate di funzione jQuery, che agiscono sugli oggetti con **''id=accordion''** e **''id=tabs''** rispettivamente. Le chiamate di funzione devono stare all'interno **''$(document).ready()''** in modo che vengano eseguite al termine del caricamento della pagina:
+Per //attivare// il codice JavaScript che trasforma il normale testo HTML in contenuto dinamico, si devono aggiungere due chiamate di funzione jQuery, che agiscono sugli oggetti con **''id=accordion''** e **''id=tabs''** rispettivamente. Le chiamate di funzione devono stare all'interno della funzione **''$(document).ready()''** in modo che vengano eseguite al termine del caricamento della pagina (sempre in ''map.phtml''):
 <code javascript>
@@ Line 114: / Line 123: @@
     });
 </code>
+{{:doc:appunti:linux:lezioni:pmapper:pmapper_ui.png?450|p.mapper jQuery UI}}
+===== Formattazione numeri risultato query =====
+Il risultato di una query tramite lo strumento **Seleziona** viene mostrato in un dialog box, purtroppo i numeri vengono formattati come numeri con cinque decimali, anche se si tratta di numeri interi.
+Per migliorare l'impaginazione bisogna modificare la funzione **''parseResult()''**. Si copia il file sorgente **''pm.query.js''** dalla directory **''javascript/src/''** alla directory **''config/common/''**, quindi si sostituisce le seguenti istruzioni:
+<code javascript>
+    if (!(noShpLink && i == 0))
+        h.append(layTpl.tvalues['#default'].replace(/\$/, this)
+                                           .replace(/@/, rHeader[i])
+        );
+</code>
+con
+<code javascript>
+    if (!(noShpLink && i == 0)) {
+        var value;
+        if (String(this).match(/^[0-9]+\.0+$/)) {
+            value = parseFloat(this).toFixed(0);
+        } else if (String(this).match(/^[0-9]+\.[0-9]+$/)) {
+            value = parseFloat(this).toFixed(3);
+        } else {
+            value = this;
+        }
+        h.append(layTpl.tvalues['#default'].replace(/\$/, value)
+                                           .replace(/@/, rHeader[i])
+        );
+    }
+</code>
+I **numeri interi** sono formattati senza decimali, i **float con solo 3 decimali** e tutto il resto rimane invariato.
+===== Dialog box con PM.Dlg.createDnRDlg =====
+Thanks to Armin Burger for the following details.
+In plugins writing or extending p.mapper code, it is nice to use dialog boxes in the p.mapper way. Here it is an example for the **''PM.Dlg.createDnRDlg()''** function:
+<code javascript>
+var dlgOptions = {
+    width: 640, height: 480, left: 100, top: 50,
+    resizeable: true,
+    newsize: true,
+    container: 'pmDlgContainer',
+    name: 'PopupWindow'
+};
+var dlg = PM.Dlg.createDnRDlg(
+    dlgOptions,
+    'Digitize Point',
+    popupUrl
+);
+</code>
+The non-trivial options are:
+^ ''newsize''    | Defines if the dialog should always be reset to its width/height defined in the options. If false it keeps the dimensions of the state when it was closed last time.  |
+^ ''container''  | Defines the ID of a ''%%<div>%%'' element to add the dialog to. But don't worry too much with this, if the container with this ID does not exist it will be created automatically. You should just avoid to use ID's that might already be used for other things (like 'map'). If two dialogs use the same container then opening one will always close the other one if already opened.  |
+^ ''name''       | Should be unique (treat it like an ID, no blanks, no special chars), so taking the name of the plugin directory (which must be unique) is a good idea. But only important if more than one dialog are open at the same time.  |
+Once the dialog is opened, it can be addressed (e.g. to change its content) using jQuery. In the following example if the dialog does not exists, it will be created; otherwise its content is reloaded and it is shown:
+<code JavaScript>
+var dlgOptions = {
+    width: 640, height: 480, left: 100, top: 50,
+    resizeable: true, newsize: true,
+    container: 'pmDlgContainer',
+    name: 'PopupWindow'
+};
+var popupUrl = PM_PLUGIN_LOCATION + '/popup/popup.php?' + SID + '&key=' + val;
+var dlgObject = $('#' + dlgOptions.container + '_MSG');
+if (dlgObject.length < 1) {
+    var dlg = PM.Dlg.createDnRDlg(dlgOptions, _p('Pop-up window'), popupUrl);
+} else {
+    $.ajax({
+        url: popupUrl,
+        type: 'GET',
+        dataType: 'html',
+        success: function(response) {
+            dlgObject.html(response);
+            dlgObject.parent().parent().show();
+        }
+    });
+}
+</code>
+When using forms, p.mapper has two handy PM.Form JavaScript functions to read all the form values and to transform them into a string to be used in AJAX post or get requests:
+^ ''PM.Form.getFormKVP()''        | Returns everything in a string ready for URL concatenation, like **''%%&key1=value1&key2=value2...%%''**  |
+^ ''PM.Form.getFormKvpObjAll()''  | Returns everything in object/array notation, like **''%%{key1: value1, key2: value2, ...}%%''**  |