Differences

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

--- doc:appunti:linux:lezioni:pmapper_dev [2011/07/20 21:39] – [Dialog box con PM.Dlg.createDnRDlg] 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 156: / Line 162: @@
 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,
+    width: 640, height: 480, left: 100, top: 50,
-    height: 480,
-    left: 100,
-    top: 50,
     resizeable: true,
     newsize: true,
@@ Line 176: / Line 181: @@
 </code>
-Some of the options to create the dialog:
+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.  |
@@ Line 182: / Line 187: @@
 ^ ''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.  |
-Reading the form values and transforming them to ''key=value'' list can be done via the function in PM.Form JavaScript:
+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, ...}%%''**  |