Cerca con Google

Translate

21 luglio 2011

Tutorial 21 - Realizzare un applicazione con schermate multiple


Una delle limitazioni di App Inventor (un'altra direte voi...) è che non si possono creare applicazioni che abbiano più di una schermata.

Infatti nel design editor avrete notato che esiste solo un elemento "Screen1" poco personalizzabile, e che tutti i nostri ulteriori elementi dell'interfaccia vanno posizionati gerarchicamente sotto di esso.


Tuttavia chi programma per Android in Java avrà visto che li è invece possibile creare più schermate con differenti layout (ognuna di esse avrà un suo .xml che ne descrive le caratteristiche) e che la cosa risulta particolarmente utile, ad esempio pensate ad un app con una schermata principale, una con l'help, una con una finestra di "about" , etc...

Tuttavia con un pò di ingegno ed un pizzico di pazienza possiamo "simulare" la stessa cosa anche con App Inventor e realizzare delle applicazioni che utilizzino più di una schermata (multiscreen apps).

Questo risultato lo otterremo utilizzando gli "screen arrangement" , in particolare utilizzando tanti "Verticalarrangement" quanti sono i nostri sotto schermi che vogliamo realizzare.

Nell'esempio del video ho realizzato un "tab" di navigazione in cima alla pagina che ci permette di navigare nelle tre sottopagine create, ovviamente ogni sottopagina creata potrà contenere gli elementi necessari alla realizzazione della nostra applicazione.

Il passaggio da una schermata all'altra avviene settando i flag "verticalarrangement.visible" a true o false a seconda di quale delle sottoschermate vogliamo visualizzare

Come sempre, buona visione!


Il sorgente dell'applicazione è scaricabile da qui

24 commenti:

  1. Molto utile. soltanto una domanda:
    per tornare indietro come devo fare?
    grazie

    RispondiElimina
  2. per navigare tra le varie schermate si devono sempre premere i tre tab relativi in alto nello schermo.
    Mentre purtroppo App Inventor non permette di mappare il tasto "fisico" back del telefono che vi farà sempre uscire dall'app realizzata.
    Insomma, il tasto back non vi riporta indietro di una schermata tanto per capirci.

    RispondiElimina
  3. Davvero utile ma avrei solo una domanda. Se uso la funzione scrollable come faccio, dopo aver premuto il pulsante, a tornare all'inizio della pagina se magari ero arrivato al fondo?

    RispondiElimina
  4. Purtroppo che io sappia non c'è modo di controllare la posizione della scrollbar, ma se non erro ad ogni "cambio" pagina si torna all'inizio della pagina di destinazione

    RispondiElimina
  5. Ciao seba! mi hanno accettato al mit...ora ti faccio una domanda, ho visto che hanno creato la possibilità di aumentare il numero di screen...c'è un metodo ora per passare da uno screen all'altro tipo slide a scorrimento?

    RispondiElimina
    Risposte
    1. Ciao Marco e benvenuto di nuovo tra di noi!
      Da uno screen all'altro non passa con uno slide ma è come se aprissi un'altra applicazione.
      Per vedere l'effetto che fa puoi provare una semplice applicazione. Cmq ho visto che non sarà la versione definitiva del multiscreen, han già cambiato un paio di cose nel passaggio dei parametri, chissà non abilitino anche un multi screen con l'effetto slide che sarebbe molto accattivante! :)

      Elimina
    2. Ma c'è almeno un modo per farli comunicare?

      Elimina
    3. intendi far comunicare i due o più "screen", certo che c'è ogni qualvolta passi da uno screen all'altro dai in uscita dei parametri che l'altro screen può leggere.
      tutto questo ovvio non nel tutorial di questo post che mostra una soluzione alternativa al multiscreen (infatti ancora non esisteva il multiscreen quando ho creato questo post)

      Elimina
    4. Ciao seba, potresti fare un tutorial su come far comunicare gli screen? io purtroppo non riesco, sono diventato matto!!! Grazie mille, avevo già commentato qui (http://www.youtube.com/watch?v=lbAPj1kXOfM) ma meglio chiedere qui...:-)

      Grazie, mario...:-D

      Elimina
    5. Ciao Mario, il tutorial esiste già e lo trovi a questa pagina
      http://seblogapps.blogspot.com/2012/03/tutorial-29-applicazioni-multiscreen.html
      Tutorial 29
      se trovi ancora difficoltà vieni sul forum e posta le immagini del tuo blocks editor così ti possiamo dare una mano

      Elimina
  6. Ho provato ad arrangiarmi ma non riesco a risolvere. Se non riesco a trovare una soluzione posso seguire il tutoria ma, dato che lavoro sulla nuova versione di App Inventor e permette il multi screen, chiedo aiuto per eseguire l'operazione. Dopo aver crearo i buttom, ho aperto il blocks editor e sono andata su MY BLOCKS, ho selezionato il blocco CLICCAMI.CLICK > OPEN ANOTHER SCREEN > E QUI, ALLA RISCHIESTA 'ScreeName ho provato a mettere TEXT dando il nome dello screen a cui voglio indirizzare il comando(pag2) ma non è cambiato nulla. Ho problemi anche con la Text box della palette base. Anche se seleziono il MultiLine mi rimane tutto su una riga. Per provare l'app connetto il telefono (Galaxy Note)
    RiRingrazio chiunque possa aiutarmi (devo creare una semplice app di coconsultazione)
    Spenottina

    RispondiElimina
    Risposte
    1. Per il multiscreen, se provi ad usarlo con AppinventorPhoneApp (quella per provare l'applicazione mentre la fai), ti da errore, se scarichi il pacchetto sul telefono invece dovrebbe andare.

      Elimina
    2. Vorrei aggiungere una cosa, un consiglio, Seblog, sarebbe molto utile una sezione in cui elenchi alcuni comandi più difficili da trovare :)

      Elimina
    3. Grazie Fede per i chiarimenti,è come dici te in effetti il multiscreen non va ne con l'emulatore ne col blocks editor collegato ma bisogna scaricare l'app sul telefono dopo aver fatto il package da design editor.
      Per il suggerimento, accetto volentieri ma non capisco cosa intendi per comandi difficili da trovare, ad ogni tutorial spiego i componenti che ho utilizzato.
      Eventualmente scrivimi tramite mail, mi segno le cose e poi creo una pagina apposita.

      Elimina
  7. GRAZIE! MA GRANDE COSI' PROPRIO!!!

    In effetti per gli smanettoni-paciugoni come me, un tutoria dove vengono spiegati i comandi non sarebbe male!
    TIPO: come... cribbio lo inserisco un tsto multiline dato che sull'edito, nonostante il comando, non ci riesco?

    Farò il package come da voi suggerito.

    Sarà per quello che non mi partiva nemmeno la connessione al sito?
    Mumble... Mumble...
    =)

    RispondiElimina
  8. Sono riuscita ad avere la conferma di avere l'app in multiscreen grazie al package da voi suggerito.
    Ho scoperto che il multiline della textbox funziona (ho visto il multiline quando ho lavorato su telefono fisico).

    Mi manca da riuscire a collegare un pulsante ad un link... poi ho risolto tutto, perchè nemmeno installando l'app sul telefono mi funziona.

    Dal block editors: webmicioville.click (dove ho spuntato Allow coockies - inserito url con tanto di http:// - spuntato Save response) > LINKmicioville.Url to > LINKmicioville.Url!

    Se qualche anima pia mi dice dove sto sbagliando posso concludere la mia app con successo!!!

    RispondiElimina
    Risposte
    1. Ma non è che per caso stai confondendo il componente web col componente activitystarter...???
      perchè se vuoi prelevare dei dati dal web (tipo leggere il valore di un azione finanziaria) allora usi il componente web
      Altrimenti se vuoi solo lanciare il browser ad una pagina internet la cosa è molto più semplice e si fa con un activitystarter appunto dove setterai:
      Action: android.intent.action.VIEW
      DataUri: http://news.google.com
      consiglio nuovamente di guardarti i tutorial tipo quello di google maps per schiarirti le idee...

      Elimina
  9. Il prossimo step e aggiungere il oocalizzatore di posizione e vedere come fare per dare la possibilità di trovare veterinari in zona (sto creando un'app di soccorso pet).
    Ho gia visto che hai creato un tutorial apposito eme lo studierò ben bene per poi utilizzarlo per quello che serve a me.

    Ma vedrai che tornerò a chiedere aiuto! =)

    Grazie ancora di tutto!

    RispondiElimina
  10. ehi, scusami ma volevo kiederdi se si poteva far scorrere lo schermo in su e giù. se si come??
    grz in anticipo!!!

    RispondiElimina
    Risposte
    1. prova usando la proprietà scrollable in screen1 (se ho capito la tua domanda...)

      Elimina
  11. Salve, progetto un' app multisceen, riesco grazie al tutorial a vedere uno screen x volta e, in uno di questi screen ho inserito del testo con il componente Label. Il problema e' che il label e' inserito sotto un botton che comanda uno screen, quindi lo vedo in tutti gli screen, domanda come faccio ad isolarlo e a vederlo solo in uno screen? Grazie Giuseppe

    RispondiElimina
    Risposte
    1. Ciao Giuseppe,
      ti consiglierei due cose:
      1) se non ci avessi ancora fatto caso, esiste ora una gestione "nativa" del multiscreen che magari può essere più semplice da utilizzare rispetto questo metodo, trovi il tutorial qua:
      http://seblogapps.blogspot.com/2012/04/tutorial-31-applicazione-con-schermate.html
      2) se invece vuoi continuare a usare questo metodo (a volte può convenire, l'app è più leggera e veloce)
      allora per non far comparire la tua label in tutti gli screen basta che inserisci la label all'interno di un vertical arrangment che sarà quello che diverrà "visible" true o false a seconda dello schermo che deve essere visualizzato nel dato momento.
      L'idea è che ogni Vertical Arrangment sia in pratica una "simulazione" di screen e che i button rendano visibile true/false questi VA alternativamente

      Elimina
  12. TI ADOROOO!!!!
    Grazie, grazie di cuore, mi hai semplificato la vita in un modo incredibile!
    Sei assolutamente chiaro, elegantemente logico e fantasticamente perfetto!
    Il tuo video mi ha aiutato tantissimo con la mia tesi.
    Non ho idea di quante persone tu abbia aiutato,
    ma ti assicuro che la sottoscritta è e ti sarà sempre grata per tutto il materiale
    che hai messo a disposizione per gli analfabeti informatici come me!!!
    Buon lavoro!!!
    Un abbraccio,
    Lisa

    RispondiElimina
    Risposte
    1. Grazie mille!
      penso siano tra le più belle parole di ringraziamento che abbia mai ricevuto!
      sono questi i piccoli grandi segnali di incoraggiamento che mi spingono a fare sempre meglio :)
      felice di cuore di averti aiutato a progredire nelle tue conoscenze informatiche.
      continua a seguirmi mi raccomando :)

      Elimina