Capitolo 6

Aggiungere il contenuto dinamico 

Dopo avere definito uno o più dati sorgente per la tua pagina, puoi usare i dati sorgente per aggiungere il contenuto dinamico alla pagina. I dati sorgente possono includere una colonna in un recordset, un valore sottoposto da un form HTML, il valore contenne in un oggetto del server, e altri dati. 

In Dreamweaver UltraDev, puoi mettere quasi dovunque il contenuto dinamico nella pagina o suo del codice sorgente HTML: 

-          Puoi metterlo sul punto di inserzione. 

-          Puoi sostituire una stringa di testo con esso.  

-          Puoi inserirlo in un attributo HTML. Per esempio, il contenuto dinamico può definire gli attributi src di un'immagine, o il valore attributo di un campo del form. 

Aggiungi il contenuto dinamico scegliendo uno dei tuoi dati sorgente nel pannello Data Bindings. UltraDev inserisce uno scripts server-side nel codice sorgente della pagina che istruisce il server a trasferire i dati dalla sorgente dei dati alla pagina del codice sorgente HTML. 

C'è spesso più di un modo per rendere dinamico un dato elemento della pagina. Per esempio, per rendere dinamica un'immagine puoi usare il pannello Data Bindings, l'ispettore Property, o il comando Image nel menu Insert. Questo capitolo descrive i modi più efficienti per rendere dinamici i vari elementi della pagina. 

Per default, una pagina HTML può visualizzare solo un record per volta. Puoi aggiungere un collegamento per muoverti tra i record uno per volta per visualizzare gli altri record nel recordset, o per creare una regione ripetuta per visualizzare più di un record su una sola pagina. 

Dopo avere aggiunto il contenuto dinamico ad una pagina, puoi modificarla.  

Rendere dinamico il testo 

Puoi sostituire il testo esistente con il testo dinamico, o mettere il testo dinamico in un dato punto di inserzione sulla pagina. 

Il testo dinamico adotta qualsiasi formattazione applicata al testo esistente o al punto di inserzione. Per esempio, se uno stile CSS fa parte del testo selezionato, lo stesso stile sarà presente anche sul contenuto dinamico che andrà a sostituire il testo. Puoi aggiungere o cambiare il formato di testo del contenuto dinamico usando qualsiasi attrezzo di formattazione del testo di Dreamweaver. 

Puoi applicare al testo dinamico anche un formato di dati. Per esempio, se il tuo dato consiste di date, puoi specificare un particolare formato della data come 04/17/00 per i visitatori Americani, o 17/04/00 per i visitatori canadesi. 

Aggiungere il testo dinamico 

Puoi sostituire il testo regolare sulla tua pagina con il testo dinamico, o aggiungere il testo dinamico sul un punto di inserzione sulla pagina. 

Per aggiungere il testo dinamico: 

1 apri il pannello Data Bindings scegliendo Window> Data Bindings. 

2 assicurati che il pannello Data Bindings elenchi la sorgente dei dati da utilizzare. 

La sorgente dei dati dovrebbe contenere il semplice testo (testo ASCII). Per esempio, la sorgente dei dati potrebbe contenere un completo HTML formato di  semplice il testo. Se nessuna sorgente dei dati appare nell'elenco, o se i dati sorgente disponibili non soddisfanno le tue necessità, clicka sul bottone Plus (+) per definire una nuova sorgente di dati.  

3 nella vista Design, scegli il testo sulla pagina, o clicka nel punto in cui devi aggiungere il testo dinamico. 

4 nel pannello Data Bindings, seleziona un dato sorgente dall'elenco. Se selezioni un recordset, specifica nel recordset la colonna che ti interessa. 

5 clicka su Insert, o trascina la sorgente dei dati sopra la pagina. 

Il contenuto dinamico appare sulla pagina se stai lavorando nella finestra Live Data. Un placeholder appare invece nella finestra del Documento. 

(Se selezioni il testo sulla pagina, il placeholder sostituisce la selezione del testo.)  

Il placeholder per un dato sorgente di un recordset usa la sintassi

