sabato 31 luglio 2010

Linux: installazione di Apache Tomcat

Apache Tomcat è un contenitore per applicazioni web (web container) che usano le tecnologie Servlet e/o JSP, detto anche web server. Viene distribuito da Apache Software Foundation (ASF), una comunità di sviluppatori che opera su progetti open-source, Apache Tomcat è un software open-source! L'installazione sulla nostra distribuzione Linux, che propongo di seguito, ci permette di testare in locale le applicazioni scritte, prima di effettuarne il dispiegamento (deploy) sul server.
Vi ricordo che per eseguire Apache Tomcat dovete prima installare una Java Virtual Machine (JVM) sul vostro computer o kit di sviluppo (JDK). Il download del server web avviene attraverso la homepage del sito. I primi annunci riportano solitamente alla pagina di download dell'ultima versione disponibile. Per questa guida ho scaricato il file binario della versione 6.0.29. Si tratta di un archivio tar compresso con algoritmo gz, che andiamo a estrarre con questa istruzione:
tar zxvf apache-tomcat-6.0.29.tar.gz
Il processo di estrazione crea la cartella apache-tomcat-6.0.29, che potete spostare in una cartella del file system (a patto di avere i permessi in scrittura). L'avvio del web server avviene attraverso lo script start.sh, contenuto in bin (una cartella del web server). Se non si verificano errori (nella finestra di terminale) è possibile accedere alla homepage del web server digitando l'indirizzo localhost:8080 nel browser Internet:


L'immagine di sopra riporta la homepage, predefinita, del web server. Se si verifica un errore all'avvio provate a dare uno sguardo al fil di log, lo trovate nella cartella logs del web server. Per poter amministrare il server occorre definire un nuovo utente con questo ruolo (di default nessun utente ha la proprietà manager). E' possibile aggiungere altri utenti tramite il file tomcat-users.xml, nella cartella conf del web server. Gli utenti descritti nel file in questione, tra l'altro, risultano disabilitati poiché preceduti da commenti. Per aggiungere un utente inseriamo la seguente riga di codice:
<user name="admin" password="admin" roles="manager"/>
all'interno del tag <tomcat-users>, che aggiungue l'utente con nome admin e password admin.

venerdì 30 luglio 2010

JavaScript: script.aculo.us, Effects

Alla base degli effetti generati da aculous troviamo i moduli JavaScript di Effect (il file effects.js): Effect.Opacity, Effect.Scale, Effect.Morph, Effect.Move, Effect.Highlight ed Effect.Parallel. Altri effetti, detti combinati, vengono poi generati dalla combinazione degli effetti elencati sopra! La sintassi per avviare un effetto (invocato da una funzione JavaScript oppure da un evento) è la seguente:
new Effect.NomeEffetto(elemento,param_richiesti,param_opzionali);
Dove:
  • elemento: è la stringa che identifica l'id dell'elemento, oppure il riferimento all'oggetto DOM dell'elemento;
  • param_richiesti: è una stringa con i parametri attesi dall'effetto, e può non essere presente, dipende dall'effetto;
  • param_opzionali: è una stringa di parametri opzionali utile a personalizzare l'effetto invocato;
