Visualizzare i dati con Spry

Se state semplicemente creando un dataset, non dovete preoccuparvi del punto di inserimento. Se state creando un dataset e allo stesso tempo state inserendo un layout, accertatevi che il punto di inserimento si trovi nella posizione della pagina in cui desiderate inserire il layout.

Selezionate Inserisci > Spry > Dataset Spry.

Nella schermata Specifica origine dati, effettuate le seguenti operazioni:

• Nel menu a comparsa Seleziona tipo dati, selezionate HTML (opzione predefinita).

• Inserite un nome per il nuovo dataset. La prima volta che si crea un dataset, il nome predefinito è ds1. Il nome del dataset può contenere lettere, numeri e caratteri di sottolineatura, ma non può cominciare con un numero.

• Specificate gli elementi HTML del dataset che si vuole vengano rilevati da Dreamweaver. Ad esempio, se avete organizzato i dati all'interno di un tag div e volete che Dreamweaver rilevi i tag div anziché le tabelle, selezionate Div dal menu a comparsa Rileva. L'opzione Personalizzato consente di digitare qualsiasi nome di tag che si vuole venga rilevato.

• Specificate il percorso del file che contiene il dataset HTML. Può trattarsi di un percorso relativo che conduce a un file locale del sito (ad esempio data/html_data.html), oppure di un URL assoluto che indica una pagina Web attiva (che utilizza HTTP o HTTPS). Potete fare clic sul pulsante Sfoglia, individuare il file desiderato e selezionarlo.

  Dreamweaver esegue il rendering dell'origine dati HTML nella finestra Selezione dati e visualizza indicatori visivi che sono utilizzabili come contenitori del dataset. All'elemento che volete utilizzare deve già essere stato assegnato un ID univoco. In caso contrario, Dreamweaver mostra un messaggio di errore e dovrete tornare al file di origine dati, assegnandogli un ID univoco. Inoltre, gli elementi utilizzabili contenuti nel file di origine dati non possono risiedere nelle aree Spry o contenere altri riferimenti a dati.

  In alternativa, potete specificare un Feed in fase di progettazione come origine dati. Per ulteriori informazioni, vedete Utilizzare un feed in fase di progettazione.

• Selezionate l'elemento per il contenitore di dati facendo clic su una delle frecce gialle visualizzate nella finestra Selezione dati o scegliendo un ID dal menu a comparsa Contenitori dati.

  
  Selezione dell'elemento per il contenitore dati del dataset HTML.

  Per i file più voluminosi potete visualizzare una quantità maggiore di dati facendo clic sulla freccia Espandi/Comprimi situata nella parte inferiore della finestra Selezione dati.

  Quando selezionate l'elemento contenitore per il dataset, Dreamweaver visualizza un'anteprima del dataset nella finestra Anteprima dati.

• Facoltativamente, selezionate Selezione dati avanzata se volete specificare i selettori di dati per il dataset. Ad esempio, se avete specificato .product nella casella di testo Selettori di riga e .boximage nella casella di testo Selettori di colonna, il dataset comprenderà soltanto le righe a cui è assegnata la classe .product e soltanto le colonne a cui è assegnata la classe .boximage.

  Per digitare più di un selettore in una determinata casella di testo, separate i selettori con una virgola.

  Per ulteriori informazioni, vedete Informazioni sui selettori di dati Spry.

• Al termine delle operazioni nella schermata Specifica origine dati, fate clic su Fine per creare il dataset immediatamente, oppure su Seguente per passare alla schermata Imposta opzioni dati. Se fate clic su Fine, il dataset diventa disponibile nel pannello Associazioni (Finestra > Associazioni).

Nella schermata Imposta opzioni dati, effettuate le seguenti operazioni:

• (Opzionale) Impostate i tipi di colonne dei dataset selezionando una colonna e scegliendo un tipo di colonna dal menu a comparsa Tipo. Ad esempio, se una colonna del dataset contiene numeri, selezionate la colonna, poi scegliete numero dal menu a comparsa Tipo. Questa opzione è importante soltanto se intendete consentire agli utenti di ordinare i dati in base a quella colonna.

  Per selezionare una colonna di dataset, fate clic sulla relativa intestazione, sceglietela dal menu a comparsa Nome colonna o navigate fino alla colonna mediante le frecce destra e sinistra situate nell'angolo superiore sinistro dello schermo.