{cordsetName.ColumnName}, dove è Recordset il nome del recordset e ColumnName è il nome della colonna che hai scelto dal recordset. 

Cambiare l'aspetto dei placeholders 

Qualche volta, la lunghezza del placeholders per il testo dinamico falsa la configurazione della pagina nella finestra del Documento. Puoi risolvere il problema usando due parentesi graffe vuote come placeholders. 

Per usare due parentesi graffe vuote come placeholders per il testo dinamico: 

1 scegli Edit> Preferences> Invisible Elements. 

2 nel pop-up menu "Show Dynamic Text As", scegli {}. 

3 ckica su OK. 

Applicare un formato di dati 

Se vuoi, specifica un formato di dati per il testo dinamico. Per esempio, se il prezzo  in un record si legge 10.989, puoi visualizzare il prezzo sulla tua pagina come $10.99 selezionando il formato Currency - 2 Decimal Places nel pop-up menu. Questo formato prende un numero e lo visualizza con due posti decimali. Se il numero ha più di due posti decimali, il formato dei dati arrotonda il numero del decimale più vicino; se il numero non ha posti decimali, il formato dei dati aggiunge un punto decimale e due zeri. 

Per applicare un formato di dati a il testo dinamico: 

1 seleziona il contenuto dinamico (finestra Data Bindings) o il suo placeholder (finestra del Documento) sulla pagina. 

2 nel pannello Data Bindings (Window > Data Bindings), clicka sul bottone della freccia nella colonna Format. 

3 seleziona un formato dal pop-up menu. 

Assicurati che il formato dei dati sia adatto per i dati. Per esempio, il formato Currency lavora solo se il testo dinamico consiste di numeri. Comunque, puoi applicare più di un formato agli stessi dati. 

Rendere dinamiche le immagini 

Puoi rendere dinamiche le immagini sulla tua pagina. Per esempio, supponi di disegnare una pagina per visualizzare gli articoli da vendere ad una vendita ad un asta di beneficenza. Ogni pagina dovrà includere il testo descrittivo ed una fotografia dell'articolo. La configurazione generale della pagina rimarrà la stessa per ogni articolo, ma la fotografia (e il testo descrittivo) potrebbe cambiare. 

Per rendere dinamica un'immagine: 

1 con la pagina aperta nella finestra vista Design (View> Design), inserisci il punto di inserzione nel punto in cui vuoi che l'immagine appaia sulla pagina, poi scegli Insert> Image. 

Appare il dialog box Select Image Source. 

Sul Macintosh, il dialog box è diverso: 

2 clicka sull'opzione Data Sources (Windows) o il bottone Data Source (Macintosh). 

Appare un elenco dei dati sorgente. 

3 seleziona un dato sorgente dall'elenco. 

La sorgente dei dati dovrebbe essere un recordset che contiene i percorsi ai tuoi files immagine. In funzione della struttura del file del tuo sito, i percorsi possono essere assoluti, relativi al documento, o relativi alla root.   

Nota: UltraDev non supporta attualmente le immagini binarie memorizzate in un database. 

Se nessun recordset appare nell'elenco, o se i recordsets disponibili non soddisfanno le tue necessità, definisci un nuovo recordset.  

4 ckica su OK. 

Rendere dinamico il form objects 

Puoi creare un form HTML dinamico per visualizzare i records sul tuo database. Per esempio, potresti disegnare un form per visualizzare le informazioni del contatto dei fornitori. 

In un form puoi visualizzare solo un record per volta. Puoi aggiungere i collegamenti Per dare agli utenti la possibilità di vedere gli altri recordper puoi muoverti tra i record.  

Gli oggetti più comuni del form dinamico sono i campi del testo, i campi dell'immagine, il checkbox, e il radio bottone. Puoi anche usare un dato sorgente per riempire le opzioni in un oggetto list/menu. 

Rendere il dinamici i campi testo e immagine 

Puoi rendere dinamici i campi testo e immagine. 

Per rendere dinamici i campi di testo: 

