Lezione 5: Modifica del file JavaScript dell'iWidget

In questa lezione verrà modificato il codice sorgente JavaScript dell'iWidget. Verrà appreso come modificare le proprietà della classe JavaScript dell'iWidget per interagire con il codice HTML e inviare eventi.

Per modificare il file JavaScript:

Fare doppio clic sul file MyiWidget.js ubicato nella cartella WebContent del progetto nella vista Esplora enterprise.
Aggiungere la proprietà theClass: "animal" alla classe Dojo del widget.
Aggiungere la funzione sendFavorite. Questa funzione viene attivata quando si fa clic sul pulsante del codice HTML aggiunto nella modalità di visualizzazione dell'iWidget. L'azione di selezione del pulsante consente di inviare l'evento iWidget.
All'interno della funzione, immettere this per attivare l'assistente ai contenuti. Vengono elencati attributi come iContext. Esplorare le diverse proprietà visualizzate qui:

Selezionare il campo di istanza theClass e modificare il codice affinché sia simile al seguente:

this.theClass = this.iContext.getElementById("class").innerHTML;
  favorite = this.iContext.getElementById("favoritesBox");
  var toSend = this.theClass + " = " + favorite.value;
this.iContext.iEvents.fireEvent("sendFavorite" ,null, toSend);

Il codice richiama i valori inviati dalla modalità di visualizzazione di elementi HTML e li formatta come una singola stringa. L'evento sendFavorite viene inviato nella chiamata di metodo fireEvent. Aggiungere il seguente metodo per aggiornare il campo di istanza theClass quando la pagina viene modificata in modalità di modifica. L'evento onModeChanged viene inviato per passare il widget nella modalità di visualizzazione, una volta che le modifiche vengono effettuate ed inoltrate nella vista Modifica:
```
switchFavorite : function()
{
 var elements = this.iContext.getElementById("classSelection");
 var selectedValue = elements.options[elements.selectedIndex].value;
 this.theClass = selectedValue;
 this.iContext.iEvents.fireEvent("onModeChanged", null, "{newMode:'view'}");
},
```
Ricercare il gestore eventi onView. Incollare il seguente codice nella funzione del gestore eventi. Questo codice aggiorna il testo all'interno del tag span nel contenuto HTML nella modalità di visualizzazione.
```
this.iContext.getElementById("class").innerHTML = this.theClass;
```

Di seguito vengono riportate le modifiche dettagliate apportate al file JavaScript iWidget:

dojo.declare("MyiWidgetScope", null, {
	theClass : "animal",

	sendName : function() {
		var data = {};
		data = this.iContext.getElementById("nameBox");
		this.iContext.iEvents.fireEvent("sendEvent", null, data.value);
	},

	sendFavorite : function() {

		this.theClass = this.iContext.getElementById("class").innerHTML;
		favorite = this.iContext.getElementById("favoritesBox");
		var toSend = this.theClass + " = " + favorite.value;
		this.iContext.iEvents.fireEvent("sendFavorite", null, toSend);

	},

	switchFavorite : function() {

		var elements = this.iContext.getElementById("classSelection");
		var selectedValue = elements.options[elements.selectedIndex].value;
		this.theClass = selectedValue;
		this.iContext.iEvents.fireEvent("onModeChanged", null, "{newMode:'view'}");

	},
	/*
	 * THE FOLLOWING STUBS ARE EVENT HANDLERS FOR PRE-DEFINED EVENTS. THEY CAN
	 * BE OVERRIDDEN BY SPECIFYING ANOTHER EVENT HANDLER IN THE <iwidget>
	 * ELEMENT OF THE XML Eg: <iw:iwidget onLoad="myLoadHandler" />
	 */

	/*
	 * This event signals that the mode for the iWidget has changed to VIEW
	 */

	onView : function() {

		this.iContext.getElementById("class").innerHTML = this.theClass;

	}
});

Apportare le modifiche nel codice HTML per utilizzare i metodi JavaScript. Per utilizzare i metodi JavaScript:

Aprire il file MyiWidget.xml nell'editor iWidget e passare alla scheda Progettazione.
Selezionare la modalità di visualizzazione Contenuto. Utilizzare il metodo iScope() di iContext per accedere agli elementi di script della classe iWidget all'interno del file JavaScript. Nel codice HTML, modificare i seguenti elementi:
```
<input type="submit" value="Submit"/>
```
to
```
<input type="submit" value="Submit" onclick="iContext.iScope().sendFavorite()"/>
```

Selezionare la modalità di modifica Contenuto. Nel codice HTML, modificare i seguenti elementi:

<input type="submit" value="Edit"/>

<input type="submit" value="Edit" onclick="iContext.iScope().switchFavorite()"/>

Lezione 5: Modifica del file JavaScript dell'iWidget

Punto di controllo della lezione