Italian B4XPages - (scarso) Tutorial in italiano

LucaMs

Expert
Licensed User
Longtime User
Dato che secondo me (e non certo soltanto secondo me, anzi) è molto meglio creare progetti di tipo B4XPages che i classici B4A, e che alcuni membri di B4X li trovano (stranamente) ostici, ho deciso di provare a scrivere un breve tutorial sull'argomento.

Non sarà granché, sia perché non so se ne sarò all'altezza, sia perché non preparo nemmeno una scaletta, cosa che sarebbe più che utile.

Uhm... allora perché scriverlo sapendo già che non sarà granché? Ok, ci ho già ripensato, preparerò una scaletta e cercherò di fare una cosa perlomeno decente.
Per ora voglio solo scrivere un paio di post "curiosi".
 

LucaMs

Expert
Licensed User
Longtime User
Solo per curiosità, ho voluto chiedere a ChatGPT di scrivere un breve tutorial sulle B4XPages.

Pessima risposta, inutile e sbagliata. Parte finale del suo tutorial:

1698223269981.png


Del tutto sbagliato.
 

LucaMs

Expert
Licensed User
Longtime User
Deluso dalla risposta di ChatGPT (post precedente), gli ho chiesto:

Quali sono i maggiori vantaggi nel creare un progetto B4XPages anziché un classico progetto B4A?

Ancora non ho letto la sua risposta ma la riporto qui.

Risposta:

B4XPages è un framework aggiuntivo sviluppato per B4A (Basic4Android) che offre una serie di vantaggi rispetto a un classico progetto B4A basato sulla progettazione delle interfacce utente con il designer visuale. Ecco alcuni dei principali vantaggi di B4XPages rispetto a un progetto B4A tradizionale:

1. **Struttura basata su pagine**: B4XPages organizza il progetto in pagine, ognuna delle quali può contenere un layout, codice e risorse associate. Questa organizzazione rende più semplice la gestione e la navigazione tra le diverse schermate dell'app.

2. **Gestione automatica della vita delle pagine**: B4XPages gestisce automaticamente il ciclo di vita delle pagine, semplificando il caricamento, la distruzione e la navigazione tra di esse. Questo riduce la complessità del codice necessario per gestire le diverse attività e i layout.

3. **Architettura MVVM (Model-View-ViewModel)**: B4XPages favorisce un'architettura MVVM, che aiuta a separare la logica di business (ViewModel) dall'interfaccia utente (View). Ciò rende il codice più organizzato e manutenibile.

4. **Supporto per la condivisione di variabili globali**: B4XPages semplifica la condivisione di variabili e dati tra le pagine, riducendo la necessità di passare dati tra le diverse attività o layout.

5. **Nessuna dipendenza da Activities**: Con un progetto B4A tradizionale, spesso si ha bisogno di gestire più attività, il che può complicare il codice e la gestione dello stato. B4XPages evita questa complessità.

6. **Navigazione semplificata**: B4XPages offre un sistema di navigazione tra le pagine che è più intuitivo rispetto alla gestione delle attività Android. È possibile passare da una pagina all'altra in modo più semplice.

7. **Gestione degli eventi centralizzata**: B4XPages consente di gestire gli eventi delle pagine in modo centralizzato, semplificando la gestione degli eventi di tutti i componenti all'interno di una pagina.

8. **Facilità di manutenzione**: La struttura modulare di B4XPages facilita la manutenzione dell'app, consentendo di apportare modifiche a singole pagine senza influire sul resto dell'applicazione.

9. **Riuso del codice**: Le pagine possono essere progettate in modo indipendente e riutilizzate in più parti dell'applicazione o in progetti diversi.

10. **Supporto per il raffinamento degli stili e dei temi**: B4XPages offre un maggiore controllo sulla personalizzazione dei temi e degli stili delle pagine, rendendo più semplice l'aspetto coerente dell'app.

In generale, B4XPages è progettato per semplificare lo sviluppo di applicazioni Android, migliorando l'organizzazione del codice, la gestione dello stato e la manutenibilità complessiva del progetto. Tuttavia, la scelta tra un progetto B4A tradizionale e B4XPages dipenderà dalle esigenze specifiche del tuo progetto e dalla tua familiarità con il framework.


Commento solo l'ultima affermazione:
"Tuttavia, la scelta tra un progetto B4A tradizionale e B4XPages dipenderà dalle esigenze specifiche del tuo progetto"