1 apri il pannello Data Bindings scegliendo Window> Data Bindings.  

2 assicurati che il pannello Data Bindings elenchi la sorgente dei dati da utilizzare. 

La sorgente dei dati dovrebbe contenere informazioni testuali. Se nessuna sorgente dei dati appare nell'elenco, o se le dati sorgente disponibili non soddisfanno le tue necessità, clicka sul bottone Plus (+) per definire una nuova sorgente di dati.  

3 nella vista Design, seleziona un campo di testo nel tuo form HTML. 

4 nel pannello Data Bindings, seleziona un dato sorgente dal tuo elenco dei dati sorgente. 

5 nel box Bind To, assicurati che il valore (valore attributo) sia selezionato. 

6 clicka su Bind. 

Per rendere dinamici campi dell'immagine: 

1 poni il punto di inserzione dove vuoi far apparire il campo dell'immagine sulla pagina, poi scegli Insert> Image. 

appare il dialog box Select Image Source. 

2 clicka sull'opzione Data Sources (Windows) o sul bottone Data Source (Macintosh). 

appare un elenco dei dati sorgente. 

3 seleziona un dato sorgente dall'elenco. 

La sorgente dei dati dovrebbe essere un recordset che contiene i percorsi ai tuoi files dell'immagine. 

In funzione dalla struttura del file del tuo sito, i percorsi possono essere assoluti, relativi al documento, o relativi alla root. 

Nota: UltraDev non supporta attualmente le immagini binarie memorizzate in un database. 

Se nessun recordset appare nell'elenco, o se i recordsets disponibili non soddisfanno le tue necessità, definisci un nuovo recordset.  

4 ckica su OK. 

Rendere dinamico un Checkbox 

Puoi rendere dinamico un checkbox su un form. 

Per rendere dinamico un checkbox: 

1 seleziona un checkbox nel form HTML sulla tua pagina. 

2 nel pannello Server Behaviors (Window > Server Behaviors), clicka sul bottone Plus (+) e seleziona Dynamic Elements> Dynamic Check Box dal pop-up menu. 

Appare il dialog box Dynamic Check Box. 

3 se vuoi che il checkbox sia selezionato quando un campo in un record è uguale ad un certo valore, fai come segue: 

-          clicka sull'icona della freccia evidenziata accanto al box Check If e seleziona il campo dall'elenco dei dati sorgente. 

-          Tipicamente, il campo scelto contiene dati Booleani come Yes e No, o vero e falso. 

-          Nel box Equal To, inserisci il valore che il campo deve avere perchè il checkbox appaia selezionato. 

Per esempio, se devi mostrare selezionato il checkbox quando uno specifico campo in un record è uguale a Yes, inserisci Yes nel box Equal To. 

Nota: Questo valore sarà restituito anche al server se l'utente clicka sul bottone form Submit 

4 ckica su OK. 

Il checkbox apparirà selezionato o deselezionato, in funzione dei dati, quando il form è mostrato su un browser. 

Rendere dinamici i radio bottoni. 

Puoi rendere dinamico un radio bottone su un form. 

Per rendere un radio bottone dinamico: 

1 assicurati che la pagina abbia almeno un gruppo di radio bottoni. 

Puoi creare un gruppo di radio bottoni dando lo stesso nome ad un gruppo di radio bottoni.  

2 nel pannello Server Behaviors (Window > Server Behaviors), clicka sul bottone Plus (+) e seleziona Dinamic Elements> Dynamic Radio Button dal pop-up menu. 

Appare il dialog box Dynamic Radio Button. 

3 nel pop-up menu Radio Button Group, seleziona un gruppo di radio bottoni sulla tua pagina. 

4 puoi specificare il valore di ogni radio bottone nel gruppo selezionando un radio bottone nell'elenco Radio Button Values, inserendo poi un valore per il radio bottone nel box Value. 

Nota: Il valore del radio bottone attualmente selezionato sarà restituito al server se l'utente clicka sul bottone del form Submit. 

