Elenco dei paesi 

Principio

La pagina 'elenco dei paesi' del sito ASAMPLE illustra il concetto di accesso ai dati proposto da XTEND.

In questo esempio, la pagina è composta:

  • Da un blocco elenco ABLKCOUNTRIES che effettua una richiesta sul contenuto della tabella TABCOUNTRY mediante l'interfaccia ACOUNTRY e che ne visualizza il contenuto. Il contenuto del blocco opera:
      • La selezione di una riga mediante un clic sul codice del paese e la visualizzazione del dettaglio della valuta e della lingua in basso al riquadro
      • La visualizzazione di una immagine collegata ad ogni elemento dell'elenco (bandiera) mediante l'utilizzo di un token campo di tipo 'Accesso immagine'
      • La paginazione
      • Ordinamento ascendente e discendente sul codice paese
  • Da due blocchi semplici ABLKCURRENCY e ABLKLANG collegati al blocco ABLKCOUNTRIES che permettono di visualizzare il dettaglio della valuta e della lingua del paese selezionato
      • La gestione della visualizzazione del dettaglio, in funzione della selezione o meno di una riga, è gestita mediante l'utilizzo di un token link condizionato ADISPMAINSELECT
  • Da un blocco ABLKDOCHTML che visualizza il contenuto HTML dinamico della pagina (descrizione)

Se il sito XTEND è stato creato da una copia del sito ASAMPLE le schede di parametrizzazione sono già create.

Altrimenti è possibile sia crearle che copiarle singolarmente a partire dal sito ASAMPLE con il bottone di azione X3 'Copia'.

Parametrizzazione X3

Fase 1 - Creazione delle interfacce

Le tre interfacce ACOUNTRY, ALANGUAGES, ACURRENCIES che permettono di accedere rispettivamente alle tabelle TABCOUNTRY, TABLAN, TABCUR sono di tipo 'Accesso dati'.

Le procedure di creazione sono identiche.

Solo i nomi delle tabelle e l'elenco dei campi selezionati sono diversi.

1. Creare la scheda interfaccia

2. Selezionare la tabella

3. Registrare

4. Generare l'accesso dopo aver inserito i campi utilizzati

5. Registrare e validare

6. Generare i campi con il menùStrumenti\Creazione token campi

Tipo
    Accesso tabella

Codice tabella
    TABCOUNTRY, TABLAN, TABCUR

Nome di pubblicazione
    TABCOUNTRY, TABLAN, TABCURRENCY di default ma è possibile modificarlo

Visualizzazione dei messaggi
    Tutti

Accesso protetto
    no

Genera accesso
    Selezionare i campi e generare il web service cliccando su OK

Il bottone 'Genera accesso' effettua le seguenti operazioni:

  • propone di inserire il numero massimo di record letti ad ogni chiamata del web service ('N° massimo di righe')
  • richiede di selezionare i campi utili
  • genera il programma 4GL che verrà richiamato dal web service con nome 'W + nome di pubblicazione'
  • crea la scheda sotto-programma di descrizione dei parametri
  • pubblica il web service con il nome di pubblicazione precedentemente inserito.

Fase 2 - Creazione delle entità

Come per le interfacce, le entità ACOUNTRY, ALANG, ACURRENCY sono create nella stessa maniera.

Sono differenti solo il nome dell'interfaccia e l'elenco dei campi.

1. Creare l'entità di tipo 'Accesso dati' basata sull'interfaccia.
    L'entità è utilizzata per memorizzare i dati delle richieste sulla tabella

2. Associare i campi
    Aiutarsi con il menù Strumenti\Aiuto alla compilazione

3. Inserire il campo chiave dell'entità nel riquadro 'Campi (selezione)'

4. Registrare e validare

Aggiunta del campo di visualizzazione della bandiera

Per visualizzare la bandiera occorre creare un token campo COUNTRYFLAG di tipo 'Accesso immagine' e parametrizzarlo affinchè generi una URL di accesso al file .gif che contiene l'immagine del flag

Il campo COUNTRYFLAG sarà inserito in un tag <img>.