Non credo ci siano progetti per i quali sia preferibile scrivere un classico progetto B4A anziché B4XPages. L'unico svantaggio delle B4XPages è il fatto che per questo tipo di progetto l'app dovrebbe avere un solo orientamento, verticale (portrait) o orizzonatale (landscape), ma anche questo non è esattamente così, in quanto è sempre possibile aggiungere altre Activity con diverso orientamento rispetto a quella principale (Main).
 
Last edited:

LucaMs

Expert
Licensed User
Longtime User

LucaMs

Expert
Licensed User
Longtime User
Dunque (niente scaletta, scrivo direttamente qui ed anche con un discreto mal di testa :mad:).

Salto totalmente ed ovviamente l'installazione di B4A e del necessario, dando per scontato che sia stato fatto nel modo giusto.

Per creare un nuovo progetto, si può scegliere:
1698231743240.png


La scelta farà si che verrà creato un nuovo progetto con alcuni "moduli" specifici.
Per semplificare al massimo, voglio che intendiate che "modulo" stia per "foglio in cui scrivere codice", così come li vedete nell'IDE-Editor (c'è un motivo per cui scrivo 'sta stupidaggine 😄).

Default è per "normali" applicazioni B4A, B4XPages, indovinate un po'? Ecco, appunto.
Nel primo caso verrà subito aggiunta al progetto un'Activity di nome Main, nel secondo anche la pagina principale del progetto, B4XMainPage. In entrambi anche il "modulo di servizio" Starter.


[Nota "extra": come vedete potrei anche scegliere MyB4XPages come tipo di nuovo progetto. Questo perché è possibile creare i propri "template/modelli di progetto", volendo, (ottima cosa) e "MyB4XPages" è un modello che ho creato per me stesso].
 

LucaMs

Expert
Licensed User
Longtime User
Sperando che abbiate letto i tanti vantaggi dei progetti B4XPages rispetto ai "classici" B4A, ne riassumo un paio molto importanti, dal mio punto di vista.

1. Nessuna lotta con la gestione delle Activity, del loro "ciclo di vita", delle interazioni tra loro. Normalmente ci sarà un'unica Activity, la Main.
2. La maggiore facilità nello sviluppo di un'app che possa girare sia su Android che su iOS. Ad esempio, io non ho B4i (né hw Apple) e non conosco gli elementi principali, base di questo ambiente, come sono le Activity in Android; bene, con le B4XPages non ho bisogno di saperlo, scrivo codice in queste e non mi preoccupo di come, in B4i-iOS, si passi da un "form" ad un altro, in quanto ne avrò solo uno: il Main.
 

LucaMs

Expert
Licensed User
Longtime User
Mettiamo il caso che io debba sviluppare una semplice app, che abbia tre "schermate":
  1. Login
  2. Elenco prodotti
  3. Dettagli prodotto
In un classico progetto B4A potrei creare un'Activity per ognuna di queste "schermate" (in B4i? Come ho scritto sopra... non lo so!).

La gestione di più Activity, come detto, può comportare vari problemi.
Si potrebbe fare in un modo molto semplice: potrei creare 3 pannelli, uno per ciascuna "attività", funzionalità del progetto, caricare in ognuna il relativo layout e, a seconda dello stato dell'app, visualizzare solo il pannello necessario in quel momento. Il tutto nell'unica Activity, la Main.

Sì, andrebbe bene e la cosa funzionerebbe (sempreché non diate per errore lo stesso nome a più views - quelli che in VB erano i "controlli").
Ma... tutto il codice sorgente dovreste scriverlo nell'unico "modulo", il modulo di tipo Activity Main, mentre per funzionalità diverse, meglio separare il codice, no?! (vecchio detto, sfruttato anche in informatica: "Divide et impera").

Ecco che un progetto B4XPages, composto da 3 pagine, già è più comodo ed utile. Sarà come avere i 3 pannelli di cui sopra con, in aggiunta, tutto il sorgente (routine-evento comprese) "associato" (ammazza come spiego male 😄; spero di migliorare nel prossimo post. Certo che se avessi preparato una scaletta e pensato prima, anziché mettermi subito a scrivere... Proprio come iniziare a buttare giù codice sorgente senza prima fare analisi!).
 

LucaMs

Expert
Licensed User
Longtime User
Senza voler offendere nessuno alcuno, brevemente ed a modo mio, vi ricordo cosa sia una classe e le istanze di una classe (oggetti), in quanto è importante tenere a mente che una B4XPage altro non è che una classe, della quale creerete un'istanza (oggetto), di solito proprio una sola.