5 se vuoi che sia selezionato un particolare radio bottone quando la pagina si apre in un browser o quando un record è visualizzato nel form, inserisci un valore uguale al valore del radio bottone nel box Select Value Equal To. 

Puoi inserire un valore statico o specificarne uno dinamico clickando sull'icona della freccia evidenziata accanto al box e selezionando un valore dinamico dall'elenco dei dati sorgente. In ambedue i casi, il valore che specifichi dovrebbe essere uguale ad uno dei valori del radio bottone. 

6 ckica su OK. 

Rendere dinamico il list/menu objects 

Puoi rendere dianmico il list/menu objects sul tuo form. 

Per rendere un list/menu objects dinamico: 

1 seleziona il list/menu objects nel form HTML sulla tua pagina. 

2 nel pannello Server Behaviors (Window > Server Behaviors), clicka sul bottone Plus (+) e seleziona Dinamic Elements> Dinamic List/Menu dal pop-up menu. 

Appare il dialog box Dinamic List/Menu. 

3 nel pop-up menu Recordset, seleziona il recordset che contiene le informazioni del menu. 

4 nel pop-up menu Get Labels From,  seleziona il campo che contiene le etichette per gli articoli del menu. 

5 nel pop-up menu Get Values From,  seleziona il campo che contiene i valori degli articoli del menu. 

6 se vuoi che un particolare articolo del menu sia selezionato quando la pagina si apre in un browser o quando un record è visualizzato nel form, inserisci un valore uguale al valore dell'articolo del menu nel box Select Value Equal To. 

Puoi inserire un valore statico o specificarne uno dinamico clickando sull'icona della freccia evidenziata accanto al box e selezionando un valore dinamico dall'elenco dei dati sorgente. In ambedue i casi, il valore che specifichi dovrebbe essere uguale ad uno dei valori dell'articolo del menu. 

7 ckica su OK. 

Ecco un esempio di un completo dialog box Dinamic List/Menu: 

Rendere dinamici gli attributi HTML 

Puoi cambiare dinamicamente l'aspetto della tua pagina legando ai dati gli attributi HTML. Per esempio, potresti cambiare l'immagine di fondo di una tabella legando l'attributo dello sfondo della tabella ad un campo in un recordset. 

Puoi legare gli attributi HTML con il pannello Data Bindings o con l'ispettore Property. 

Per rendere dinamici gli attributi HTML con il pannello Data Bindings: 

1 apri il pannello Data Bindings scegliendo Window> Data Bindings. 

2 assicurati che il pannello Data Bindings elenchi la sorgente dei dati da utilizzare. 

La sorgente dei dati dovrebbe contenere i dati che sia adatto per l'attributo HTML da legare. Se nessuna sorgente dei dati appare nell'elenco, o se i dati sorgente disponibili non soddisfanno le tue necessità, clicka sul bottone Plus (+) per definire una nuova sorgente di dati.  

3 nella vista Design, seleziona un oggetto HTML. 

4 nel pannello Data Bindings, seleziona un dato sorgente dal tuo elenco. 

5 nel box Bind To,  seleziona un attributo HTML dal pop-up menu. 

6 clicka su Bind. 

Per rendere dinamici gli attributi HTML con l'ispettore Property: 

1 nella vista Design, seleziona un oggetto HTML e apri l'ispettore Property (Window > Properties). 

2 se l'attributo che vuoi legare ha un'icona di cartella vicino ad esso nella vista  Standard dell'ispettore, clicka sull'icona della cartella per aprire un dialog box di selezione del file, poi clicka sull'opzione Data Sources per visualizzare un elenco dei dati sorgente. Salta al passo 6. 

3 se l'attributo che vuoi legare non ha un'icona di cartella vicino ad esso nella vista Standard, clicka sulla tab List (la più bassa delle due tabelle) sul lato sinistro dell'ispettore. 

Appare la vista dell'ispettore Property List. 

4 se l'attributo che vuoi legare non è elencato nella vista Liist, clicka sul bottone Plus (+), poi inserisci il nome dell'attributo o clicka sul piccolo bottone della freccia e seleziona l'attributo dal pop-up menu. 

