RibbonX Office 12… come complicare una cosa semplice… atto I

da un paio di giorni vago in rete alla ricerca di info su come effettuare il porting di un plugin di Outlook 2003 verso la versione 2007…
Senza scendere nel dettaglio dei vari componenti che ho scaricato, mi scontro ripetutamente con la differente logica di programmazione della barra “Fluent UI” rispetto alle tradizionali barre degli strumenti…

La ribbon a quanto pare non si instanzia direttamente come un comune oggetto (ButtonBar miabarra = new CommandBars.Add(..etc), per intenderci) ma usa un file xml che descrive i pulsanti e la loro disposizione. Mentre questo puo’ essere letto come un fattore positivo, di contro ha che i metodi richiamati dai bottoni (impostati anch’essi nel file xml) sono estremamente scarni (la combobox ha solo il metodo onChange) e vengono in automatico associati a runtime ai metodi della istanza della classe Ribbon!! questo vuol dire che non abbiamo modo di eseguire i metodi degli oggetti direttamente dal plugin, ma dobbiamo mettere il codice all’interno dell’istanza del ribbon, recuperando il contesto dal parametro che ci viene passato.

Consapevole di essere stato poco chiaro:

diciamo che mi creo la mia classe “barra”:

public class MyRibbon : Office.IRibbonExtensibility

e ne implemento i metodi:

public string GetCustomUI(string ribbonID)
{
string ui = "";
ui = GetResourceText("TestRibbon.xml");

return ui;
}

se voglio associare un evento OnClick non posso, come di consueto, creare la funzione delegata in ThisAddin, ma dovro’ creare all’interno della classe MyRibbon un metodo “OnClick”:

public void Button_Click(Office.IRibbonControl control)

Non ne riesco a capire i motivi… questo obbliga a separare il codice della barra da quello del restante plugin, ma sono due cose logicamente connesse… non ha senso se pararle.

L’unico modo che mi salta in mentre per riportare la situazione a quella “pre-ribbon” e’ reimplementare tutti gli eventi e i delegati, ma anche cosi’ non avrei che un metodo per ogni bottone.
Altra cosa allucinante e’ non potersi riferire direttamente all’istanza del pulsante, se voglio, per fare un esempio, disattivarlo dovro’ creare un metodo

public bool Button_getEnabled(Office.IRibbonControl control)

che mi restituisce un booleano con lo stato corrente del pulsante… tremendamente macchinoso secondo me…

In conclusione spero vivamente che questo mio modo di utilizzare la ribbon sia sbagliato e non conforme alla modalita’ “standard” di usare questo strumento, perche’ a dirla tutta ho sprecato un sacco di tempo per scrivere un codice difficilmente manutenibile e a valore aggiunto pressoche’ nullo… (rispetto alle normali barre degli strumenti, si intende…)

tinyMCE, la power-textbox… atto 2

Proseguo la carrellata di funzionalita’ di tinyMCE, la textbox per webdesigner potente, flessibile e OpenSource…

una della cose che cercavo era la configurabilita’ dei bottoni, ed in questo mi e’ venuto in aiuto la modalita’ di configurazione “advanced”:


tinyMCE.init({
mode : "textareas",
theme : "advanced",
theme_advanced_buttons1 : "undo, redo, separator, bold, italic, underline, separator, justifyleft, justifycenter, justifyright, justifyfull",
theme_advanced_buttons2 : "hr, separator, bullist, numlist, separator, outdent, indent, separator, link, unlink, separator, charmap",
theme_advanced_buttons3 : "",
height : "250px",
width : "480px"
});


in questo modo sto dicendo a tinyMCE di mettere sulla prima barra i tasti “annulla, ripeti, grassetto, corsivo, sottolineato, allinea a destra, al centro, a sinistra, giustificato” e sulla seconda
“togli indentazione, indenta, collegamento ipertestuale, elimina collegamento e mappa caratteri speciali”.
E’ possibile aggiungere una terza barra riempiendo il campo “theme_advanced_buttons3“.

il risultato:

da aggiungere che e’ possibile configurare le barre degli strumenti inserendo uno qualsiasi di questi bottoni:

bold, italic, underline, strikethrough, justifyleft, justifycenter, justifyright, justifyfull, bullist, numlist, outdent, indent, cut, copy, paste, undo, redo, link, unlink, image, cleanup, help, code, hr, removeformat, formatselect, fontselect, fontsizeselect, styleselect, sub, sup, forecolor, backcolor, forecolorpicker, backcolorpicker, charmap, visualaid, anchor, newdocument, separator

