Differences

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

--- doc:appunti:linux:lezioni:pmapper_dev [2011/02/21 18:53] – [Formattazione numeri risultato query] 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 152: / Line 158: @@
 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, ...}%%''**  |