Ho paragonato classi e istanze di classi rispettivamente a formine per biscotti e biscotti.

Volendo cucinare dei biscotti carini, prendo una formina a stella, la riempio di impasto che poi posiziono su una teglia. Ripeto questa operazione più volte, ottenendo alla fine N biscotti a forma di stella sulla teglia.

Ecco, potete immaginare la classe come fosse la formina-stella ed i biscotti come "istanze (oggetti) della classe formina-stella".

E' come quando create 10 Label: esiste (da qualche parte, non nel vostro codice sorgente) la classe Label e voi create 10 istanze di questa, Label1, Label2, ...
(Se fossi un prof e mi consegnaste un progetto con Label1, Label2, etc. userei metodi "antichi": bacchettate sulle mani 😄. Date SEMPRE nomi decenti a tutto!)

Perché in precedenza ho scritto che vorrei che pensaste ai "moduli" come le varie pagine di testo che scrivete nell'IDE-Editor? Perché non bisogna confondere questo testo, il "modulo di classe", con gli oggetti (le istanze della classe, lo ripeterò 100 volte) che creerete a partire da quella classe.
 

LucaMs

Expert
Licensed User
Longtime User
In pratica, immaginate il progetto così (in fretta e furia, visto che non mi pagate 😄. Ma vi prego, non licenziatemi: (non) ho famiglia da mantere 😄:confused:)

1698235097304.png


Come detto preDecentemente, si potrebbe fare anche con 3 pannelli, da visualizzare uno alla volta, a seconda dello stato dell'app, ma così facendo ognuno di quei 3 "parallelelepipedi" ha sia un pannello che codice eseguibile, sono appunto B4XPage. [Più precisamente, saranno OGGETTI B4XPage, quindi non i "moduli di classe B4XPage"]

[Pausa]
 
Last edited:

LucaMs

Expert
Licensed User
Longtime User
Post un po' fuori tema, ma non molto.

Sarebbe una buona abitudine scrivere il sorgente B4A in modo che fin dall'inizio sia il più possibile compatibile con B4i (o viceversa. Anche B4J, ma ovviamente i primi due sono principalmente per hw mobile, quindi maggiore somiglianza), questo a prescindere dalle B4XPages.

Per fare questo:
  • dichiarare le view come B4XView (quando possibile; nel caso di custom view = controlli personalizzati, dovrete dichiararli del tipo specifico, il Designer vi aiuterà a fare la scelta giusta). In ogni momento, se necessario, sarà possibile eseguire il "casting in linea" (ad esempio, avete una B4XView di nome InNome, sapete che in B4A è una EditText e quindi potete scrivere:
    InNome.As(EditText).TextSize = 20. Esempio non eccezionale 😄, visto che per il TextSize non sarebbe necessario il casting)
  • usare il più possibile custom view che siano B4X compatibili
  • utilizzare i metodi di XUI ed altre librerie compatibili B4X
  • usare le istruzioni per la compilazione condizionata (#IF B4A... ELSE IF B4I...)
 
Last edited:

LucaMs

Expert
Licensed User
Longtime User
Non avendo preparato una scaletta (furbastro), proseguo quasi a caso. Magari mi (CI) porrete domande, dopo il mio ultimo post che conterrà: "Ho concluso = me so' stufato" 😄

Ok, creo un nuovo progetto di tipo B4XPages; poi? Come aggiungo altre pagine?

1698247286686.png


(Notare che il penultimo menu selezionato è "Class Module", il che conferma che una B4XPage sia una classe).

1698247420893.png


Selezionando "Add module to parent folder", questa nuova B4XPage (file di testo! Modulo di classe) verrà salvata all'ESTERNO della cartella B4A, ovvero nella cartella padre di questa, in modo che sarà condivisa con gli altri "linguaggi" (B4i e B4J).
1698247727405.png

Notare che non sarà automaticamente aggiunta ai progetti B4i/B4J, dovrete "importarla" tramite il menu: Project - Add existing modules.
Una volta selezionato il file (pagProdotti.bas):

1698248159597.png

scegliendo: "Link - relative path", il progetto corrente punterà a quel file, non verrà copiato nella cartella di progetto (specifica del linguaggio), in modo che, appunto, quel file, quella B4XPage, sarà condivisa e le modifiche potranno essere fatte da qualunque IDE (B4X, ovviamente).
 

LucaMs

Expert
Licensed User
Longtime User
A questo punto avrete aggiunto una nuova B4XPage al progetto. In realtà è un file di testo ed è una classe, non un oggetto utilizzabile.

Per poterla usare, a runtime, diciamo, dovrete creare un oggetto da quella classe, ovvero dichiarare una variabile di quel tipo. Normalmente lo farete nella B4XMainPage, anche se non è affatto obbligatorio. Meglio dichiararla come pubblica, in modo che la possiate richiamare da varie parti del progetto.

Ad esempio, nella B4XMainPage:

1698248800582.png


(fatevi gli affari vostri, circa le altre 3 pagine 😄, servivano come esempio)

Ok, ma la variabile-oggetto PageProdotti ancora non è stata inizializzata. Molti lo fanno nella B4XPage_Create, in quanto questa viene eseguita una sola volta. Secondo me, per logica, per "correttezza", sarebbe meglio farlo nella Sub Initialize, il cui scopo è proprio quello di consentire l'inizializzazione delle variabili della classe.

1698249002442.png


Per poter utilizzare comodamente quella "pagina-oggetto", va aggiunta all'elenco delle pagine esistenti. Questo va fatto nella B4XPage_Create:
B4X:
B4XPages.AddPage("pgProdotti", PageProdotti)
"pgProdotti" sarà la chiave, l'id testo per poterla utilizzare in alcune situazioni, anche se, avendo dichiarato la variabile-oggetto PageProdotti come pubblica nella B4XMainPage, si potrà accedere ad essa direttamente:
B4X:
B4XPages.GetManager.MainPage.PageProdotti.Fill
La lunghezza della riga qui sopra è dovuta al fatto che per accedere alla PageProdotti dovrete poter accedere a MainPage e quello è il modo.
Si potrebbe fare in altro modo (creare una classe di utilità del progetto...) in modo da poter scrivere una riga più breve per accedere a B4XMainPage, ma direi che non sia il caso di spiegare qui come farlo, per non allungare il brodo, già fin troppo annacquato 😄).
 