tinyMCE, textarea con i controcoglioni…

oggi vi parlo di una cosetta che ho scoperto da poco, ma che a quanto pare esiste da una vita: tinyMCE. E’ l’editor di testo che usa, tra gli altri, WordPress per consentire a tutti di creare i propri post senza necessariamente conoscere l’HTML (tecnicamente: WYSIWYG editor).
Mi ha molto stupito la semplicita’ d’uso e la configurabilita’ dello strumento:

si aggiunge il riferimento alla libreria javascript:

<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>

(opportunamente scaricata da qui)

e si inizializza il vettore di configurazione:

<script language="javascript" type="text/javascript">
tinyMCE.init({
	theme : "simple",
	mode : "textareas"
});
</script>

in questo modo stiamo dicendo di utilizzare una versione minimale del componente, ovvero solo alcune opzioni di formattazione tipo grassetto, corsivo, sottolineato, allineamenti vari ed elenchi puntati e numerati.
E’ possibile utilizzare molte altre opzioni a partire dal colore del testo fino all’inserimento di emoticon, passando per i collegamenti ipertestuali…
Da notare che la proprieta’ mode dice che TUTTE le textarea della pagina saranno convertite in editor HTML, sono disponibili molte altre opzioni che consentono una configurazione piu’ fine, ma per questa rimando alla documentazione ufficiale.

et voila’… abbiamo nel nostro form html una textarea potenziata, che consente all’utente di formattare il testo per il proprio sito web, senza rompere gli zebedei al webmaster di turno con continue richieste al livello di:
“ma non si potrebbero mettere in grassetto la 1^ e la 3^ lettera ? e il titolo in corsivo? e un link a guuugle nella 5^ riga?“…

…facile no?

smarty tutorial… i cicli

ecco un utile seguito per il post su smarty.

Nel primo post illustravo come assegnare le variabili da utilizzare poi nei template; la cosa e’ molto utile, ma lo sviluppatore ha necessariamente bisogno anche di un’altra struttura di controllo del flusso: i cicli!

Ecco che smarty ci viene in aiuto anche questa volta, fornendoci il costrutto foreach

facciamo conto di avere riepito dal lato dello script un array chiamato my_array con tre campi “id”, “nome” e “cognome”, tramite smarty possiamo nel template usare

{foreach item="curr_section" from=$my_array}
{/foreach}

per ciclare tutti gli elementi dell’array

e utilizzarne i valori tramite il punto


<table>
<tr>
<td>Identificativo</td>
<td>Nome</td>
<td>Cognome</td>
</tr>
{foreach item="curr_section" from=$my_array}
<tr>
<td>{$curr_section.id}</td>
<td>{$curr_section.nome}</td>
<td>{$curr_section.cognome}</td>
</tr>
{/foreach}
</table>


semplice no?

css e firefox… mo ci divertiamo

premetto: adoro firefox.

mi piace da quando si chiamava phoenix, che poi e’ diventato firebird per motivi di copyright del nome della Phoenix Foundation^[1] (mai mettersi contro Mac Gyver…).

che poi e’ diventato Firefox per via del Database open source Firebird (derivato da Interbase), che pur non detenendo diritti sul nome era gia’ in giro da diversi anni (in effetti chiamarlo firebird fu una scelta abbastanza infelice) .

Che poi e’ diventato… ah no, si chiama ancora Firefox (hanno avuto la decenza di registrarlo sto nome, cosi’ evitano di cambiarlo ancora, o fanno causa a chi lo usa in modo improprio (?!?)) ..

 

Ma digressioni a parte, c’e’ una cosa che ho sempre detestato in questo mitico browser: i controlli predefiniti, ovvero i pulsanti, caselle di riepilogo e di testo che vengono visualizzate nelle pagine web che non hanno un foglio di stile che li definisca. Odio QUESTO:

Oggi dopo tanto tempo mi sono messo a cercare un rimedio, che si e’ rivelato molto piu’ semplice del previsto:

Firefox dispone di un foglio di stile predefinito, posto in “/usr/lib/firefox/res/forms.css” (nella mia Kubuntu).

aggiornamento: in windows si trova in <$PROGRAMMI>/Mozilla Firefox/res/forms.css

Basta modificare quello e…

MAGIA

 

tutto diventa piu’ gradevole… (a mio avviso)

wordpress non mi consente di uploadare il mio file modificato e non ho voglia (adesso, domani chissa’) di spulciare per metterlo su qualche server esterno, comunque il codice che ho aggiornato in quel file e’:

 

