L'editor di processi grafico permette di definire dei processi interattivi utilizzati nel portale. Questo editor è un componente flash utilizzato per creare delle pagine che integrino dei testi, delle immagini, dei componenti animati, allo scopo di presentare graficamente i processi principali di un utente.
Questi componenti grafici possono integrare dei link verso funzioni del software, verso altri processi, verso pagine di help ... e possono attivare dei processi di animazione (comparsa / scomparsa di una parte del processo, ad esempio).
L'editor permette di selezionare un insieme di immagini in una libreria fornita di default. Tale libreria si chiama "Standard Sage". E' la prima voce di un elenco a tendina che appare nel box di scelta dei componenti grafici:
Come si può notare in questo printscreen, le immagini disponibili sono organizzate sotto forma di:
- librerie (qui, Sage standard e Custom vol 1)
- contenenti dei gruppi (Vector shapes, Logos, Themes, Buttons...)
- a loro volta contenenti dei temi (Basic shapes, Stars) che sono delle collezioni di immagini che appaiono in un browser di anteprime.
E' possibile aggiungere altre librerie, altri gruppi in queste librerie, ed altri temi che saranno visibili nella finestra librerie appena presentata.
Ciò richiede operazioni da realizzare manualmente sul server applicativo:
- creazione di directory e sotto directory per le librerie, i gruppi ed i temi.
- copia delle immagini nella directory dei temi.
- creazione di file di configurazione (scritti in JSON) che descrivono le strutture di librerie (_param.txt), di gruppi (sgx_libsinfo.txt), e di temi (list.txt).
Questa documentazione ha lo scopo di descrivere la maniera di procedere.
Note:
- Nella misura in cui questa fase di configurazione manuale richiede la scrittura di codice JSON, si consiglia di rivolgersi ad una risorsa avente nozioni di JSON o di JAVASCRIPT o almeno, in mancanza, di utilizzare un editor che permetta di indentare il codice JSON in maniera tale da visualizzarne chiaramente la struttura.
- E' importante rispettare scrupolosamente le maiuscole/minuscole dei nomi di file così come sono definiti nel documento più avanti.
Notazione JSON
La notazione JSON, che è la notazione che permette di definire delle strutture in javascript, utilizza le sintassi seguenti:
- una struttura viene presentata tra parentesi graffe, e contiene delle proprietà seguite dal loro valore, nella forma seguente:
{ "prop1" : "valore 1" , "prop2" : "valore2", "prop3" : 25 }
Qui si è descritta una struttura con 3 proprietà chiamate in successione prop1, prop2, prop3, con dei valori alfanumerici valore1 e valore2, ed un valore numerico (25)
- viene presentato un riquadro tra parentesi quadre:
[ "indice_0", "indice_1", "indice_2, "indice_3" ] rappresenta un riquadro contenente 4 elementi.
- Le due notazioni possono beninteso essere posizionate liberamente, ad esempio:
{ [ { "età": 25, "nome" : "Martino" }, { "età": 67, "nome" : "Emilio" } ], "numero" : 2 }
rappresenta una struttura contenente un riquadro di 2 strutture, seguito da un altro valore ("numero"). Ogni sotto-struttura contiene qui due campi, "età" e "nome".
Si noti che in JSON non bisogna mai interrompere una stringa con un a capo (carriage return).
Ad esempio, la sintassi:
{ "nome" :
"Martino" }
è corretta, la sintassi:
{ "nome" : "Mar
tino" }
non lo è.
E' inoltre importante rispettare le maiuscole/minuscole date per i nomi di proprietà, in quanto sono significative (le proprietà "Nome" e "nome" non sono le stesse).
Directory di base
La directory di base nella quale si trovano le librerie specifiche ed i file di configurazione è una sotto-directory di X3_PUB. E' possibile conoscere la directory X3_PUB utilizzando la calcolatrice ed inserendo la seguente espressione:
filpath("","","","X3_PUB")
A partire da questa directory, si cercherà la sotto-directory:
X3_ROOT\X3CLI\XBLOCK\ (sotto Windows)
X3_ROOT/X3CLI/XBLOCK/ (sotto Unix o Linux)
Tale directory contiene una sotto-directory FLASH, dove si trovano i componenti grafici standard. I componenti specifici andranno creati in una directory chiamata FLASH_CUSTOM, situata allo stesso livello (qunidi nella directory XBLOCK). Occorre creare innanzitutto questa directory, qualora non esista.
Nota: esiste una directory FLASH_CUSTOMREF nella sotto-directory FLASH. Se la directory FLASH_CUSTOM non esiste, si consiglia di copiare FLASH_CUSTOMREF nella directory XBLOCK per poi rinominarla. Si avrà così una sotto-directory con degli esempi di file di configurazione che descriverà il paragrafo successivo.
Si considererà questa directory FLASH_CUSTOM come la directory di base dei componenti, e vi si descriverà il contenuto.
Sotto-directory e contenuto
Le sotto-directory di FLASH_CUSTOM sono le seguenti:
- una prima directory chiamata _params, nella quale si trova un file di configurazione _param_main.txt, da non modificare.
- una seconda directory, chiamata FlowCharting, nella quale si trovano 3 sotto-directory:
- le sotto-directory PadDev e PadPlayer. Queste due directory contengono ognuna un file di configurazione chiamato _params.txt. Anche se tecnicamente questi due file possono essere differenti, si consiglia di configurarli allo stesso modo. Il loro contenuto, scritto in JSON, fornisce il nome e l'ubicazione delle proprie librerie (nota: ogni libreria propria è una cartella nella cartella libraries_custom).
- la sotto-directory libraries_custom contiene le proprie librerie grafiche.
La directory libraries_custom contiene a sua volta una sotto-directory per libreria grafica, ed in questa directory si troverà una sotto-directory per gruppo (sapendo che un gruppo è una lista di temi), poi una sotto-directory per tema (sapendo che un tema è una collezione di immagini). E' in quest'ultima directory che si trovano tali immagini, che possono avere una delle seguenti estensioni: .jpg, .gif, .png. Sarà anche presente un ultimo file di configurazione chiamato list.txt, che fornisce la lista dei file immagine presenti nella directory.
Si immagini, ad esempio, che il software venga installato in un gruppo di società. Si avrà allora:
- una libreria per società: MYCORP, MASOC...MEINGMBH
- in ogni libreria, un elenco di gruppi: pictures, images, backgrounds, logosad esempio
- in ogni gruppo, dei temi. Per il gruppo pictures, si potrebbe disporre di un tema Sites, contenente foto dei vari siti della società, di un tema People, contenente foto dei dipendenti della società, di un tema Products, contenente foto dei prodotti, ecc...
Si avrebbe dunque una gerarchia del seguente tipo:
MYCORP |
|
|
|
pictures |
|
| |
| People |
| |
|
|
| list.txt |
|
|
| MARTIN.jpg |
|
|
| HENRY.png |
|
|
| DAVID.gif |
|
| Siti |
|
|
|
| list.txt |
|
|
| PARIS.gif |
|
|
| LONDON.jpg |
|
| ... |
|
| images |
|
|
|
| schemas |
|
|
|
| list.txt |
|
|
| MAP.png |
| ... |
|
|
MASOC |
|
|
|
| ... |
|
|
File _params.txt
Questo file si trova nelle due directory PadDev e PadPlayer e fornisce il nome e l'ubicazione delle proprie librerie, come illustra l'esempio seguente:
{
"bibOriginsInfo" :
[ {"labels" :
[
{"lang" : "ENG", "label" : "Company MYCORP"},
{"lang" : "FRA", "label" : "Société MYCORP"},
....
{"lang" : "GER", "label" : "MYCORP Gesellschaft" }
],
"originSubpath" : "../FLASH_CUSTOM/FlowCharting/libraries_custom/MYCORP",
"id" : "identificativo_1"
},
{"labels" :
{"lang" : "ENG", "label" : "Company MASOC"},
....
{"lang" : "GER", "label" : "MASOC Gesellschaft" }
],
"originSubpath" : "../FLASH_CUSTOM/FlowCharting/libraries_custom/MASOC",
"id" : "identificativo_2"
},
...
{"labels" :
[ {"lang" : "ENG", "label" : "Company MEINGMBH"},
....
{"lang" : "GER", "label" : "MEINGMBH Gesellschaft" }
],
"originSubpath" : "../FLASH_CUSTOM/FlowCharting/libraries_custom/MEINGMBH",
"id" : "identificativo_M"
}
],
"r" : 0,
"v" : 1
}
Nel file che precede:
- "bibOriginsInfo" referenzia un riquadro in cui ogni elemento (tra paresentesi graffe) contiene le caratteristiche di una libreria. Come tutti gli elementi di riquadri in JSON, questi elementi sono separati da una virgola (a parte l'utlimo elemento).
- una libreria è caratterizzata dalle informazioni:
- "labels", che corrisponde alla descrizione che l'editor di processi deve visualizzare, lui stesso un riquadro di strutture (un elemento per codice lingua di connessione, dove il codice lingua è seguito dall'elemento descritto)
- "originSubpath", che corrisponde al percorso della sotto-directory in cui è salvata la libreria.
- "id", che corrisponde ad un identificativo libero ma univoco.
- "r" e "v", che sono due parametri da non modificare.
Si noti che nel file precedente le directory di base delle librerie sono rispettivamente MYCORP, MASOC, MEINGMBH.
Fichier sgx_libsinfo.txt
Questo file si trova nella directory di base della libreria (MYCORPnell'esempio precedente), e contiene una descrizione in formato JSON della struttura della libreria. Inspirandosi all'esempio precedente, si avrebbe un contenuto come questo:
{ "libsinfo" :
[
{ "biblist" :
[
{"bibid" : "mycorp_1",
"catsubpath" : "people",
"h":70,
"w":70,
"type":"file",
"labels" :
[
{"lang" : "ENG", "label" : "People" },
{"lang" : "FRA", "label" : "Personnes" },
....
{ "lang" : "GER", "label" : "Leute"}
]
},
....
{ "bibid" : "mycorp_N",
"catsubpath" : "sites",
"h":30,
"w":40,
"type":"file",
"labels" :
[
{"lang" : "ENG", "label" : "Sites" },
...
{ "lang" : "GER", "label" : "Standorte"}
]
}
],
"labels" :
[
{"lang" : "ENG", "label" : "Pictures" },
{"lang" : "FRA", "label" : "Photos" },
....
{"lang" : "GER", "label" : "Fotos" }
],
"familysubpath":"pictures",
"familyid":"pic_mycorp"
},
{ "biblist" :
[
{ "bibid" : "mycorp_2",
"catsubpath" : "schemas",
"h":70,
"w":70,
"type":"file",
"labels" :
[
{"lang" : "ENG", "label" : "Schemes" },
....
{"lang" : "FRA", "label" : "Schemas" }
]
},
....
}
],
"labels" :
[
{"lang" : "ENG", "label" : "Images" },
{"lang" : "FRA", "label" : "Images" },
....
{"lang" : "GER", "label" : "Bilder" }
],
"familysubpath":"images",
"familyid":"img_mycorp"
}
],
"oid" : "mycorp",
"r" : 0,
"v" : 1
}
Nel file che precede:
- "libsinfo" referenzia un riquadro in cui ogni elemento contiene le caratteristiche di un gruppo. Come tutti gli elementi di riquadri in JSON, questi elementi sono separati da una virgola (a parte l'utlimo elemento).
- un gruppo è caratterizzato dalle informazioni:
- un elenco di temi in un riquadro, identificati da "bibid", che memorizza la sotto-directory del tema in "catsubpath", delle caratteristiche "h" e "w" di dimensionamento di anteprime, un tipo di libreria chiamato "type" che contiene "file" se si descrive un elenco di file grafici nella directory del tema (un altro valore possibile è "swf" se si descrive un elenco di file swf), ed un riquadro di descrizioni per lingua per chiamare il tema.
- un riquadro di descrizioni per lingua che permette di dare un nome al gruppo.
- un percorso per il gruppo ("familysubpath", che corrisponde al percorso della sotto-directory in cui è salvato il gruppo).
- "familyid", che corrisponde ad un identificativo libero ma univoco.
Si trovano infine gli ultimi parametri del file
- "r" e "v", che sono due parametri da non modificare.
- "oid", che referenzia in maniera univoca la libreria.
In questo esempio si vedono quindi apparire i gruppi pictures (con i temi personnes, e sites) e images (con il tema schémas).
I parametri "h" e "v", che definiscono la dimensione delle anteprime in pixel che appaiono nel browser di immagini per un determinato tema, assumono ognuno il valore 40 se non vengono alimentati.
A titolo di esempio, ecco cosa restituisce un elenco di anteprime:
- in dimensione 40x40:
- in dimensione 180x60:
File list.txt
Questo file si trova nella directory di base di un tema ed elenca i file di immagini contenuti. La sua struttura di conseguenza è semplice ed assume la seguente forma:
{ "files" :
[
{ "name" : "MARTIN.jpg" }
{ "name" : "HENRY.png" }
{ "name" : "DAVID.gif" }
]
}
Creazione di livelli supplementari nella gerarchia
E' possible aggiungere livelli supplementari nella gerarchia libreria / gruppo / tema per ottenere una gerarchia con più di due livelli.
Si immagini ad esempio che, nella gerarchia precedente, si siano definite delle gerarchie che, a partire dalle immagini, propongano una directory di mappe (map) nelle quali esista una gerarchia paese, regione o stato, dipartimento o provincia, città, con differenti mappe di una città all'interno di ogni dossier. Si avrebbero allora dei dossier quali:
MYCORP/images/map/USA/tenessee/hamilton/chattanooga (contenente differenti mappe della città)
Per fare ciò, occorre:
- creare le gerarchie di dossier corrispondenti
- modificare i due file sgx_libinfo.txtallo scopo di modificare la definizione delle sotto-cartelle e le descrizioni corrispondenti:
- "catsubpath":"images/map/USA/tenessee/hamilton/chattanooga"
- "label":"images;map;USA;tennessee;hamilton;chattanooga"
- "label":"Images;Maps;US Country;Tennesse State;Hamilton County;City of Chattanooga"
Si noti comunque che, anche se si desidera moltiplicare il numero di sotto-cartelle del tipo, bisognerà descriverle per esteso nell'elenco, il che può risultare fastidioso. D'altro canto, solo il livello terminale dell'elenco può contenere dei file (ed il file list.txt corrispondente).
E' invece possibile avere un numero di livelli gerarchici differente per struttura. Ad esempio, contemporaneamente alla gerarchia sopra presentata, si può avere una gerarchia del tipo:
MYCORP/pictures/animals/mammals/cows (dove il dossier in questione contiene foto di mucche)
Generazione archivio
Dopo avere effettuato le precedenti manipolazioni, è possibile utilizzare direttamente le librerie create sulla struttura server senza alcun vincolo in modalità web.
Per utilizzarle in modalità client-server, è tuttavia necessario creare un archivio (di nome XCLI.tar) contenente l'insieme dei file trovati nella directory FLASH_CUSTOM.
Ciò lo si effettua utilizzando un tool dedicato.