In particolare io ho dovuto limitare il numero di funzioni presenti sulle barre degli strumenti (molti non mi servivano ed occupavano spazio inutilmente). Per farlo potete mettere nel file config.js all’interno della già presente funzione “CKEDITOR.editorConfig = function( config ) {“ tutto ciò che segue:

// This is actually the default value.
config.toolbar_Full =
[
    ['Source','-','Save','NewPage','Preview','-','Templates'],
    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
    '/',
    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    ['Link','Unlink','Anchor'],
    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
    '/',
    ['Styles','Format','Font','FontSize'],
    ['TextColor','BGColor'],
    ['Maximize', 'ShowBlocks','-','About']
];

Lo slash (‘/’) indica un “a capo” fra le barre, il trattino (‘-’) indica una spaziatura fra le barre. I nomi credo non serva commentarli. Eliminate, spostate o aggiungete, dunque, tutto quello che volete in base alle vostre specifiche esigenze.

Qui non voglio discutere della progettazione, che mi pare troppo specifica al caso trattato. Parlerò invece delle scelte che andrò ad effettuare circa i singoli componenti legati all’interfaccia utente. Ritengo infatti che per rendere questa soluzione efficace sia necessario fornire il miglior supporto possibile a chi lo sta utilizzando che potrebbe trovarsi di fronte al cliente al quale deve dare risposte immediate e precise.

Giusto per mettere qualche paletto, il sistema sarà basato su uno schema MVC nel quale Model e Controller saranno realizzati in JAVA (J2EE) mentre la View sarà prodotta in HTML usando pagine JSP (utilizzerò componenti EJB ed il framework Struts).

Tornando all’interfaccia utente l’idea è quella di integrare componenti AJAX per svolgere tutte le principali funzionalità. Ciò che il cliente mi ha richiesto, in particolare, è la possibilità di realizzare quanto segue:

• Creazione ticket
• Assegnazione del ticket
• Rilevazione della qualità del lavoro svolto
• Possibilità di allegare documenti e file al ticket
• Registrazione delle attività e dei tempi sul ticket
• Possibilità di trasformare in automatico i file in formato PDF standard (PDF/A-1)
• Invio segnalazione via email al destinatario del ticket
• Invio di questionario soddisfazione via email al cliente quando il ticket viene risolto (chius0)
• Apertura di documenti e procedure direttamente dal ticket (questo aspetto è legato al software ERP Bizbrain Core installato in azienda)
• Riepilogo ticket con pannelli che permettono di controllare tutta la vita dello stesso e cosa ne è scaturito

Nel prossimo appuntamento farò un elenco dei componenti che ritengo necessario integrare e del perché sono stati scelti. Parlerò anche della loro integrazione nel progetto. Sono però aperto anche a suggerimenti da parte vostra…

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
JQ = jQuery.noConflict();
</script>
<script src="prototype.js" type="text/javascript"></script>

Come vedete sarà sufficiente includere le due librerie nell’ordine suddetto e chiamare la funzione jQuery.noConflict() assegnandola alla variabile JQ. Le altre modifiche da effettuare all’interno della pagina che utilizza le funzioni di jQuery sono nella sostituzione della chiamata “$” con la chiamata “JQ”.

Chi volesse applicare degli effetti di comparsa e scomparsa di elementi HTML (div) può pensare alla libreria Scriptaculous che offre il metodo toggle della funzione Effect per creare un ingresso a tendina o con apparizione del div che si vuole mostrare o nascondere. L’utilizzo è davvero semplice.

1. Scaricate le librerie Javascript scriptaculous da scriptaculous e prototype.
2. Richiamatele nella pagina dove volete applicare l’effetto:
   <script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/scriptaculous.js" type="text/javascript"></script>
3. Racchiudete l’elemento che volete far sparire e/o comparire in due <div> dando un id univoco al primo:
   <div id="x">
<div>
contenunto
</div>
</div>
4. Aggiungete la chiamata alla funzione sull’evento di un elemento che desiderate, ad esempio sull’evento onclick di un tag <a>
   <a href="#"  onclick="Effect.toggle('x', 'slide', { delay: 0.5 });  return false;">Apri dettagli</a>

Tipi di effetti ed opzioni

Per Effect.toggle è prevista la seguente sintassi:
Effect.toggle(element, ['appear' | 'slide' | 'blind'], [options] );

Ecco alcuni esempi:
Effect.toggle('id_of_element', 'appear');
Effect.toggle('id_of_element', 'slide', { delay: 0.5 });
Effect.toggle('id_of_element', 'blind', { duration: 2.0 });


Riferimenti

Primi passi con scriptaculous: http://wiki.github.com/madrobby/scriptaculous
Esempi: http://wiki.github.com/madrobby/scriptaculous/effect-toggle