Lezione 6: Creazione di una griglia di dati Dojo

Nel corso di questa lezione si continuerà con la creazione dell'interfaccia del client Web aggiungendo un widget di griglia dati Dojo alla pagina ed inserendo contenuto nella griglia.

Per creare una griglia per visualizzare gli oggetti film:

Nella tavolozza, fare clic sul cassetto Widget di dati Dojo per aprirlo.
Trascinare un widget DataGrid nel contenitore bordo, ma in una posizione esterna alle aree esistenti.

Nota: È possibile che l'area destra del contenitore bordo non appaia nel riquadro Progettazione.
Viene aperta la procedura guidata Dojo DataGrid. Il widget griglia dati crea una tabella simile a un foglio elettronico.
Deselezionare la casella di spunta Genera JavaScript per inserire dati nella griglia.
Nella sezione Colonne, specificare le etichette di intestazione colonna e la proprietà JavaScript per ogni colonna:
1. Nel campo Etichetta intestazione, immettere Titolo.
2. Nel campo Proprietà JavaScript, immettere title.
3. Fare clic su Aggiungi per aggiungere la coppia Etichetta di intestazione - Proprietà JavaScript alla tabella seguente.
4. Ripetere i passi precedenti per aggiungere le seguenti coppie di etichette di intestazione e proprietà JavaScript:
  Etichetta intestazione Proprietà JavaScript
  
  Regista regista
  
  Attore attore
  
  Descrizione descrizione
Fare clic su Fine. Nel riquadro Origine, è possibile vedere che la markup HTML per la griglia dati è stata aggiunta con le proprietà JavaScript inserendo l'attributo field e le etichette di intestazione corrispondenti come nomi di colonna.

Viene aggiunto automaticamente un insieme di istruzioni Dojo require per DataGrid e ItemFileReadStore. L'istruzione dojo.require carica tutti i package Dojo richiesti dai widget sulla pagina Web:

Al codice sorgente della pagina Web vengono aggiunti anche link CSS (cascading style sheet) Tundra.css e dijit.css fanno parte dei temi Dojo predefiniti che danni ai widget un aspetto simile. Grid.css e tundraGrid.css sono fogli di stile specifici per la visualizzazione della griglia dati:
Nel riquadro Origine, selezionare il tag <table>. La scheda Tabella viene visualizzata nella vista Proprietà.
Nella vista Proprietà, immettere il seguente testo nel campo Style:Properties: position: absolute; top: 50px; left: 50px;. Le proprietà di stile aggiunte imposteranno la tabella su 50 pixel a destra dal margine sinistro del contenitore bordo e su 50 pixel al di sotto della parte superiore del contenitore bordo.
Adesso è possibile inserire dati nella griglia di dati. Per prima cosa, utilizzare l'assistente ai contenuti per aggiungere tag di script per il codice JavaScript per inserire dati nella griglia. Per richiamare manualmente l'assistente ai contenuti, premere CTRL + Barra spaziatrice.
Ulteriori informazioni sull'assistente ai contenuti
L'Assistente ai contenuti consente di inserire o completare un tag o una funzione o di terminare una riga di codice. Il posizionamento del cursore nel file di origine fornisce all'assistente ai contenuti il contesto per il quale proporre suggerimenti per il completamento. L'Assistente ai contenuti è disponibile per HTML, JavaScript e Dojo. L'Assistente ai contenuti fornisce template Dojo per alcune funzioni, che inseriscono nell'origine codici di template che descrivono come utilizzare correttamente una funzione.
Nel riquadro Origine, al di sotto del tag </script> che contiene le istruzioni dojo.require, immettere <. L'assistente ai contenuti verrà visualizzato sulla destra.
Selezionare script per aggiungere il seguente codice: <script type="text/javascript"> </script>.
All'interno dei tag script vuoti, immettere dojo.a e premere CTRL + Barra spaziatrice per richiamare l'assistente ai contenuti. Le opzioni dell'assistente ai contenuti diminuiscono durante la digitazione.
Selezionare il template di funzione dojo.addOnLoad. Questo template aggiunge automaticamente una funzione anonima come parametro della chiamata addOnLoad. Questa funzione anonima conterrà il codice che richiama i dati da inserire nella griglia di dati.
Nel passo successivo verrà scritta la funzione Ajax che richiama i dati da un servizio URL o da un file JSON. Per richiamare i dati, verrà utilizzata la funzione Dojo xhrget. Nella funzione anonima addOnLoad, immettere dojo.xhrget.
Richiamare l'assistente ai contenuti e selezionare il template dojo.xhrget:
L'assistente ai contenuti fornisce un template Dojo per la funzione xhrget. Quando si seleziona il template, il codice nella descrizione comandi viene aggiunto al codice sorgente, come indicato di seguito:
```
dojo.xhrGet( {
	url : "url",
	handleAs: "text",
	load : function(response, ioArgs) {
		
	},
	error : function(response, ioArgs) {
	}
});
```
Modificare l'attributo URL con l'URL di servizio o con l'ubicazione del file JSON contenente i dati.
- Opzione uno: Se è stato scaricato il file JSON, immettere il percorso relativo del file JSON: MovieList.json.
- Opzione due: Se si utilizza il servizio RPC Adapter, copiare ed incollare il seguente testo nella proprietà URL: /MyMovieProject/RPCAdapter/httprpc/MovieService/getMovieList.
Impostare l'attributo handleAs su json, in modo che il servizio RPC Adapter restituisca un file JSON con i dati.
La funzione dichiarata nella proprietà di caricamento viene eseguita se i dati vengono caricati correttamente. Aggiungere il seguente codice alla proprietà di caricamento che inserirà i dati nella griglia di dati:
```
var newData = {
					identifier: "title",
					items: response.result
			};
			
var dataStore = new dojo.data.ItemFileReadStore({data: newData, id:"dataStoreId"});
			var grid = dijit.byId("gridId");
			  grid.setStore(dataStore);
```
Il codice precedente appena aggiunto, riformatta i dati caricati nella risposta nel formato richiesto da dojo.data.ItemFileReadStore, crea un data store ItemFileReadStore con i dati riformattati e lo aggiunge alla griglia dati. L'aggiunta della parola chiave var prima del nome della variabile pone la variabile in un ambito locale per la funzione di caricamento.
Nella funzione dichiarata nell'attributo di errore, aggiungere il seguente codice: alert("An error occurred while invoking the service.");
Salvare la pagina.
È possibile effettuare il test della pagina Web facendo clic con il tasto destro del mouse su ShowMovies.html in Esplora enterprise, quindi selezionando Esegui come > Esegui su server.
Nell'elenco dei server, selezionare il server:
- Opzione uno: Se si desidera utilizzare il file JSON come origine dati, selezionare Server di test AJAX.
- Opzione due : Se si desidera utilizzare l'RPC Adapter come origine dati, selezionare WebSphere Application Server 8.0.
Fare clic su Fine. La pagina ShowMovies.html viene aperta nel browser.

