Creare applicazioni DHTML

Il DHTML (Dynamic HyperText Markup Language) è il linguaggio per creare pagine dinamiche pubblicabili su browser. DHTML permette di sfruttare le potenzialità dell’HTML e di tutto ciò che orbita intorno ad esso, calate nel mondo ad oggetti di Visual Basic.

Le applicazioni CLIENT/SERVER per Internet.

Le applicazioni per Internet sono realizzate secondo il protocollo Client/Server che è un set predefinito di richieste e risposte, dove in generale è il Cliente che fa le richieste (Risorse, pagine HTML, …) al Server. Ricordiamo, che un protocollo è un insieme di procedure e regole da seguire che consentono di ricevere e trasmettere dati su una rete o su una linea di comunicazione. Per capirci, l’applicazione Client gira sul browser (Internet Explorer) mentre quella Server gira su macchine Server equipaggiate, per esempio, con Windows NT Server e Internet Information Server (IIS). La nuova versione di Visual Basic permette di realizzare due tipi di applicazioni per Internet.

  • Applicazioni IIS: risiedono e sono eseguite su Server Web, rispondono alle richieste del Browser e si basano su Web Class (componente Visual Basic incorporato nel Server) e ASP (Active Server Pages);
  • Applicazioni DHTML: sono eseguite all’interno di un Browser Internet Explorer e sono un’insieme di pagine DHTML. Esse in generale hanno un alto grado d’indipendenza dal Server, però quando è necessario eseguono delle chiamate al Server (nel nostro caso ad un’applicazione IIS). In realtà nelle applicazioni per Internet, realizzabili con Visual Basic, bisognerebbe includere anche i Documenti ActiveX (già presenti nella versione precedente di Visual Basic) che permettono di visualizzare documenti come fogli Excel in un browser Web.

Le applicazioni DHTML.

Per creare una nuova applicazione DHTML basta aprire Visual Basic e dalla finestra ‘ nuovo progetto’ scegliere: applicazione DHTML (progetto di tipo DLL). Automaticamente sarà creato un progetto che contiene un modulo di servizi, modHTML, ed una finestra di progettazione DHTML (DHTMLPage1), inoltre nella casella degli strumenti (ToolBox) verrà aggiunta una scheda con i controlli (elementi HTML) utilizzabili nel progetto. Il contenuto di modDHTML contiene due procedure che permettono di memorizzare lo stato degli oggetti contenuti su una pagina DHTML. Il progetto appena creato, per alcuni versi, può essere manipolato come un progetto EXE. Infatti si può usare il Debug, inserire dei moduli di classe o altre pagine DHTML, utilizzare gli elementi della cesella degli strumenti, … (naturalmente nel progetto è necessario aggiungere una pagina DHTML per ogni pagina HTML che bisogna realizzare). Procediamo, selezionando il menu Progetto/Proprietà e sulla finestra che comapare il Tab Debug, dal quale è possibile scegliere tra l’altro il componente di Avvio (a questo punto DHTMLPage1), il programma eseguibile (da utilizzare per testare il rpogetto), il browser da utilizzare. In questo tab selezioniamo il ChoeckBox usa il browser esistente che permette di utilizzare Internet Explorer se è già in esecuzione. Sempre sulla stessa finestra il tab componenti, permette di specificare la compatibilità di versioni del progetto. Se si vuole evitare di registrare nel registro di sistema una nuova versione del progetto ogni volta che si crea (Build) il progetto DHTML (File/Crea ProgettoDHTML.DLL…), bisogna specificare compatibilità binaria che conseente di mantenere la compatibilità tra i progetti compilati utilizzando il componente craeto. Nel nostro caso la compatibilità deve essere mantenuta con ProgettoDHTML.dll (che esiste nella directory dove avete salvato e costruito almeno una volta il progetto). Facciamo notare che la costruzione del progetto ne permette il trasporto e la relativa pubblicazione. Dopo aver creato il progetto basta pigiare il tasto F5 od il tasto avvio della ToolBar dell’IDE per testarlo. Se eseguite questa operazione, ora, nel browser verrà mostrata una pagina HTML vuota.

DHTML page designer.