Nella lista che segue è possibile osservare i parametri che una funzione di effetto può necessariamente richiedere (param_richiesti):
  • duration: specifica, in secondi, la durata dell'effetto. Il valore passato di default all'effetto è 1.0;
  • fps: specifica il numero di frame per secondi (fps) da applicare all'effetto. Il valore passato di default è 25, .il massimo valore è 100;
  • transition: permette di impostare una funzione per il tipo della transizione, descrive come deve avvenire il passaggio dal primo all'ultimo frame dell'animazione (regolando un parametro che va da 0 a 1). Le possibili funzioni sono: Effect.Transitions.sinusoidal (passata di default all'effetto), Effect.Transitions.linear, Effect.Transitions.reverse, Effect.Transitions.wobble ed Effect.Transitions.flicker;
  • from: imposta il punto iniziale della transizione;
  • to: imposta il punto finale della transizione;
  • sync: specifica (con false) se l'effetto deve aggiornare i frame dell'animazione automaticamente (comportamento applicato di default) oppure si deve sincronizzare (con true) con l'istanza di un altro effetto (e usare, quindi, Effect.Parallel);
  • queue: permette di specificare con una stringa (che può essere front oppure end) l'ordine dell'effetto all'interno della coda degli effetti;
  • delay: imposta il ritardo (in secondi) da applicare alla partenze dell'effetto;
  • direction: imposta in che direzione deve avvenire la transizione, può essere: top-left, top-right, bottom-left, bottom-right, e center (il valore di default). Questa proprietà può essere specificata solo per gli effetti Grow e Shrink;
Le proprietà appena viste possono poi essere aggiunte (attraverso funzioni JavaScript) anche al verificarsi di particolari eventi:
  • beforeStart: la funzione specificata viene chiamata prima di iniziare l'effetto;
  • beforeUpdate: la funzione specificata viene chiamata prima di aggiornare l'animazione dell'effetto;
  • afterUpdate: la funzione specificata viene chiamata dopo l'aggiornamento dell'animazione dell'effetto;
  • afterFinish: la funzione specificata viene chiamata al termine dell'effetto;
Per finire, ogni oggetto che sintetizza un effetto è accompagnato dalla seguente lista di variabili:
  • effect.element: elemento a cui è applicato l'effetto;
  • effect.options: la lista delle opzioni date all'effetto;
  • effect.currentFrame: il numero di frame già visualizzati;
  • effect.startOn: il tempo (in ms) che è passato dall'avvio dell'effetto;
  • effect.finishOn: il tempo (in ms) che manca al termine dell'effetto;
  • effect.effects[]: contiene l'array degli effetti;
Nei prossimi articoli osserveremo da vicino i principali effetti della libreria!

JavaScript: script.aculo.us, introduzione

Script.aculo.us (da ora in poi aculous) è una libreria per effetti grafici scritta in JavaScript (da Thomas Fuchs) per la realizzazione (semplice) di interfacce e pagine web. E' basata su Prototype, altra libreria JavaScript, e ne estende, quindi, le funzionalità di base! Perché riscrivere ogni volta le stesse funzioni e/o pezzi di codice quando possiamo usare aculous? Il principale obiettivo di aculous è proprio quello di semplificare la scrittura del codice JavaScript, facendo di conseguenza avanzare rapidamente il lavoro del web designer!
L'installazione della libreria è molto semplice. Occorre caricare sul proprio spazio web i file JavaScript che compongono la libreria (non tutti, come a breve vedremo) ed effettuarne, quindi, il collegamento nelle pagine web che intendono usare la stessa. Possiamo scaricare aculous a questo indirizzo, qui trovate l'archivio tar.gz della libreria. L'estrazione del file scaricato può avvenire da riga di comando, ad esempio con l'istruzione: tar zxvf scriptaculous-js-1.8.3.tar.gz. Il processo di estrazione genera la cartella scriptaculo-js.1.8.3, all'interno trovate il file prototype.js (nella cartella lib) e i file: scriptaculous.js, builder.js, effect.js, dragdrop,js, slider.js, sound.js e control.js (nella cartella src).
Per usare la libreria dobbiamo poi indicare al browser i file JavaScript che la compongono. E' sufficiente inserire nel tag head queste istruzioni:
<script src="./lib/protype.js" type="text/javascript"></script>
<script src="./lib/scriptaculous.js" type="text/javascript"></script>
Se lib è la cartella del server che ospita i file. Di default la libreria scriptaculous.js carica tutte le componenti JavaScript (i file elencati). Se una pagina utilizza solo alcuni di questi file, per non appesantire la pagina possiamo dire a scriptaculous.js di caricare solo il necessario. Ecco come fare:
<script src="./lib/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
Il codice di aculous può essere aggiunto nel documento HTML in questo modo:
<div id="text" onclick="new Effect.SwitchOff(this)">
Se mi clicchi... sparisco!
</div>
E' anche possibile scrivere nuove funzioni, combinare effetti e fare tante altre cose. In questa pagina è possibile vedere l'effetto generato dall'esempio.

giovedì 29 luglio 2010

JavaScript: espressioni regolari

L'espressioni regolari agevolano la ricerca e la verifica di stringhe di testo all'interno di campi dati e documenti. Essendo il controllo dei dati uno dei primi obiettivi affidati a JavaScript il linguaggio non può allora ignorare la comodità ricevuta dall'uso delle espressioni regolari che sono, quindi, supportate dal linguaggio di scripting, nativamente! Un'espressione regolare descrive una famiglia di stringhe ed è usata come criterio di ricerca delle stesse all'interno del documento o campo. La descrizione della stringa da cercare (a volta detta pattern) avviene attraverso l'uso dei costrutti messi a disposizione dal linguaggio. In una precedente pagina ho già fatto uso delle espressioni regolari, gli utenti più curiosi avranno di sicuro notato la particolarità di quel codice. Ecco un elenco dei tag utili alla descrizione delle espressioni regolari:
  • .: indica la presenza di qualsiasi carattere. Ad esempio, l'espressione "luc." individua le stringhe: luca, lucb, lucc, etc...;
  • *: indica la presenza di 0 a N occorrenze del carattere (o gruppo di caratteri) seguito dal simbolo. Ad esempio, l'espressione "luc*a" individua le stringhe: luc, luca, lucaa, lucaaa etc...;
  • +: indica la presenza di 1 a N occorrenze del carattere (o gruppo di caratteri) seguito dal simbolo. Ad esempio, l'espressione "luc*a" individua le stringhe: luca, lucaa, lucaaa etc...;
  • ?: indica la presenza di 0 o 1 occorrenze del carattere (o gruppo di caratteri) seguito dal simbolo. Ad esempio, l'espressione "luc?a" individua le stringhe: luc o luca;
  • {n}: indica la presenza di n occorrenze del carattere seguito dal simbolo. Ad esempio, l'espressione "luca{3}" individua la stringa lucaaa;
  • {n,m}: indica la presenza di almeno n occorrenze e al massimo m del carattere seguito dal simbolo. Ad esempio, l'espressione "luca{3,5}" individua le stringhe lucaaaa, lucaaaa e lucaaaaa;
  • $: la stringa da trovare deve trovarsi a fine riga;
  • ^: la stringa da trovare deve trovarsi a inizio riga;
  • []: individua qualsiasi singolo carattere fra quelli indicati. Ad esempio l'espressione "luc[ao]" individua le stringhe luca e luco;
  • [^]: individua qualsiasi singolo carattere ad esclusione di quello indicato. Ad esempio, l'espressione "luc[^o]" individua tutte le possibili stringhe ad eccezione della stringa luco;
  • [c1-c2]: indica un intervallo di caratteri. Ad esempio, l'espressione "luc[a-b]" individua le stringhe luca, lucb e lucc;
  • [^c1-c2]: indica qualsiasi carattere ad esclusione di quelli indicati nell'intervallo. Ad esempio, l'espressione "luc[^a-c]" individua tutte le possibili stringhe ad eccezione delle stringhe luca, lucb e lucc;
  • (): permette di raggruppare più caratteri. Ad esempio, l'espressone "(lu)+ca" individua le stringhe luca, luluca, lululuca etc...;
  • |: permette la descrizione di opzioni fra carattere e/o gruppi di caratteri. Ad esempio, l'espressione "luc(a|o)" individua le stringhe luca e luco;
  • \: permette l'uso dei caratteri usati dalle espressioni regolari (sequenze di escape). Ad esempio, l'espressione "\*luca\*" individua la stringa *luca*;
La descrizione di un pattern avviene attraverso la sintassi:

var pattern=/espressione_regolare/

L'espressione regolare (fissa) è cioè racchiusa dai caratteri /. I metodi per le stringhe: search(), match(), replace() e split(), combinati all'uso delle espressioni regolari (il parametro dei metodi appena elencati) permettono la ricerca dell'espressione all'interno della stringa. Il metodo search(espressione) verifica la presenza dell'espressione all'interno della stringa e ritorna l'indice che all'interno della stessa individua l'inizio del pattern trovato! Stavate forse pensando a cicli for per scorrere i caratteri dell'array?
Il metodo match(espressione) ritorna invece un array con le stringhe trovate. Tutte ovviamente rispettano il formato descritto nell'espressione. Il metodo replace(espressione,testo) sostituisce tutte le occorrenze trovate dell'espressione con la stringa testo. Il metodo split(espressione) ritorna un array di stringhe ottenuto spezzando l'array in base all'espressione fornita.
L'espressione regolare può anche essere dichiarata facendo uso dell'oggetto RegExp. Il vantaggio di usare tale oggetto risiede nella possibilità di poter istanziare, dinamicamente, nuove espressioni regolari. La precedente sintassi che è stata presentata, infatti, dichiara un'espressione regolare che è costante!
L'uso dell'oggetto RegExp permette tra l'altro l'uso di altri due metodi: il metodo test(stringa) ritorna true se la stringa soddisfa la sintassi descritta dal pattern, altrimenti torna false; il metodo exec(stringa) cerca, così come fa già test(), e ritorna un array delle sotto stringhe trovate, torna null se non trova niente. Qui trovate una pagine di esempio, date uno sguardo al codice per vedere l'uso delle espressioni regolari.

sabato 24 luglio 2010

Aspire One: lo stato della batteria

L'altro giorno mi chiedevo come misurare lo stato di usura della batteria del mio Aspire One. Il gestore di energia di Xubuntu fornisce preziose informazioni sulla batteria: tipo di tecnologia usata, corrente disponibile (valore di fabbrica), ultima valore della corrente disponibile (valore reale), fornitore e modello!


I valori riassunti nell'immagine sopra si trovano nel file system del nostro computer. Lo stato della batteria potrebbe allora essere calcolato in questo modo: (valore_ultima_carica/valore_progetto)*100. Se il valore dell'ultima carica è uguale al valore di progetto, la batteria è al 100% delle sue possibilità! Si tratta ovviamente di un valore teorico. Lo stato di usura della batteria, allora, potrebbe essere il complemento a 100 del valore calcolato prima! Vi propongo uno script per far fare al computer questi calcoli:

#!/bin/bash

if [ -e /sys/class/power_supply/BAT1/present ]
then
   present=$(cat /sys/class/power_supply/BAT1/present)
   last_charge=$(cat /sys/class/power_supply/BAT1/charge_full)
   max_charge=$(cat /sys/class/power_supply/BAT1/charge_full_design)
   echo "Ultima carica: " $last_charge" µAh;"
   echo "Massima carica: "$max_charge" µAh;"
   status=$(echo "scale=4; ($last_charge/$max_charge)*100" | bc)
   wear_out=$( echo "scale=4; (100-$status)" | bc)
   echo "Condizione della batteria: "${status}"%"
   echo "Usura della batteria: "${wear_out}"%"
else
   echo "La batteria non risulta inserita!"
fi

Aprite il vostro editor preferito, copiate e incollate il codice scritto sopra. Salvate il file scegliendo per lo stesso un nome, facile da ricordare (in maniera tale da poterlo poi invocare, almeno una volta al mese) e con estensione sh. Il file sul mio Aspire One ha ad esempio questo nome: battery.sh. Per rendere eseguibile il file date questo comando: sudo chmod +x battery.sh, all'interno della cartella che ospita il file che prima abbiamo scritto.
Per far diventare questo script un comando a tutti gli effetti spostiamolo nella cartella dei comandi per l'utente, ad esempio con il comando: sudo mv battery.sh /usr/bin (digitando la password dell'utente root). Che ne dite di provarlo?