• (Opzionale) Dal menu a comparsa Ordina colonne, specificate la modalità di ordinamento dei dati. Dopo avere selezionato la colonna, potete specificare l'ordinamento crescente o decrescente.

• (Opzionale: solo tabelle) Deselezionate Usa prima riga come intestazione per utilizzare nomi di colonna generici (cioè column0, column1, column2 ecc.) anziché i nomi di colonna specificati nell'origine dati HTML.

• (Opzionale: solo tabelle) Selezionate Usa colonne come righe per invertire l'orientamento orizzontale e verticale dei dati contenuti nel dataset. Se selezionate questa opzione, le colonne vengono utilizzate come righe.
• (Opzionale) Selezionate Filtra righe duplicate per escludere dal dataset le righe di dati duplicate.
• (Opzionale) Selezionate Disattiva caching dati per potere sempre accedere ai dati più recenti del dataset. Per attivare l'aggiornamento automatico dei dati, selezionate Aggiorna dati automaticamente e specificate un tempo di aggiornamento in millisecondi.
• Al termine delle operazioni nella schermata Imposta opzioni dati, fate clic su Fine per creare il dataset immediatamente, oppure su Seguente per passare alla schermata Scegli opzioni inserimento. Se fate clic su Fine, il dataset diventa disponibile nel pannello Associazioni (Finestra > Associazioni).

Nella schermata Scegli opzioni inserimento, effettuate una delle seguenti operazioni:

• Selezionate un layout per il nuovo dataset e specificate le relative opzioni di configurazione. Per ulteriori informazioni, vedete Scegliere un layout per il dataset.

• Selezionate Non inserire HTML. Se selezionate questa opzione, Dreamweaver crea il dataset, ma non aggiunge codice HTML alla pagina. Il dataset diventa disponibile nel pannello Associazioni (Finestra > Associazioni) e potete trascinare manualmente sezioni di dati dal dataset alla pagina.

Fate clic su Fine.

Dreamweaver crea il dataset e, se avete selezionato un'opzione di layout, visualizza i segnaposto per il layout e per i dati nella pagina. Nella vista Codice potrete vedere che Dreamweaver ha aggiunto i riferimenti dell'intestazione al file SpryData.js e al file SpryHTMLDataSet.js. Questi file sono risorse Spry importanti che funzionano in combinazione con la pagina. Non rimuovete questo codice dalla pagina; in caso contrario, il dataset non funziona. Quando caricate la pagina su un server, dovrete caricare anche questi file dipendenti.

Se state semplicemente creando un dataset, non dovete preoccuparvi del punto di inserimento. Se state creando un dataset e allo stesso tempo state inserendo un layout, accertatevi che il punto di inserimento si trovi nella posizione della pagina in cui desiderate inserire il layout.

Selezionate Inserisci > Spry > Dataset Spry.

Nella schermata Specifica origine dati, effettuate le seguenti operazioni:

• Nel menu a comparsa Seleziona tipo dati, selezionate XML.

• Inserite un nome per il nuovo dataset. La prima volta che si crea un dataset, il nome predefinito è ds1. Il nome del dataset può contenere lettere, numeri e caratteri di sottolineatura, ma non può cominciare con un numero.

• Specificate il percorso del file che contiene il dataset XML. Può trattarsi di un percorso relativo che conduce a un file locale del sito (ad esempio data/xml_data.xml), oppure di un URL assoluto che indica una pagina Web (che utilizza HTTP o HTTPS). Potete fare clic sul pulsante Sfoglia, individuare il file desiderato e selezionarlo.

  Dreamweaver esegue il rendering dell'origine dati XML nella finestra Elementi riga e mostra la struttura di elementi di dati XML disponibili per la selezione. Gli elementi ripetuti sono contrassegnati con un segno più (+) e gli elementi secondari sono rientrati.

  In alternativa, potete specificare un Feed in fase di progettazione come origine dati. Per ulteriori informazioni, vedete Utilizzare un feed in fase di progettazione.

