Introduzione al Dhtml col VBS: un menu con VBScript

Siti dinamici con ASP Impara a creare siti dinamici professionali con ASP

Comparso su HTML.it il 4 Dicembre 2002 - E' vietata la riproduzione, anche parziale, senza esplicito consenso dell'autore

VBScript, Javascript e Dhtml

Il VBScript è un linguaggio di scripting particolarmente utilizzato nello sviluppo di applicazioni Web in Asp (Microsoft Active Server Pages) che, non avendo un linguaggio di scripting proprietario, si servono proprio del VBScript come linguaggio di scripting.

Tuttavia il VBScript nasce come linguaggio di scripting client-side con scarso supporto da parte di browser diversi da Microsoft Internet Explorer. Per questo è particolarmente utilizzato per lo sviluppo di applicazioni Intranet, magari come servizio interno aziendale sul Web.

In un caso come quello appena citato VBScript trova ideale impiego, più di quanto possa trovarne il più rinomato e potente Javascript: la semplicità sintattica di VbScript è molto gradita agli sviluppatori proprio per siti/applicazioni basati sul concetto di rete locale Intranet.

Lo scopo di questo articolo è mostrare al lettore come sia possibile... non migrare verso VBScript abbandonando Javascript (una sciocchezza simile non la farei mai!), ma trovare rifugio in questo linguaggio per risolvere velocemente, e con una certa semplicità, problemi altrimenti risolvibili con Javascript, linguaggio più ostico per chi "ha fretta" :-)

Un esempio che di certo metterà il lettore in condizione di affrontare la lettura di questo articolo con un certo piacere, è la realizzazione di un menu dinamico semplicee, personalizzabile e funzionale. In pratica sarà affrontata la filosofia Dhtml sostituendo il Javascript con VBscript nella fatidica coppia con i fogli di stile Css.

Per rendere l'idea su cosa stiamo andando a realizzare è possibile pensare al famoso menu "Gestione Risorse" di Ms Windows '98: una serie di voci principali che, al click del mouse su ciascuna di queste, aprirà nella parte sottostante la voce di riferimento una serie di link associabili a quella voce.

Il Dhtml col VBscript

Non c'è particolare differenza concettuale tra il Dhtml sviluppato con Javascript da quello sviluppato col VBScript, le proprietà ed i metodi sono gli stessi, essendo proprietari del Dhtml, ricordo soltanto che il VBScript è un linguaggio case-insensitive, quindi utilizzare una proprietà tipo className riscrivendola come classname è la stessa cosa, ma per rimanere fedeli alle strutture sintattiche C-like che regolano il Dhtml rispetteremo maiuscole e minuscole come se stessimo sviluppando in Javascript.

Approfitto per spendere una nota che renderà felici i programmatori Visual Basic, che mi aspetto siano quelli che più degli altri lettori apprezzeranno questo argomento: nella stesura dei codici di esempio verrano rispettate maiuscole e minuscole nella stessa maniera in cui Ms Visual Basic 6 le gestisce in automatico... la memoria fotografica è fondamentale!

Ora al lavoro!

Prepariamo la struttura HTML del menu

La struttura HTML del menu è fondata su di una gerarchia precisa, in cui i migliori alleati sono l'ordine e la schematizzazione, quindi niente più che una bella tabella è la soluzione che meglio si addice a questa esigenza.

Ecco il codice:

<table>
 <tr>
   <td class="VocePrincipale" onClick="VBMenu(0)">Voce principale # 1</td>
 </tr>
 <tr>
   <td style="padding-left: 5px;">
    <div id="VariLink0" class="NascondiMenu">
     <a href="#" class="SottoVoci">Sotto-voce # 1</a><br>
     <a href="#" class="SottoVoci">Sotto-voce # 2</a><br>
     <a href="#" class="SottoVoci">Sotto-voce # 3</a><br>
    </div>
   </td>
 </tr>
 <tr>
   <td class="VocePrincipale" onClick="VBMenu(1)">Voce principale # 2</td>
 </tr>
 <tr>
   <td style="padding-left: 5px;">
    <div id="VariLink1" class="NascondiMenu">
     <a href="#" class="SottoVoci">Sotto-voce # 1</a><br>
     <a href="#" class="SottoVoci">Sotto-voce # 2</a><br>
     <a href="#" class="SottoVoci">Sotto-voce # 3</a><br>
    </div>
   </td>
 </tr>
</table>

<style type="text/css">
   td.VocePrincipale
   { 
      cursor: Hand;
      font-family: Verdana;
      font-size: 12px;
      font-weight: Bold;
   }
   div.NascondiMenu
   {
      display: None;
   }
   div.MostraMenu
   {
      font-family: Verdana;
      font-size: 11px;
      display: Inline;
   }
   a.SottoVoci
   {
      color: #0000FF;
      text-decoration: None;
   }
   a:hover.SottoVoci
   {
      color: #FF0000;
      text-decoration: Underline;
   }
</style>

<script language="VBScript">
   Option Explicit
   Dim Identificatore
   Dim Oggetto
       Sub VBMenu(Identificatore)
           Oggetto = "VariLink" & Identificatore
           If document.all.item(Oggetto).className = "MostraMenu" Then ' Se il menu è aperto lo chiude
              document.all.item(Oggetto).className = "NascondiMenu"
           Else
              document.all.item(Oggetto).className = "MostraMenu" ' Se il menu è chiuso lo apre
           End If
       End Sub
</script>

TAGS - dhtml, vbscript, javascript