visualizzazione record tipo "amazon" o ecommerce

ciao a tutti,

ho creato una sorta di B2B per un cliente. Ho utilizzato una weblistbox per visualizzare il risultato della ricerca articoli con i relativi filtri.
Ho scoperto che NON possibile inserire una immagine nella riga della listbox (a meno di componenti di terze parti)

quello che il cliente vorrebbe una visualizzazione tipo “amazon”, per intenderci del tipo

[ immagine prodotto] NOME PRODOTTO PREZZO DISPONIBILITA’ [BTN ORDINA ORA]

[ immagine prodotto] NOME PRODOTTO PREZZO DISPONIBILITA’ [BTN ORDINA ORA]

[ immagine prodotto] NOME PRODOTTO PREZZO DISPONIBILITA’ [BTN ORDINA ORA]

ovviamente il nome prodotto, il prezzo possono essere font diversi (sia per grandezza, colore, tipo,…) e la disponibilit potrebbe essere non un numero ma un’altra immagine tipo semaforo…

secondo voi come si potrebbe implementare una cosa del genere?
avevo pensato a creare una classe (tipo form??) con queste caratteristiche e fare, da codice, una ADD per ogni record, andandomi a calcolare la posizione che occuper sullo schermo (left sempre uguale, top = top precedente + altezza form)…

c’ qualcuno che ha fatto qualcosa del genere o componenti di terze parti che lo fanno (non una semplice immagine in listbox)???

grazie,
ciro

Io uso questo plugin che contiene una grid eccezionale che fa quello che vuoi.
Altrimenti se nella cella della weblistbox metti una label e nella caption ci infili codice HTML dovrebbe funzionare i.e. "Smiley face, io l’ho fatto in passato.

Puoi costruirlo come hai detto, non troppo difficile ma devi considerare bene fattori di ottimizzazione per non caricare inutilmente la trasmissione dei dati sulla rete.

Oppure puoi usare i plugin suggeriti da Luciano. Tra l’altro sono in offerta nello store di Xojo per il BlackFriday (tra gli addon)

scusate l’ignoranza, ma come metto una label nella cella della listbox?

io di solito ci metto i risultati di un recordset

In realt, come avevi suggerito, metti dei container control (quindi pensati con gli oggetti che ti servono) in un container che ti fa da lista.

altrimenti lavori con gli stili e la listbox (con un po’ di fantasia si possono ottenere cose molto efficaci con poco)

allora, ho provato a creare un container (mycontainer) che include:

1 immagine del prodotto
alcune label (codice, descrizione, ecc…)
un campo per inserire la quantit
un rettangolo che contiene tutto

a runtime, per ogni record aggiungo un oggetto di tipo mycontainer ovviamente tenendo conto della propriet top (sono tanti rettangoli uno sotto l’altro, quindi l’unica da calcolare)…dovrebbe funzionare, per ho i seguenti dubbi:

  • il nome dell’oggetto, deve variare per ogni record??? ad es.

container1 = new mycontainer
container2 = new mycontainer

  • se clicco su un container, ad esempio il 3, come capisco che devo considerare quell’articolo??? dal nome del container?

  • la scrollbar verticale, raggiunta la fine della pagina, si aggiunge in automatico?
    attenzione, la mia pagina ha sulla sx dei filtri di selezione che non devono scorrere, deve invece farlo solo il recordset con i valori tornati ( come nella listbox dove scorre solo la lista)

grazie…

ciro

Mantieni (e gestisci) la lista dei container come array , ad esempio rows() as myContainer

Per mantenere intendo anche che oltre al calcolo della posizione, potresti gestire la visibilit (in modo da poter gestire paginazioni, non inviare ogni volta la struttura ovvero se il container esiste riempilo con i nuovi dati non distruggere e creare sempre le stesse cose: tieni conto che fai traffico)

Per sapere quale articolo stato selezionato crea un evento e gestiscilo (addHandler)
Per la scrollbar, viene messa in automatico, per lasciarla solo per la tua lista crea un container che gestisce la lista (con le sue dimensioni sulla finestra) e dentro aggiungi / mostra i subcontainer

Prova… la struttura non difficile… pi difficile a spiegare a parole

mmmhhhh…qualche esempio???
:wink:

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)