Archivio » 2003 » giugno » mercoledì 11 »

Con ClearLook l’interfaccia utente diventa più semplice

Scritto da Michele Costabile

Come rendere più gradevoli e soprattutto funzionali i programmi scritti in Java? Con il toolkit ClearLook, in grado di intercettare gli errori più comuni.

Quanti programmi abbiamo visto, scritti in Java, con una bruttissima interfaccia utente? Non si tratta di una maledizione del linguaggio, ma è il toolkit grafico che non ha una predisposizione naturale per produrre layout visuali allo stato dell’arte. Ecco un tool che permette di guidare le classi della libreria Swing verso l’eccellenza.

Uno studio della Stanford Web Credibility Research (pubblicato su www.webcredibility.org) mostra con chiarezza che il 46,5% degli intervistati giudica l’autorevolezza di un sito dalla qualità dell’impostazione grafica, della scelta dei colori e dell’impaginazione. Il resto inizia dal secondo posto.

Diciamolo, sicuramente questo è un déja vu per la maggior parte dei professionisti: l’espressione sconfortata del cliente di fronte ad un’applicazione perfettamente funzionante, ma non ripulita nella grafica. A volte può anche esserci un secondo episodio, stavolta trionfante, con un’applicazione identica, ma passata per le mani dell’esperto di interfacce utente. Molti programmatori lo trovano avvilente, addirittura contro natura. La nobiltà e l’eccellenza di un programma stanno nella qualità della sua costruzione concettuale, nella precisione degli algoritmi e nel fatto che serva a qualcosa e faccia il suo compito in modo competente.

		Attivando la modalità di debug di ClearLook si vedono subito gli elementi di interfaccia rimossi da ClearLook. Confrontando l’immagine con le precedenti si riconoscono i bordi che sono stati eliminati.

Vero, anzi verissimo, eppure, se un tempo un programmatore iniziava una nuova applicazione aprendo un editor di testi e scrivendo del codice, oggi, dopo la rivoluzione copernicana di Visual Basic 1.0, più facilmente si inizia disegnando una form con un Ide. L’orientamento verso il look al primo posto è riflesso dai nostri stessi strumenti di lavoro, al punto che quando un programmatore cresce oltre l’applicazione per il desktop deve fare una seconda rivoluzione copernicana per arrivare a vedere e apprezzare l’estetica della struttura del codice, un’estetica elfica con poco appiglio, se non presso i matematici. Ci vogliono lunghe spiegazioni per fare apprezzare a un utente come l’organizzazione interna delle classi e l’uso di certi pattern rende pulito e logico il drag and drop o semplifica la distribuzione in rete dei componenti, ma il disegno delle componenti grafiche, la saturazione e l’assortimento dei colori, l’impostazione dei caratteri, la pesantezza dei bordi e delle ombreggiature e l’organizzazione generale dell’interfaccia sono percepite a prima vista da chiunque.

Insomma, se facciamo mente locale alla prima impressione che dà una utility appena scaricata dalla rete o dal Cd allegato a una rivista, l’estetica c’entra eccome nel formare la prima reazione.

		ClearLook è il nome di una tecnologia esclusiva di jGoodies per risolvere automaticamente i problemi più comuni. ClearLook, cioè, mette in pratica un insieme di regole che sono state riconosciute nella pratica quotidiana di correzione delle interfacce utente.

Un programma con comandi ben disposti, icone chiare e buona organizzazione del contenuto testimonia qualcosa sulla professionalità di chi lo ha fatto. Può benissimo capitare di trovare un ottimo e utile programma con una pessima estetica, ma spesso si tratta del lavoro di un esperto di un settore particolare, ad esempio la compressione di video, con uno scarso interesse per gli altri aspetti della programmazione.

Quando un programma viene da un’azienda “vera” ed è quindi il prodotto di un gruppo e di un processo cooperativo, la disattenzione per la resa dell’interfaccia dice che nel gruppo di lavoro manca il tempo, l’attenzione al dettaglio o la capacità di produrre un risultato migliore, e questo può essere benissimo un giudizio di merito.

