Capitolo 2

UltraDev Basics 

Per ottenere il massimo da Macromedia Dreamweaver UltraDev, ti dovresti familiarizzare con i seguenti argomenti: 

-          Come funzionano in generale le pagine dinamiche 

-          Il workflow necessario nel creare una pagina dinamica in UltraDev 

-          L'ambiente di lavoro di UltraDev 

Questo capitolo mostra brevemente ognuno di questi argomenti. Prima, ecco la terminologia di base: 

Un'applicazione Web è una raccolta pagine statiche e dinamiche che interagiscono l'una con l'altra e con le varie risorse su un server Web, incluso i database. 

Una pagina dinamica è una pagina Web cambiata in run time dal server Web prima di essere spedita ad un browser. 

Una tecnologia del server è una tecnologia come ASP, JSP, o ColdFusion che danno al server Web la capacità di cambiare una pagina Web in run time. 

Un comportamento del server è il gruppo di istruzioni eseguito sul server in run time. 

I comportamenti del server sono inseriti nella pagina Web durante il disegno. 

Sulle pagine dinamiche 

Un'applicazione Web è una raccolta pagine statiche e dinamiche. Le pagine dinamiche assomigliano alle pagine statiche in tutti gli aspetti eccetto uno: quelo dove alcuni dei loro scripts sono eseguiti. 

Ambedue i generi di pagine sono costituite da files di semplice il testo (ASCII), dal contenuto HTML, ed stanno su un server che aspetta di servire un browser Web. Ambedue possono contenere scripts scritti in lingue come VBScript o JavaScript. Comunque, alcuni scripts in una pagina dinamica possono girare su un server mentre quelli di una pagina statica non lo possono fare. 

Nota: Più correttamente parlando, una " pagina statica " non può essere completamente statica. Per esempio, un'immagine rollover o un filmato Flash può rendere una pagina statica anche viva. Comunque questa guida si riferisce ad una pagina dove per statico si intende che non contiene scripts che vengono eseguiti su un server.  

Gli scripts che si eseguono su un server, o scripts server-side, danno la possibilità di lavorare con risorse come i database sul server. Per esempio, prima che una pagina venga servita fino al browser, uno script server-side nella pagina potrebbe istruire il server ad estrarre i dati da un database ed inserirli nella pagina HTML. In UltraDev gli scripts server-side sono chiamati comportamenti del server. 

Ecco come puoi riuscire ad inserirli nel codice HTML delle tue pagine: 

In effetti, il server crea una parte della tua pagina durante il run time e la aggiunge alle parti che hai inizialmente disegnato in UltraDev. La pagina risultante è spedita poi al browser. 

UltraDev supporta le seguenti tecnologie del server: 

-          Microsoft Active Server Pages (ASP). Per saperne di più su ASP, visita il sito Microsoft Web  a  http://msdn.microsoft.com/workshop/server/toc.htm. 

-          Sun JavaServer Pages (JSP). Per saperne di più su JSP, visita il sito Sun Web a  http://java.sun.com/products/jsp /. 

-          Allaire ColdFusion. Per saperne di più su ColdFusion, visita il sito Allaire Web  a http://www.allaire.com/Products/ColdFusion/productinformation /. 

Data source Server HTML. 

Un'applicazione Web può avere diversi tipi di pagine dinamiche. Le più comuni sono le pagine di ricerca, le pagine dei risultati, le pagine di dettaglio e le pagine edit dei record (che permettono agli utenti di inserire, aggiornare o cancellare i records in un database). Ogni tipo di pagina ha diverse richieste in termini di codice HTML, contenuto dinamico, e comportamenti del server. Queste richieste sono trattate nei seguenti capitoli: 

-          "Building Pages That Search Databases" 

-          "Building Pages That Edit Database Records" 

-          "Building Pages That Restrict Access to Your Site" 

Sul workflow di UltraDev 

Tutte le pagine dinamiche cominciano come spazio vuoto o pagine statiche. Puoi prima costruire una pagina statica, poi trasformala in un dinamica. Per esempio, puoi creare una pagina con un logotipo, del testo introduttivo, una mappa del sito, ed una tabella. Dopo, puoi cambiare la tabella per visualizzare le informazioni da un database. 

Il workflow per creare una pagina dinamica consiste di quattro fasi distinte: 