La parametrizzazione del token consiste nel:

  • indicare la directory di base (root) dei file
      • Design HTML in questo caso
  • completare con la sotto-directory
      • FLAGS in questo caso
  • indicare se l'estensione e quella definita a livello del sito o specifica al campo
      • gif in questo caso poichè quella standard del sito è jpg

In questo caso i file bandiera sono memorizzati in un dossier FLAGS della directory HTML ed hanno come nome il CODICEPAESE.gif.

Validare il campo dopo la creazione.

Mapping del campo di visualizzazione della bandiera

Il campo COUNTRYFLAG non fa parte dell'interfaccia e deve essere calcolato durante la creazione dell'entità.

Basta aggiungere il campo COUNTRYFLAG all'entità ACOUNTRY e 'mapparlo' con il campo CRY che contiene il codice paese.

Durante il mapping, il server XTEND aggiungerà un campo COUNTRYFLAG all'entità e lo valorizzerà con il codice paese.

Durante la visualizzazione, il campo sarà trasformato in una URL nell'attributo src del tag img che punterà sul file CODEPAY.gif

<img height="25" width="40"
src="/xtend/data/remote/SOLSUPV6/SUPERV/X_TEND/X_HTML/ASAMPLE/ITA/FLAGS/ATF.gif"/>

In questo esempio l'url punta direttamente sul file del server X3.

  • /xtend/data/remote/ punta su una 'servlet' XTEND di lettura dei dati in X3
  • SOLSUPV6 punta sulla directory X3_PUB della soluzione SOLSUPV6 sul server X3
  • SUPERV/X_TEND/X_HTML/ punta sulla radice dei progetti HTML dei dossier X3 SUPERV
  • ASAMPLE/ITA/ punta sulla radice del progetto HTML (lingua ITA) del sito ASAMPLE
  • FLAGS/ATF.gif punta sul file bandiera all'interno del progetto HTML

Fase 3 - Creazione dei token blocco

I token blocco sono inseriti nella pagina HTML. Sono loro ad attivare la richiesta verso X3, la lettura e la visualizzazione dei dati.

1. Creare un blocco

    • Selezionare il tipo e l'entità
    • Selezionare il numero di righe per blocco per i blocchi 'Multi record'

2. Aggiungere i criteri di selezione e di ordinamento

3. Registrare e validare

Blocco paese

Come esempio si è creato un blocco 'Multi record' ABLKCOUNTRIES che punta sull'entità ACOUNTRY e che seleziona le schede che hanno almeno un codice CRY (CRY >=AA).

Nel database di test alcuni codici hanno meno di due caratteri.

Per autorizzare l'ordinamento sui codici paese è stato relizzato un ordinamento ascendente sul codice paese CRY di default e autorizzata la modifica dell'ordinamento mediante un link dinamico.

Sono i token link dinamico ADLKCOUNTRYSORTDW e ADLKCOUNTRYSORTUP che permetteranno l'ordinamento del riquadro.

Tipo di ordinamento
    Campo

Ordinamento modificabile
    Si

Campi di ordinamento
    CRY

Il blocco ABLKCOUNTRIES è stato definito come blocco principale della pagina web ACOUNTRIES, il che permette di utilizzare l'alias AMAIN piuttosto del nome del blocco per indirizzare tale blocco:

  • la selezione dei blocchi valuta e lingua utilizza AMAIN al posto di ABLKCOUNTRIES
  • l'html che gestisce la paginazione utilizza anche AMAIN (AMAIN.aDlkNextPage...) e può essere riutilizzato in altre pagine
Blocchi lingua e valuta

I blocchi ABLKLANG e ABLKCURRENCY sono 'Mono record' e selezionano rispettivamente le entità ALANG e ACURRENCY in funzione del codice lingua (LAN) e del codice valuta (CUR) della riga selezionata nel blocco principale AMAIN_ (blocco ABLKCOUNTRIES).

Fase 4 - Link paese su valuta e lingua

Token link dinamico

Il link è effettuato mediante il token 'link dinamico' ADLKSELECT che seleziona la riga di un blocco (azione web speciale ABLKSELECT ) e rivisualizza la stessa pagina.

Questa azione indica al server XTEND che la riga che contiene il link su cui ha cliccato l'utente diventa la riga selezionata.