Karsten Lentzsch, il fondatore di jGoodies, ha attirato la prima volta la nostra attenzione in una discussione nei forum di Eclipse sul rapporto fra il toolkit scelto, cioè lo Swt o il toolkit standard di Java 2, e il risultato grafico. L’oggetto del contendere era il seguente: l’interfaccia di Eclipse, veloce, bella e ben congegnata, sarebbe stata, secondo alcuni partecipanti alla discussione, una dimostrazione plateale della superiorità del toolkit Swt rispetto alle classi Swing di cui Sun ha dotato la libreria Java. Un’altra parte degli intervenuti sosteneva che le classi Swing possono benissimo produrre interfacce utente pulite a condizione che la programmazione di tutti i dettagli di una maschera sia fatta in modo intelligente.

Occorre ricordare, per vedere meglio la radice del dibattito, che la libreria Swing ha la caratteristica di essere scritta completamente in Java utilizzando al minimo il toolkit nativo di ogni sistema.

Una caratteristica di progetto, qualificante secondo alcuni aberrante secondo altri, è la separazione del comportamento degli elementi di interfaccia dalla rappresentazione visuale e la realizzazione in Java di tutta la funzionalità.

Grazie a questa struttura, si ottiene una funzione chiamata pluggable look and feel, che consente di optare per un look and feel alternativo a run time permettendo agli utenti di scegliere in qualsiasi momento fra un aspetto Unix, Windows, Macintosh o un’estetica originale fatta su misura

L’emulazione del comportamento ha i suoi difetti; ad esempio, un adeguamento imperfetto alle preferenze dell’utente o un aspetto Windows 98 su XP, errori che danno a un’applicazione Java un aspetto leggermente straniero.

		Le versioni più costose del toolkit di jGoodies sono accompagnate dai sorgenti di un’applicazione di esempio chiamata Skeleton. Possiamo anche scaricare il programma dal sito del produttore per farci un’idea del risultato finale prima dell’acquisto. La versione Pro di Skeleton sfrutta tutti i trucchi, come i pannelli in rilievo in stile Eclipse e mostra una finestra di aiuto dinamico nello stile di Visual Studio .NET.

Le Swing offrono anche un look and feel indipendente dalla piattaforma, che è anche solitamente il default, chiamato Metal. Il look Metal però è parecchio pesante, è caratterizzato da spazi troppo ampi e un numero eccessivo di bordi.

Tutti questi difetti generano parecchia insoddisfazione fra gli sviluppatori e costituivano la benzina del dibattito nel forum di Eclipse di cui dicevamo.

Lentzsch, non solo ha sostenuto il suo punto a favore delle classi Swing, ma ha messo a disposizione sul sito www.jgoodies.com un’applicazione, chiamata Metamorphosis, che evolveva in cinque passi partendo da una “Franken UI” (presumibilmente un’interfaccia utente bella e ben assemblata come il mostro di Frankenstein) pesante e sgradevole, fino a imitare perfettamente Eclipse grazie ad un’impostazione precisa delle proprietà dei diversi elementi di interfaccia e piccoli interventi per aggiustare i numerosi dettagli. Un esempio è sicuramente più espressivo e conclusivo di un libro o un ciclo di conferenze e ha fissato indiscutibilmente il punto: con attenzione e impegno si possono ottenere risultati eccellenti. Ne segue che il potenziale delle swing non è normalmente sfruttato a dovere. Rimane però il fatto che nulla ripara il programmatore dal realizzare al primo tentativo una Franken UI orripilante, sicuramente non gli strumenti di sviluppo. C’era insomma uno spazio di mercato vuoto in cui si colloca un ventaglio di proposte da parte di jGoodies per chi vuole rifarsi il look senza abbandonare Java.

Looks Standard

Looks Standard è un pacchetto entry level proposto da jGoodies. All’interno di Looks Standard troviamo jGoodies Windows Look and Feel, un raffinamento dell’emulazione di Windows da parte delle classi della libreria Swing che offre un’emulazione precisa su tutte le versioni del sistema operativo Microsoft da Windows 95 fino a XP. Incorporando la libreria di jGoodies nel proprio prodotto, cosa che secondo la documentazione richiede solo cinque righe di codice, si può dare alla propria applicazione un aspetto più consistente dal punto di vista dei menu, dello schema di colori della dimensione degli elementi di interfaccia onorando le impostazioni di sistema e tenendo conto della risoluzione del display.