Il valore nell'immagine di sopra è stato ottenuto dopo l'operazione di calibrazione della batteria. Prima di tale operazione lo stato di condizione della batteria, misurato con lo stesso script, era del 75.7200% (e l'usura, quindi, era del 24.2800%).

Aspire One: calibrazione della batteria

La calibrazione della batteria permette di far aderire i valori della stessa, rilevati e misurati dal portatile, a quelli reali. Molto spesso iniziamo a far caricare la batteria ancora prima che essa si scarichi del tutto. Il computer, di conseguenza, stima la durata della batteria considerando l'ultimo intervallo di carica, quelli precedenti e i tempi di carica. La stima è quindi viziata dall'utilizzo della batteria. Con l'operazione di calibrazione possiamo mostrare al computer la reale capacità della batteria, ecco cosa dovete fare:
  • caricate la batteria del vostro Aspire One al 100%, fino a far diventare verde il led della batteria;
  • staccate ogni dispositivo collegato all'Aspire One (mouse, stampanti, scanner, piani di raffreddamento, schede di memorie e pen-drive usb), fatto? Staccate l'alimentazione dell'Aspire One e rimanete il computer acceso (disattivate, se attiva, la funzione di ibernazione), adesso alimentato dalla batteria appena caricata;
  • lasciate inutilizzato l'Aspire One, fino a farlo spegnere del tutto: andate a prendere un caffè, fate una passeggiata con il cane... Per far scaricare tutta la batteria del mio Aspire One ho dovuto aspettare più di due ore! Quando vedete lampeggiare il led arancione della batteria capirete che la batteria è ormai scarica (e solitamente rimangono gli ultimi minuti);
  • non appena l'Aspire One si spegne, inserite l'alimentazione e date inizio al processo di carica (questa volta ci metterà di più). E' possibile accendere l'Aspire One (verrà avviato il controllo del disco) oppure attendere il completamento della carica;
Prima di avviare questa procedura l'informazione sulla batteria nel pannello di Xfce diceva che nell'ultima carica completa la batteria disponeva di 1665 mAh. Adesso, invece, la stessa voce riporta 1818 mAh disponibili!

venerdì 23 luglio 2010

JavaScript: l'oggetto forms

L'oggetto forms è una proprietà dell'oggetto document, contiene un array di riferimenti a tutti i form presenti nella pagina. Il numero di form nella pagina, quindi, è dato dalla proprietà length. L'accesso all'array è la via più semplice per accedere anche al form, come ad esempio fa questa istruzione: document.forms[0].
Se al form è stato poi assegnato un nome (attraverso la proprietà name), è possibile accedere ad esso attraverso la notazione tipica dei linguaggi a oggetti, come ad esempio fa questa istruzione: document.registrazione (se registrazione è il nome dato al form!).
Un form può avere più elementi: area di testo, bottoni, etichette, caselle di scelta etc... La proprietà elements è un array che raccoglie tutti gli elementi che compongono il form. Ancora una volta, dunque, la proprietà length ritorna il numero di elementi del form. Inoltre, siccome elements è un array, l'accesso a un elemento del form può avvenire con istruzioni simile a questa: document.forms[0].elements[0], che accede al primo elemento del primo form. In alternativa, se all'elemento è stato assegnato un nome, cosa che vi consiglio di fare sempre, possiamo usare la notazione a oggetti, ad esempio: document.registrazione.mail, accede all'elemento di nome mail del form registrazione. L'acceso al valore dell'elemento (non il riferimento, quindi) avviene selezionando la proprietà value dello stesso elemento text o textarea. Se si tratta di una casella di scelta, invece, il valore dell'elemento è dato dalla proprietà selectedIndex, per checkbox va usato invece checked.
La proprietà encoding dell'oggetto form contiene una stringa di testo con la codifica da usare per l'invio dei dati. La proprietà method contiene il valore dell'omonimo attributo del tag html form, può quindi valere get oppure post. La proprietà action raccoglie l'url a cui inviare i dati.
I metodi applicabili a un oggetto di forms sono essenzialmente due e rappresentano le azioni tipiche assegnate ai bottoni di un form. Sono: reset() e submit(). Il primo, se invocato su un oggetto di forms azzera tutti i campi dello stesso. Il secondo metodo, invece, invia i dati presenti nel form all'url specificato in action. Qui trovate una pagina di esempio.

giovedì 22 luglio 2010

JavaScript: l'oggetto images

L'oggetto images è un array di immagini, quelle presenti nel documento! Trattandosi di un array la proprietà length individua allora il numero di immagini. Attenzione, la prima immagine si trova dunque in 0, prima posizione. L'accesso all'immagine può avvenire sia attraverso l'oggetto images, con la sintassi document.images[indice], che attraverso il nome (univoco all'interno del documento) dato all'immagine, document.nome_immagine. Le proprietà dell'oggetto images riflettono molto le proprietà del tag html img. L'elenco che segue dimostra quanto ho appena detto:
  • name: la stringa con il nome dato all'immagine, se impostato;
  • src: l'url che punta all'immagine;
  • border: la stringa che indica in pixel lo spessore del bordo che fa da cornice all'immagine, se impostato;
  • width: la stringa che indica in pixel la larghezza dell'immagine;
  • height: la stringa che indica in pixel l'altezza dell'immagine;
  • hspace: la stringa che indica in pixel lo spazio orizzontale da lasciare ai lati dell'immagine, se impostato;
  • vspace: la stringa che indica in pixel lo spazio verticale da lasciare sopra e sotto l'immagine, se impostato;
  • complete: valore logico, con true indica che l'immagine è stata caricata, altrimenti è false (lo è anche per tutta la durata del download dell'immagine). Se l'utente termina il download dell'immagine, ad esempio arrestando tramite il browser il download della pagina, la proprietà complete viene comunque messa a true!;
  • lowsrc: l'url che punta a una versione a bassa risoluzione dell'immagine, se presente;
Gli oggetti di images, le immagini, possono lanciare tre eventi: onabort (evento lanciato quando l'utente ferma il download della pagina), onerror (evento lanciato quando durante il caricamento dell'immagine si verifica un errore) e onload (evento lanciato). Qui trovate una pagina di esempio.

JavaScript: l'oggetto location

L'oggetto location è una proprietà dell'oggetto window, come abbiamo già visto qui. Rappresenta l'url della pagina che si sta consultando e dispone delle seguenti proprietà:
  • hash: la stringa che forma l'url per un riferimento all'interno della stessa (ancora), inizia con il carattere # ;
  • host: la stringa con il nome dell'host, può comprendere in alcuni casi anche il numero di porta usato per la connessione;
  • hostname: la stringa con il nome dell'host;
  • href: la stringa con l'url completo (hostname più pathname) del documento;
  • pathname: la stringa che, all'interno dell'host, punta al documento;
  • port: la stringa con il numero di porta usato per la connessione;
  • protocol: la stringa con il protocollo usato per accedere al documento;
  • search: la stringa che completa l'url in fase di interrogazione e/o passaggio di parametri, inizia con il carattere ?;
L'oggetto location ha due metodi:
  • reload(from_server): aggiorna la pagina corrente, il parametro from_server se true obbliga a scaricare nuovamente la pagina dal server, se è false la pagina viene ripresa dalla cache locale del browser;
  • replace(new_url): abbandona l'attuale url a favore di quello indicato dal parametro new_url. L'attuale url viene sostituito da quello nuovo, tale sostituzione si riflette, poi, anche nell'oggetto history;
Qui trovate una pagina di esempio. Nella prima parte del documento vengono elencate le proprietà dell'oggetto location. Nella seconda parte, invece, è possibile ricaricare la pagina (usando il metodo reload()) chiedendone una nuova copia al server oppure cambiare l'url corrente con uno nuovo (usando il metodo replace()). Verificate che il salto a un nuovo url rimuove effettivamente dall'oggetto history l'ultimo url visitato!

mercoledì 21 luglio 2010

JavaScript: l'oggetto history

L'oggetto history raccoglie in un array gli url visitati e permette al codice JavaScript di ritornare su di queste, come solitamente accade quando premiamo sulle frecce del browser nella barra degli strumenti. Trattandosi di un array, l'unica proprietà dell'oggetto è la proprietà length, che contiene il numero di pagine visitate. I metodi dell'oggetti sono:
  • back(): va alla pagina precedente;
  • forward(): va alla pagina successiva (se l'utente è tornato sulla pagina precedente);
  • go(posizione): va su una pagina già visitata, l'argomento posizione indica il numero di pagine da saltare in avanti oppure dietro (può quindi essere un numero positivo o negativo);
La chiamata a history.go(-1) equivale, allora, alla chiamata history.back(). Così come la chiamata a history.go(+1), che equivale alla chiamata history.forward(). La chiamata a history.go(0), invece, ricarica nel browser la pagina corrente (altra funzione che solitamente già troviamo implementata dal browser). Qui trovate una pagina di esempio che usa l'oggetto history, navigate prima attraverso i link presenti nella pagina, quindi usate i bottoni in alto per tornare dietro o andare avanti.

JavaScript: l'oggetto navigator

L'oggetto navigator è l'oggetto JavaScript che contiene tutte le informazioni sul client dell'utente, e dunque sul browser usato. L'accesso alle proprietà avviene attraverso la sintassi navigator.nome_proprietà , dove nome_proprietà può essere:
  • appCodeName: il nome in codice dell'applicazione;
  • appVersion: numero di versione dell'applicazione;
  • appName: il nome dell'applicazione;
  • cookieEnabled: dice se il browser ha abilitato i cookie (true) oppure no (false);
  • cpuClass: tipo di cpu;
  • mimeTypes[]: array con i tipi di file supportati;
  • plattform: indica il tipo di piattaforma dell'utente (Linux o Windows);
  • plugins[]: array con i plugin installati nel browser;
  • systemLanguage: la lingua usata dal browser;
  • userAgent: l'header che descrive il browser dell'utente;
Volete sapere il nome in codice del vostro browser? Date uno sguardo a questa pagina di esempio.

JavaScript: l'oggetto screen

L'oggetto screen di JavaScript contiene le informazioni sul monitor usato dall'utente per vedere la pagina web. Tutte le proprietà che vedremo possono essere lette attraverso la sintassi screen.nome_proprietà:
  • availWidth: dimensione disponibile in larghezza (in pixel), esclusa la barra delle applicazioni;
  • availHeight: dimensione disponibile in altezza (in pixel), esclusa la barra delle applicazioni;
  • width: risoluzione orizzontale (in pixel);
  • height: risoluzione vertivale (in pixel);
  • colorDepth: numero di colori (in bit);
  • pixelDepth: risoluzione (in bit) per pixel;
Qui trovate una pagina di esempio. L'uso di questo oggetto ci permette, ad esempio, di direzionare il navigatore verso pagine web più consone alle caratteristiche del suo monitor! Come? Osservate queste istruzioni:


if ((screen.width>=1024) && (screen.height>=768))
   window.location="home_hires.html";
else
   window.location="home_lowres.html";

Utile, no?

JavaScript: l'oggetto window

L'oggetto window in JavaScript rappresenta la finestra del browser e contiene, pertanto, i riferimenti a tutti gli oggetti della stessa. Viene creato ad ogni istanza del tag body o frameset (quest'ultimo, adesso deprecato). Come ogni oggetto è poi dotato di proprietà e metodi che di seguito analizziamo. Per le proprietà abbiamo la seguente lista:
  • closed: il significato di questa proprietà potrebbe sembrare alquanto strano. Si tratta di un valore logico che indica se una finestra è stata aperta o chiusa. L'oggetto window che fa riferimento a una finestra continua ad esistere anche quando la finestra è stata chiusa;
  • defaultStatus: lo stato della finestra viene riportato solitamente in una barra inferiore del browser, se è abilitato. Con questa proprietà possiamo quindi modificare il testo che di default compare nella barra di stato;
  • document: è il riferimento al documento contenuto nella finestra e quindi alla pagina html;
  • frames[]: è un array che contiene i riferimenti a tutti i frame che compongono la pagina (se la pagina è divisa in frame!);
  • history: riferimento all'oggetto che contiene gli indirizzi visitati con la finestra;
  • length: se la pagina è divisa in frame, contiene il numero di frame;
  • location: riferimento all'oggetto che contiene informazioni sull'url della pagina corrente;
  • name: il nome della finestra;
  • navigator: riferimento all'oggetto che raccoglie le proprietà del browser (nome, versione e file supportati) usato dal client per visualizzare la finestra;
  • opener: se la finestra è stata aperta con la chiamata window.open() possiamo usare questa proprietà per sapere chi ha aperto la finestra;
  • parent: contiene un riferimento alla finestra che contiene il frame (se il documento è diviso in frame);
  • screen: è un oggetto contenente le informazioni (risoluzione orizzontale, verticale e profondità di colore) del monitor usato dall'utente;
  • self: è un riferimento all'oggetto window;
  • status: una stringa personalizzata per la barra di stato del browser;
  • top: riferimento alla finestra di livello superiore;
  • window: è un riferimento all'oggetto window;
Per l'accesso, in lettura e/o scrittura, alle proprietà va usata la seguente sintassi: window.nome_proprietà. In questa pagina trovate un esempio, i riferimenti agli oggetti (se presenti) vengono notificati nella stessa pagina. Per accedere, poi, alle singole proprietà di questi oggetti vanno usati i metodi e i campi per essi definiti.
I metodi dell'oggetto window possono variare da browser a browser, dipende dalla versione JavaScript implementata.
  • alert(messaggio): mostra una finestra con un messaggio di avviso;
  • blur(): sposta la finestra del browser dietro le altre, toglie il focus alla finestra;
  • clearInterval(id): cancella l'intervallo di tempo impostato per l'esecuzione di una funzione con setInterval() (che ritorna l'id da usare con clearInterval());
  • clearTimeout(id): cancella l'intervallo di tempo impostato per l'esecuzione di una funzione con setTimeOut();
  • close(): chiude la finestra;
  • confirm(domanda): mostra una finestra con una domanda, l'utente può rispondere alla domanda premendo uno dei due bottoni, "Ok" oppure "Annulla". Restituisce true se l'utente clicca su "Ok", altrimenti false;
  • focus(): porta la finestra in primo piano, davanti a tutte le altre;
  • moveBy(x,y): sposta la finestra di x pixel in orizzontale e y pixel in verticale;
  • moveTo(x,y): sposta la finestra collocando lo spigolo in alto a sinistra della stessa nel punto di coordinate x, y;
  • open(url, nome_finestra, proprieta): apre una nuova finestra facendola puntare all'url suggerito, se non viene fornito un nome per la finestra l'url viene aperto nella finestra corrente. La nuova finestra ha poi le proprietà descritte attraverso l'omonimo parametro passato alla funzione (si tratta di una stringa di valori, vedere le specifiche W3C). Questa funzione ritorna il riferimento all'oggetto window che visualizza la pagina aperta;
  • print(): avvia il processo di stampa della pagina;
  • prompt(messaggio,valore_predefinito): mostra una finestra con un messaggio di richiesta, permettendo all'utente di scrivere l'input. La finestra consente all'utente la pressione di uno dei tasti "Ok", "Cancella" oppure "Annulla". Un valore predefinito viene poi presentato all'utente (solitamente corrisponde a una breve descrizione del valore da digitare, che ovviamente viene poi sovrascritto dall'utente con il valore reale). Se passiamo il valore null a valore_predefinito, nessuna stringa di default sarà presente nella finestra. Questa funzione ritorna il valore digitato dall'utente se quest'ultimo clicca sul bottone "Ok", altrimenti torna il valore null se è stato premuto il bottone "Annulla";
  • resizeBy(larghezza,altezza): modifica le dimensioni della finestra aggiungendo o togliendo alla stessa i pixel indicati;
  • resizeTo(larghezza, altezza): modifica le dimensioni della finestra portando la stessa alla dimensione indicata;
  • scroll(x,y): effettua lo scrolling della pagina di x pixel in orizzontale e y pixel in verticale a partire dallo spigolo superiore sinistro della finestra;
  • scrollBy(delta_x,delta_y): effettua lo scrolling della pagina di un certo numero di pixel;
  • scrollTo(x,y): effettua lo scrolling della pagina portando la stessa in un punto preciso;
  • setInterval(funzione,intervallo): con questo metodo possiamo eseguire le istruzioni di una funzione ogni volta che passa l'intervallo di tempo indicato (che è espresso in millisecondi) . Questo metodo ritorna un codice identificativo che rappresenta l'avvenuta assegnazione ciclica (fra le istruzioni e il metodo), lo stesso codice che va poi usato con clearInterval() per rimuovere, quindi, l'esecuzione a tempo;
  • setTimeout(funzione,tempo): permette una sola esecuzione di una funzione una volta passato il tempo indicato (torna l'id dell'assegnazione ciclica);

martedì 20 luglio 2010

JavaScript e CSS: un menu a comparsa

L'uso combinato di JavaScript e CSS può generare effetti davvero interessanti, come il menu che vi propongo in questo breve articolo. Il codice che vi presento sfrutta una importante proprietà dei fogli di stile: visibility. Con visibility possiamo dire al browser se mostrare o meno un elemento della pagina, dipende dal valore assegnato alla proprietà che può essere Hidden (nascosto) o Visible (visibile). Attenzione, l'elemento nascosto occuperà in entrambi i casi lo spazio, come se fosse presente nella pagina. Se desiderate nascondere del tutto l'elemento è preferibile usare la proprietà display, fissandola al valore none. In questa pagina potete dare uno sguardo al foglio di stile usato.
Il menu viene generato attraverso più blocchi div, quello più esterno fa da contenitore ai blocchi per le sezioni e le voci del menu. Ognuno di questi è poi etichettato in maniera tale da appartenere a una classe di elementi. Le classi previste nel foglio di stile sono: menu, sezione, voci e voce.
Gli id assegnati agli stessi elementi detti sopra permettono al codice JavaScript (funzione getElementById) di cercare e modificare la proprietà visibility! L'accesso alla proprietà avviene infatti grazie alla chiamata a document.getElementById(id_element).style.visibility
All'interno della pagina html è possibile notare le funzioni JavaScript showLevel e hideLevel incaricate di nascondere e mostrare i livelli inferiori dei menu. Le funzioni mouseOn e mouseOut, invece, disegnano lo sfondo alla sezione e alle sue voci. Qui trovate un esempio del menu!

sabato 17 luglio 2010

JavaScript: gli eventi del mouse

L'interazione fra la il documento visualizzato dal browser e l'utente può avvenire attraverso il mouse e/o la tastiera. Possiamo sintetizzare gli eventi generati dal mouse distinguendoli da: eventi orientati ai clic del mouse e eventi orientati al movimento del mouse. Nella lista che segue sintetizziamo quelli generati dai clic del mouse:
  • onclick: cattura l'evento generato dal clic del mouse, può essere applicato a bottoni (di invio e reset), a collegamenti, a pulsanti radio e caselle di selezione;
  • ondbclick: cattura l'evento generato dal doppio clic del mouse, può essere applicato al corpo della pagina e ad altri elementi;
  • onmousedown: cattura l'evento generato dalla pressione, fissa, del tasto del mouse, può essere applicato al corpo della pagina e ad altri elementi;
  • onmouseup: cattura l'evento generato dal rilascio del tasto del mouse premuto, può essere applicato al corpo della pagina e ad altri elementi;
  • oncontextmenu: gli eventi fin qui visti erano tutti legati alla pressione del tasto sinistro del mouse. Questo evento cattura, invece, l'evento generato dal clic del tasto destro;
Ognuno di questi eventi può essere associato all'esecuzione di una funzione o comando JavaScript. Purtroppo non tutti i browser, a causa dell'aderenza con il modello a oggetti implementato e il DOM specificato dal W3C, riconoscono gli eventi detti sopra. Di seguito sintetizziamo, invece, gli eventi orientati al movimento del mouse:
  • onmouseover: genera l'evento quando il mouse è sopra un oggetto della pagina, può essere applicato ai pulsanti (di invio e reset), ai collegamenti, ai pulsanti radio, e alle caselle di selezione;
  • onmouseout: genera l'evento quando il mouse si è allontanato dall'elemento. Questo evento, quindi, segue l'evento onmouseover detto prima;
  • onmousemove: genera l'evento al movimento del mouse, può essere applicato al corpo della pagina;
La sintassi concessa a un evento per la chiamata di una funzione JavaScript è la seguente: evento="funzione()", (oppure evento="comando_javascript" per i comandi) da inserire nel tag dell'elemento! In questa pagina trovate un semplice esempio: "Grand Prix del mouse!" (il mio miglior tempo, al momento è di 5.28 secondi!). Come sempre vi invito a dare uno sguardo al codice JavaScript.

venerdì 16 luglio 2010

JavaScript: la gestione degli elementi e dei nodi, esempi

In questo articolo è stato descritto come gestire con JavaScript il modello a oggetti del documento, il DOM. In questo breve intervento vi segnalo qualche esempio che mette in pratica le funzioni JavaScript già illustrate. In questa pagina viene generata una lista dinamicamente, l'utente scrive le voci da aggiungere all'elenco (vengono creati nuovi nodi ed elementi). E' anche possibile eliminare la prima e l'ultima voce dell'elenco (sfruttando le proprietà lastChild e firstChild). In questa pagina, invece, uno script modifica il colore del testo di una tabella.

martedì 13 luglio 2010

JavaScript: DOM, Document Object Model

DOM realizza una rappresentazione ad oggetti di un documento HTML secondo le specifiche dettate dal W3C. Disporre di un modello ad oggetti del documento permette di realizzare in maniera assai più semplice la manipolazione degli elementi che lo compongono. Il DOM, pertanto, favorisce il DHTML (l'html dinamico)! Come spesso accade non tutti si adeguano subito agli standard. Nel caso del DOM, poi, alcuni browser ripropongono un loro modello ad oggetti del documento che spesse volte differisce dalle specifiche del W3C. Questo causa non pochi problemi a chi sviluppa pagine web poiché l'accesso a un elemento può avvenire, allora, in modo totalmente differente da quello previsto dal designer. JavaScript non implementa un modello a oggetti del documento, come alcuni pensano. Questo, come già detto poco fa, spetta ai browser. JavaScript offre, invece, un set di istruzioni per accedere agli elementi del documento, per manipolarne i contenuti e per aggiungerne altri. La buona riuscita di queste operazioni dipende proprio dall'aderenza che esiste fra il modello DOM implementato nella logica del browser e quello standard descritto dal W3C. Non a caso, quando si vuole verificare l'esistenza di un oggetto si procede solitamente invocando il metodo JavaScript e verificando quindi l'esito della chiamata. Se alcuni oggetti esistono allora il browser sta adottando il modello ad oggetti del W3C!
Per muoverci nel modello a oggetti del documento invocando la giusta funzione occorre fare un'importante distinzione, quella cioè fra element e node. Entrambi definiscono una componente del documento, più precisamente: con element (da ora in poi elemento) si intende un tag contenitore (come ad esempio il tag p per i paragrafi); con node (da ora in poi nodo) si intende, invece, un tag finale della struttura a oggetti. Un elemento può contenere altri elementi. La stessa cosa non può invece avvenire per un nodo. L'oggetto document contiene tutti gli elementi e i nodi della pagina.
JavaScript mette a disposizione due comode funzioni per rintracciare un elemento della pagina:
  • getElementById('id_elemento'): permette di rintracciare un elemento del documento, se presente, basandosi sul valore dato all'attributo univoco id;
  • getElementsByTagName('nome'): permette di rintracciare un elemento del documento, se presente, basandosi sul valore dato all'attributo name;
A differenza di getElementById che restituisce un solo valore (se presente), la funzione getElementByTagName ritorna un array con gli elementi trovati! L'accesso a un elemento dell'array può poi avvenire sia secondo le regole previste da JavaScript (e quindi con array[indice]), oppure in base a una nuova sintassi introdotta dal W3C: array.item(indice).
Le proprietà e i valori delle proprietà degli elementi possono essere manipolate con i seguenti metodi:
  • getAttribute(nome_proprietà);
  • setAttribute(nome_proprietà,valore_proprietà);
  • removeAttribute(nome_proprietà);
La gestione dei nodi è assai più articolata, l'intero set di nodi contenuti in un elemento può essere ricavato attraverso la funzione childNodes che ritorna un array di nodi! Con firstChild e lastChild accediamo rispettivamente al primo e all'ultimo nodo dell'array. Per spostarci lungo la gerarchia dei nodi disponiamo dei metodi nextSibiling, previousSibiling e parentNode che ritornano rispettivamente il fratello minore, maggiore e il padre del nodo.
Per creare nuovi elementi e nuovi nodi disponiamo dei metodi:
  • createElement('nome_TAG'): crea un elemento con nome nome_TAG, ritorna un riferimento al tag creato;
  • createTextNode('testo'): crea un node contenente il testo passato alla funzione, ritorna un riferimento al nodo creato;
Come facciamo ad aggiungere nuovi nodi al documento?
Ecco una lista di funzioni JavaScript per la gestione dei nodi:
  • appendChild(nuovo_nodo): il nodo nuovo_nodo viene aggiunto alla fine dell'array;
  • insertBefore(nuovo_nodo,nodo_da_precedere): il nodo nuovo_nodo viene aggiunto prima del nodo nodo_da_precedere;
  • replaceChild(nuovo_nodo,vecchio_nodo): il nodo nuovo_nodo sostituisce il nodo vecchio_nodo;
  • removeChild(nodo_da_cancellare): il nodo nodo_da_cancellare viene eliminato;
A questo link trovate le specifiche per il modello DOM, ormai giunto alla terza revisione (e per questo motivo detto DOM Level 3).

venerdì 9 luglio 2010

JavaSendMail con le API JavaMail

Dopo aver descritto le API JavaMail in questo articolo ho realizzato un semplice client per l'invio di e-mail, JavaSendMail.


Avendo abilitato l'opzione mail.debug ed effettuato il redirect dell'output per la console nella variabile infoArea (di tipo JTextArea) è possibile vedere nella parte inferiore della finestra (quella in grigio) i comandi scambiati fra l'API e il server SMTP! Il riquadro rosso nella stessa figura testimonia l'invio del messaggio. Così come questi screenshot che testimoniano la ricezione del messaggio:



JavaSendMail può essere scaricato a questo indirizzo. Il file zip contiene la cartella dist generata da NetBeans IDE per la distribuzione del programma. All'interno trovate, oltre al file jar dell'applicazione, anche le librerie usate (activation.jar e mail.jar). Nella cartella src trovate invece il codice sorgente dell'applicazione. Come sempre, copiate, modificate e distribuite!

giovedì 8 luglio 2010

API JavaMail

JavaMail è un API che con l'aiuto di JavaBeans Activation Framework (JAF) permette l'accesso all'ormai famoso servizio per la posta elettronica. Si tratta di un package opzionale che, sfruttando i servizi di rete offerti dai livelli sottostanti, consente di inviare e ricevere l'email. L'obiettivo principale di JavaMail è la realizzazione di un accesso al servizio indipendente dai protocolli sottostanti, realizza cioè un'interfaccia al servizio.
Nella prima parte di questo articolo ci occuperemo di richiamare le funzioni dei protocolli di rete usati per il servizio della posta elettronica, quindi passeremo a una breve presentazione delle classi che compongono il package. Al termine di questa prima parte sarà quindi possibile usare il package per scrivere semplici programmi.
Nella seconda parte vedremo un uso più avanzato della libreria.
E' giunto il momento di rivedere i principali protocolli di rete usati da JavaMail: SMTP, POP ed IMAP. Ciò non può che essere di aiuto per la comprensione di tutto quello che faremo a breve con l'API. E' opportuno ricordare che ogni protocollo di rete è stato ideato per precisi scopi ed implementa di conseguenza le dovute funzionalità. Pertanto, se una funzione non viene in alcun modo realizzata presso i protocolli di rete è inutile chiedere a JavaMail di fare il miracolo!

SMTP
Il protocollo SMTP (Simple Mail Transfer Protocol) definito nell'RFC 821 si preoccupa della consegna, quindi dell'invio, dei messaggi. Quando inviamo un messaggio di posta elettronica il nostro client dialoga con il server SMTP del provider.

POP
Il protocollo POP (Post Office Protocol) definito nell'RFC 1939 permette la lettura dei propri messaggi di posta elettronica. Se vogliamo prelevare la nostra posta elettronica dobbiamo necessariamente dialogare con un server POP (attualmente giunto alla versione POP3).

IMAP
Il protocollo IMAP (Internet Message Access Protocol) definito nell'RFC 2060 permette la ricezione della posta elettronica. IMAP è più evoluto di POP3, anche se aggiunge più lavoro al server!

MIME
MIME non è un vero e proprio protocollo di rete, l'acronimo sta per Multipurpose Internet Mail Extensions. Viene usato da JavaMail e non potevo non menzionarlo! Esso definisce la struttura dei messaggi, i contenuti, gli allegati, etc...

Installazione di JavaMail
Esistono due versioni di JavaMail. Una di queste è parte integrante della piattaforma J2EE (assicuratevi di avere il file j2ee.jar), JavaMail risulta quindi già installato. Se invece state usando una versione di JDK che non dispone del supporto alle applicazioni enterprise (quelle di J2EE) è possibile scaricare l'API JavaMail a questo indirizzo (per la versione 1.4.3).
Come già detto all'inizio per usare JavaMail vi occorre anche JAF, che trovate qui.
Per l'installazione vanno estratti entrambi i file compressi, le cartelle generate dall'operazione di estrazione vanno poi spostate nella cartella /CARTELLA_INSTALLAZIONE_JDK/jre/lib/ext/. Se volete potete anche modificare la variabile d'ambiente per Java e aggiungere, quindi, le nuove cartelle. Nella cartella demo di JavaMail è possibile trovare diversi file di esempio.

Le classi dell'API
Prima ancora di vedere un programma completo ho preferito descrivere sommariamente le principali classi che compongono l'API, queste sono: Session, Message, Address, Authenticator, Transport, Store e Folder. Tutte nel package javax.mail.

Session
La classe Session descrive una sessione utile all'invio o ricezione di messaggi di posta elettronica. La nostra applicazione che fa uso di JavaMail dovrà sempre istanziare un oggetto Session e caratterizzarne le proprietà. Le informazioni che caratterizzano un oggetto Session vengono passate attraverso l'oggetto Properties, della classe java.util. Poiché i costruttori della classe sono privati è possibile ottenere un oggetto Session mediante il metodo getDefaultInstance():

Properties props=new Properties();
Session session=Session.getDefaultInstance(props, null);

Il valore null passato al metodo va a un eventuale oggetto Authenticator che per adesso non usiamo. Un utile metodo di questa classe è il metodo setDebug(boolean debug) che permette di vedere o meno la sequenza di comandi scambiata con il server. Per caratterizzare una sessione occorre prima definire i valori di nuove proprietà, ad esempio con:

String host = "smtp.tiscali.it";
props.put("mail.smtp.host",host);

impostiamo il server SMTP da contattare. Il metodo setProperty(String key, String value) imposta il valore value alla chiave key. Ecco un elenco di alcuni dei dei possibili valori di key:
  • mail.debug: può essere true oppure false (valore di default) e abilita la modalità di debugging;
  • mail.user: una stringa con il nome utente da usare quando l'API contatta il server per la posta elettronica;
  • mail.from: una stringa con l'indirizzo dell'utente (che può essere aggiunto al messaggio con il metodo setFrom());
  • mail.smtp.host: una stringa con l'indirizzo del server SMTP;
Qui trovate una lista completa di valori. Se impostiamo una o più proprietà va poi chiamato il metodo getInstance(Property props) per costruire un oggetto Session con quelle caratteristiche!

Message
Con la classe Message descriviamo il messaggio da inviare (contiene il testo dell'email). Siccome Message è una classe astratta nei programmi si avrà a che fare con una delle sue sottoclassi. Una di queste è la classe MimeMessage, definita in javax.mail.internet. Come avete ben capito la classe MimeMessage rispetta lo standard descritto dal protocollo MIME. Per creare un oggetto Message, a partire da un oggetto Session, si ha queste sequenza di istruzioni:

MimeMessage message=new MimeMessage(session);
message.setContent("Hello world!","text/plain");

dove con il metodo setContent(Object o, String type) ho impostato il contenuto e l'attributo MIME. E' possibile indicare anche solo il contenuto in questo modo:

MimeMessage message=new MimeMessage(session);
message.setContent("Hello world!");

Per specificare il campo subject dell'email esiste il metodo setSubject(String subject):

message.setSubject("An \"Hello world!\" e-mail!");

Altri metodi della classe MimeMessage si trovano in questa pagina.

Address
Con la classe Address possiamo costruire oggetti capaci di descrivere un indirizzo di posta elettronica. Anche la classe Address, così come Message, è una classe astratta. Gli oggetti Address vengono allora costruiti attraverso una delle sue sottoclassi, come la classe InternetAddress in javax.mail.internet.

Address fromAddress=new InternetAddres("writer@domain.site");
Address toAddress=new InternetAddres("user@domain.site");

Se vogliamo far apparire un nome al posto dell'indirizzo (che va sempre indicato) possiamo allora usare una variante del metodo visto prima:

Address fromAddress=new InternetAddres("writer@domain.site","Luca");

L'aggiunta di questi oggetti al messaggio avviene con i metodi setFrom(), che imposta l'header From del messaggio, e addRecipients(Message.RecipientType type, Address[] addresses), che imposta invece l'header To. Quest'ultimo metodo permette l'invio multiplo del messaggio a più utenti. Possiamo costruire un array di indirizzi e passare la struttura al metodo! Possibili valori di type sono: Message.RecipientType.TO, Message.RecipientTypeCC (indirizzo a cui inviare una copia carbone del messaggio) e Message.RecipientType.BCC (indirizzo nascosto a cui inviare una copia del messaggio). Ecco un esempio:

Address toAddress=new InternetAddress("mrRed@color.rgb");
Address ccAddress=new InternetAddress("msRed@color.rgb");
message.addRecipient(Message.RecipientType.TO, toAddress);
message.addRecipient(Message.RecipientTypeCC, ccAddress);

Attenzione, l'API non prevede alcun meccanismo per convalidare un indirizzo di posta elettronica! Si potrebbe costruire qualcosa usando le espressioni regolari.

Authenticator
La classe Authenticator permette l'accesso a servizi protetti da password e che richiedono quindi una forma di autenticazione. Attenzione, la classe Authenticator di java.net è diversa da quella in javax.mail (pur avendo lo stesso nome, proprio per questo si trovano in package differenti!). Se un servizio di posta elettronica richiede il riconoscimento dell'utente è importante, allora, implementare il metodo getPasswordAuthentication(), che crea un oggetto PasswordAuthentication contenente il nome dell'utente e la sua password per accedere al servizio.

Authenticator authenticator = new Authenticator();
Session sessione = new Session.getdefaultInstance(properties,authenticator);

Trovate qui altre informazioni.

Transport
La classe Transport rende possibile l'invio del messaggio fin qui costruito. Il metodo che permette di inviare il messaggio è:

Transport.sendMessage(messagge);

Viene usato di default il protocollo SMTP. Attenzione, il metodo lancia un eccezione di tipo MessagingException. Se voglio invece caratterizzare l'invio del messaggio disponiamo poi di altri metodi.

Store e Folder
La classe Store si preoccupa della ricezione dei messaggi di posta elettronica, realizzando la connessione al server. I messaggi vengono poi organizzati all'interno di cartelle, modellate con oggetti della classe Folder. Approfondiremo ulteriormente queste due classi in seguito.

Esempio: inviare un e-mail
import java.util.*;
import javax.mail.*;
import javax.mail.internet.*;
import javax.activation.*;

public class Invio {
   public static void main(String[] args) {
      String to="user@domain.site";
      String from="writer@domain.site";
      String host="smtp.server.site";
      Properties props = new Properties();
      props.put("mail.smtp.host",host);
      props.put("mail.debug","true");
      Session session=Session.getInstance(props);
      try {
         Message msg=new MimeMessage(session);
         msg.setFrom(new InternetAddress(from));
         InternetAddress[] address ={new InternetAddress(to)};
         msg.setRecipients(Message.RecipientType.TO, address);
         msg.setSubject("An \"Hello World e-mail\"!");
         msg.setSentDate(new Date());
         msg.setText("Hello world!");
         Transport.send(msg);
      }
      catch (MessagingException mex) {
         mex.printStackTrace();
      }
   }
}

martedì 6 luglio 2010

CSS: un menu che sfrutta l'effetto hover

Le specifiche del W3C prevedono per i link i seguenti stati: active (attivo), visited (già visitato) e hover (la freccia del mouse è sopra il link). Questa importante distinzione fra gli stati di un link ci permette di personalizzare nel foglio di stile l'aspetto del link! Nell'esempio che vi propongo realizzeremo un semplice menu, con più voci.
L'elenco dei collegamenti del nostro menu è realizzato con elementi li, appartenenti alla lista non ordinata ul. Per poter descrivere lo stile delle voci che inseriremo nella lista forniamo questa prima regola:

#menu {
 list-style: none;
 font-family: arial;
 font-size: 12px;
}

che oltre a descrivere le proprietà per il testo deseleziona l'elemento stilistico che solitamente precede una voce dell'elenco (di solito un disco pieno). La lista contiene uno o più elementi li, ogni voce dell'elenco inizia tuttavia su una nuova riga. In altre parole l'elemento li è un elemento di blocco, pertanto se siamo interessati ad avere un menu orizzontale dobbiamo necessariamente dare questa regola:

#menu li {
 display: inline;
}

Dopo questa regola, l'elemento li diventa un elemento in linea! Procediamo nella stesura del foglio di stile, ogni elemento li conterrà un link (tag a) alla pagina del sito. Come deve essere formattato questo tag?

#menu li a {
 text-decoration: none;
 padding: 5px;
 color: #000066;
}

Qui ho deciso di non applicare nessuna decorazione al testo, che per un link consiste di default in una linea che sottintende il testo. Cosa deve avvenire quando la freccia del mouse passa sul link?

#menu li a:hover {
 border-bottom: red solid 4px;
 color: #0000fd;
}

Il testo assume una tonalità più chiara rispetto al colore di base e una linea spessa sottolinea la voce puntata dal mouse. Per rendere l'aspetto del menu più piacevole ho poi aggiunto una linea orizzontale, spostata in maniera tale da coincidere (qualche pixel più in giù) con la linea che compare al passaggio del mouse sul link.

#cornice hr {
 border-width: 0;
 height: 2px;
 color: red;
 background-color: red;
 margin: -5px;
}