XorAndOr

Active Member
Licensed User
Longtime User
Ok, ma la variabile-oggetto PageProdotti ancora non è stata inizializzata. Molti lo fanno nella B4XPage_Create, in quanto questa viene eseguita una sola volta. Secondo me, per logica, per "correttezza", sarebbe meglio farlo nella Sub Initialize, il cui scopo è proprio quello di consentire l'inizializzazione delle variabili della classe.

View attachment 147227
Inizializzo le pagine sempre in B4XPage_Create...volevo capire dove è meglio inizializzarle
se in Public Sub Initialize oppure in Page_Create, se ci sono casi in cui è meglio o peggio
grazie @LucaMs
 

Filippo

Expert
Licensed User
Longtime User
Inizializzo le pagine sempre in B4XPage_Create...volevo capire dove è meglio inizializzarle
se in Public Sub Initialize oppure in Page_Create, se ci sono casi in cui è meglio o peggio
grazie @LucaMs
Ok, ma la variabile-oggetto PageProdotti ancora non è stata inizializzata. Molti lo fanno nella B4XPage_Create, in quanto questa viene eseguita una sola volta. Secondo me, per logica, per "correttezza", sarebbe meglio farlo nella Sub Initialize, il cui scopo è proprio quello di consentire l'inizializzazione delle variabili della classe.
 

Sabotto

Active Member
Licensed User
Per poter utilizzare comodamente quella "pagina-oggetto", va aggiunta all'elenco delle pagine esistenti. Questo va fatto nella B4XPage_Create:
B4X:
B4XPages.AddPage("pgProdotti", PageProdotti)
"pgProdotti" sarà la chiave, l'id testo per poterla utilizzare in alcune situazioni, anche se, avendo dichiarato la variabile-oggetto PageProdotti come pubblica nella B4XMainPage, si potrà accedere ad essa direttamente:
B4X:
B4XPages.GetManager.MainPage.PageProdotti.Fill
La lunghezza della riga qui sopra è dovuta al fatto che per accedere alla PageProdotti dovrete poter accedere a MainPage e quello è il modo.
Qui non ho ben capito 2 cose:
1) Che metodo è "Fill"? Non riesco a trovarlo
2) Non è più semplice/comodo/breve usare appunto la sua ID così?
B4X:
PgProdotti.Fill

Altro dubbio:
L'utilità di AddPageAndCreate rispetto ad AddPage serve solo quando devo riferirmi a controlli presenti nella pagina (se non uso Create i controlli non esisterebbero ancora...). E' questo il motivo?

E comunque, ti sei già fermato con sto tutorial?!?? Dai dai...continua! E' fatto benissimo altro che scarso!
 
Top