Looks Standard comprende anche un Look and Feel alternativo, chiamato Plastic, che non sfigura su un desktop Windows XP ed è progettato in modo da usare dimensioni degli oggetti visuali, font e dimensioni progettati in modo da integrarsi armonicamente con un desktop MacOS X. Il look and feel Plastic è presente in due versioni (standard e tridimensionale) e in diciotto temi diversi.

L’aspetto delle interfacce create con la libreria Looks Standard è, secondo le specifiche del produttore, consistente indipendentemente dal fatto che si usi un Jdk 1.3.x, 1.4.x o 1.4.1.

Un’altra tecnologia molto interessante incorporata nella libreria si chiama ClearLook. Secondo l’autore, ClearLook applica un insieme di regole per risolvere gli errori più comuni di progettazione. Un caso comune è la nidificazione di componenti senza l’eliminazione dei bordi superflui, secondo la filosofia “Use less ink” (usare meno inchiostro) dell’autore del prodotto. ClearLook può agire in modo silente, scrivere sull’output le decisioni prese oppure evidenziare sul video in colori forti le decorazioni da eliminare.

Dal sito del produttore si può scaricare un’applicazione dimostrativa, chiamata Looks Demo, che permette di sperimentare in proprio le numerosissime variazioni di aspetto e comportamento delle interfacce utente possibili con Looks Standard. Vale sicuramente la pena di sperimentare in proprio le variazioni più sottili, che probabilmente sul monitor escono più che sulla carta stampata. Looks Professional

Looks Professional aggiunge al contenuto del pacchetto Standard il codice sorgente, una libreria di componenti originali e lo scheletro di un’applicazione da cui partire. Il pacchetto Professional dà diritto anche al supporto telefonico o per posta elettronica per 60 giorni e ad un anno di aggiornamenti gratuiti. Una versione compilata dello scheletro di applicazione fornita con Looks Professional può essere scaricata liberamente dal sito del produttore.

Swing Suite

Swing Suite è la versione più completa del prodotto di jGoodies. Al corredo della versione precedente si aggiungono elementi di interfaccia standard precostituiti, come splash screen, accettazione della licenza, suggerimento del giorno. Troviamo anche una libreria per la creazione di grafici e un framework per le animazioni.

Conclusioni

In un mondo ideale la libreria Swing dovrebbe dare risultati migliori in configurazione normale e gli strumenti di disegno di interfacce dovrebbero rimuovere bordi ridondanti e altri errori visuali in fase di progetto. Nel mondo con cui abbiamo a che fare questa settimana e le prossime, probabilmente conviene mettere mano al portafoglio per contribuire ad un mondo più bello con l’interfaccia utente della nostra applicazione.

Se il budget proprio non lo permette, vale la pena comunque di scaricare le applicazioni di esempio dal www.jgoodies.com, in particolar modo Metamorphosis, e studiare per bene tutti i dettagli che trasformano il brutto anatroccolo di un dilettante nel cigno di un professionista. L’analisi del comportamento di ClearLook in modalità di debug dà buone indicazioni su cosa andare a cercare ed eliminare nel proprio ambiente di disegno visuale. Sottolineiamo di passaggio che da jgoodies.com si possono scaricare anche due applicazioni interessanti, che oltre a mostrare cosa si può ottenere con Java, possono anche rendersi utili.

La prima, chiamata, jDiskReport mostra la percentuale di disco occupato da file e directory. Navigando attraverso la struttura ad albero che rappresenta il file system, i grafici a torta si aggiornano per mostrare chi è responsabile del maggiore consumo di disco, inoltre si possono visualizzare i primi cento file per dimensione e la dispersione delle dimensioni dei file. L’altra applicazione interessante è jPathReport, che visualizza in modo analogo l’occupazione di disco da parte delle classi Java a disposizione nel classpath o in un archivio jar. Entrambe le applicazioni mostrano un’interfaccia utente curata e piacevole. In particolare, jPathReport mostra diverse influenze del disegno di Windows XP nella finestra principale.


ClearLook
A partire da dollari 185

Prezzi: I prezzi, in dollari sono indicati per singolo sviluppatore, quattro licenze singole e licenza illimitata. Looks Standard: ($ 185, $ 385, $ 795); Looks Professional: ($ 385, $ 795, $ 1.625); Swing Suite: ($ 1.125, $ 2.455, $ 3.875).

Produttore: JGoodies, Germania; Email: info@jgoodies.com.