L'effetto noshade (una proprietà del tag hr) dell'html è stato deprecato dal W3C, che adesso consiglia di usare il foglio di stile per ottenere una linea senza ombreggiatura. Qui è possibile vedere il foglio di stile completo, questa inveca è la pagina html con il menu.

lunedì 5 luglio 2010

JavaScript: cookie

L'HTTP, il protocollo usato per muovere le pagine web dai server ai client, è un protocollo senza stato (state-less). Ogni richiesta di pagina al server, avverrà come se il client contattasse il server per la prima volta! Questo significa che se in precedenza abbiamo già compilato i campi di un form ci tocca inserire di nuovo gli stessi valori se accediamo nuovamente a quella pagina!
Netscape, per dare memoria ai browser e ai server, inventò allora i cookie: piccoli file di testo memorizzati sul computer dell'utente e usati dai browser per ripristinare valori già scritti dall'utente (come ad esempio i campi dati relativi a nome utente e opzioni varie).
Il contenuto di un cookie prevede: una o più coppie nome-valore/i per i dati da memorizzare, una data che indica la scadenza del cookie, il dominio di appartenenza del cookie (il nome e il valore non possono contenere i caratteri: punto e virgola, virgola e spazio). Alla richiesta di una pagina web il cookie, se presente, viene allora aggiunto all'header HTTP sicché un programma lato server ne analizzerà il contenuto per poi applicare i vecchi valori alla pagina richiesta. La gestione dei cookie spetta dunque ai browser, che ne permettono sia la consultazione (quasi sempre incomprensibile per chi legge) che l'eliminazione.
Sono molte le tecnologie per il web che fanno ormai uso dei cookie e fra queste vi è anche JavaScript. Per JavaScript un cookie è una proprietà dell'oggetto document. Questo significa che per assegnare al documento un cookie è sufficiente scrivere una stringa di valori alla proprietà cookie. E' il programmatore a stabilire il significato e l'ordine dei valori nella stringa! Ad esempio:

