Mese: Febbraio 2009

Sulla personalizzazione dell’aspetto grafico delle maschere di P4A, esiste già questo interessante screencast di Fabrizio Balliano. Trovo interessante poter cambiare la grafica perché l’aspetto di default, sebbene gradevole e riposante, in alcuni casi, per esempio sugli schermi dei netbook appare un po’ troppo poco contrastato. Il tema alternativo proposto nello screencast è “Human” per Gnome, davvero molto bello!
Il set di impostazioni per i colori e il set di icone vengono generati a partire da script PHP. Entrambi gli script sono disponibili in P4A Wiki nella sezione: “Theme customizations”, il requisito è di farli girare su una macchina Linux, che sia dotata del necessario software di conversione da SVG a PNG. Ho pensato di scrivere questo post, anche se in gran parte è una ripetizione dello screencast di Fabrizio, perché qualcuno si potrebbe trovare in difficoltà scoprendo al primo approccio che lo script che genera il set di icone, per funzionare correttamente, necessita di una particolare libreria.

Dunque, la situazione migliore è che possediamo una distro “Ubuntu“, quindi con installato il Desktop Gnome. Per prima cosa, ci dobbiamo accertare che sia installato il programma rsvg che fa parte della libreria librsvg. Se non è presente (in genere non lo è…), l’installazione è davvero molto semplice utilizzando apt-get:

sudo apt-get install librsvg2-2

invece, se volete perdere tempo e avete già installate tutte le librerie per il supporto alle manipolazioni dei formati SVG, potete installare il pacchetto manualmente. Queste librerie sono comunque necessarie: libxml2 e libxml2-dev

Questo è il link per l’installazione del software rsvg:
http://ftp.gnome.org/pub/GNOME/sources/librsvg/2.22/librsvg-2.22.3.tar.bz2

scompattate il pacchetto con:

tar -xjvf librsvg-2.22.3.tar.gz.bz2

ed infine compilate:

• sudo ./configure
• sudo make
• sudo make install

Ci siamo, ora possiamo lanciare lo script di Fabrizio che genera il set di icone, in questo caso il set Human per Gnome:

php build_icon_theme.php /home/directory/che/volete /usr/share/icons/Human /usr/share/icons/gnome

Adesso copiate le icone generate che saranno raggruppate nelle cartelle con il nome 16 e 32 nella directory human che si deve trovare all’interno di p4a/icons e aggiungete il seguente codice all’interno del file index.php della vostra applicazione P4A, prima della riga di codice: require_once dirname(__FILE__) . '/../../p4a.php'; e con le icone abbiamo finito.

define('P4A_ICONS_NAME', 'human');

In pratica lo script recupera le icone che servono a p4a e le copia, creando la struttura di directory necessaria, nella cartella /directory/che/volete. Se non sono disponibili nel formato richiesto, le genera dai modelli scalabili in SVG, oppure le cerca fra quelle del tema Gnome. Naturalmente, è sempre possibile aggiustare alcuni set a mano. Per esempio, ho notato che nella generazione del tema “Human”, l’icona “folder open”, risulta di colore grigio ed è piuttosto differente da “folder”, così l’ho sostituita con quella generata per il tema “Tangerine”.

Per quanto riguarda lo schema dei colori, dovete procurarvi lo script PHP: gtkrc2p4a.php per importare gli schemi Gnome gtkrc. Per generare il set di colori che armonizza le icone “Human”, digitate da linea di comando:

php gtkrc2p4a.php /usr/share/themes/Human/gtk-2.0/gtkrc

L’esecuzione genera il seguente set di impostazioni da copiare e incollare dentro index.php (sempre prima di: require_once dirname(__FILE__) . '/../../p4a.php';):

1
2
3
4
5
6
7
8
9
10
11
12
13
14

define('P4A_THEME_FG', '#101010');
define('P4A_THEME_BG', '#EFEBE7');
define('P4A_THEME_BORDER', '#d7d3cf');
define('P4A_THEME_INPUT_FG', '#1A1A1A');
define('P4A_THEME_INPUT_BG', '#FFF');
define('P4A_THEME_INPUT_BORDER', '#e5e5e5');
define('P4A_THEME_SELECTED_FG', '#1A1A1A');
define('P4A_THEME_SELECTED_BG', '#FFA443');
define('P4A_THEME_SELECTED_BORDER', '#e5933c');
define('P4A_THEME_TOOLTIP_FG', '#000');
define('P4A_THEME_TOOLTIP_BG', '#F5F5B5');
define('P4A_THEME_TOOLTIP_BORDER', '#dcdca2');
define('P4A_THEME_EVEN_ROW', '#eee');
define('P4A_THEME_ODD_ROW', '#fff');

Sembra fatta, ma c’è ancora qualcosa di imperfetto. Se nella vostra applicazione è presente un “tab-panel” i bordi rimangono colorati dell’azzurro di default, e lo sfondo del bottoncino per il passaggio da un pannello all’altro, rimane azzurro chiaro. Così per essere pignoli rimane da modificare un poco il CSS in questo modo:

Create un file provacss.php con le seguenti istruzioni per il CSS (io l’ho messo nella directory libraries della mia applicazione):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php
header('Content-type: text/css');
?>
.p4a_tab_pane ul.tabs {
	border-bottom: 1px solid <?php echo $_GET['input_border'] ?>;
}
.p4a_tab_pane ul.tabs li a {
	border: 1px solid <?php echo $_GET['input_border'] ?>;
}
.p4a_tab_pane ul.tabs a:hover {
	background: <?php echo $_GET['selected_bg'] ?>;
}
.p4a_tab_pane div.p4a_tab_pane_page {
	border: 1px solid <?php echo $_GET['input_border'] ?>;
}

Nel file principale della vostra applicazione, quello che estende la classe base p4a, inserite questo codice:

$this->addCss(P4A_APPLICATION_LIBRARIES_PATH."provacss.php?". $this->getCssConstants());

E il gioco è fatto! In pratica, è possibile aggiungere un CSS dinamico che carica, mediante querystring, le costanti determinate dal tema adottato.

Ecco uno screeshot della mia applicazione per la gestione delle fatture “vestita” con Human-gnome:

Download

Per chi non avesse a disposizione un ambiente Linux (ma cosa aspetta a farlo?) metto a disposizione il set di icone Human che ho generato qui

Conclusioni

Una volta compreso il meccanismo, personalizzare p4a è piuttosto semplice. Mi sono divertito anche a creare un tema “Vista like”, tanto per non spiazzare troppo i clienti “allineati” a M$…

Riferimenti ed approfondimenti:

• Screencast di Fabrizio Balliano: “Theme customizations in RC5”
• P4A Wiki

Fabrizio Balliano ha scritto:

ottimo articolo come sempre, vedo però di risolvere il problema del tab pane perché va fixato :)
23.02.09 09:41
Fabrizio Balliano ha scritto:

risolto e committato :)