5 per rendere dinamico il valore dell'attributo, clicka sull'attributo poi clicka sull'icona della saetta o sull'icona della cartella alla fine della fila dell'attributo. 

Se clicki sull'icona della saetta, appare un elenco dei dati sorgente. 

Se clicki sull'icona della cartella, appare un dialog box di selezione del file. Clicka sull'opzione Data Sources per visualizzare un elenco dei dati sorgente. 

6 seleziona un dato sorgente dall'elenco dei dati sorgente. 

La sorgente dei dati dovrebbe contenere dati adatti per l'attributo HTML da legare. Se nessuna sorgente dei dati appare nell'elenco, o se i dati sorgente disponibili non soddisfanno le tue necessità, definisci una nuova sorgente di dati.  

7 ckica su OK. 

Rendere dinamici ActiveX, Flash, e altri parametri oggetto 

Puoi rendere dinamici i parametri delle applets Java e plugins, come anche i parametri ActiveX, Flash, Shockwave, Director, ed oggetti Generator.  

Prima di iniziare assicurati che i campi nel tuo recordset contengono dati che sianoa datti per i parametri dell'oggetto che vuoi legare. 

Per rendere dinamici i parametri dell'oggetto: 

1 nella vista Design, seleziona un oggetto sulla pagina ed apri l'ispettore Property (Window > Properties). 

2 clicka sul bottone Parameters. 

Appare il dialog box Parameters. 

3 se il tuo parametro non appare nell'elenco, clicka sul bottone Plus (+) ed inserisci un nome del parametro nella colonna Parameter. 

4 clicka sulla colonna Value del parametro, poi clicka sull'icona della saetta per specificare un valore dinamico. 

Appare un elenco dei dati sorgente. 

5 seleziona un dato sorgente dall'elenco. 

La sorgente dei dati dovrebbe contenere dati che siano adatti per il parametro dell'oggetto che vuoi legare. Se nessuna sorgente dei dati appare nell'elenco, o se i dati sorgente disponibili non soddisfanno le tue necessità, definisci una nuova sorgente di dati.  

6 ckica su OK. 

Cambiare il contenuto dinamico 

Puoi cambiare il contenuto dinamico sulla tua pagina editando il comportamento del server che fornisce il contenuto. Per esempio, puoi editare un comportamento di server recordset per fornire più records alla tua pagina. 

Il contenuto dinamico su una pagina è elencato nel pannello Server Behaviors. Per esempio, se aggiungi un recordset alla tua pagina, il pannello Server Behaviors elenca quanto segue: 

Recordset(myRecordset) 

Se aggiungi un altro recordset alla tua pagina, il pannello Server Behaviors elenca ambedue i recordsets come segue: 

Recordset(mySecondRecordset) 

Recordset(myRecordset). 

Per editare un comportamento del server che fornisce il contenuto dinamico, un doppio click sul comportamento del server nel pannello Server Behaviors. Apparirà lo stesso dialog box che hai usato per definire il datp sorgente originale. Fai le tue modifiche nel dialog box e ckica su OK. 

Puoi anche usare l'ispettore Property per editare i recordsets sulla tua pagina. Apri l'ispettore Property (Window > Properties), poi seleziona il recordset nel pannello Server Behaviors (Window > Server Behavior).

Ecco che appare l'ispettore Property per un recordset: 

Se editi un recordset nella finestra Live Data con l'opzione Refresh non selezionata, devi aggiornare la pagina per vedere le tue modifiche. Per aggiornare la pagina, clicka sul bottone Refresh o scegli View> Refresh Live Data. 

Cancellare il contenuto dinamico 

Dopo avere aggiunto il contenuto dinamico ad una pagina, puoi cancellarlo selezionando il contenuto dinamico sulla pagina e premendo Delete. Puoi cancellarlo anche selezionando il contenuto dinamico nel pannello Server Behaviors e clickando sul bottone Minus (-) . 

Nota: Questa operazione rimuove lo scripts server-side nella tua pagina che recupera il contenuto dinamico dal database. Non cancella i dati nel database.