-          Laying fuori la pagina 

-          Definire una sorgente di dati di UltraDev come un recordset 

-          Aggiungere contenuto dinamico alla pagina sorgente dei dati di UltraDev che hai definito 

-          Aggiungere i comportamenti del server per dare alla pagina più funzionalità 

Questa sezione descrive il workflow in termini generali. Per vedere un esempio animato del workflow di UltraDev, scegli Help> Guided Tour. 

Definire una sorgente di dati di UltraDev 

Il primo passo nella procedura è di definire una sorgente di dati di UltraDev. Una sorgente di dati di UltraDev è un magazzino di informazioni dal quale puoi scegliere e prendere i dati da includere nella tua pagina Web. 

Se decidi di usare un database con la tua applicazione, devi definire una sorgente di dati di UltraDev per memorizzare dati dal database. Questa sorgente di dati è chiamata recordset in ASP e ColdFusion, ed resultset in JSP. (Questa guida usa il termine recordset riferito a tutti e tre.) 

Ogni recordset che definisci è aggiunto al tuo elenco dei dati sorgente nel pannello Data Bindings: 

Usa questo pannello per aggiungere il contenuto dinamico alla tua pagina. 

Per le procedure dettagliate, vedi i seguenti capitoli: 

-          "Defining UltraDev Data Sources" 

-          "Creating a Recordset" 

Aggiungere il contenuto dinamico 

Dopo avere aggiunto un recordset o gli altri dati sorgente come variabili del server al pannello Data Bindings, puoi aggiungere il contenuto dinamico alla tua pagina. Dreamweaver UltraDev ti permette di aggiungere il contenuto dinamico senza preoccuparti degli scripts server-side fondamentali inseriti nella pagina. Devi solo specificare dove vuoi mettere il contenuto, e ci- che dev'essere il contenuto. 

Primo, specifica dove vuoi mettere il contenuto dinamico. In UltraDev, puoi mettere il contenuto dinamico nella pagine HTML dovunque: 

-          Puoi metterlo nel 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 attributu src di un'immagine o il valore di un campo form. 

Secondo, specifica cosa dev'essere il contenuto dinamico. Puoi scegliere da ogni sorgente dei dati elencata nel tuo pannello Data Bindings. Per esempio, potresti scegliere un campo in un recordset, un valore sottoposto da una pagina di richiesta o un valore di un oggetto server. Dopo avere fatto la tua selezione, UltraDev inserisce uno script server-side nella pagina che istruisce il server a trasferire i dati dalla sorgente dei dati selezionata alla pagina del codice HTML. 

Aggiungere i comportamenti del server 

Il prossimo passo nella procedura è di fornire la pagina dell'intelligenza necessaria per renderla più funzionale. In molti casi, si fornisce questa intelligenza aggiungendo dei comportamenti del server alla pagina.

Un comportamento del server consiste di codici VBScript, JavaScript, Java o ColdFusion che girano su un server invece su un browser. 

UltraDev è fornito di un certo numero di comportamenti del server predefiniti per rendere più potente la tua applicazione. Per esempio, dopo avere creato una pagina per visualizzare un record del database, puoi usare un comportamento del server per visualizzare sul database il prossimo record o quello precedente. 

Puoi anche scrivere i tuoi comportamenti del server o installare i comportamenti del server scritti da altre persone. 

UltraDev è fornito anche dei live objects che inseriscono i comportamenti multipli del server nelle tue pagine Web ogni volta che devi creare i componenti della pagina avanzati, come una barra di navigazione di record o una master/detail. 

Aggiungi i comportamenti del server alle tue pagine usando il pannello Server Behaviors. 

Puoi aggiungere anche i componenti avanzati alla tua pagina in un'operazione  usando i live objects. 

Per le procedure dettagliate, vedi i seguenti capitoli: 

-          "Displaying Database Records" 

-          "Building Pages That Search Databases" 

-          "Building Pages That Edit Database Records" 

-          "Building Pages That Restrict Access to Your Site" 

Sull'ambiente di lavoro di UltraDev. 

UltraDev comprende anche i seguenti diversi ambienti di lavoro: 

-          Puoi lavorare nella vista Design della finestra del Documento. 

-          Puoi lavorare nella vista Design della finestra Live Data, visualizzando il contenuto dinamico. 

