Benvenuti!
Questo articolo contiene la prima parte di una serie di puntate dove voglio provare a fare chiarezza su un aspetto fondamentale per lo sviluppo delle UI di Odoo.
Il contenuto è rivolto ad un pubblico tecnico che possiede un background per sviluppare con il framework di Odoo.
Potete trovare il codice usato in questo tutorial su questo repository.
XPath: XML Path Language
XPath, acronimo di XML Path Language, è un linguaggio utilizzato per navigare e selezionare elementi in documenti XML.
Fornisce un modo per individuare e accedere a specifici nodi o elementi all'interno di un documento XML (DOM).
Utilizza una sintassi a Path (come nel filesystem) per indicare la posizione di un elemento nell'albero gerarchico di un documento XML.
Ad esempio, un'espressione XPath potrebbe essere "//book/title", che selezionerebbe tutti gli elementi "title" che sono discendenti diretti di un elemento "book" in un documento XML.
Per chi volesse approfondire l'argomento su questo linguaggio potete trovare materiale ai seguenti link:
Odoo e XPath: Un cocktail da brivido!
Le interfacce web (o view) di Odoo fanno uso di una sintassi, attravero il motore di template QWeb,
basata sul linguaggio XML per la rappresentazione nei vari formati (Tree, Form, Kanban, etc...).
In generale, il meccanismo e la struttura di Odoo non permette di modificare direttamente il codice sorgente della singola view di tipo QWeb.
Piuttosto, il principio di modifica delle view esistenti (quelle di sistema o di addons esterni)
si basa sul meccanismo di ereditarietà:
in sostanza, viene costruita una nuova vista VE che eredità dall'originale V che altera (aggiunge o modifica) il contenuto dalla vista genitore.
Domanda: quale sintassi utilizzare per modificare il contenuto della vista genitore ?
Risposta: La risposta è XPath!
Nella documentazione ufficiale di Odoo (link) si fa riferimento a quello che ho descritto sopra.
Attraverso degli esempi pratici andremmo ad approfondire meglio come si usano le XPath.
XPath Tutorial: Da zero a eroe delle XPath.
Per facilitare l'apprendimento delle XPath ho preparato un modulo (o addons) xpath_tutorial che trovate sul mio spazio GitHub.
Per semplicità, definisce solo un Controller su cui viene fatto il render di un template index definito dentro il file templates.xml.
Completata l'installazione del modulo, il risultato è che potete accedere all'indirizzo
http://localhost:8069/xpath_tutorial
e vederne il risultato.
Adesso, passo dopo passo vedremmo come riuscire a essere confindenti con le XPath
<template id="index" name="xpath_index">
<t t-call="web.layout">
<h1>Hello, Xpath!</h1>
</t>
</template>
Esempio 1: Aggiugiamo un poco di colore al nostro template
L'obiettivo di questo esempio è modificare il colore dell'intestazione h1 con il colore rosso senza modificare il codice della vista originale.
Per fare questo andremmo a definire un nuovo template index_inherit che eredita da quello di origine index.
Il contenuto del template inizia con il tag <xpath> che ci permette di modificare il contenuto del template da cui ereditiamo.
Troviamo due attributi fondamentali:
- expr: contiene l'espressione XPath (o selettore) del tag (o nodo) che vogliamo intercettare e modificare
- position: contiene la "posizione" su cui vogliamo intervenire, nel caso dell'esempio usiamo il valore attributes per intervenire sugli attributi del tag intercettato.
Di seguito trovate l'esempio che riporta la modifica dell'attributo style del nodo <h1> che si trova dentro la vista ereditata.
<template id="index_inherit" inherit_id="index" name="inherith">
<xpath expr="//h1" position="attributes">
<!-- Importante è il nome dell'attributo -->
<attribute name="style" add="color:red" />
</xpath>
</template>
Il risultato finale sarà che l'intestazione si colora di rosso. Potete provare da soli a cambiare l'intesazione di un altro colore oppure rimuovere la riga <attribute> così da vederne l'effettivo risultato.
Nella seconda parte andremmo ad approfondire i valori possibili dell'attributo position utilizzato dentro il tag XPath.
