Italian Menu espandibile B4J

[Schakalaka]

Buongiorno,
sto cercando di implementare il menu espandibile sul mio attuale menu in b4J
l' attuale utilizza una customlistview, ed utilizza l' esempio delle 3 pagine, qui sul forum.

Codice:

    Dim bitmaps As List = Array(Chr(0xF015), Chr(0xF14A), Chr(0xF2BE),Chr(0xF00B) ,Chr(0xF098),Chr(0xF00B),Chr(0xF2B9) ,Chr(0xF00B),Chr(0xF11C))
    Dim menuiItem As List = Array("Home","Assegnazioni","Aggiungi Utenti", "Lista Utenti", "Aggiungi Device", "Lista Devices","Aggiungi Sim", "Lista Sim","Aggiungi Accessori")

    param.Put("form", menufrm)
    param.Put("pane", Panebasic)
    For i = 0 To menuiItem.Size-1

        clvMenu.Add(CreateMenuItem(clvMenu.AsView.Width,bitmaps.Get(i),menuiItem.Get(i)),"")
        
    Next

Private Sub CreateMenuItem(Width As Int, Title As String, text1 As String) As Pane
    Dim p As B4XView = xui.CreatePanel("")
    Dim height As Int = 70dip
    p.SetLayoutAnimated(0, 0, 0, Width, height)
    p.LoadLayout("clv_menuItemparent")

    lblTitle.Text = Title
    lblContent.Text = text1

    Return p
End Sub

Private Sub clvMenu_ItemClick (Index As Int, Value As Object)
    Dim nomePrg As String = menuiItem.Get(Index)
    If Index < 0 Then Return
    Panebasic.RemoveAllNodes
    Select nomePrg
        Case "Uscita"
            ExitApplication
       Case "Aggiungi Utenti"
            
            CallSubDelayed2("addUser", "Show",param)
 
        Case "Lista Utenti"

            CallSubDelayed2("listUsers", "Show",param)

        Case "Aggiungi Device"
            
            CallSubDelayed2("addDevice", "Show",param)
        
        Case "Lista Devices"

            CallSubDelayed2("listDevices", "Show",param)
            
        Case "Aggiungi Sim"
            
            CallSubDelayed2("addSim", "Show",param)
        
        Case "Lista Sim"
            
            CallSubDelayed2("listSims", "Show",param)
            
        Case "Assegnazioni"
            
            CallSubDelayed2("assegnazioni", "Show",param)
        
        Case "Aggiungi Accessori"
            
            CallSubDelayed2("addAccessory", "Show",param)
            
        Case Else
            Try
                Log(nomePrg)

                CallSubDelayed2 (nomePrg, "Show", param)
                
            Catch
                Log("HOME")

            End Try
    End Select
End Sub

considerando che aggiungerò altre voci, volevo accorpare alcune voci aggiungendo un menu a "espansione"
Tipo:
"Gestione utenti" voce principale che contiene "Aggiungi Utenti" e "Lista Utenti" come sotto menu
Ogni voce è composta da una icona e dal titolo

Ho provato vari approcci tipo aggiungere le voci in map, ma finora senza alcun risultato. anche chiedendo a chatgpt

Qualcuno ha già avuto modo di creare un menu così??

Grazie

 

[LucaMs]

Sto litigando con una cosa molto simile: una TreeView (sarà una custom view), ma per ora mi sta facendo ammattire l'apertura/chiusura dei nodi:

1 - Non fare caso alla bruttezza, mi serve solo per risolvere quei problemi (apertura/chiusura), non sono stato ad occuparmi del look.
In ogni elemento puoi caricare un layout, che nel tuo caso sarebbe composto dalla label per la voce di menu e una B4XImageView (a meno che non fai le icone col testo, Material o FontAwesome).
2 - Posso aggiungere una proprietà che consenta al programmatore-utilizzatore di avere la freccia sulla destra
3 - Puoi impostare l'indentazione su zero
4 - puoi decidere la larghezza dei nodi, fissa o massima possibile.

In alternativa, stavo per suggerirti la classe di estensione delle CLV di Erel, per gestire CLV nidificate, ma ho appena letto in quel thread che in B4J e B4I non è necessaria (sottinteso: ottieni automaticamente la possibiltà di scrolling delle CLV più interne).
Quindi potrei usare delle CLV annidate, ma dovresti fare in modo che un click sul primo item chiuda/apra gli altri.

 

[LucaMs]

Ecco, e adesso, cercando, ho trovato qualcosa che potrebbe perfino fare al caso mio, modificando il sorgente, oltre al tuo:
https://www.b4x.com/android/forum/t...g-or-collapsing-xcustomlistview-items.106148/





P.S. Beh, no, forse al caso tuo, perché potresti caricare in ogni item di quella CLVExpandable un'altra CLVExpandable, ma a me serve un altro elemento grafico che per ora manca anche al mio progetto, ed è un elemento "funzionale".

 

[Star-Dust]

Thread '[B4X] [XUI] SD_TreeList' https://www.b4x.com/android/forum/threads/b4x-xui-sd_treelist.110992/

 

[LucaMs]

Thread '[B4X] [XUI] SD_TreeList' https://www.b4x.com/android/forum/threads/b4x-xui-sd_treelist.110992/

"Conosco", ri-trovata anche prima di iniziare lo sviluppo della mia perZonalissima TreeView, ma non è adatta al mio scopo. Bella, però.

 

[Schakalaka]

io ho trovato questa e ci sto smanacciando, ma essendo esempi sono molto "semplici".

Sto litigando con una cosa molto simile: una TreeView (sarà una custom view), ma per ora mi sta facendo ammattire l'apertura/chiusura dei nodi:

View attachment 161708

1 - Non fare caso alla bruttezza, mi serve solo per risolvere quei problemi (apertura/chiusura), non sono stato ad occuparmi del look.
In ogni elemento puoi caricare un layout, che nel tuo caso sarebbe composto dalla label per la voce di menu e una B4XImageView (a meno che non fai le icone col testo, Material o FontAwesome).
2 - Posso aggiungere una proprietà che consenta al programmatore-utilizzatore di avere la freccia sulla destra
3 - Puoi impostare l'indentazione su zero
4 - puoi decidere la larghezza dei nodi, fissa o massima possibile.

In alternativa, stavo per suggerirti la classe di estensione delle CLV di Erel, per gestire CLV nidificate, ma ho appena letto in quel thread che in B4J e B4I non è necessaria (sottinteso: ottieni automaticamente la possibiltà di scrolling delle CLV più interne).
Quindi potrei usare delle CLV annidate, ma dovresti fare in modo che un click sul primo item chiuda/apra gli altri.

Io ho trovato questo e ci sto smanacciando, ma l' esempio è molto semplice rispetto al necessario reale

[B4J] [B4A] Expandable CLV with sub-items (similar to a tree)

I needed this and didn't find an existing solution: a CLV whose items - can be expanded/collapsed (available in @Erel's CLVExpandable) - and can have sub-items that can be shown or hidden In the screenshot below, you'll see the arrows that can be used to expand/collapse, and the +/- signs to...

www.b4x.com

 

[LucaMs]

io ho trovato questa e ci sto smanacciando, ma essendo esempi sono molto "semplici".


Io ho trovato questo e ci sto smanacciando, ma l' esempio è molto semplice rispetto al necessario reale

[B4J] [B4A] Expandable CLV with sub-items (similar to a tree)

I needed this and didn't find an existing solution: a CLV whose items - can be expanded/collapsed (available in @Erel's CLVExpandable) - and can have sub-items that can be shown or hidden In the screenshot below, you'll see the arrows that can be used to expand/collapse, and the +/- signs to...

www.b4x.com

E' già più simile alla mia (anche se mi pare inutile, super e pure fluo , avere sia la freccia che il "+".

Il guaio è che a me serve un elemento in più: devo poter unire gruppi di nodi tra loro "mediante" "oggetti" (anche grafici) "AND" / "OR".
Dovrò inventare qualcosa.

 

[Schakalaka]

sono riuscito ad adattare abbastanza il codice, ma ci sono ancora dei problemini, tipo i sotto menu vengono caricati espansi, ma con il simbolo +.
non ho implementato l' utilizzo delle icone vicino ai titoli..
di piu mi risulta difficile

​

 

[Sagenut]

Mi pare che tu abbia utilizzato una classe modificata per avere più un tree con ulteriori rami.
Quindi non sò se ti basta qualcosa simile a ciò che hai mostrato o se prevedi ulteriori espansioni.
Ti posto una mia personale visione della cosa che utilizza la classe Expandable originaria di Erel.
In pratica c'è da fare i vari layout degli item da Designer e impostare i TAG dei panel dove necessario.
Da un lato è scomodo perchè non permette modifiche dinamiche.
Da un altro lato semplifica il codice.
Prova a vedere se può darti qualche spunto.

 

[Schakalaka]

Mi pare che tu abbia utilizzato una classe modificata per avere più un tree con ulteriori rami.
Quindi non sò se ti basta qualcosa simile a ciò che hai mostrato o se prevedi ulteriori espansioni.
Ti posto una mia personale visione della cosa che utilizza la classe Expandable originaria di Erel.
In pratica c'è da fare i vari layout degli item da Designer e impostare i TAG dei panel dove necessario.
Da un lato è scomodo perchè non permette modifiche dinamiche.
Da un altro lato semplifica il codice.
Prova a vedere se può darti qualche spunto.

grazie,!! è proprio quello che stavo cercando.
guardando il codice, credo si possa anche ottimizzare e rendere un po piu dinamico:
tipo utilizzare solo 3 layout, e caricarli nell' expandablepanel senza avere piu layouts.
tipo creando una MAP map.add(Home,Array as string("1", "2","3")
map.add(Settings,Array as string("4", "5","6")

ed utilizzando solo 3 layout, ovvero, 1 per voce senza submenu, uno per voce con sub menu
uno per le voci del sub menu

Questo lo so scrivere a parole, ma non a codice...

Grazie

 

[Sagenut]

Se ti serve qualcosa di dinamico c'è sicuramente da rivedere diverse cose.

 

[MicroDrie]

Ho aggiornato il mio programma di menu a discesa compatibile con B4J e B4A utilizzando quante più funzionalità B4X possibili. Ho completato il test di una Proof Of Concept (POC) in B4J e B4A e ora sto lavorando alla stesura della documentazione. È questo che stai cercando (più o meno) oppure ti manca qualche funzionalità?

Sono stato un po' troppo pigro per scegliere tutte le icone uniche tra le 719 icone di material design per il POC.

 

[MicroDrie]

Ho pubblicato il mio menu B4XPages Drawer espandibile interattivo in inglese (testato in B4J e B4A): Interactive expandable multi B4XPages Drawer menu (tested in B4J and B4A).

 

[Schakalaka]

Dopo 8 ore di prove, utilizzando la libreria clvtree, sono riuscito ad ottenere ciò che volevo:

un menu espandibile ed abbastanza facile da configurare ed adattare alle proprie esigenze.
Per gli eventi "senza figli" logga il nome del menu, mentre agli altri non succede niente
Non utilizza un layout esterno. E' una base.