Etichetta intestazione	Proprietà JavaScript
Regista	regista
Attore	attore
Descrizione	descrizione

Il codice sorgente di ShowMovies.html dovrebbe risultare simile al seguente:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css"
	href="dojo/dijit/themes/dijit.css">
<link rel="stylesheet" type="text/css"
	href="dojo/dijit/themes/claro/claro.css">
<title>ShowMovies </title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript"
	djconfig="isDebug: false, parseOnLoad: true" src="dojo/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
</script>
<script type="text/javascript">
dojo.addOnLoad(function(){
dojo.xhrGet( {
	url : "/MyMovieProject/RPCAdapter/httprpc/MovieService/getMovieList",
	handleAs : "json",
	load : function(response, ioArgs) {
		var newData = {
					identifier: "title",
					items: response.result
			};
			
var dataStore = new dojo.data.ItemFileReadStore({data: newData, id:"dataStoreId"});
			var grid = dijit.byId("gridId");
			  grid.setStore(dataStore);
	},
	error : function(response, ioArgs) {
	alert("An error occurred while invoking the service.");
	}
});
});
</script>
<link rel="stylesheet" type="text/css" title="Style"	href="dojo/dojox/grid/resources/Grid.css">
<link rel="stylesheet" type="text/css" title="Style"
	href="dojo/dojox/grid/resources/claroGrid.css">
</head>
<body class="claro">

	<div dojotype="dijit.layout.BorderContainer" id="BorderContainer"
		design="headline" style="height: 100%; width: 100%">
		<table id="gridId" dojotype="dojox.grid.DataGrid" autowidth="true"
			rowselector="20px" style="position: absolute; top: 50px; left: 50px;">
			<thead>
				<tr>
					<th field="title">Title</th>
					<th field="director">Director</th>
					<th field="actor">Actor</th>
					<th field="description">Description</th>
				</tr>
			</thead>
		</table>

		<div dojotype="dijit.layout.ContentPane" region="top" style="text-align: center">My Movie Web Application!</div>
	<div dojotype="dijit.layout.ContentPane" region="right"></div>
		<div dojotype="dijit.layout.ContentPane"></div>
	</div>
</body>
</html>

Lezione 6: Creazione di una griglia di dati Dojo

Punto di controllo della lezione