custom:api_js_openformfloatingpane [GeowebFramework]

Questa pagina è in sola lettura. Puoi visualizzare il sorgente, ma non puoi modificarlo. Contatta l'amministratore se pensi che ci sia un errore.
====== Apertura generica form in FloatingPane - openFormFloatingPane() ======

Apre una generica form in un floatingPane, totalmente svincolata da una gwClass. E' utile in generale quando si vogliono creare velocemente form diverse da quelle generate in automatico a partire dalle gwClass. Alla velocità di codifica si contrappongono dei vincoli sulla struttura, composta da:
  * parte centrale contenente la form con i vari widget incasellati dentro un dojo TableContainer. Il layout della form è vincolato, nel senso che i widget verranno incasellati in due colonne con a sinistra le label e a destra gli input
  * toolbar in basso contenente i buttons


===== Parametri =====
  * **floatingPaneId** String, optional. E' un identificativo che verrà assegnato al floatingPane. Utile per farvi riferimento successivamente 
  * **formManagerId** String, optional. E' un identificativo che verrà assegnato al formManger interno al floatingPane. Utile per farvi riferimento successivamente
  * **formManagerOptions** String, optional, default null. Serie di proprietà che verranno mixate al formManger 
  * **tableContainerId** String, optional. E' un identificativo che verrà assegnato al tableContainer interno al floatingPane, il quale incasella i widget in colonna, con a sinistra la label e a destra l'input. Utile per farvi riferimento successivamente
  * **formFields** Object[], optional, default null. E' una lista di mappe contenenti la definizione dei widget della form. L'ordine è rilevante. Le definizioni sono mappe js nel formato sottostante. 
    * **declaredClass**, String, required. E' il nome comprensivo di path del widget dojo che verrà instanziato in quella posizione
    * **fieldId**, String, optional. E' l'identificativo del widget utilizzabile per eventualemente interagire con esso in seguito
    * **label**, String, optional. E' la label che verrà visualizzata nella colonna di sinistra in corrispondenza dle widget
    * **fieldOptions**, Object, optional. E' una mappa di proprietà/function che verrà mixata nelle props del widget dojo all'atto della sua creazione. Può essere usato per aggiungere function o sovrascrivere quelle già esistenti.
<code javascript>
{
	fieldId: 'fieldId1', //optional
	declaredClass: 'dijit/form/NumberTextBox', //required
	label: 'Field 1', //optional
	fieldOptions: {
		value: 100,
		name: 'field1Value',
		style: {color: 'red'},
		'class': 'gwMyClass',
		myCustomFunction: function(a, b, c){
		},
		functionThatOverridesOneAlreadyExistingInsideDojoWidget: function(a, b, c){
		}
	}
}
</code>
  * **buttons** Object[], optional, default null. E' una lista di mappe contenenti la definizione dei botton che verranno creati nella bottom toolbar. L'ordine è rilevante.
    * **label**, String, optional. La label per il bottone. Si possono usare tutte le label predefinite come: //saveLabel//, //createLabel//, //closeLabel//, //createAndCloseLabel//, //saveAndCloseLabel//, //applyLabel//
    * **iconClass**, String, optional. Il nome della class css che contiene la regola per mostrare l'icona del button. Si possono usare tutte le label predefinite come: //iconDone//, //iconApply//, //iconClose//, //iconCancel//
    * **action**, function, required. E' una function contenente il codice js che verrà eseguita al click sul button. Come primo argomento in ingresso viene passato 'dialog', su cui si possono richiamare le function esposte come **.hide()** (per nascondere il dialog senza distruggerlo ed avere la possibilità in seguito di riportarlo in primo piano con **.show()**), oppure **.close()** (che chiude il dettaglio distruggendone il contenuto, da utilizzare nei casi in cui il dettaglio al click del botton non deve essere riaperto, oppure quando si usano degli id //statici// per i widget interni al dialog, che causerebbero un errore dojo alla successiva aprtura, in quanto già utilizzati)
<code javascript>
{
	label: 'Do Action',
	iconClass: 'iconDone',
	action: function(dialog, event){
		//TODO
		dialog.close();
	}
}
</code>

Sono inoltre supportati tutti i parametri esposti dal generico FloatingPane (vedi [[custom:api_js_open_floatingpane|Apertura FloatingPane Generico]];)

===== Note =====
Alcuni widget dojo, in fase di creazione, autonomamente rielaborano le proprietà passate in creazione, compresi gli stili. Quindi può essere necessario applicare eventuali customizzazioni, per esempio sovrascritture di stile/valori, solo in seguito all'apertura della form, quando tutti i widget sono già stati inizializzati.
A questo scopo può essere utile adottare un fieldId univoco e successivamente utilizzare:
<code>
require(['dijit/registry'], function(registry){
	..
	var widget = registry.byId(fieldId);
	if(widget) widget.set('value', newValue);
});
</code>
Cambiare stili nodi dom interni dopo elaborazione iniziale widget
<code>
require(['dijit/registry', 'dojo/query', 'dojo/dom-style'], function(registry, query, domStyle){
	..
	var widget = registry.byId(fieldId);
	if(widget) domStyle.set(query('.dojoInnnerClass', widget.domNode)[0], 'color', 'red');
});
</code>

===== Esempio =====
Esempio di utilizzo da dentro una gwClass di tipo 'Selezionati in Lista':
<code javascript>
var title = 'Title'; //optional
var floatingPaneId = 'floatingPaneId'; //optional
var dimensions = {w: 400, h: 300}; //optional
var formManagerId = 'formManagerId'; //optional
var tableContainerId = 'tableContainerId'; //optional
var formManagerOptions = {}; //optional
var formFields = [
	{
		fieldId: 'fieldId1', //optional
		declaredClass: 'dijit/form/NumberTextBox', //required
		label: 'Field 1', //optional
		fieldOptions: {
			name: 'field1Value'
		}
	},
	{
		fieldId: 'rbField1', //optional
		declaredClass: 'dijit/form/RadioButton', //required
		label: 'RB 1', //optional
		groupLabel: 'RB Group',
		fieldOptions: {				
			name: 'rbName'
		}
	},
	{
		fieldId: 'rbField2', //optional
		declaredClass: 'dijit/form/RadioButton', //required
		label: 'RB 2', //optional
		fieldOptions: {
			checked: true,
			name: 'rbName'
		}
	}
];
var buttons = [
	{
		label: 'Do Action',
		iconClass: 'iconDone',
		action: function(dialog, event){
			//TODO
			dialog.close(); //use close() instead of hide() when dialog don't needs to be reshown again
		}
	},
	{
		label: closeLabel,
		iconClass: 'iconClose',
		action: function(dialog, event){
			dialog.close(); //use close() instead of hide() when dialog don't needs to be reshown again
		}
	}
];
var params = {
	title: title,
	dimensions: dimensions,
	modal: true, //modal is optional
	floatingPaneId: floatingPaneId,
	formManagerId: formManagerId,
	formManagerOptions: formManagerOptions,
	tableContainerId: tableContainerId,
	formFields: formFields,
	buttons: buttons
}
var formFloatingPane = openFormFloatingPane(params);
</code>