Problemi con WebContainer

International Italiano
1

Ciao a tutti, mi sto avventurando nello sviluppo di un’applicazione Web, e in questo sono alle prime armi, per cui ho bisogno del vostro aiuto.
Ho strutturato l’interfaccia grafica dell’applicazione in questo modo:
una Webpage che contiene due Webcontainer (uno nella parte alta con il titolo della pagina, ed uno sulla sinistra, stile Navigator, con un elenco di opzioni).
Nella parte centrale vorrei visualizzare altri Webcontainer, in funzione delle scelte fatte nel navigator.
Quindi ho creato un Webcontainer per ogni finestra che devo gestire.
Ecco alcuni esempi di come si presenta il tutto
Immagine 1
Immagine 2
In quest’ultima immagine se premo il pulsante “Aggiungi famiglia” devo visualizzare, nella stessa posizione degli altri containers, un ulteriore container, come si vede qui
Selezionando una riga dal Listbox dovrei visualizzare lo stesso container, con l’unica differenza che i campi vengono compilati con i dati recuperati dal data base.
E qui succede una cosa che non riesco a capire, e che non sono riuscito ad evitare: l’intera pagina viene spostata verso l’alto, tagliandone il contenuto. Ecco il risultato
Se eseguo l’applicazione da un Mac il risultato è ancora peggiore, in quanto la parte “tagliata” in alto è ancora maggiore.

Sto utilizzando Xojo 2019r1.1, in ambiente Windows 10.

Spero che qualcuno riesca a darmi un’indicazione su cosa devo guardare e/o modificare.

Grazie di cuore!

Nedi

2

Ciao Nedi,
In che modo disegni i Webcontainer? Sono stati aggiungi dall’Ide di xojo oppure li hai gestiti come semplici classi e disegnati con il comando EmbedWithin (link)?
Con la prima opzione bisognerebbe capire i layout come sono impostati, ma da quello che hai riportato non riesco proprio a capire dove possa essere il problema.

Nel secondo caso non dovresti aver problemi perchè specifichi le coordinate direttamente nel comando e non dovrebbe sballarsi nulla.

3

Grazie per la risposta, Attilio.
Dunque: i due containers “titolo” e “navigator” li ho inseriti nella MainPage dall’IDE, mentre tutti gli altri li inserisco da codice con EmbedWithin.
La cosa che mi lascia stupefatto è che il container con i dati della scheda (questo qui) viene inserito all’interno di un metodo, che è lo stesso metodo utilizzato quando si sceglie una riga dal Listbox. L’unica differenza è che in un caso ripulisco tutti i dati prima di visualizzarlo, nell’altro li imposto con i campi del database. Ma il codice per visualizzarlo (EmbedWithin) è esattamente lo stesso in entrambi i casi.

4

Figurati, sto cercando di capire dove possa essere il problema però non mi viene in mente nulla. La cosa che mi sembra strana è che usando EmbedWithin i Webcontainer dovrebbero sovrapporsi ma non ridimensionare o spostare gli elementi della webpage. Potresti postare un frammento di codice per capire cosa fai?
Grazie

5

Ero convinto anch’io, nonostante la mia insignificante esperienza in applicazioni Web, che con EmbedWithin il gioco fosse fatto, e invece…

Il container in questione si chiama SchedaFamigliaCC, ed è lo stesso sia quando si preme il pulsante “Aggiungi famiglia”, sia quando si seleziona una riga dal Listbox (la differenza sta nel fatto che nel primo caso ripulisco tutti i textfield e nel secondo invece li imposto con i campi del database).

Il metodo che visualizza il container è unico ed è inserito nella MainPage: ecco il codice

Public ShowScheda

// Visualizza control container “SchedaFamigliaCC”

ClearCC

SchedaCC = New SchedaFamigliaCC

SchedaCC.LockLeft = True
SchedaCC.LockBottom = True
SchedaCC.LockRight = True
SchedaCC.LockTop = True
SchedaCC.LockVertical = True

If Session.wPlatform = “Windows” Then
SchedaCC.EmbedWithin(Self, 192, 60, SchedaCC.Width, SchedaCC.Height)
End If

