 |
Modern Template Building, Part 1 (MTB/1) LE BASI |
 |
Le Basi
Introduzione
Questa sessione introdurra velocemente il principiante a lavorare con l'interfaccia di TYPO3. Spiegherà cosa sono i (TypoScript Templates), cosa sono i (content objects), cosa sono i (HTML-templates). Se conoscete queste basi siete già pronti, potete passare oltre alla prossima sessione, "integrazione di un (HTML template)". Ad ogni modo dovrete installare dummy-package e creare un insieme di pagine interne. Come descritto più avanti.
Livello di esperienza
Tutti i nuovi sviluppatori di TYPO3 indipendentemente dall'esperienza in altri campi.
Alcune parti prenderanno come riferimento tecnologie quali SQL, HTML, CSS and PHP. Generalmente il contenuto è di tipo tecnico, sarete guidati dall'installazione di dummy-package che spiega le basi dell'interfaccia per creare (templeate) con TYPO3.
Introduzione – installare il pacchetto"dummy"
Per iniziare velocemente inserirete un file vuoto nella struttura. Il database per TYPO3 e il modo migliore per farlo. Viene utilizzato dal pacchetto "dummy". Un (package) generalmente consiste in un codice sorgente per TYPO3 inserito nel sito locale possibilmente contenuto nel database. Nel caso del (package)dummy-questo sarà un sito web completamente vuoto senza contenuti, ma che è estremamente utile per iniziare nuovi progetti .
Procuratevi il (package) dummy e installatelo nel vostro webserver. Dopo aver decompresso il (package) digitate: http://localhost/vostra_cartella/index.php (server locale) o http://nome_del_vostro_sito/index.php e sarete guidati attraverso questi passi.
Inserire le informazioni nel database:
Create un novo database:
Importate il database dummy, "database.sql":
Entrate nel link “Go to the backend”:
Per completare questi passi dovrete editare il file localconf.php (sarete avvisati se non è possibile) , è necessario possedere username e password del database.
Creazione della struttura di pagina
La prima cosa da fare adesso è creare una struttura di pagina per utilizzare questo tutorial. Una buona struttura contiene più pagine su almeno due livelli, tuttavia, dovete iniziare con una pagina radice:
Immettete un titolo di pagina (page title), scoprite (unhide) la pagina e salvatela:
Potete procedere in questa maniera per creare la struttura delle pagine. Tuttavia c'è un grande aiuto (wizard) per fare questo in modo più semplice. Basta andare nel (Functions module), selezionare il (wizards) (Create multiple pages), immettete un certo numero di titoli di pagina nei campi e premere il bottone (Create pages).
(il wizard (Create multiple pages) richiede che l'estensione "wizard_crpages" sia installata.)
Il risultato dovrebbe portare a una struttura di pagine come questa:
Ora, create nuove pagine in modo da ottenere qualcosa come questo:
Strutturare pagine e costruire (Template)
Cliccate sull'icona di una pagina e selezionare (Show):
Il risultato della pagina "Licensing" visualizzerà qualcosa come questo:
La pagina "chiamata" ha l'uid "5" (user id). Esaminando il contenuto di quella pagina e stato inviato il parametro "id=5" al file index.php della pagina di “presentazione”(frontend).
Visualizzerete il messaggio "No template found". Questo vuol dire che il (frontend) non ha trovato un (template record) nella “linea radice”(rootline) della struttura dalla pagina con id 5. Tutto questo richiede una piccola spiegazione:
TYPO3 è un CMS multi-sito questo significa che potete avere qualsiasi numero di siti web independenti, contenuti nella stessa struttura ad albero. Ogni sito web deve avere una propria (root page) la quale indica dove è inserito il proprio (template record) nella pagina. Questo (template record) deve avere il (Rootlevel) “settato”(flag set). Tutto ciò indica che da questo punto in poi inizia un nuovo sito nella struttura.
La (root line) è un'altro modo per indicare "percorso". Per esempio potreste dire che la pagina "License A" nella struttura ha il percorso "TYPO3 > Root page > Licensing > License A". E se noi inviamo l'id della pagina "License A" allo (script) index.php, il frontend template engine cercherà la (root line) partendo dalla pagina "License A" a ritroso fino alla radice della struttura (Root page) dove è presente il nostro (template record) che definisce come verrà visualizzato questo ramo della struttura.
Creazione di un (Template Record)
Quello che dovrete fare ora e creare un (template record) nella “pagina radice”(Root page). Il modo più facile, è utilizzare il modulo “Template”:
La prossima schermata vi mostrerà questa vista del modulo "Template". Utilizzerete questo per editare (template record) più avanti:
Per il momento, guardate la "pagina radice"(Root page) con il modulo "list":
Come potete vedere c'è un (Template record) situato nella pagina “pagina radice"(Root page).
Questo (template record) conterrà le istruzioni di base per il (frontend engine) su come il sito web sarà inizializato, da quale punto dovrebbe essere reso, quali caratteristiche ha e com'è configurato, etc. Un (template record) è sempre necessario per avviare qualsiasi nuovo sito web in TYPO3 (utilizzato di default dal frontend engine). Tuttavia potete configurare personalmete quanto la grafica del vostro sito web sarà controllato direttamente dal (template record); potete programmare un sito web intero direttamente dentro un (template record). Potreste anche istruire un (template record) per chiamare immediatamente una funzione PHP che avete creato, la quale renderà e restituirà tutto il contenuto della pagina (basata su XML, XSLT o altri database - indipendentemente da voi). Potete anche scegliere una via di mezzo mescolando il meglio di entrambi i mondi . Questo è quello che facciamo in questa esercitazione.
Osservando il contenuto del (template record) vedrete questi campi di particolare interesse:
Il (Template title) è solo il titolo del vostro (template record) - non è visualizzato da nessuna parte.
Il “titolo del sito web”(Website title) sarà il prefisso del titolo della pagina che troverete tra i tag <title> di ogni pagina.
Il campo “Setup” è il luogo dove editerete le istruzioni che faranno reagire il (frontend engine) in un certo modo. Queste istruzioni sono contenute in una struttura d'informazioni gerarchica definita dalla sintassi di (TypoScript Template). Le istruzioni del
I checkbox "Clear constants" e "Clear setup" vistati indicano che nessun codice di configurazione di TypoScript è ereditato dal (template records) nella struttura (più vicino alla radice). Questi checkbox vistati dovrebbero essere sempre settati per i (template records) servendo da (template) principale ("Rootlevel").
Il checkbox "Rootlevel" indica semplicemente: "Che questo (template records) contrassegna l'inizio del nuovo sito web".
Ora, torniamo di nuovo all'osservazione della pagina "Licensing":
Ora qualche cosa di differente è apparso. Ecco ciò che è successo:
Richiesta la pagina con uid "5" (#1)
Seleziona il primo (template record) in questa pagina (pid=5); Non trova nente!
Allora la pagina con uid "5" cercherà il (template record), controlla la pagina precedente nella linea della radice.... (#2)
Seleziona il primo (template record) in questa pagina, (Root page), (pid=1); Un (template record) è stato trovato!
D'ora in poi un (template record) viene cercato nella pagina with uid "1", se il checkbox "Rootlevel" è stato settato...
Si, il "Rootlevel" è stato settato. Benissimo, questo è l'inizio del sito web. Così...
Analizza la configurazione di TypoScript del camp Setup.
Comincia ad eseguire le istruzioni dal campo Setup.
Principi fondamentali delle istruzioni dei "campi-Setup"
Quando un (template record) è posizionato nel punto principalmente interessato notiamo il campo "Setup" di questo template. In questo campo editerai delle istruzioni che determineranno cosa accadrà quando pubblicheremo una pagina di presentazione.
Il miglior modo per editare questo campo è l'uso del modulo Template con la vista Info/Modify:
Clicca l'icona edit, cominciamo:
Qui una breve spiegazione:
L'oggetto pagina (#1)
In primo luogo definiamo un nuovo livello superiore "Toplevel Object" (TLO) chiamato "page". L'oggetto è di tipo "PAGE" (potete anche definire oggetti FRAMESET, vedere TSref). Anziché "page" potreste usare altre stringhe tranne quelle inserite nella lista di parole riservate in TLO's, vedere TSref about Toplevel Objects.
"typeNum" è definita una proprietà obbligatoria poichè è una proprietà dell'oggetto pagina "page" object esso è settato a 0(zero).
Tutto questo serve perhcè ora la pagina "page" del Toplevel Object sarà il manipolatore di default di ogni richiesta dielle pagine all'interno della struttura dell'albero, il nostro (template record) contrassegna l'inizio di un sito web.
Ora vogliamo istruire l'oggetto "page" sul compito che andrà ad eseguire. E' necessario dare uno sguardo alle possibili proprietà per l'oggetto PAGE . Alcune proprietà sono meta proprietà come le "config" o le "includeLibs". Altre sono definite quando vengono generate pagine HTML dell'oggetto PAGE.
L'insieme delle proprietà più significativo dell'oggetto PAGE è l'array numerico dell'oggetto content objects (cObjects). Ciascuno di questi content objects può generare una stringa di contenuro-HTML il quale compone il contenuto tra i tag-body della pagina.
L'oggetto Content(Content Object) (#2)
Nell'esempio qui sopra c'è un semplicissimo content object - TEXT – definito con il numero "10" dell'array numerico del content objects nell'oggetto chiamato "page". questo cObject ha la proprietà "value" settata a "HELLO WORLD!". L'effetto è che questa stringa è restituira dall'oggetto cObject e diventa il contenuto dei tag-body della pagina:
Potete vedere il settaggio delle proprietà per l'oggetto .
TypoScript – non è un linguaggio di programmazone
Prima di incominciare; ricordiamo che TypoScript non è un linguaggio di programmazione procedurale. Potreste essere indotti a pensarlo, inoltre se avete espserienza con altri linguaggi di programmazione e su come essi lavorano ciò può essere pericoloso poiché sarete abbastanza confusi. In realtà, TypoScript serve soltanto a configurare il sistema per comportarsi in un determinato modo.
Per spiegare che cosa TypoScript realmente è, e indicare la differenza fra programmazione e come invece è usato in TYPO3, potete osservare dentro questo documento che spiega i principi fondamentali.
Più esempi di PAGE and cObjects
Questa sessione mostrerà più esempi di oggetti PAGE e oggetti cObjects per permettervi di afferrare completamente il concetto. Capire questo permette di comprendere "TypoScript templates" quando le strutture diventeranno più complesse.
Due oggetti cObjects?
Che cosa accade se inseriamo un altro oggetto content object:
# Default PAGE object:
page = PAGE
page.typeNum = 0
# Content object one:
page.10 = TEXT
page.10.value = HELLO WORLD!
# Content object two:
page.20 = TEXT
page.20.value = HELLO UNIVERSE!
(NdA, le linee che iniziano con "#" o con "/" sono commenti.)
Risultato:
<body bgcolor="#FFFFFF">
HELLO WORLD!HELLO UNIVERSE!
</body>
Casì, come previsto più oggetti content objects saranno concatenati!
Cambiando l'ordine?
Se cambiamo l'ordine della definizione?
# Default PAGE object:
page = PAGE
page.typeNum = 0
# Content object two:
page.20 = TEXT
page.20.value = HELLO UNIVERSE!
# Content object one:
page.10 = TEXT
page.10.value = HELLO WORLD!
Risultato:
<body bgcolor="#FFFFFF">
HELLO WORLD!HELLO UNIVERSE!
</body>
Stessa cosa, l'ordine di rappresentazione è basato secondo l'indice nell'allineamento.
Contenuto dinamico?
Se vogliamo inserire l'oggetto TEXT cObject nel titolo della pagina?
Allora dovete guardare in ha tutte le proprietà che gli permetteno di eseguire certe cose. Sembra che le possegga. Oltre alla proprietà "value" nello stesso livello dell'oggetto TEXT object ci sono altre proprietà "stdWrap" (clicca qui) che possono essere usate per prendere e processare i dati dinamicamente.
La rappresentazione dell'oggetto cObject TEXT è fatto principalmente nello scope(ambito) dell'oggetto PAGE Object, il current record, quello dove verranno analizzati i dati, sarà la current page record . Così riferirsi ad un nome di campo con le proprietà stdWrap "field" recupererete il suo contenuto per la pagina corrente. Qui il campo chiamato "title" trasferirà il nome della pagina(ciò naturalmente richiede la conoscenza su quali campi sono disponibili nelle tabelle delle pagine!):
# Default PAGE object:
page = PAGE
page.typeNum = 0
# Content object outputting current page title:
page.10 = TEXT
page.10.field = title
Risultato:
<body bgcolor="#FFFFFF">
Licensing
</body>
Poiché la pagina corrente era la pagina "Licensing", questo sarà il titolo della pagina.
Proprietà stdWrap
Ora che abbiamo trattato le proprietà "stdWrap" possiamo incapsulare il valore e manipolarlo in diversi modi:
# Default PAGE object:
page = PAGE
page.typeNum = 0
# Content object outputting current page title:
page.10 = TEXT
page.10 {
field = title
crop = 8 | ...
case = upper
wrap = This is the truncated page title: <b> | </b>
}
(Attenzione ho cambiato la formattazione in TypoScript in modo che le proprietà siano state incapsulate nelle parentesi graffe.Questa tipo di sintassi in TypoScript rende più facile assegnare molte proprietà nello stesso livello il risultato finale non è differente dal precedente, tutte le proprietà hanno il percorso dell'oggetto "page.10".)
Risultato:
<body bgcolor="#FFFFFF">
This is the truncated page title: <b>LICENSIN...</b>
</body>
Attenzione la stringa incapsulata è stata inserita nel titolo della pagina, oltre a ciò il risultato è stato settato con i caratteri maiuscoli ed è stato anche troncato un massimo 8 caratteri aggingendo "..." di sospensione alla fine.
Potremmo realizzare lo stesso risultato con un altro oggetto cObject chiamato "HTML", l'unica differenza è che tutte le proprietà stdWrap di questo tipo di oggetto, sono delle sotto-proprietà di "value" e non sono proprietà dell'oggetto cObject:
# Default PAGE object:
page = PAGE
page.typeNum = 0
# Content object outputting current page title:
page.10 = HTML
page.10.value {
field = title
crop = 8 | ...
case = upper
wrap = This is the truncated page title: <b> | </b>
}
È una questione di preferenza e stile personali se usarete l'oggetto TEXT o l'oggetto HTML cObjects.
Contenuti provenienti dai comandi php(PHP scripts)
Potrete inserire facilemente contenuti provenienti dai comandi PHP(PHP scripts) se lo gradite. Questa è una pratica consigliata se avete bisogno di un risultato condizionale per superare i limiti di typo3. L'oggetto cObjects e le sue proprietà non offrono affatto "la programmazione procedurale" – ricordate che sono solo oggetti pre-programmati, che vengono influenzati dal settaggio delle proprietà, niente di più.
L'oggetto USER cObject è quello di cui avete bisogno.
Prima, create un file PHP in fileadmin/userfunctions.php:
<?php
class user_functions {
/**
* Multiplies the current page ID with $conf["factor"]
*/
function multiplyTest($content,$conf) {
$currentPageUid = $GLOBALS['TSFE']->id;
$factor = intval($conf['factor']);
return $currentPageUid * $factor;
}
}
?>
Poi configurate un oggetto cObject del tipo USER per chiamare questa funzione con un singolo parametro, "factor":
# Default PAGE object:
page = PAGE
page.typeNum = 0
page.includeLibs.some_random_id_string = fileadmin/userfunctions.php
page.config.admPanel = 1
# Content object outputting current page title:
page.10 = HTML
page.10.value = The page ID, {field:uid}, multiplied with 15 is:
page.10.value.insertData = 1
page.10.value.wrap = <b> |</b> <br />
page.20 = USER
page.20.userFunc = user_functions->multiplyTest
page.20.factor = 15
E il risultato dovrebbe essere:
Come potete vedere abbiamo definito alcune "meta-proprietà" non direttamente correlate al risultato del contenuto:
page.includeLibs.some_random_id_string = fileadmin/userfunctions.php
page.config.admPanel = 1
"includeLibs" è una proprietà che permette di configurare una lista di file PHP (classi e librerie di funzioni!) che saranno incluse prima di iniziare la rappresentazione della pagina. "config" tiene conto di tutte le opzioni di configurazione sul comportamento generale dell' oggetto PAGINA. In Questo caso l'ADMIN PANEL è stato aggiunto nella parte inferiore della pagina.
Dovreste prendervi qualche minuto per osservare questo esempio. Attenzione a come la proprietà "factor" dell'oggetto USER era disponibile nelle funzioni PHP. Attenzione a come le funzioni PHP richiama l'ID della pagina. Attenzione a come l' "admin panel" è stato incluso. Potete imparare molto con piccoli cambiamenti di questo esempio. Lasciate libera la vostra fantasia per un istante, poiché questo può darvi una migliore capacita di controllo.
l'oggetto Browser
l'oggetto Browser nel modulo Template è uno strumento indispensabile per verificare la struttura gerarchica delle informazioni del (template records):
Come potete vedere in TypoScript i valori sono analizzati in questo albero ben organizzato. Questo permette di verificare se ogni proprietà settata è nella corretta posizione e perfino possibile editare un singolo valore se vi assicurate che il checkbox "Enable object links" sia fleggato:
Andando di nuovo in "Info/Modify" potrete vdere che il campo del (template Setup) è stato modificato:
L'oggetto Browser non è abbastanza intelligente da modificare la linea "page.20.factor = 15", infatti, viene solamente inserita una nova linea che sovrascriverà il valore precedentemente settato senza cancellarlo. Potete eliminare la vecchia linea manualmente. Il punto è che l'oggetto browser fornisce una via infallibile per la regolazione dei valori, poiché il percorso corretto dell'oggetto sarà utilizzato sempre.
Provare una condizione?
Potremmo usare questa situazione per dimostrare una "condizione". Una semplice condizione è quella di controllare quale browser è presente:
# Default PAGE object:
page = PAGE
page.typeNum = 0
page.includeLibs.some_random_id_string = fileadmin/userfunctions.php
page.config.admPanel = 1
# Content object outputting current page title:
page.10 = HTML
page.10.value = The page ID, {field:uid}, multiplied with 15 is:
page.10.value.insertData = 1
page.10.value.wrap = <b> |</b> <br />
page.20 = USER
page.20.userFunc = user_functions->multiplyTest
page.20.factor = 15
[browser = msie]
page.20.factor = 30
page.10.value = The page ID, {field:uid}, multiplied with 30 is:
[global]
In Microsoft Internet Explorer si visualizzerà qualcosa di simile:
In tutti gli altri browsers si visualizzerà:
PAGE object revisited
Bene, questo non dovrebbe essere un facile corso per creare solamente (template) - in questo manuale useremo pricipalmente TEMPLATE, l'oggetto USER e l'oggetto HMENU per combinarli con codice TypoScript predefinito da (template) statici per conseguire i nostri obiettivi. La bibbia su oggetti e proprietà è Tsref, se volete altre informazioni su come usare ogni tipo di oggetto perfavore guardate TypoScript per esempi.
Vvorrei concludere con due punti:
L'importanza di "&type="
Nell'esempio che segue non c'è solamente un oggetto PAGE definito. Nel TLO(oggetto di livello superiore) un altro oggetto PAGE è stato creato, "another_page", con la proprietà "typeNum" settata a "1". Tutto ciò significa che l'oggetto PAGE "page" è la matrice predefinito(default) mentre le richieste dell'oggetto PAGE "another_page" divengono la matrice delle pagine richieste dove il parametro è "&type=1" in aggiunta al valore dell'id:
page = PAGE
page.typeNum = 0
page.10 = TEXT
page.10.value = HELLO WORLD!
another_page = PAGE
another_page.typeNum = 1
another_page.10 = TEXT
another_page.10.value = HELLO UNIVERSE
Il risultato sarà:
E l'albero degli oggetti:
Copying objects
Diventa molto facile dividere il codice di configurazione diTypoScript in piccole unità connesse al vostro (templates) e alla fine riassemblare il tutto nel vostro template copiandoli nelle giuste posizioni. questo può persino comprendere la separazione delle unità dentro una gerarchia, includendo (template records) o (static templates) in questa maniera si tiene conto del riutilizzo del codice TypoScript. Prenderemo in considerazione questo argomento successivamente.
La caratteristica principale di TypoScript è quello di permettere di copiare la sintassi da un ramo dell'albero degli oggetti ad un altro. Considerate questo esempio:
# Make temporary version of the first cObject:
temp.world = TEXT
temp.world.value = HELLO WORLD!
# Make temporary version of the second cObject:
temp.universe = TEXT
temp.universe.value = HELLO UNIVERSE!
# Default PAGE object:
page = PAGE
page.typeNum = 0
page.10 < temp.world
page.20 < temp.universe
Il risultato è - naturalmente - questo:
<body bgcolor="#FFFFFF">
HELLO WORLD!HELLO UNIVERSE!
</body>
Se osservate nell'oggetto browser potrete vedere, che l'oggetto da "temp. ..." è stato copiato dai percorsi "page.10" e "page.20". Tuttavia potremmo aspettarci di vedere "temp." TLO(oggetto di livello superiore) nell'albero, ma non è così. Il motivo è che gli oggetti TLOs nominati "temp." e "styles." non sono più attivi dopo l'analisi di TypoScript poiché sono riservati come spazi provvisori dell'oggetto disponibile soltanto durante l'analisi, non dopo.
Se volete che i vostri oggetti siano presenti nell'struttura ad albero dovremo usare un'altro oggetto TLO(oggetto di livello superiore):
# Make temporary version of the first cObject:
MY_TLO.world = TEXT
MY_TLO.world.value = HELLO WORLD!
# Make temporary version of the second cObject:
MY_TLO.universe = TEXT
MY_TLO.universe.value = HELLO UNIVERSE!
# Default PAGE object:
page = PAGE
page.typeNum = 0
page.10 < MY_TLO.world
page.20 < MY_TLO.universe
... e l'oggetto TLO "MY_TLO" è ancora presente:
Riferimento – non copie
questo vuol dire che possiamo creare un riferimetno all' oggetto MY_TLO.* il riferimento a un oggetto cObjects richiede che esso esista nella struttura durante è dopo l'analisi (l'opposto di "temp" and "styles" TLOs). Lo script può essere riscritto così:
# Make temporary version of the first cObject:
MY_TLO.world = TEXT
MY_TLO.world.value = HELLO WORLD!
# Make temporary version of the second cObject:
MY_TLO.universe = TEXT
MY_TLO.universe.value = HELLO UNIVERSE!
# Default PAGE object:
page = PAGE
page.typeNum = 0
page.10 =< MY_TLO.world
page.20 =< MY_TLO.universe
Sembra un piccolo cambiamento ma l'effetto è enorme, poiché gli oggetti non sono copiati, ma solamente referenziati:
Ci sono alcuni vantaggi e svantaggi nell'utilizzo di questo metodo. Il grosso vantaggio comunque è il riferimento a l'oggetto cObject definito in un percorso dell'albero, che può essere usato molte volte puntando al contenuto della struttura senza sprecare memoria di sistema – infatti, diverrebbe difficile se volessimo sovrascrivere le proprietà di tutte le copie nella struttura. Un esempio di questo problema nella seconda parte del tutorial.
Attenzione: I riferimenti come questo non sono una parte della sintassi di TypoScript. È una caratteristica fornita internamente dall'oggetto cObjects in questo modo il riferimento deve essere usato solo con oggetti cObjects, non con qualunque altro genere di oggetti o di proprietà(salvo precisazioni).
Eliminare la cache
Infine, ricordate che quando fate dei cambiamenti a un (template record) con il modulo Template dovete eliminare la cache "Cache-all". Ciò deve essere fatta perché quando TYPO3 analizza il (templates) TypoScript, la struttura risultante è conservata nella cache così che la prossima volta può essere caricata più velocemente la pagina da resituire. Tuttavia, questo significa che i cambiamenti fatti al (template records) attraverso il modulo lista non cancelleno la cache, dovrete farlo manualmente con il collegamento sotto il menu nel frame di sinistra.
In generale, prima di credere che ogni strano comportamento di typo3 sia un bug, per favore assicuratevi che non manchi un (templates) o un file estensione che impedisce il corretto funzionamento!
Modern Template Building, Part 1 (MTB/1) -
| |
 |
|
| 3 / 5 |
