Odoo: Facciamo chiarezza sulle XPath - Parte 2

Continuiamo la prima parte dell'articolo riguardo le XPath. Nella prima parte abbiamo visto la tecnologia generale che ci sta alla base del funzionamento delle XPATH.
Ricordo che potete trovare il codice sorgente usato in questo tutorial su questo repository.
Prima di iniziare, riporto un link della documentazione ufficiale di Odoo dove trovare ulteriori informazioni sul funzionamento di XPath su Odoo.


Odoo Xpath Documentation.

Odoo XPath: Struttura generale di una XPATH

Per capire come funziona una Xpath su Odoo è importante prima di tutto capirne la struttura. Di base una Xpath è fatta da:

• Attributo expr - Contiene il selettore che permette di individuare l'elemento su cui operare
• Attributo position - Indica la posizione (o l'azione) che si vuole intraprendere
• Corpo (o contenuto) - Di fatto, contiene le specifiche, con i valori di position [attributes,move], o il contenuto che si vuole iniettare, con i valori di position [inside,after,before,replace].

Di seguito la struttura generale di una Xpath che trovate su Odoo

<xpath expr="..." position="...">
    <!-- Corpo (o contenuto) della XPATH -->
</xpath>
            

Odoo XPath Position: dove mi posiziono?

Nel precedente articolo, abbiamo visto che con l'attributo expr è possibile individuare uno specifico elemento all'interno di una struttura XML.
In aggiunta a questo, è presente l'attributo position che permette di specificare - letteralmente - la posizione dove andare ad iniettare il nostro codice XML.
I valori che abbiamo a disposizione sono:

• attributes - il corpo della XPATH contiene le regole per modificare gli attributi del tag individuato da expr
• replace - sostituisce completamente quello che viene individuato dell'espressione expr con il corpo presente nella XPATH
• inside - inserisce il corpo della XPATH all'interno dell'elemento individuato dall'espressione expr
• before - inserisce il corpo della XPATH appena prima del tag individuato dall'espressione expr
• after - inserisce il corpo della XPATH appena dopo del tag individuato dall'espressione expr
• move - serve a spostare il tag individuato dall'espressione in un altra posizione

Abbiamo già visto nella prima parte come utilizzare il valore attributes.
Di seguito, proveremmo a realizzare quello che è rappresentato in figura con Odoo per capire meglio come funzionano le varie posizioni .
Ho preparato uno schema che ci supporta nel capire meglio il funzionamento delle posizioni.

Odoo XPath Position: Replace

Partendo dall'esempio di modulo presentato nella prima parte, se vogliamo sostituire il titolo allora possiamo usare il selettore che ci permette di prendere il tag del titolo (//h1) e scrivere come contenuto il nuovo titolo che vogliamo sostituire. Diventa semplice a questo punto scrivere la nostra XPath in questo modo:

<xpath expr="//h1" position="replace">
    <h1>Hello, Odoo with Xpath</h1>
</xpath>

In questo caso è importate sottolineare che verrà sostituito TUTTO il contenuto di H1 compreso se stesso.
Questo è il motivo per cui viene specificato nuovamente il tag H1 come contenuto della XPATH.

Odoo XPath Position: Inside

Se vogliamo inserire del contenuto all'interno di un altro elemento, allora bisogna prima costruire il selettore e poi utilizzare il valore inside per l'attributo position.
Nel nostro caso, se vogliamo andare a inserire un DIV dentro un elemento che ha id="mybox", il selettore sarà //div[@id='mybox']" mentre il valore di position sarà inside. Diventa semplice a questo punto scrivere la nostra XPath in questo modo:

<xpath expr="//div[@id='mybox']" position="inside">
    <div style="width: 300px; height:25px; border:1px solid lightgreen;margin-left:10px;">
      INSIDE
    </div>
</xpath>
        

Odoo XPath Position: Before

Se vogliamo inserire un tag DIV prima un elemento che ha id="mybox", allora il selettore da utilizzare sarà //div[@id='mybox']" mentre il valore di position sarà before. Diventa semplice a questo punto scrivere la nostra XPath in questo modo:

<xpath expr="//div[@id='mybox']" position="before">
    <div style="width: 300px; height:25px; border:1px solid orange;">
        BEFORE
    </div>
</xpath>
        

Odoo XPath Position: After

Se vogliamo inserire un tag DIV dopo un elemento che ha id="mybox", allora il selettore da utilizzare sarà //div[@id='mybox']" mentre il valore di position sarà after. Diventa semplice a questo punto scrivere la nostra XPath in questo modo:

<xpath expr="//div[@id='mybox']" position="after">
    <div style="width: 300px; height:25px; border:1px solid purple;">
        AFTER
    </div>
</xpath>
        

Conclusione

Il risultato finale dell'esercizio sarà questo

Abbiamo visto in questo articolo i valori possibili per l'attributo position. Rimane da vedere il valore speciale move che permette si muovere gli elementi all'interno dell'XML.
Nella prossima parte di questa serie di articoli sulle XPath vedremmo di approfondire questo e altri aspetti interessanti sulle Xpath con Odoo.

A presto!

Odoo: Facciamo chiarezza sulle XPath - Parte 1

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:

• https://www.w3schools.com/xml/xpath_syntax.asp
• https://developer.mozilla.org/en-US/docs/Web/XPath

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.

        
        <template id="index" name="xpath_index">
          <t t-call="web.layout">
            <h1>Hello, Xpath!</h1>
          </t>
        </template>
        
        

Adesso, passo dopo passo vedremmo come riuscire a essere confindenti con le XPath

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.