All'interno della libreria cwbLibHtml sono presenti dei metodi per la generazione di componenti dinamici a run-time.

Metodo: pulsantiDinamiciButtonBar($formName, $divName, $pulsanti)

Parametri:

• $formName: nome della form
• $divName: nome del div dove iniettare i componenti
• $pulsanti: array di dati che rappresenta i pulsanti da aggiungere.

Ogni pulsante è rappresentato da un array associativo, con le seguenti chiavi:

• id: Id pulsante
• icon: icona pulsante (per vedere le icone utilizzabili, vedere il seguente link: https://api.jqueryui.com/theming/icons/
• newline: indica se dopo il pulsante occorre andare a capo riga
• properties: array di proprietà da associare al pulsante

Esempio di utilizzo:

cwbLibHtml::pulsantiDinamiciButtonBar($this->nameForm, 'divPulsantiDinamici', array(
	array(
		'id' => 'btnDinamico1',
		'icon' => 'ui-icon-search',
		'newline' => 1,
		'properties' => array(
			'style' => 'width:140px;',
			'value' => 'Pulsante 1',
		)
	),
	array(
		'id' => 'btnDinamico2',
		'icon' => 'ui-icon-search',
		'newline' => 1,
		'properties' => array(
			'style' => 'width:140px;',
			'value' => 'Pulsante 2',
		)
	),
));

Metodo: addGridComponent($formName, $components)

Parametri:

• $formName: nome della form
• $components: array di dati che rappresenta i componenti da aggiungere

Componenti attualmente gestiti:

L'array $components deve contenere:

• type: 'ita-edit'
• id: id componente
• onChangeEvent: true se si vuole abilitare l'evento onChange, false altrimenti (evento 'afterSaveCell')
• model: il nome della form su cui deve rientrare (solo se richiesta gestione eventi 'onChangeEvent')
• rowKey: identificativo riga selezionata in griglia
• additionalClass: da passare se si vogliono agganciare delle classi custom al componente
• properties: array di proprietà da associare al componente(es. array('value' ⇒ 'valore') per settare il value del componente)

L'array $components deve contenere:

• type: 'ita-edit-date'
• id: id componente
• onChangeEvent: true se si vuole abilitare l'evento onChange, false altrimenti (evento 'afterSaveCell')
• model: il nome della form su cui deve rientrare (solo se richiesta gestione eventi 'onChangeEvent')
• rowKey: identificativo riga selezionata in griglia
• additionalClass: da passare se si vogliono agganciare delle classi custom al componente
• properties: array di proprietà da associare al componente(es. array('value' ⇒ 'valore') per settare il value del componente)
• formatter: formatter da usare per ottenere il valore sulla post (se non passato di default viene messo quello standard, passare 1 solo valore).

L'array $components deve contenere:

• type: 'ita-edit-date'
• id: id componente
• onChangeEvent: true se si vuole abilitare l'evento onChange, false altrimenti (evento 'afterSaveCell')
• model: il nome della form su cui deve rientrare (solo se richiesta gestione eventi 'onChangeEvent')
• rowKey: identificativo riga selezionata in griglia
• additionalClass: da passare se si vogliono agganciare delle classi custom al componente
• properties: array di proprietà da associare al componente(es. array('value' ⇒ 'valore') per settare il value del componente)
• options: array di opzioni della select contenente:id,value,selected,text (opzionale, se non c'è viene messo value)

Metodo: componentiDinamici($formName, $divName, $components)

Parametri:

• $formName: nome della form
• $divName: nome del div dove iniettare i componenti
• $components: array di dati che rappresenta i componenti da aggiungere

Componenti attualmente gestiti:

E' un componente che contiene al suo interno altri componenti.

• type: 'div'
• id: id conmponente
• children: array di sottocomponenti

• type: 'ita-button'
• id: id conmponente
• icon: icona pulsante (per vedere le icone utilizzabili, vedere il seguente link: https://api.jqueryui.com/theming/icons/
• newline: indica se dopo il pulsante occorre andare a capo riga
• properties: array di proprietà da associare al pulsante

• type: 'ita-edit'
• id: id conmponente
• newline: indica se dopo il pulsante occorre andare a capo riga
• properties: array di proprietà da associare al pulsante
• label: oggetto label associato al componente
• additionalClass: da passare se si vogliono agganciare delle classi custom al componente
• onChangeEvent: true se si vuole abilitare l'evento onChange, false altrimenti (evento 'afterSaveCell')
• model: il nome della form su cui deve rientrare (solo se richiesta gestione eventi 'onChangeEvent')

• type: 'ita-edit-lookup'
• id: id conmponente
• newline: indica se dopo il pulsante occorre andare a capo riga
• properties: array di proprietà da associare al pulsante
• label: oggetto label associato al componente

• type: 'ita-readonly'
• id: id conmponente
• newline: indica se dopo il pulsante occorre andare a capo riga
• properties: array di proprietà da associare al pulsante
• label: oggetto label associato al componente

• type: 'ita-checkbox'
• id: id conmponente
• newline: indica se dopo il pulsante occorre andare a capo riga
• properties: array di proprietà da associare al pulsante
• label: oggetto label associato al componente

• type: 'ita-select'
• id: id conmponente
• newline: indica se dopo il pulsante occorre andare a capo riga
• properties: array di proprietà da associare al pulsante
• label: oggetto label associato al componente
• options: array di valori che può assumere il componente
• onChangeEvent: true se si vuole abilitare l'evento onChange, false altrimenti (evento 'afterSaveCell')
• model: il nome della form su cui deve rientrare (solo se richiesta gestione eventi 'onChangeEvent')
• additionalClass: da passare se si vogliono agganciare delle classi custom al componente

• text: testo della label
• position: posizione label ('sx', 'dx')
• style: stile css

• id: id elemento
• value: Valore da mostrare a video
• selected: se indicato, e se valorizzato a 1, indica si assume come valore di default

Esempio di utilizzo:

private function componentiDinamici() {
	$componenti = array(
		array(
			'type' => 'div',
			'id' => 'divInfoAggiuntive',
			'children' => array(
				array(
					'type' => 'ita-edit',
					'id' => 'txtDemo1',
					'newline' => 1,
					'properties' => array(
						'maxlength' => 10,
						'size' => 7,
						'style' => 'text-align:right;'
					),
					'label' => array(
						'text' => 'label comp. 1',
						'position' => 'sx',
						'style' => 'width:120px;'
					)
				),
				array(
					'type' => 'ita-edit',
					'id' => 'txtDemo2',
					'newline' => 1,
					'properties' => array(
						'maxlength' => 20,
						'size' => 14,
						'style' => 'text-align:left;'
					),
					'label' => array(
						'text' => 'label comp. 2',
						'position' => 'sx',
						'style' => 'width:120px;'
					)
				),
				array(
					'type' => 'ita-edit-lookup',
					'id' => 'txtLookup1',
					'newline' => 0,
					'size' => 200,
					'properties' => array(
						'maxlength' => 2,
						'size' => 5,                            
						'style' => 'text-align:right;'
					),
					'label' => array(
						'text' => 'label lookup',
						'position' => 'sx',
						'style' => 'width:120px;'
					)
				),
				array(
					'type' => 'ita-readonly',
					'id' => 'txtLookup1_decod',
					'newline' => 1,
					'properties' => array(                            
						'size' => 50
					)
				),
				array(
					'type' => 'ita-checkbox',
					'id' => 'txtCheckTest',
					'newline' => 1,
					'label' => array(
						'text' => 'label check',
						'position' => 'sx',
						'style' => 'width:120px;'
					)
				),
				array(
					'type' => 'ita-select',
					'id' => 'txtSelect1',
					'newline' => 1,
					'label' => array(
						'text' => 'label select',
						'position' => 'sx',
						'style' => 'width:120px;'
					),
					'options' => array(
						array(
							'id' => '01',
							'value' => 'EUROPA',
							'selected' => 1
						),
						array(
							'id' => '02',
							'value' => 'ASIA'                                
						)
					)
				),
				array(
					'type' => 'ita-button',
					'id' => 'btnSub1',
					'icon' => 'ui-icon-search',                        
					'newline' => 1,
					'properties' => array(
						'style' => 'width:140px;',
						'value' => 'Pulsante 1',
					)
				),
			)
		)
	);
	
	cwbLibHtml::componentiDinamici($this->nameForm, "divCampiDinamici", $componenti);
}

Per includere dinamicamente un model (disegnato con il generator) all'interno di un div, utilizzare il metodo: includiFinestra($src, $dest, $containerName)

Parametri:

• src: Nome finestra da includere
• dest: Nome finestra di destinazione
• containerName: Nome container dove iniettare la finestra

In questo caso la finestra inclusa sarà vista come un'estensione della finestra ospitante, e tutti gli eventi della finestra inclusa saranno gestiti da quest'ultima.

Esempio:

cwbLibHtml::includiFinestra('cwbBtaNazion', $this->nameForm, 'divContainer');

Per aggiungere dei componenti all'interno di una jqGrid, devono verificarsi innanzitutto le seguenti condizioni:

• I dati devono essere presenti all'interno del model (array)
• I dati devono essere caricati tutti in memoria
• I dati devono essere serializzati in sessione

Il funzionamento è il seguente:

• Viene effettuato il caricamento dei dati in un array, poi serializzato in sessione
• I dati vengono elaborati: viene prodotto l'html per il render dei componenti, a seconda del tipo di dato da gestire
• Gestione degli eventi: i dati in memoria devono essere sincronizzati

Metodo: addGridComponent

Parametri:

• component: Array che rappresenta i dati del componente

Questo metodo funge da wrapper per i componenti specifici, ad esempio, per 'ita-select', viene chiamato il seguente metodo: addGridComponentItaSelect

Parametri:

• type: Tipo componente ('ita-select')
• model: Nome della form (corrisponde con $this→nameForm)
• name: Nome del componente (serve per costruire l'id in questo modo: [model]_[name]_[rowKey])
• rowKey: Chiave che identifica il record
• options: Array dei valori con cui popolare il componente 'ita-select'
• additionalData: Array di valori da restituire nel gestore degli eventi

All'evento 'change', vengono restituiti i seguenti valori nella $_POST:

• id: Id del componente html
• name: Nome componente (id, senza rowKey)
• model: Nome della form
• value: Nuovo valore

Inoltre, verranno passati tutti i valori previsti in 'additionalData' (direttamente nella $_POST).

Esempio di utilizzo (all'interno di un metodo di elaborazione del record):

private function elaboraRecordsTest($Result_tab) {
	$numRiga = 0;
	foreach ($Result_tab as $key => $Result_rec) {
		$numRiga++;
		$html = cwbLibHtml::addGridComponent(array(
			'type' => 'ita-select',
			'model' => $this->nameForm,
			'name' => 'selectIndirizzo',
			'rowKey' => $Result_tab[$key]['ID'],
			'options' => array(
				array(
					'id' => 1,
					'value' => 'vai milano 1, Jesi(AN)'
				),
				array(
					'id' => 2,
					'value' => 'vai ascoli piceno 2, Apiro(MC)'
				)
			),
			'additionalData' => array(
				'numRiga' => $numRiga
			)
		));
		
		$Result_tab[$key]['INDIRIZZO'] = $html;            
	}
	return $Result_tab;        
}

E' necessario dopo aver creato a runtime dei componenti particolari (date-picker , ita-button ecc) associare tramite la funzione “parseHtmlContainer” lo script js per far funzionare il componente. Ad esempio se creo una griglia editabile da codice è necessario per far funzionare tutti i sui elementi (date-picker, formatter del data-edit ecc, binocoli per lookup esterni )lanciare la function sul componente padre che poi si occuperà di propagare tale comportamento ai figli.

cwbLibHtml::attivaJSElemento($this->nameForm . '_' . [TABLENAME]);

4 visualizzazioni.