Se il problema solo l’immagine nella WebListBox la release 2016r4 ha introdotto la possibilit di visualizzare un’immagine in una cella.
In ogni caso, in generale, non tutto pu essere reso con la semplice listbox.
L’idea di fondo creare un container control che far da gestore della visualizzazione e uno (o pi) container control che rappresentino le celle da mostrare.
Poi puoi aggiungere funzionalit diverse (su come gestire i dati o diverse celle o altro)
Vediamo una soluzione base da cui puoi partire:
Utilizziamo come cella un WebContainer che chiamiamo ccCella (che pu, espandendo la cosa, essere un interfaccia o una classe base per altre celle)
Crea un nuovo WebContainer che chiamiamo ccListaCelle con le seguenti propriet:
lastVisibile as integer=-1
celle() as ccCella
e i seguenti metodi:
Public Sub deleteAllRows()
//eliminiamo, rendendole non visibili, le celle precedentemente usate
for each c as ccCella in celle
c.Visible=False
next
lastVisible=-1
End Sub
Public Sub addData(n as integer)
//aggiungiamo un dato (cella, il dato da mostrare in questo esempio un intero, ma pu essere un qualsiasi oggetto utile
lastVisible=lastVisible+1
if lastVisible>celle.Ubound then
dim c as new ccCella
AddHandler c.selectItem, WeakAddressOf cellSelected
c.setData n
dim t as integer
if celle.Ubound>-1 then t=celle(celle.Ubound).Top+celle(celle.Ubound).Height
celle.Append c
c.LockRight=true
c.EmbedWithin self, 0, t, self.Width, c.Height
else
dim c as ccCella
c=celle(lastVisible)
c.setData n
c.Visible=True
end if
End Sub
Public Sub cellSelected(c as ccCella)
//reagiamo all'evento della cella selezionata promuovendo l'evento a livello superiore con le info di pertinenza
RaiseEvent selectedItem(c.theInfo)
End Sub
e definiamo il seguente evento:
Event selectedItem(theInfo as integer)
In questo esempio ccCella mostra un intero e avr un pulsante per dire che vogliamo usare la riga (nel tuo caso un acquisto)
Per cui ccCella avr una label (label1) e un pulsante (button1)
la propriet relativa all’informazione (in questo caso un intero): theInfo as integer
un metodo per impostare i dati:
Public Sub setData(n as integer)
theInfo=n
Label1.Text=n.ToText
End Sub
un evento per indicare la selezione:
Event selectItem()
il button1 nella sua action avr:
RaiseEvent selectItem
Ora nella webPage trascina un ccListaCelle (ccLista1) e un pulsante
Rendi il container largo quanto la pagina e fissato verso il basso, alto, sinistra e destra (per vedere la reazione al ridimensionamento)
nell’action del pulsante:
//Eliminiamo i record precedenti e ne inseriamo un numero random, con un valore random
ccLista1.deleteAllRows
dim n as integer=xojo.Math.RandomInt(10,50)
for i as integer=0 to n
ccLista1.addData xojo.Math.RandomInt(1,100)
next
Nell’evento selectedItem di ccList1 inserisci:
Sub selectedItem(theInfo as integer) Handles selectedItem
MsgBox theInfo.ToText
End Sub
a questo punto se lanci la pagina e premi il pulsante vedrai le celle, premendolo ancora cambier il valore mostrato, in ogni caso premettendo il pulsante della cella ottieni l’evento a livello di pagina con l’informazione cercata.
Il funzionamento non lontano da quello delle tabelle in iOS. Eviti di dover spedire sempre la struttura della cella (se gi esiste spedisci solo i dati da visualizzare e tutto avviene lato server)