Operazioni di Box Drag & Drop
copia linkTrascrizione
Continuiamo a migliorare la videata Situazione del progetto, aggiungendo funzionalità di Drag & Drop: per la precisione vorremmo fosse possibile trascinare i mattoncini dei servizi e trascinarli in due modalità:
Torniamo al progetto ed iniziamo con l’implementazione della prima modifica. Dovendo dare all’utente la possibilità di ordinare i dati come desidera, non possiamo più basarci sulla colonna Denominazione per mostrare i dati. Per forza dobbiamo prevedere un campo numerico sulla tabella Servizi, un campo che rappresenti l’indice di ordinamento.
Albero di progetto, Database Dati App, Tabella Servizi, Tasto Destro, Aggiungi Campo.
Il Nome del Campo è ZOrder, è un campo numerico Tipo Dati Integer, negli esempi di contenuto inserisco dei numeri, imposto anche il Flag Opzionale.
Siccome la tabella Servizi contiene già dei dati, dobbiamo anche implementare una procedura, una procedura globale che imposti un valore ZOrder di partenza, una procedura che venga eseguita 1 sola volta.
Nell’applicazione, nell’Albero di Progetto, nella Cartella Procedure Globali, Tasto destro, Aggiungi Procedura:
Questa procedura verrà aggiunta nell’evento di partenza dell’Applicazione, precisamente nell’evento After Login, lo trovate all’interno della cartella Eventi:
Possiamo tornare al Report Servizi e concentrarci proprio a questo report.
Perché, come possiamo rendere “trascinabili” gli oggetti di questo report? Attenzione che, oltre a rendere trascinabile un oggetto, dobbiamo anche pensare dove poter rilasciare l’oggetto: quindi la definizione prevede 2 oggetti uno del trascinamento e uno del rilascio.
Nel nostro caso vorremmo poter trascinare la box Denominazione sopra ad un’altra box Denominazione, ovviamente su righe diverse.
L’oggetto, quindi, Box Denominazione sarà l’oggetto con operazione di Drag e operazione di Drop consentite: l’impostazione avviene nelle proprietà dell’oggetto.
Doppio clic sulla box Denominazione ed attiviamo i flag Attiva Drag e Attiva Drop: niente di più semplice.
Ecco, quasi mi dimenticavo, dobbiamo anche modificare la Master Query del report. Dobbiamo modificare la Master Query del report perché l’Order by non sarà per Denominazione, bensì per ZOrder.
Dopo tutte le lezioni che abbiamo fatto sui report dinamici vi aspetterete sicuramente un evento, un evento che dovrà scattare durante l’operazione di drag & drop e, in effetti, scatta un evento a livello del Libro, questa volta: è l’evento chiamato OnBoxDrop. Questo evento intercetta l’azione di rilascio della Box.
Albero di progetto, Libro Servizi, tasto destro, Eventi, Aggiungi OnBoxDrop.
L’evento contiene due parametri, due parametri che non sono relativi ai dati trascinati, ma bensì agli identificativi delle box in gioco: quindi SourceBoxID è l’oggetto che si sta trascinando, TargetBoxID è l’oggetto sui cui è avvenuto il rilascio.
In caso di Libri complessi, queste informazioni possono aiutare a capire qual è stata l’azione effettuata dell’utente. Nel nostro esempio, siccome sono quasi, cioè è la stessa box, questi due oggetti sono quasi inutili.
Sarebbe importante capire anche come recuperare i valori dei record in gioco, non sono tra i parametri dell’evento, ma possiamo recuperarli.
Passo al documento dei Servizi che è contenuto nel componente. All’interno della classe Servizio creeremo una procedura, un metodo: tasto destro, Aggiungi Procedura. Questa sarà una procedura statica, quindi, prima della parola void, digito static. (Sarà una procedura statica che non richiederà una istanza per essere richiamata.)
Void static changeOrder (string sourceId, string targetId)
Ora creo il metodo, abbiamo creato la struttura del metodo: tra poco inseriamo anche il codice. Torniamo all’evento OnBoxDrop che abbiamo lasciato un attimo incompleto, Libro Servizi, OnBoxDrop e aggiungiamo il metodo statico:
- l’utente deve poter ordinare i mattoncini dei servizi, non solo in ordine alfabetico, ma come desidera. Quindi bisogna prevedere il trascinamento degli elementi riquadro inferiore.
- Altra possibilità: l’utente deve poter trascinare un servizio su una card per aggiungere il servizio alla prenotazione.
Torniamo al progetto ed iniziamo con l’implementazione della prima modifica. Dovendo dare all’utente la possibilità di ordinare i dati come desidera, non possiamo più basarci sulla colonna Denominazione per mostrare i dati. Per forza dobbiamo prevedere un campo numerico sulla tabella Servizi, un campo che rappresenti l’indice di ordinamento.
Albero di progetto, Database Dati App, Tabella Servizi, Tasto Destro, Aggiungi Campo.
Il Nome del Campo è ZOrder, è un campo numerico Tipo Dati Integer, negli esempi di contenuto inserisco dei numeri, imposto anche il Flag Opzionale.
Siccome la tabella Servizi contiene già dei dati, dobbiamo anche implementare una procedura, una procedura globale che imposti un valore ZOrder di partenza, una procedura che venga eseguita 1 sola volta.
Nell’applicazione, nell’Albero di Progetto, nella Cartella Procedure Globali, Tasto destro, Aggiungi Procedura:
Void setZOrderServizi() {
//Preparo una variabile contatore
Int myIndex = 0;
//Select Into Collection è un costrutto che consente di eseguire una query diretta sul database e ottenere il risultato in una collection documentale
Select into Collection (CollServizi)
recid = id,
recDenominazione = Denominazione
recZorder = ZOrder
From Servizi Order By Denominazione
//Cicliamo sulla collection ed impostiamo il valore
For each recServizio of Collservizi {
myIndex = MyIndex + 10
recServizio.ZOrder = myIndex;
}
//Salviamo la Collection modificata
CollServizi.saveToDB();
}Questa procedura verrà aggiunta nell’evento di partenza dell’Applicazione, precisamente nell’evento After Login, lo trovate all’interno della cartella Eventi:
Event AfterLogin () {
setZOrderServizi();
//Dopo la prima esecuzione lo togliamo perche non serve piu
}Possiamo tornare al Report Servizi e concentrarci proprio a questo report.
Perché, come possiamo rendere “trascinabili” gli oggetti di questo report? Attenzione che, oltre a rendere trascinabile un oggetto, dobbiamo anche pensare dove poter rilasciare l’oggetto: quindi la definizione prevede 2 oggetti uno del trascinamento e uno del rilascio.
Nel nostro caso vorremmo poter trascinare la box Denominazione sopra ad un’altra box Denominazione, ovviamente su righe diverse.
L’oggetto, quindi, Box Denominazione sarà l’oggetto con operazione di Drag e operazione di Drop consentite: l’impostazione avviene nelle proprietà dell’oggetto.
Doppio clic sulla box Denominazione ed attiviamo i flag Attiva Drag e Attiva Drop: niente di più semplice.
Ecco, quasi mi dimenticavo, dobbiamo anche modificare la Master Query del report. Dobbiamo modificare la Master Query del report perché l’Order by non sarà per Denominazione, bensì per ZOrder.
Dopo tutte le lezioni che abbiamo fatto sui report dinamici vi aspetterete sicuramente un evento, un evento che dovrà scattare durante l’operazione di drag & drop e, in effetti, scatta un evento a livello del Libro, questa volta: è l’evento chiamato OnBoxDrop. Questo evento intercetta l’azione di rilascio della Box.
Albero di progetto, Libro Servizi, tasto destro, Eventi, Aggiungi OnBoxDrop.
L’evento contiene due parametri, due parametri che non sono relativi ai dati trascinati, ma bensì agli identificativi delle box in gioco: quindi SourceBoxID è l’oggetto che si sta trascinando, TargetBoxID è l’oggetto sui cui è avvenuto il rilascio.
In caso di Libri complessi, queste informazioni possono aiutare a capire qual è stata l’azione effettuata dell’utente. Nel nostro esempio, siccome sono quasi, cioè è la stessa box, questi due oggetti sono quasi inutili.
Sarebbe importante capire anche come recuperare i valori dei record in gioco, non sono tra i parametri dell’evento, ma possiamo recuperarli.
Event OnBoxDrop() {
//Dichiaro 2 variabili intere
string sourceId = ‘’
string targetId = ‘’
//Voglio recuperare l’ID Database del Servizi sorgente e quello destinatario
//Ricordate che negli eventi possiamo sempre conoscere il record in stampa, con valore campo report?
//In questo caso sono 2 i record in gioco e possiamo ottenerli spostando un puntatore record in memoria o sul record Sorgente o sul record Destinatario.
Libro.showDragBox()
//Il puntatore è sul record Source, quindi posso leggere le proprietà per impostare il sorgente
sourceId = ReportServizi.ID
Libro.showDropBox()
//Il puntatore è sul record Target, quindi posso leggere le proprietà per impostare la destinazione
targetId = ReportServizi.ID
//I due metodi showDragBox e showDropBox servono a spostare il puntatore consentendo la lettura dei dati del record source e del record target
//Tra poco continuo la scrittura del codice in questo punto, ma devo prima creare un metodo alla classe Servizi.
}Passo al documento dei Servizi che è contenuto nel componente. All’interno della classe Servizio creeremo una procedura, un metodo: tasto destro, Aggiungi Procedura. Questa sarà una procedura statica, quindi, prima della parola void, digito static. (Sarà una procedura statica che non richiederà una istanza per essere richiamata.)
Void static changeOrder (string sourceId, string targetId)
Ora creo il metodo, abbiamo creato la struttura del metodo: tra poco inseriamo anche il codice. Torniamo all’evento OnBoxDrop che abbiamo lasciato un attimo incompleto, Libro Servizi, OnBoxDrop e aggiungiamo il metodo statico:
…..
Servizi.changeOrder(sourceId, targetId)
LibroServizi.refreshQuery() //Essendo un report su DB in anteprima Screen, segnalo al framework di rieseguire la query in stampa e non utilizzare la cache dati in memoria
LibroServizi.print(1,-1) //Ristampo il Libro
……Ultimo step, la scrittura del metodo per aggiornare i dati ZOrder sul database. Torniamo alla classe Servizi e attiviamo il metodo changeZOrder.
Void static changeOrder (string sourceId, string targetId) {
//L’elemento verrà inserito prima dell’elemento di DROP
Select into variables()
vZOrder = Zorder
From Servizi
Where id = targetId
//Diminuisco il valore trovato di 5
vZOrder = VZorder -5
//Aggiorno il record Source con il nuovo valore trovato
Update Servizi
Set ZOrder = vZOrder
Where id = sourceId
//Ricalcolo lo ZORDER di ogni elemento
Int myIndex = 10
Select into Collection (CollServizi)
recid = id,
recDenominazione = Denominazione
recZorder = ZOrder
From Servizi Order By ZOrder
//Cicliamo sulla collection ed impostiamo il valore
For each recServizio of Collservizi {
myIndex = MyIndex + 10
recServizio.ZOrder = myIndex;
}
//Salviamo la Collection modificata
CollServizi.saveToDB();
}Allora, possiamo compilare e vederne il funzionamento a runtime. Ricordiamoci che, avendo modificato il database, dobbiamo anche aggiornarlo in fase di compilazione.
Quindi, tasto F5 o menu Modifica Compila: impostiamo Esegui DDL e Modifica Struttura quindi confermiamo il tutto.
PAUSA
Applicazione avviata, menu Offerte, Situazione: gli elementi del riquadro Servizi sono comparsi, in questo momento, in ordine alfabetico. Possiamo provare a trascinare, proviamo a trascinare ed effettivamente l’elemento che trasciniamo viene sempre posizionato prima dell’elemento su cui avviene il rilascio. Quindi, possiamo dire, anche in questo caso: Missione compiuta.
Ultima modifica: 15/06/2021 / Validità: da 21.0.8100