-          Puoi visionare la pagina in un browser per controllare come interagiscono le pagine nella tua applicazione. 

-          Puoi lavorare direttamente sul codice sorgente usando la vista Code nel Documento o le finestre Data Live, l'ispettore Code, il Quick Tag Editor, o il tuo editor di testo favorito. 

Lavorare nella vista Design della finestra del Documento 

La vista Design della finestra del Documento è l'ambiente tradizionale dell'editing. Quando apri un documento in UltraDev, la finestra del Documento si apre per default. La finestra offre tre viste: una vista Design, una vista Code, ed uno schermo diviso della vista Design/CodeView  

La vista Design della finestra del Documento (View > Design) ti dà una prima idea  di come apparirà la pagina nel browser prima di aggiungere alla pagina il contenuto dinamico. Questo è un ambiente di editing ideale per le pagine senza contenuto dinamico. Comunque, siccome il contenuto dinamico fondamentalmente può alterare il modo in cui lavra una pagina, questo ambiente non è ideale per le pagine dinamiche. 

Puoi inoltre usare la finestra del Documento per lavorare sulle pagine dinamiche. In contenuto dinamico nella vista Design della finestra del Documento è rappresentato dai placeholders del testo, come in questo esempio: 

{rsMembers.LastName} 

Questo placeholder indica che i dati dalla colonna LastName nel recordset rsMembers saranno inseriti in questa ubicazione sulla pagina quando la pagina si avvia sul server. 

Le regioni ripetute sono circondate da un sottile contorno grigio mentre la maggior parte degli altri i comportamenti del server applicati alla pagina non hanno effetto su di essa, né tantomento sono visibili nella finestra del Documento. 

Lavorare nella finestra Live Data 

Puoi usare la finestra Live Data per lavorare sulle tue pagine in un ambiente live data. Diversamente dalla finestra del Documento che usa i placeholders per rappresentare il contenuto dinamico sulla pagina, la finestra Live Data visualizza il contenuto dinamico attuale. Per esempio, ecco una pagina dinamica nella finestra del Documento: 

Ecco la stessa pagina visualizzata nella finestra Live Data: 

Nota: i collegamenti non lavorano nella finestra Live Data. Per controllare i tuoi collegamenti, usa la caratteristica UltraDev Preview in Browser. 

Durante la visualizzazione del contenuto dinamico, puoi fare quanto segue: 

-          Aggiustare la configurazione della pagina usando gli attrezzi di Dreamweaver della pagina-disegno 

-          Aggiungere, editare, o cancellare il contenuto dinamico 

-          Aggiungere, editare, o cancellare i comportamenti del server 

Per realizzare questo effetto, UltraDev avvia la pagina dinamica sul tuo server prima di visualizzarla nella finestra Live Data. Ogni volta che passi alla finestra Live Data, una copia provvisoria del documento aperto viene spedita alla tua server di applicazione  per essere processata. La pagina risultante è rinviata e visualizza nella finestra Live Data, e la copia provvisoria sul server viene cancellata. 

Puoi passare dalla finestra del Documento alla finestra Live Data scegliendo Live Datai dal menu View. Se una pagina attende i dati dall'utente, per esempio il numeor ID di un record selezionato in una pagina principale, puoi fornire la pagina con quei dati nello stesso dialog box Live Data Settings. 

Devi caricare tutti i files necessari, incluso i server-side include e i files dipendenti come i files immagine e i files class JSP sul server applicazione. 

UltraDev non copia automaticamente i files dipendenti sul server quando passi alla finestra Live Data. 

Nota: La finestra Live Data supporta il codice server-side include (Insert > Server-Side Include) e i files applicazioni  come global.asa (ASP) e application.cfm (ColdFusion) . Assicurati di caricare questi files sul server prima di passare alla finestra Live Data. 

Per copiare files dipendenti sul server applicazione: 

1 nella finestra Site (Site > Site Files), clicka sull'icona Application Server sul toolbar (la seconda icona dalla sinistra). 

La cartella root del server applicazione appare sotto Remote Site. 

2 sotto la Local Folder, seleziona i files dipendenti. 

3 clicka sulla freccia blu sul toolbar per copiare i files sul server applicazione, o trascina i files sulla cartella adatta sotto Remote Site. 