input {
-moz-appearance: textfield;
/* The sum of border-top, border-bottom, padding-top, padding-bottom
must be the same here, for buttons, and for <select> (including its
internal padding magic) */
padding: 1px 0 1px 0;
border: 2px inset ThreeDFace;
background-color: -moz-Field;
color: -moz-FieldText;
font: -moz-field;
line-height: normal !important;
text-align: start;
text-transform: none;
word-spacing: normal;
letter-spacing: normal;
cursor: text;
-moz-binding: url("chrome://global/content/platformHTMLBindings.xml#inputFields");
text-indent: 0;
-moz-user-select: text;
border-top: solid;
border-left: solid;
border-bottom:solid;
border-right:solid;
border-color: #3F4B50;
border-width: 1px;
margin-top: 2px;
margin-bottom: 2px;
margin-left: 2px;
margin-right: 2px;
}


e questo


button,
input[type="reset"],
input[type="button"],
input[type="submit"] {
-moz-appearance: button;
/* The sum of border-top, border-bottom, padding-top, padding-bottom
must be the same here, for text inputs, and for <select>. For
buttons, make sure to include the -moz-focus-inner border/padding. */
padding: 0px 6px 0px 6px;
border: 2px outset ButtonFace;
background-color: ButtonFace;
color: ButtonText;
font: -moz-button;
line-height: normal !important;
white-space: pre;
cursor: default;
-moz-box-sizing: border-box;
-moz-user-select: none;
-moz-binding: none;
text-align: center;
border-top: solid;
border-left: solid;
border-bottom:solid;
border-right:solid;
border-color: #3F4B50;
border-width: 1px;
margin-top: 2px;
margin-bottom: 2px;
margin-left: 2px;
margin-right: 2px;
}

Ovviamente e’ il prodotto di tre minuti di sviluppo, sicuramente molti di voi sapranno fare di meglio…

happy coding…

[1] in realta’ era la Phoenix Technologies

Hostswitcher langue, e io uso smarty….

Aspettando di riuscire a creare il progetto su sourceforge (devo provare da casa, qui al lavoro sti ‘azzo di firewall non mi fanno uscire con svn – magari poi faccio anche un mini tutorial…), mi sto un po’ dedicando allo sviluppo in php/mysql.

Mi ha sempre colpito l’immediatezza e la facilita’ con cui si programma in php: pochi costrutti semplici, classi ben fatte e che risolvono i problemi velocemente, velocita’ di esecuzione. L’ho sempre trovato scomodo pero’ per sviluppare progetti un po’ “ampi” con molte pagine e una separazione dei ruoli tra chi sviluppa e chi disegna le pagine: “richiede troppo sforzo la sincronizzazione tra i membri”, mi dicevo.

Adesso (magari da un po’, ma io l’ho scoperto adesso ) questo non e’ piu’ un problema, visto che c’e’ SMARTY!!!

Smarty e’ un template engine open source (http://smarty.php.net/ e http://it.wikipedia.org/wiki/Smarty) che consente veramente con poco sforzo di separare la parte di presentazione (grafica) da quella di controllo (programmazione, accesso al db)…

Con smarty e’ possibile concentrarsi sull’aspetto funzionale (per me che sono uno sviluppatore) e lasciare che i grafici facciano il loro lavoro (non li sopporto i css ).
Come funziona? semplicissimo: basta includere il file con la classe di smarty con

require 'smarty/Smarty.class.php';

instanziarla

$smarty = new Smarty;

assegnare le variabili

$smarty->assign("news", "Risolto il bug #1: Ubuntiani in festa");

e poi richiamare il template

$smarty->display('home.tpl');

Smarty provvedera’ a caricarsi il file, effettuare la sostituzione delle variabili e proporlo all’utente che naviga. Adesso tutto cio’ che resta da fare e’ riuscire a far comprendere ad un webdesigner che al posto del testo “placeholder” deve mettere il tag di smarty

{$news}

…ce la possiamo fare?

Spulciando la documentazione possiamo scoprire tante altre cosette interessanti, come il fatto che i delimitatori per le variabili possono essere personalizzati e i template compilati per non degradare le prestazioni. Ma qui non si vuole sostituire l’ottima documentazione reperibile qui in versione italiana

- Come nota in calce voglio aggiungere che rispetto il lavoro dei grafici e dei webdesigner, l’avene parlato come di persone stupide e’ solo a titolo goliardico