Quando un blocco ha una riga selezionata, tutti i token campi che si riferiscono a questo blocco MYBLOCK.MYFIELD assumono il valore del campo della riga selezionata.

In questo caso, siccome i blocchi lingua (ABLKLANG) e valuta(ABLHCURRENCY) hanno come selezione AMAIN.LAN et AMAIN.CUR (AMAIN è l'alias del blocco ABLKCOUNTRIES), questi blocchi visualizzeranno le informazioni nella lingua e nella valuta del paese selezionato.

Visualizzazione del dettaglio

Per questo esempio è stato scelto di visualizzare il risultato nella stessa pagina e di gestire la visualizzazione mediante un token 'blocco condizionato' ADISPMAINSELECT che visualizza o nasconde un campo HTML a seconda che il blocco principale MAIN abbia una riga selezionata o meno.

Fase 5 - Token link dinamici di ordinamento

I token ADLKCOUNTRYSORTUP e ADLKCOUNTRYSORTDW permettono di ordinare l'elenco dei paesi per codice ascendente e discendente.

Pagina corrente
si

Avanzamento attività
No in quanto non è necessario tracciare questo tipo di azione

Selezione sull'entità
ACOUNTRY: Entità da selezionare (quella del blocco dei paesi)

Applicazione selezione
'Sostituisce la selezione del blocco principale': L'ordinamento/selezione postati dal link dinamico a destinazione della pagina (stessa pagina in questo caso) sostituiranno l'ordinamento/selezione del blocco principale AMAIN (Blocchi ABLKCOUNTRIES in questo caso)

Parametrizzazione del folder selezione

Tipo di selezione
Nessuna: poichè si desidera modificare solo i criteri di ordinamento del blocco

Tipo di ordinamento
Campo: Campo CRY in questo caso con l'ordine ascendente (ADLKCOUNTRYSORTUP) e discendente (ADLKCOUNTRYSORTDW )

Fase 6 - Creazione della pagina

Creare la pagina ACOUNTRIES (non protetta) che ha come blocco principale il blocco ABLKCOUNTRIES.

Pagina HTML

Link verso la pagina

Inserimento del token pagina web ACOUNTRIES nel menù a sinistra per visualizzare la pagina.

    <TD class="button"><A adx="ACOUNTRIES">Paese</A></TD>

Per effettuare un link semplice (senza azione né selezione) verso una pagina web mediante un tag anchor basta inserire un token di tipo 'pagina web' nel tag (<a adx="PaginaWeb"></a>) per limitare il numero di token 'link dinamici'.

Visualizzazione dei paesi

La visualizzazione dell'elenco dei paesi consiste nel posizionare il blocco ABLKCOUNTRIES che effettua una iterazione sull'elenco dei paesi e permette di creare tante righe nel riquadro quanti sono i paesi nell'elenco.

Per ogni riga si creano tante celle con un tag adx="" quanti sono i dati da visualizzare

<table width="100%" border="1">
    <tr class="tabTitle">
        <th width="15%">
           <a adx="ADLKCOUNTRYSORTUP">+</a>&nbsp;&nbsp;
           <b>Code</b>
           <a adx="ADLKCOUNTRYSORTDW">-</a>&nbsp;&nbsp;
        </th>
        <th width="20%"><b>Paese</b></th>
        <th width="15%"><b>Continente</b></th>
        <th width="15%"><b>Valuta</b></th>
        <th width="15%"><b>Lingua</b></th>
        <th width="20%"><b>Bandiera</b></th>
    </tr>    
<!adx="ABLKCOUNTRIES:xselect=false">  
    <tr adx="aLineStyle:xattr=Class">
        <td><a adx="ADLKSELECT"><span adx="CRY"></span></a></td>
        <td adx="CRYDES"></td>
        <td adx="CONTINENT"></td>
        <td adx="CUR"></td>
        <td adx="LAN"></td>
        <td><img adx="COUNTRYFLAG" height="25" width="40"></td>                       
    </tr> 
<!adx="ABLKCOUNTRIES">         
</table>
 

Il parametro xselect=false del blocco ABLKCOUNTRIES indica di non selezionare la prima riga di default per nascondere il dettaglio fin quando l'utente non ha selezionato una riga.

I link per l'ordinamento sono posizionati nel titolo della colonna Codice.

<td>
    <a adx="ADLKCOUNTRYSORTUP">+</a>&nbsp;&nbsp;
    <b>Codice</b>
    <a adx="ADLKCOUNTRYSORTDW">-</a>&nbsp;&nbsp;
</td>

La bandiera è visualizzata mediante un token field di tipo 'Accesso immagine' posizionato in un un tag img.

<img adx="COUNTRYFLAG" height="25" width="40">

Il link verso il dettaglio valuta/lingua è inserito nella cella che visualizza il codice paese.

<td><a adx="ADLKSELECT"><span adx="CRY"></span></a></td>

I colori delle righe sono alternati.

<tr adx="aLineStyle:xattr=Class">

Per visualizzare le righe di un riquadro con i colori alternati si posiziona un token adx nel tag <tr>.
<tr adx="aLineStyle:xattr=Class">
aLineStyle contiene il nome della classe e xAttr=Class indica che occorre valorizzare l'attributo classe con il valore del campo aLineStyle.
Le classi css (aLineStyle) che sono applicate alle righe del riquadro sono definite nella scheda di parametrizzazione del blocco.

Visualizzazione del paese selezionato

Il dettaglio è visualizzato non appena viene selezionata una riga mediante un clic sul codice paese.

E' il token 'link condizionato' ADISPMAINSELECT che condiziona la visualizzazione.

I blocchi ABLKCURRENCY e ABLKLANG attivano la lettura delle entità valuta e lingua del paese selezionato e permettono la visualizzione del dettaglio.

<!adx="ADISPMAINSELECT">
    <table>
    <!adx="ABLKCURRENCY">
        <tr>
            <td><b>Valuta</b></td>
            <td adx="CUR" width="50"></td>
            <td><b>Descrizione</b></td>
            <td adx="INTDES"  width="150"></td>
            <td><b>Simbolo</b></td>
            <td adx="CURSYM" width="50"></td>
            </td>
         </tr>
    <!adx="ABLKCURRENCY">
    <!adx="ABLKLANG">
        <tr>
            <td><b>Lingua</b></td>
            <td adx="LAN"></td>
            <td><b>Descrizione</b></td>
            <td adx="INTDES"></td>
            <td></td>
        </tr>
    <!adx="ABLKLANG">
    </table>
<!adx="ADISPMAINSELECT">

Visualizzazione della descrizione della pagina

<!adx="ABLKDOCHTML">
<div adx="TESTO">
</div>
<!adx="ABLKDOCHTML">

La paginazione

Per gestire la paginazione si utilizza la libreria pagination.lbi che contiene un codice HTML generico che può essere utilizzato per il blocco principale (AMAIN) di tutte le pagine HTML.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--This library is used to perform pagination on AMAIN bloc-->
<table width="100%">
    <tr>
        <td align="left" width="20%">
        <!--Hide FirstPage and Previous actions if current page is the first page-->           
            <!adx="aHideMainFirstPage">
                <!---->
                <a href="" adx="AMAIN.aDlkFirstPage">Prima</a>
                <a href="" adx="AMAIN.aDlkPrevPage">Precedente</a>
            <!adx="aHideMainFirstPage">
        </td>
        <!--Displays page information-->
        <td align="center" width="60%">
            Pagina  : <span adx="AMAIN.aPagePos"></span> -
            Numero di elementi: <span adx="AMAIN.aBlkNbElmts"></span>
        </td>
        <td align="right" width="20%">                         
        <!--Hide LastPage and Next actions if current page is the last page--> 
            <!adx="aHideMainLastPage">
                <a href="" adx="AMAIN.aDlkNextPage">Successiva</a>
                <a href="" adx="AMAIN.aDlkLastPage">Ultima</a>
            <!adx="aHideMainLastPage">
        </td>
    </tr>
</table>

Per richiamare un metodo (o un campo) di un blocco XTEND si utilizza la sintassi Blocco.Azione o Blocco.Campo.

    <a href="" adx="AMAIN.aDlkFirstPage">Prima</a>
    <a href="" adx="AMAIN.aDlkPrevPage">Precedente</a>