Devi fare questo una sola volta per il tuo sito a meno che non aggiungi altri files  dipendenti, in questo caso devi caricarli sul server Web. 

Per lavorare su una pagina nella finestra Live Data: 

1 assicurati che la finestra del Documento visualizzi una pagina dinamica. 

Nella finestra del Documento, i placeholders sono usati per tutto il contenuto dinamico. 

2 scegli View > Live Data per passare alla finestra Live Data. 

UltraDev deve eseguire una copia provvisoria della pagina su un server prima di visualizzare la pagina ed il suo contenuto dinamico. La procedura può durare alcuni secondi. Per annullare la procedura, clicka sul bottone Stop (il bottone rosso con la X bianca). Se tutto è OK, la finestra Live Data appare con il contenuto dinamico visualizzato sulla pagina. 

Nota: Se la pagina visualizza visualizza un messaggio d'errore, assicurati che il prefisso nel dialog box Definition sia corretto. 

3 se vuoi, scegli View > Visual Aids > Invisible Elements per rimuovere l'evidenziazione applicata al contenuto dinamico. 

L'evidenziazione può influenzare il modo di visualizzare il contenuto dinamico dandoti un'immagine inesatta della pagina. 

4 se vuoi, seleziona l'opzione Refresh sul toolbar. 

La pagina si aggiornerà ogni qualvolta che fai una modifica che ha influenza sul contenuto dinamico.  

Se hai un collegamento lento del database, dovrai disabilitare questa opzione  quando lavori nella finestra Live Data. 

5 fai le necessarie modifiche alla pagina. 