• Selezionate l'elemento contenente i dati che desiderate visualizzare. Di solito si tratta di un elemento ripetuto, ad esempio <menu_item>, con diversi elementi secondari ad esempio <item>, <link>, <description> ecc.

  
  Selezione di un elemento ripetuto per il dataset XML.

  Quando selezionate l'elemento contenitore per il dataset, Dreamweaver visualizza un'anteprima del dataset nella finestra Anteprima dati. La casella di testo XPath visualizza un'espressione che mostra dove è ubicato il nodo selezionato all'interno del file XML di origine.

• Al termine delle operazioni nella schermata Specifica origine dati, fate clic su Fine per creare il dataset immediatamente, oppure su Seguente per passare alla schermata Imposta opzioni dati. Se fate clic su Fine, il dataset diventa disponibile nel pannello Associazioni (Finestra > Associazioni).

Nella schermata Imposta opzioni dati, effettuate le seguenti operazioni:

• (Opzionale) Impostate i tipi di colonne dei dataset selezionando una colonna e scegliendo un tipo di colonna dal menu a comparsa Tipo. Ad esempio, se una colonna del dataset contiene numeri, selezionate la colonna, poi scegliete numero dal menu a comparsa Tipo. Questa opzione è importante soltanto se intendete consentire agli utenti di ordinare i dati in base a quella colonna.

  Per selezionare una colonna di dataset, fate clic sulla relativa intestazione, sceglietela dal menu a comparsa Nome colonna o navigate fino alla colonna mediante le frecce destra e sinistra situate nell'angolo superiore sinistro dello schermo.

• (Opzionale) Dal menu a comparsa Ordina colonna, specificate la modalità di ordinamento dei dati. Dopo avere selezionato la colonna, potete specificare l'ordinamento crescente o decrescente.

• (Opzionale) Selezionate Filtra righe duplicate per escludere dal dataset le righe di dati duplicate.

• (Opzionale) Selezionate Disattiva caching dati per potere sempre accedere ai dati più recenti del dataset. Per attivare l'aggiornamento automatico dei dati, selezionate Aggiorna dati automaticamente e specificate un tempo di aggiornamento in millisecondi.

• Al termine delle operazioni nella schermata Imposta opzioni dati, fate clic su Fine per creare il dataset immediatamente, oppure su Seguente per passare alla schermata Scegli opzioni inserimento. Se fate clic su Fine, il dataset diventa disponibile nel pannello Associazioni (Finestra > Associazioni).

Nella schermata Scegli opzioni inserimento, effettuate una delle seguenti operazioni:

• Selezionate un layout per il nuovo dataset e specificate le relative opzioni di configurazione. Per ulteriori informazioni, vedete Scegliere un layout per il dataset.

• Selezionate Non inserire HTML. Se selezionate questa opzione, Dreamweaver crea il dataset, ma non aggiunge codice HTML alla pagina. Il dataset diventa disponibile nel pannello Associazioni (Finestra > Associazioni) e potete trascinare manualmente sezioni di dati dal dataset alla pagina.

Fate clic su Fine.

Dreamweaver crea il dataset e, se avete selezionato un'opzione di layout, visualizza i segnaposto per il layout e per i dati nella pagina. Nella vista Codice potrete vedere che Dreamweaver ha aggiunto i riferimenti dell'intestazione al file xpath.js e al file SpryData.js. Questi file sono risorse Spry importanti che funzionano in combinazione con la pagina. Non rimuovete questo codice dalla pagina; in caso contrario, il dataset non funziona. Quando caricate la pagina su un server, dovrete caricare anche questi file dipendenti..

Nel pannello Colonne, impostate le dimensioni delle colonne della tabella effettuando le seguenti operazioni:

• Selezionate un nome di colonna e fate clic sul segno meno (-) per eliminare la colonna dalla tabella. Fate clic sul pulsante più (+) e selezionate un nome di colonna per aggiungere nuove colonne alla tabella.

• Selezionate un nome di colonna e utilizzate la freccia su e la freccia giù per spostare la colonna. Nella tabella visualizzata, lo spostamento verso l'alto di una colonna la muove verso sinistra, mentre lo spostamento verso il basso la muove verso destra.

Per consentire l'ordinamento in una colonna, selezionatela nel pannello Colonne e selezionate Ordina colonna quando si fa clic sull'intestazione. Per impostazione predefinita, l'ordinamento è attivato in tutte le colonne.