If Session.wPlatform = “Macintosh” Then
SchedaCC.EmbedWithin(Self, 192, 60, SchedaCC.Width, SchedaCC.Height)
End If

Ecco il codice dell’evento Action del pulsante “Aggiungi famiglia” (che funziona)

// Inserimento nuova scheda

Session.IDScheda = 0

MainPage.ShowScheda

Ecco il codice dell’evento CellClick del Listbox (che sposta tutto in alto)

Dim w As String = lstFamiglie.Cell(row, 0)
w = Replace(w, “[”, “”)
w = Replace(w, “]”, “”)

Session.IDScheda = w.Val

MainPage.ShowScheda

La cosa grave è che viene spostato anche il Navigator, e non c’è modo di riportare la finestra nella sua posizione corretta: ci fosse almeno la Scrollbar si potrebbe rimediare, ma il fatto che non ci sia mi impedisce anche di selezionare le voci del Navigator. Se poi il tutto viene utilizzato da un Mac la cosa è ancora più grave, perchè la finestra viene spostata in alto di parecchio.

Spero che ti venga l’illuminazione!!!
Grazie comunque per il tempo che ti sto facendo perdere.

6

Dimenticavo: il metodo ClearCC serve a rimuovere eventuali containers presenti

// pulisce lo spazio riservato ai container controls

If Dashcc <> Nil Then
Dashcc.CloseMe
End If

If Famcc <> Nil Then
Famcc.CloseMe
End If

If SchedaCC <> Nil Then
SchedaCC.CloseMe
End If

Il metodo CloseMe dei vari containers non fa altro che un Me.Close

7

Illuminazioni purtroppo non me ne sono venute. Quasi sicuramente è qualcosa legato alla tua struttura del progetto o dei riferimenti errati nel codice. Per cercare di aiutarti ho replicato la tua situazione in un mini esempio. Prova a vedere se può esserti di aiuto per capire dove può essere l’errore. In caso modificalo pure e ricaricalo da qualche parte. Ti lascio il link di dropbox:

https://www.dropbox.com/s/2ufhswq4m878auv/TestContainer.xojo_binary_project?dl=0

Ho creato due Webcontainer uno con la tabella e l’altro che va a sovrapporsi con i dati (vuoto o riempito).

In casi estremi puoi usare i WebDialog per mostrare i dati che tiri su dal database.

8

Il tuo esempio ovviamente funziona bene. Nel mio caso ci deve essere qualcosa che tocca quando seleziono una riga dal Listbox: ho provato anche, in questo caso, ad emettere il container senza dati (come faccio quando premo il pulsante “Aggiungi famiglia”), ma non cambia nulla: l’intera finestra (MainPage) viene spostata verso l’alto.
Allora ho trovato un escamotage per ovviare l’inconveniente: quando seleziono una riga dal Listbox, prima di visualizzare il container chiudo e riapro la MainPage. In questo modo forzo la rivisualizzazione dell’intera pagina, e così per lo meno si vede il tutto in maniera regolare.
Ma giuro che non ho idea di quale possa essere la causa del problema.

Ti ringrazio per il supporto, Attilio!

Alla prossima.

9

Una cosa da evitare nei programmi web e’ l’utilizzo di valori costanti, quindi assoluti, per le coordinate.

10

Come mai? Perdona la mia ignoranza in materia…

12

Dipende da come e’ realizzata l’applicazione.
Generalmente la dimensione della finestra e’ sotto il controllo del browser e il posizionamento in punti fissi di elementi non si adatta di conseguenza.
E’ possibile impostare una dimensione fissa alla finestra ma l’effetto per l’utente non e’ gradevole e tantomeno funzionale.

13

Mi dispiace! Speriamo che la prossima volta vada meglio :crazy_face:

Buona giornata :slight_smile:

14

Non ho ancora utilizzato i layout di Web 2.0 ma in Xojo 2019r1.1 non esistono questi tipi di problemi. Tutto il Web 1.0 si basa su valori in pixel costanti e, grazie ai trigger dei ridimensionamenti, il framework di xojo va a scalare tutti i controlli (Ovviamente se sono impostati i relativi LockLeft,LockTop ,LockRight ecc…).