document.cookie="name=valore1:valore2:...;proprietà1...;";

La proprietà expires imposta la data di scadenza per il cookie, che se non presente obbliga il browser a cancellare il cookie alla chiusura dello stesso. Il formato atteso è quello UTC, usare il metodo getUTCDate().
La proprietà path indica la pagina web a cui è associato il cookie. Di default un cookie viene applicato anche alle pagine gerarchicamente inferiori. Se si vuole invece far valere un cookie a tutte le cartelle e/o pagine del sito si deve allora indicare path="/".
La proprietà domain indica il nome del sito (quindi il dominio) a cui è associato il cookie. Se un sito è strutturato su più server web (ad esempio uno per ogni lingua), per far valere il cookie a tutti i server va impostato path="" e domain="dominio_sito".
L'ultima proprietà che vi presento è la proprietà secure che riceve un valore booleano (quindi true oppure false) per abilitare o meno la trasmissione dei cookie su un protocollo sicuro quale è HTTPS.
I cookie possono essere creati, letti e cancellati attraverso istruzioni JavaScript! Una delle prime proprietà da dare al cookie è il suo nome, in questo modo ci assicuriamo la creazione di un cookie univoco valido all'interno del nostro dominio. Si consiglia inoltre di usare la funzione escape() ogni volta che assegniamo un valore a un cookie (soprattutto se lo raccogliamo da un form). Questa funzione, infatti, ci permette di usare alcuni caratteri altrimenti inutilizzabili! Quando leggiamo il cookie non dimenticate di usare la funzione unescape(), per ripristinare la stringa!
Ecco una pagina di esempio (osservate il codice JavaScript all'interno della pagina, per facilitare il compito alla funzione split() ho separato i valori con un opportuno carattere!). E' preferibile non salvare nel cookie informazioni preziose, come ad esempio la password per l'accesso a un servizio. Perché?


Attraverso la gestione dei cookie del browser è possibile leggerne il contenuto, che non dovrebbe essere mai in chiaro!

venerdì 2 luglio 2010

Linux: installazione di MySQL

In questo breve articolo vi propongo l'installazione di MySQL su Xubuntu 9.10 (e Ubuntu in generale) e la risoluzione di alcuni possibili errori. Come sempre preferisco procedere attraverso la riga di comando. MySQL si compone di un client e di un server, ecco quindi che per l'installazione occorre dare il seguente comando:

sudo apt-get install mysql-server mysql-client

Nei repository di Ubuntu è presente la versione 5.1 di MySQL. Chi vuole può anche provare l'installazione del pacchetto mysql-navigator, che fornisce un interfaccia grafica ai database (il cui sviluppo è tuttavia fermo da tempo). Durante la fase di configurazione di MySQL ci verrà presentata una schermata come quella che segue:


L'installer ci sta chiedendo di digitare la password per l'account root che userà MySQL (per sicurezza ci verrà chiesto due volte). Dopo l'installazione il server di MySQL viene eseguito di default ed è quindi in attesa di connessioni al database. Possiamo allora avviare una sessione con il client di MySQL digitando il seguente comando: mysql -u root -p, dove con l'opzione -u si specifica il nome dell'utente e con -p si dice al client che verrà indicata la password per l'account su una riga a parte (con mysql --help si ottiene un elenco dei comandi per il client). Ecco un'immagine:


Per fermare il server MySQL va lanciato il comando sudo /etc/init.d/mysql stop, per avviarlo sudo /etc/init.d/mysql start e per riavviarlo sudo /etc/init.d/mysql restart. Veniamo a qualche errore (noto) che si può presentare usando MySQL.
L'errore "Could not start service MySQL. Error:0" si verifica quando è in esecuzione un servizio con lo stesso nome, MySQL appunto. Può ad esempio capitare quando riavviamo il server e il precedente processo non si è ancora chiuso (oppure non si chiude). Se la situazione permane, pur aspettando, si consiglia di disinstallare MySQL e di ripetere l'installazione.
L'errore "ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)" si verifica quando la password digitata nel client non è quella nota al server di MySQL.


Sicuri di ricordare bene la password? Sicuri di averla inserita in fase di installazione? In quest'ultimo caso provate a premere "Invio" quando vi viene chiesta la password, se funziona allora la password non era stata impostata!
Se non riuscite a ricordare la password inserita durante l'installazione è possibile ripristinarne il valore in questo modo: dare prima il comando sudo killall mysqld (per terminare il processo) e successivamente mysqld --skip-grant-tables (che avvia il processo daemon senza le tabelle per i permessi), attendere che le scritte sul terminale si stabilizzino e lasciare aperta questa finestra di terminale; aprire una nuova finestra e avviare il client MySQL con mysql; nella finestra appena aperta collegarsi al database di nome mysql con il comando use mysql; (ogni istruzione MySQL termina con un punto e virgola); aggiornare il campo password dell'utente con UPDATE user SET password=password("ciao") WHERE user="root"; (che imposta come password per l'utente root la stringa ciao); per finire date i comandi flush privileges; ed exit, (chiudete la prima finestra, quella bloccata). Ecco qualche immagine di supporto, qui potete vedere la finestra bloccata:


Questa, invece, è la finestra usata per collegarsi al client di MySQL per impostare la nuova password:

Free Music Instrument Tuner

Vi segnalo questo prezioso programma (oltre a fare una nota personale) per accordare strumenti musicali con Linux, si chiama Free Music Instrument Tuner (fmit) e lo trovate nei repository di Ubuntu. L'installazione avviene con sudo apt-get install fmit e produce un nuovo collegamento nella sezione "Multimedia" del menu delle applicazioni. La pagina che promuove il software è questa. Ho avuto modo di provare questo programma per accordare la mia chitarra e quella di altri, fa veramente quello che promette!

giovedì 1 luglio 2010

Java: ColorRes


Si tratta di un piccolo ma utile programma per la lettura dei resistori. E' sufficiente indicare i colori delle bande presenti sul componente per ricavarne immediatamente il valore della resistenza. Il programma è stato realizzato con NetBeans IDE. Vi segnalo il link per il download.