Per impedire l'ordinamento in una colonna, selezionatela nel pannello Colonne e deselezionate Ordina colonna quando si fa clic sull'intestazione.

Se alla pagina sono associati stili CSS, come fogli di stile allegati o come insiemi di stili individuali della pagina HTML, potete scegliere una classe CSS per una o più delle seguenti opzioni:

Se la tabella che state creando dovrà diventare una tabella principale Spry dinamica, selezionate l'opzione Aggiorna area di dettaglio quando si fa clic sulla riga. Per ulteriori informazioni, vedete Informazioni sulle tabelle principali Spry dinamiche e sull'aggiornamento delle aree di dettaglio.

Fate clic su OK per chiudere la finestra di dialogo, quindi fate clic su Fine nella schermata Scegli opzioni inserimento.

Se vi trovate nella vista Progettazione, la tabella viene visualizzata con una riga di intestazioni e una di riferimenti dati. I riferimenti dati sono evidenziati e racchiusi tra parentesi graffe ({}).

Nel pannello Colonne master, modificate il contenuto dell'area master effettuando le seguenti operazioni:

• Selezionate un nome di colonna e fate clic sul segno meno (-) per eliminare la colonna dall'area master. Fate clic sul pulsante più (+) e selezionate un nome di colonna per aggiungere nuove colonne all'area master. Per impostazione predefinita vengono inseriti automaticamente nell'area master i dati contenuti nella prima colonna del dataset.

• Selezionate un nome di colonna e utilizzate la freccia su e la freccia giù per spostare la colonna. Spostando una colonna verso l'alto o verso il basso nel pannello Colonne master, potete impostare l'ordine dell'aspetto dei dati visualizzati nell'area master della pagina.

Ripetete le operazioni descritte sopra per il pannello Colonne dettagli. Per impostazione predefinita vengono inseriti automaticamente nell'area dettagli tutti i dati non contenuti nell'area master (cioè in tutte le colonne a eccezione della prima colonna del dataset).

(Opzionale) Impostate diversi tipi di contenitori per i dati contenuti nell'area dettaglio. A tale scopo, selezionate il nome di una colonna di dettagli e selezionate il contenitore da utilizzare dal menu a comparsa Tipo di contenitore. Potete scegliere tra i tag DIV, P, SPAN o H1-H6.

Fate clic su OK per chiudere la finestra di dialogo, quindi fate clic su Fine nella schermata Scegli opzioni inserimento.

Se vi trovate nella vista Progettazione, vengono visualizzate le aree master/dettaglio e in esse vengono inseriti automaticamente i riferimenti ai dati selezionati. I riferimenti dati sono evidenziati e racchiusi tra parentesi graffe ({}).

Nel pannello Colonne, modificate il contenuto dei contenitori impilati effettuando le seguenti operazioni:

• Selezionate un nome di colonna e fate clic sul segno meno (-) per eliminare la colonna dai contenitori impilati. Fate clic sul pulsante più (+) e selezionate un nome di colonna per aggiungere nuove colonne ai contenitori. Per impostazione predefinita vengono inseriti automaticamente nei contenitori impilati i dati contenuti in ogni colonna del dataset.

• Selezionate un nome di colonna e utilizzate la freccia su e la freccia giù per spostare la colonna. Spostando una colonna verso l'alto o verso il basso nel pannello Colonne, potete impostare l'ordine dell'aspetto dei dati visualizzati nei contenitori impilati della pagina.

(Opzionale) Impostate diversi tipi di contenitori per i dati contenuti nel contenitore impilato. A tale scopo, selezionate il nome di una colonna del dataset e selezionate il contenitore da utilizzare dal menu a comparsa Tipo di contenitore. Potete scegliere tra i tag DIV, P, SPAN o H1-H6.

Fate clic su OK per chiudere la finestra di dialogo, quindi fate clic su Fine nella schermata Scegli opzioni inserimento.

Se vi trovate nella vista Progettazione, viene visualizzato il contenitore, in cui sono stati inseriti automaticamente i riferimenti ai dati selezionati. I riferimenti dati sono evidenziati e racchiusi tra parentesi graffe ({}).

Nel pannello Colonne spotlight, modificate il contenuto dell'area spotlight effettuando le seguenti operazioni:

• Selezionate un nome di colonna e fate clic sul segno meno (-) per eliminare la colonna dall'area spotlight. Fate clic sul pulsante più (+) e selezionate un nome di colonna per aggiungere nuove colonne all'area spotlight. Per impostazione predefinita vengono inseriti automaticamente nell'area spotlight i dati contenuti nella prima colonna del dataset.

• Selezionate un nome di colonna e utilizzate la freccia su e la freccia giù per spostare la colonna. Spostando una colonna verso l'alto o verso il basso nel pannello Colonne spotlight, potete impostare l'ordine dell'aspetto dei dati visualizzati nelle colonne spotlight della pagina.

(Opzionale) Impostate diversi tipi di contenitori per i dati contenuti nell'area spotlight. A tale scopo, selezionate il nome di una colonna del dataset e selezionate il contenitore da utilizzare dal menu a comparsa Tipo di contenitore. Potete scegliere tra i tag DIV, P, SPAN o H1-H6.

Ripetete le operazioni descritte sopra per il pannello Colonne impilate. Per impostazione predefinita vengono inseriti automaticamente nelle colonne impilate tutti i dati non contenuti nell'area spotlight (cioè in tutte le colonne a eccezione della prima colonna del dataset).

Fate clic su OK per chiudere la finestra di dialogo, quindi fate clic su Fine nella schermata Scegli opzioni inserimento.

Se vi trovate nella vista Progettazione, viene visualizzata l'area spotlight affiancata dai contenitori impilati, in cui sono stati inseriti automaticamente i riferimenti ai dati selezionati. I riferimenti dati sono evidenziati e racchiusi tra parentesi graffe ({}).

Nel pannello Associazioni (Finestra > Associazioni), fate doppio clic sul nome del dataset ed effettuate le modifiche.

Iniziate con la creazione di un dataset Spry (per le istruzioni, vedete le procedure precedenti).

Nella schermata Specifica origine dati, fate clic sul collegamento Feed Fase di progettazione.

Fate clic sul pulsante Sfoglia per individuare il feed fase di progettazione, quindi fate clic su OK.

• Per creare un'area Spry, selezionate Area (impostazione predefinita) come tipo di area da inserire.

• Per creare un'area di dettaglio Spry, selezionate l'opzione Area di dettaglio. L'area di dettaglio viene impiegata quando desiderate associare dati dinamici aggiornati in base alla variazione di dati in un'altra area Spry.

• Trascinate uno o più elementi dal pannello Associazioni sul testo selezionato.

• Nella vista Codice, digitate direttamente il tipo di codice per uno o più elementi. Utilizzate il formato {dataset-name::element-name}, ad esempio {ds1::category}. o {dsProducts::desc}. Se nel file viene utilizzato un solo dataset o elementi dati provenienti dallo stesso dataset definito per l'area, potete omettere il nome del dataset e digitare solamente {category} o {desc}.

Indipendentemente dal metodo utilizzato per definire il contenuto dell'area, al codice HTML vengono aggiunte le seguenti righe:

• Trascinate uno o più elementi dal pannello Associazioni sul testo selezionato.

• Nella vista Codice, digitate direttamente il tipo di codice per uno o più elementi. Utilizzate il formato {dataset-name::element-name}, ad esempio {ds1::category}. o {dsProducts::desc}. Se nel file viene utilizzato un solo dataset o elementi dati provenienti dallo stesso dataset definito per l'area, potete omettere il nome del dataset e digitare solamente {category} o {desc}.

Indipendentemente dal metodo utilizzato per definire il contenuto dell'area, al codice HTML vengono aggiunte le seguenti righe:

• Colonna visualizzata: Questo è ciò che gli utenti vedono quando visualizzano la pagina nei propri browser.

• Colonna valore: questo è il valore reale inviato al server in background.

Potete ad esempio creare un elenco di province e visualizzare agli utenti i valori Milano e Torino, inviando al server i corrispondenti valori MI o TO. Potete anche utilizzare l'opzione SELECT come strumento di navigazione e mostrare nomi di prodotto quali "Adobe Dreamweaver" e "Adobe Acrobat" agli utenti, inviando al server i corrispondenti URL "support/products/dreamweaver.html" e "support/products/acrobat.html".