Per vedere com’è strutturata la Pagina di progettazione DHTML basta fare doppio clic su PageDHTML1 nella cartella finestre di progettazione. La Page Designer è formata da due parti, riquadro struttura (parte sinistra) e riquadro dettaglio e da un ToolBar multifunzionale che racchiude gli strumenti per la formattazione e la progettazione degli elementi HTML.

  1. Il riquadro struttura contiene la rappresentazione gerarchica degli elementi HTML, presenti nel riquadro dettagli. Nel riquadro struttura sono mostrati gli identificatori (ID) degli elementi. Gli ID sono molto importanti perchè permettono di identificare in modo univoco gli elementi HTML (gli ID vengono assegnati attraverso la finestra delle proprietà degli elementi.
  2. Il riquadro dettaglio rappresenta il layout degli elementi HTML utilizzati. Grazie ai comandi presenti sulla ToolBar e alla finestra delle proprietà, gli elementi possono essere controllati ed impostati in modo opportuno. In altre parole il riquadro dettaglio contiene gli oggetti ed i controlli che si vogliono mostrare sulla pagina HTML da pubblicare.
  3. La ToolBar è suddivisa in due parti: la parte superiore contiene i comandi che permettono di formattare (allineamento; tipo, formato, dimensione e stile carattere; carattere grassetto, corsivo o sottolineato) il testo aggiunto nel riquadro dettagli. La parte inferiore invece contiene i comandi che permettono di salvare la pagina DHTML su un file esterno, di vedere in un editor li codice HTML associato alla pagina DHTML; di definire la modalità di posizionamento degli elementi sulla finestra (assoluto o relativo) e l’ordine degli stessi (porta avanti, porta indietro, porta in primo piano, porta in secondo piano, dietro al testo, davanti al testo=; infine contiene i tatsi per lavorare sulle tabelle, sui collegamenti ipertestuali, sulle sezione

    e ….

Controlli intrinseci e modello ad oggetti DHTML.

iGrazie al modello di oggetti del linguaggio DHTML, soo stati aggiunti agli elementi HTML delle funzionalità simili ai controlli, classici, di Visual Basic, per esempio è posibile catturare ed elaborare gli eventi generati dal mouse, modificare gli attributi, richiamare dei metodi degli elementi. I due oggetti principali del modello sono BaseWindow (che rappresenta un’istanza del browser che visualizza la pagina HTML) e l’oggetto Document (cioè la pagina HTML visualizzata nel browser). Nella scheda HTML della casella degli strumenti sono presenti i controlli che possono essere usati nelle applicazioni DHTML. Si può notare che alcuni controlli HTML intrinseci hanno nome simile a quelli standard di Visual Basic ma le funzionalità (attributi, metodi, eventi sono sicuramente differenti. I controlli HTML possono essere inseriti nella pagina nel modo classico, come i controlli dei form. Dopo che un controllo è stato inserito si può stabilire il tipo di posizionamento sulla finestra:

  • assoluto, l’elemento può essere posto in qualsiasi posizione disponibile;
  • relativo, gli elementi sono disposti sulla finestra indipendentemente dal punto in cui bìvengono trascinati; in altre parole quando sono inseriti vengono posti nella posizione successiva all’ultimo controllo inserito, questo si avverte anche in fase di elaborazione della pagina. Il tipo di posizionamento, si fissa: attraverso i tasti presenti sulla ToolBar della Page designer o cliccando sul controllo con il tasto destro e sfruttando il menu visualizzato. Illustriamo brevemente solo i controlli utilizzati nell’applicazione che realizzeremo:
  • TextArea e TextField, permettono di inserire nella pagina DHTML un campo testo rispettivamente a righe multiple e riga singola. Questi controlli hanno diversi metodi, che potete osservare cliccando due volte sul controllo posto nella pagina DHTML. Per esempio è possibile utilizzare il seguente codice con l’evento onclick (simile all’evento Clic classico).
Private Function TextArea1_onclick() As Boolean
TextArea1.Value = "Esempio"
End Function
  • Image, permette d’inserire un’immagine. Dalla finestra delle proprietà di tale oggetto è possibile specificare il file che contiene l’immagine (del tipo gif, jpg, bmp, wmf, …) e le sue caratteristiche, inoltre è possibile specificare, per esempio, il testo alternativo da mostrare prima che l’immagine sia caricata.
  • HyperLink, consente d’inserire in una pagina un collegamento ipertestuale (verso un’altra pagina, non necessariamente appartenente al progetto). Hyperlink1 è il testo di default assegnato al controllo quando è inserito sulla pagina. Tra le proprietà del Hyperlink è presente HREF può essere un indirizzo relativo (Es. Progetto-DHTML_DHTML) Page2.html) o assoluto (Es. http://www.altrosito.com/altrapagina.html) di pagina esterna od interna al progetto.
  • Horizzontal Rule, consente d’inserire una riga orizzontale;
  • Button di vario tipo, cioè pulsanti di comando.

Lo spostamento tra pagine DHTML non è realizzabile solo attraverso gli Hyperlink, ma anche programmando un altro elemento come per esempio un Button. Per esempio nel progetto DHTML precedentemente creato aggiungete un’altra pagina e sulla pagina di avvio disponete un button. Per muovere il button con tranquillità, sulla pagina, scegliete posizionamento assoluto, fate Doppio Clic sul button oppure visualizza codice ed inserite le seguenti istruzioni:

Private Function Button1_onclick() As Boolean
BaseWindow.Navigate("ProgettoDHTML_DHTMLPage2.html")
End Function

Dove navigate è un metodo dell’oggetto BaseWindow che permette di eseguire uno spostamento, mentre DHTMLPage2.html è la pagina che si vuole visualizzare. Se volete ancora stupirvi potete provare a scrivere qualcosa nel riquadro dettaglio per esempio “vai alla pagina…” selezionare il tutto e cliccare sul tasto collegamento ipertestuale della ToolBar, così facendo avete creato un nuovo Hyperlink personalizzato. Per concludere la carrellata sugli oggetti HTML bisogna citare le tabelle che si possono inserire con il corrispondente tasto presente sulla ToolBar. Dopo che la tabella è stata inserita, su di essa, possono essere eseguite le operazioni classiche come: inserici riga, elimina riga ecc.. Queste operazioni sono selezionabili dalla ToolBar.

Both comments and pings are currently closed.

Comments are closed.