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

• 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.

{
	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){
		}
	}
}

• 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)

{
	label: 'Do Action',
	iconClass: 'iconDone',
	action: function(dialog, event){
		//TODO
		dialog.close();
	}
}

Sono inoltre supportati tutti i parametri esposti dal generico FloatingPane (vedi Apertura FloatingPane Generico;)

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:

require(['dijit/registry'], function(registry){
	..
	var widget = registry.byId(fieldId);
	if(widget) widget.set('value', newValue);
});

Cambiare stili nodi dom interni dopo elaborazione iniziale widget

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');
});

Esempio di utilizzo da dentro una gwClass di tipo 'Selezionati in Lista':

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);