6 se la tua pagina si aspetta i valori da un form HTML usando il metodo GET, inserisci i valori nel box testo sul toolbar e clicka sul bottone Refresh (l'icona della freccia circolare). 

Nota: Una text box per inserire i valori appare solo se specifichi il metodo GET nel dialog box Live Data (View >Live Data Settings). 

Scrivi i dati di prova nel seguente formato: 

name=value; 

In questo formato, name è il nome della variabile atteso dalla tua pagina e value è il valore conservato da quella variabile. 

Puoi definire anche coppie di name/value nel dialog box Live Data Settings (View > Live Data Settings) e salvarle con la pagina. 

7 clicka sul bottone Refresh se la tua pagina ha bisogno di essere aggiornata. 

Per fornire la pagina con dati atteso dagli utenti: 

1 nella finestra del Documento, scegli Live Data Settings dal menu View. 

Appare il dialog box Live Data Settings. 

2 nell'area URL Request, clicka sul bottone Plus (+) per inserire un variabile attesa dalla tua pagina. Specifica un nome ed un valore di prova per ciascuna variabile. 

3 nel pop-up menu Method, seleziona il form del medoto HTML che la tua pagina attende: POST o GET. 

4 nell'area text Iitialization Script, includi qualsiasi codice sorgente che vuoi inserire all'inizio della pagina prima di avviarla. Il codice consiste in uno o più tag che inizializzano le variabilo della sessione. 

5 per salvare i tuoi settaggi per la pagina corrente, clicka su Save Settings For This Document. 

Nota: Per salvare i settaggi, Design Notes (File >Design Notes) dev’essere abilitato. 

6 ckica su OK. 

Usare Preview in Browser 

Usa la caratteristica Preview in Browser per esaminare i collegamenti nella tua applicazione. Il comando Preview in Browser (File > Preview in Browser) ti permette in qualsiasi momento di visionare i documenti in un browser. Per default, UltraDev prende il documento dal sistema del file locale e crea una copia provvisoria da visualizzare nel tuo browser. Comunque, poichè le pagine dinamiche devono essere eseguite su un server, UltraDev deve avviare la copia provvisoria su un server prima di visualizzarla nel browser. (UltraDev cancella poi il file provvisorio dal server.) 

Per configurare Preview in Browser per le pagine dinamiche: 

1 scegli Edit > Preferences, poi scegli Preview in Browser. 

2 seleziona l'opzione Preview Using Application Server . 

UltraDev usa lo stesso server applicazione usato per generare le pagine per la finestra Live Data.  

3 ckica su OK. 

4 carica qualsiasi pagina di riferimento, server-side include, e files dipendenti sul server. 

Preview in Browser carica solo una copia provvisoria della pagina sul server. Non le carica pagine riferite come risultati o una pagina dettaglio, carica i files dipendenti come files immagine o server-side include. Per caricare un file, scegli Site> Files Site per aprire la finestra Site, clicka su sull'icona Application Server, seleziona il file sotto la Local Folder, e clicka sulla freccia blu sul toolbar per caricare il file sul tuo sito remoto. 

Per aprire una pagina usando Preview in Browser: 

Apri la pagina nella finestra del Documento o nella finestra Live Data, poi scegli File> Preview in Browser, o premi F12. 

Lavorare con il codice sorgente 

Puoi scrivere o editare il codice per le tue pagine usando la vista UltraDev Code, l'ispettore Code, o il tuo editor di testo favorito. Per editare la singola tag HTML senza lasciare il Documento o finestra Live Data, puoi usare il Quick Tag Editor. 

Il testo nella vista Code e nell'ispettore Code è codificato dal colore. Per modificare lo schema del colore, vedi " Editing HTML in Dreamweaver, " nella guida Using Dreamweaver o nell'Help di Dreamweaver (Help > Using Dreamweaver). Per modificare il colore delle parole chiave dello scripts e delle stringhe, in Preferences (Edit> Preferences), scegli Code Color, e cambia i colori dello scripts. 

Puoi cambiare anche il colore di uno tag HTML, incluso il tag dello scripts. 

Il colore che hai settato per il tag dello scripts è usato anche per il <%and% >delimiters e per tutti i tag CFML. Per modificare il colore di un tag, seleziona il tag nell'elenco nell'area Tag Specific, poi scegli un nuovo colore. 

Usare la vista Code 

Puoi usare la vista Code (View > Code) per scrivere o editare HTML e scripts nel Documento e nella finestra Live Data. Puoi visualizzare anche la vista Code (View > Code and Design) in parte del Documento e della finestra Live Data. Per maggiori informazioni, vedi " Editing HTML in Dreamweaver, " nella guida Using Dreamweaver o nell'Help di Dreamweaver (Help > Using Dreamweaver). 

Nota: Le modifiche fatte al contenuto statico nella vista Code sono riflesse solo nella vista Design quando clicki nella vista Design. Nella finestra Live Data, le modifiche fatte al contenuto dinamico sono immediatamente riflesse nella vista Design qunado è selezionata l'opzione Refresh sul toolbar. Se l'opzione Refresh non è selezionata, devi clickare sul bottone Refresh per vedere le modifiche nella vista Design. 

Usare l'ispettore Code 

Puoi usare l'ispettore Code per scrivere o editare il codice sorgente per le tue pagine. Per aprire l'ispettore Code, scegli Window> Code Inspector. Per maggiori informazioni sull'ispettore, vedi " Editing HTML in Dreamweaver, " nella guida Using Dreamweaver o nell'Help di Dreamweaver (Help > Using Dreamweaver). 

Nota: Le modifiche fatte a contenuto statico nell'ispettore Code sono riflesse solo nella vista Design quando clicki sulla vista Design. Le modifichefatte al contenuto dinamico sono riflesse solo nella finestra Live Data quando clicki sul bottone Refresh nella finestra. 

Usare il Quick Tag Editor 

Puoi usare il Quick Tag Editor per editare la singola tag HTML all'interno del Documento o della finestra Live Data, selezionando testo, un oggetto, o un tag, poi premendo Control+T (Windows) o Command+T (Macintosh). 

Per maggiori informazioni sul Tag Editor Rapido, vedi " Editing HTML in Dreamweaver, " nella guida Using Dreamweaver o nell'Help di Dreamweaver (Help > Using Dreamweaver). 

Usare un altro editor di testo 

Se vuoi, puoi usare il tuo editor di testo favorito per programmare manualmente le grandi quantità di HTML, JavaScript, VBScript ColdFusion, o Java. All'interno di UltraDev, puoi aprire qualsiasi editor di testo esterno, incluso il Blocco Note (Windows), SimpleText (Macintosh), BBEdit, e HomeSite. Per settare il tuo editor esterno per lavorare con UltraDev, vedi " Editing HTML in Dreamweaver, " nella guida Using Dreamweaver o nell'Help di Dreamweaver (Help > Using Dreamweaver). 

Per aprire il tuo editor esterno, premi Control+E (Windows) o Command+E (Macintosh).