Cerca con Google

Translate

23 aprile 2012

Tutorial 31 - Applicazione con schermate multiple (semplice)


Continuiamo oggi il discorso delle applicazioni MultiScreen andando a vedere un altro esempio che utilizza la nuova opzione "Add Screen" di App Inventor.

Nel precedente tutorial (Tutorial 29 - Applicazioni MultiScreen nuovo metodo) avevamo visto una certa complessità d'implementazione dove ad esempio uno screen passa delle informazioni all'altro per comunicare i settaggi di un applicazione.


Oggi voglio mostrarvi qualcosa di più semplice (forse sarebbe stato più logico pubblicare i due tutorial con ordine inverso :) )

Ovvero una semplice app con tre schermate, una del programma vero e proprio, una con le informazioni "about" ed una pagina di "help"

Con l'ausilio della prima nuova funzionalità messa a disposizione dal MIT, vedrete che realizzare un qualcosa del genere sarà un gioco da ragazzi.

Per ulteriori approfondimenti riguardo il MultiScreen fate riferimento appunto al tutorial 29 già pubblicato.

Qui voglio solo farvi notare come la creazione di un app con più schermi sia molto semplice e non ci obblighi a trucchetti vari con vertical alignment e l'elemento "visible" come accadeva in passato.

Come chiesto da un lettore, vi mostro anche come allineare i pulsanti di navigazione in basso rispetto allo schermo, purtroppo la cosa non è immediata e bisogna ricorrere ad un utilizzo "sapiente" di vertical e horizontal arrangement

Buona visione


Il file sorgente dell'app lo trovate al seguente link:
Simple Multiscreen

51 commenti:

  1. Ciao scusa non sapendo dove scriverti, volevo chiederti se potevi dirmi come si fa a bloccare in modo da rendere inutilizzabile il tasto indietro del telefono. Perchè il problema è che se per sbaglio lo sfioro mi esce immediatamente dalla mia app e io invece volevo che tramite un apposito pulsante nominato esci all'interno della app , ti permettesse di uscire, spero di essermi spiegato bene

    RispondiElimina
    Risposte
    1. Attualmente non è possibile, il pulsante back del telefono sarà sempre mappato per chiudere l'ultima activity esistente, quindi nel caso di app con una singola schermata chiude l'app. Nel caso di app con più schermate, chiude l'ultima e ritorno a quella precedente.
      Puoi mettere un tasto che ti faccia uscire dall'app ma non puoi impedire il funzionamento di default del tasto back (almeno non con la versione attuale di AI) mi dispiace

      Elimina
    2. Grazie mille per la risposta, speriamo che aggiorneranno presto AI inserendo nuove funzioni. Mi scuso ancora per il mio post fuori luogo, ma non sono riuscito a trovare una tua mail di contatto per scriverti in privato allora ho colto l'occasione di questo tuo nuovo articolo per scrivere ciò che mi serviva di capire!

      Elimina
  2. non trovando la tua email, provo a chiedere qui visto che siamo in tema, ho appena rinunciato a gestire 16 sprite su uno screen, tutti disabilitati o fermi tranne uno alla volta, ma evidentemente sono immagini troppo pesanti e comunque troppe su un solo screen (l'immagine abilitata va a scatti sempre peggio ad ogni sprite aggiunto e non è fluida)

    Avrei come opzione l'utilizzo di 9 screen con ognuno un solo sprite.

    Si può fare? O l'app rimane troppo pesante lo stesso?

    RispondiElimina
    Risposte
    1. Secondo me il problema rimarrebbe comunque, l'unica cosa è che secondo me dovresti fare, è ridurre il peso delle immagini. Comunque sia lascio la parola a quelli più esperti di me che sicuramente ti sapranno aiutare in modo più esauriente.

      Elimina
    2. non so bene cosa vuoi fare ma nelle limitazioni attuali di AI parlan proprio di progetti troppo grandi che non vengono gestiti correttamente, magari il problema è proprio quello.
      Ad ogni modo per come la vedo io, AI non è l'ideale per gestire grafica e sprite (vuoi fare un gioco?) in quanto le app prodotte sono spesso troppo lente per essere godibili.
      Non credo ci siano limiti alla creazione di screen,ma ancora, non sapendo cosa vuoi realizzare mi risulta difficile immaginare la soluzione migliore ;)

      Elimina
  3. Ciao, sono sempre quello che fa troppe domande, ma avrei bisogno di nuovo di un altro aiuto, questa volta penso che sia molto più semplice da risolvere ma non avendo le conoscenze totali di AI devo per forza chiedere. Allora arrivando al punto la mia domanda è la seguente: come faccio ad impostare un notifier in modo che quando mi appare mi escono due pulsanti i quali uno quando lo schiaccio mi deve uscire dalla mia app e l'altro invece mi fa rimanere nella stessa schermata senza uscire?

    RispondiElimina
    Risposte
    1. ciao Mike,guarda il tutorial EULA e splashscreen, oppure quello sul notifier,trovi la risposta alla tua domanda proprio in quel video :)

      Elimina
  4. Ciao.
    Volevo un'informazione.
    Se volessi creare uno sfondo per l'app con photoshop, su che dimensioni mi consigli di lavorare?

    RispondiElimina
    Risposte
    1. quelle che ho usato io in quest'app sono 320x430 che è la risoluzione "base" che usa App Inventor (tolti 50pixel che sono ti title bar e barra di stato android)
      Ciò non toglie che puoi lavorare ad una risoluzione maggiore e poi eventualmente riscalare eventualmente in un secondo momento.

      Elimina
    2. E se volessi creare un Quiz, come posso fare per far si che le domande vengano poste all'utente in maniera casuale?

      Elimina
    3. Crei una lista di domande e poi un indice numerico, dopodiché la domanda la scegli utilizzando la funzione random sull'indice (ti ritornerà un numero da 1 a n) più o meno la soluzione è questa

      Elimina
    4. ciao.. Penso di avere un problema.
      Sto creando un app e ho inserito un tasto cone la funzione "button".
      E' possibile fare in modo che esso abbia un background trasparente lasciando così intravedere lo sfondo presente sotto?

      Elimina
    5. Non posso provare ora ma mi pare che tra i colori da scegliere per il pulsante ci sia anche il trasparente,prova a darci un occhio

      Elimina
    6. Basta selezionare Backgroundcolor su none ed ecco che dive ta trasparente :)

      Elimina
  5. Ciao... Innanzitutto complimenti per i tuoi video... Davvero ben fatti. Ho avuto un problema. Provo a far interagire i pulsanti con altre screen(proprio come tu fai nel video), nei text Do i nomi esatti (non so se è key sensitive ma sto attento anche alle maiuscole). Nel momento in cui testo l'applicazione sia nell'emulatore virtuale, sia nel cellulare vero e proprio mi da questo errore quando premo qualsiasi tasto:"Switching forms is not currently supported during development"...
    Grazie a presto

    RispondiElimina
    Risposte
    1. scusa, forse non è stato detto nel video o scritto, ma per usare il multiscreen bisogna per forza di cose scaricare l'app verso il telefono, quindi con l'opzione package for phone - "download to connected phone" oppure "download to this computer" da design editor.
      Se provi a usarlo collegato al blocks editor ti da proprio quel messaggio d'errore li...

      Elimina
  6. Ciao, ho creato la mia prima semplicissima app multiscreen ed ho provato ad installarla sul mio galaxy note, il passaggio da una schermata all'altra non crea problemi, solo che quando bisogna chiudere l'app bisogna premere moltissime volte il pulsante "stop this application" che compare cliccando sul pulsante del menù del Note, succede lo stesso provando con il pulsante "back".
    .... è risolvibile?
    Grazie Mille
    Maurizio

    RispondiElimina
    Risposte
    1. mi manderesti il file sorgente della tua app per email?, è molto strano, come vedi nel mio tutorial se premi back e sei sulla prima schermata l'applicazione si chiude,se sei sulla seconda torna alla prima e così via...
      non è che hai fatto un pò di confusione con l'apertura delle varie schermate?

      Elimina
    2. Ciao a tutti, a proposito di Galaxy Note, ho un problema, volevo chiedere come fare a riscalare la mia app creata, per tale dispositivo, in quanto mi visualizza le schermate parzialmente, non full screen come avviene invece sul Galaxy S, ho provato con marketizer, ma non mi fà far nulla....( o forse non ho fatto i passaggi necessari, ma non ho capito come si ottiene un certificato..), potete aiutarmi? magari il link di un tutorial specifico, io ho cercato ma non sono riuscito a trovarlo.Grazie

      Elimina
    3. Prova a seguire i tutorial di marketizer cloud, se usi le opzioni avanzate puoi abilitare il supporto a più risoluzioni e ti scalera' anche l'app a tutto schermo

      Elimina
  7. cioa seba come posso chiudere istantaneamente un applicazione con piu screen da me creata ? devo inserire un procedimento? ho inserito close application ma mi riporta alla schermata precedentemente visualizzata. esiste un opzione che da inserire in ogni screen che consente di chiudere definitivamente l'applicazione senza dover tornare indietro nella home ? grazie

    RispondiElimina
    Risposte
    1. dovrebbe essere proprio "close application" ma secondo me c'è qualcosa che non va, infatti chiude solo l'ultimo screen aperto.
      Puoi provare così (ma non son sicuro funzioni) ad ogni apertura di un nuovo screen chiudi anche quello attuale così forse close application chiude sempre l'app visto che lo screen attivo è uno solo.
      Son cmq convinto che sistemeranno a breve questa cosa :)

      Elimina
    2. Ecco la soluzione!
      https://groups.google.com/forum/?fromgroups=#!topic/programming-with-app-inventor/aN1VJevEjcc

      Provato personalmente e funzionaaaaaaaa!

      Elimina
  8. Ciao sono un ragazzo di 21 anni, vorrei creare un'applicazione che abbia accesso al Wireless per inviare e ricevere dati, tipo immagini, audio, testo, ecc. Premetto che ho visto ancora poco di ciò che hai scritto e hai fatto nei video, vorrei solo sapere se ne hai già parlato o se mi puoi aiutare.

    RispondiElimina
    Risposte
    1. ciao, non è possibile scambiare dati via wireless direttamente con AI, non ho fatto tutorial a riguardo
      Esiste la possibilità di usare il bluetooth nativamente in AI ma anche di questo non ho fatto ancora dei tutorial , mi dispiace

      Elimina
    2. Sennò quale linguaggio posso utilizzare per programmare l'Android ed eventualmente anche Iphone utilizzando il WiFi? Grazie

      Elimina
    3. Android Sdk con Eclipse (ovvero devi programmare in Java)

      Elimina
    4. C'è qualche tutorial in inglese o in italiano proprio per quello che devo fare? O basta che cerco i codici su internet e visto che ho già esperienza nella programmazione mi metto a fare da 0 io stesso?

      Elimina
    5. ti consiglio di partire studiandoti la programmazione per Android, se sai bene l'inglese il sito developers.android.com è ottimo, c'è parecchio da imparare ma se hai già esperienza di programmazione parti avantaggiato

      Elimina
  9. Ciao,
    seguo da tempo i tuoi tutorial e mi sono stati molto utili. Difatti mi sto cimentando con App Inventor nello sviluppare alcune piccole applicazioni e, anche se con qualche piccola difficoltà (per ora), riesco a ottenere quello che voglio. Adesso sto provando a creare una applicazione con gli screen multipli, una volta capito il meccanismo non è difficile. La cosa che vorrei però è potermi spostare tra uno screen e l'altro non usando il classico button ma utilizzando lo scroll dello screen attivo cambiamdo la pagina in base al senso di trascinamento, cioè da sinistra a destra e viceversa.

    Controllando tra le vari comandi non esiste un Drag, o qualcosa di simile, per lo screen come nel Canvas. Qundi la mia domanda è, esiste qualche metodo per poter ottenere l'effetto slide di cambio di pagina che voglio?

    RispondiElimina
    Risposte
    1. Esatto, è come dici te, non c'è purtroppo un evento drag per lo screen o per il background,
      forse l'unica alternativa potrebbe essere quella di disegnare un canvas invisibile da qualche parte nello schermo ed usare li l'evento drag,
      se vuoi provarci poi facci sapere come va :)

      Elimina
    2. Beh... diciamo che una cosa del genere l'avevo già escogitata. Prendendo spunto dalla tecnica dei frame annidiati dell'HTML, ho simulato questo tipo di effetto. In pratica, ho utilizzato 4 Screen Arrangiament (SA in breve) e due Canvas che rispondo all'evento touch in questo modo.

      1. ho disegnato un Screen Arrangiament (chiamato HA_Main) orizzontale con misure che coprono tutto lo screen (altezza 400 e larghezza Fill parent);

      2. ho annidiato all'interno di HA_Main il secondo SA (chiamato VA_dx) con allineamneto in vericale con misure in altezza Fill Parent (in modo da essere delle stesse misure del primo SA) e con larghezza di 20 pixel;

      3. ho annidiato di seguito al secondo SA il terzo SA (chiamato HA_Body) con allineamneto orizzontale in modo da simulare l'allineamento standard che ha uno screen, con larghezza in questo caso Fill Parent e Altezza 400;

      4. ho annidiato l'ultimo SA (chiamato VA_Sx) subito dopo HA_body con allineamneto in vericale con misure in altezza Fill Parent (in modo da essere delle stesse misure del primo SA) e con larghezza di 20 pixel;

      in questo modo o ricostruito uno screen lasciando dai lati lo spazio di 20 pixel per l'uso dei due Cavans. Infatti il primo Cavans è stato inserito all'interno di VA_Dx con entrambi le misure settate a Fill Parent e la stessa cosa è stata ripetuta per l'altro Cavans inserito in VA_Sx.

      Dopodichè ho attivato l'evento touch (non conosco ancorra bene l'evento Drag per poterlo usare) di entrambi i Cavans in modo che venga aperto un nuovo screen a seconda del Cavans (sx o dx) che viene toccato.

      Capisco che è un pò macchinoso ma, per ora, è quello che più simula un effetto "slide"... magari ci saranno altri utenti che prendendo spunto da questa idea riescono a ottenere un effetto migliore. :)

      Elimina
    3. Complimenti! molto molto ingegnoso e interessante!!! beh se hai due "pezzettini" di canvas ai lati forse l'evento touched è più appropriato.
      Cmq ti invito (se hai voglia) ad iscriverti nel forum ed iniziare una discussione su questo argomento (se mettessi anche qualche screenshot del design e blocks editor sarebbe meraviglioso)
      credo che questo possa essere un argomento che interessa molti!
      bravo davvero! :)

      Elimina
    4. Come da richiesta:

      http://seblogapps.blogspot.it/p/app-inventor-forum-italia.html#/discussion/55/effetto-slide-per-multi-screen

      Elimina
  10. ma a me quando schiaccio il bottone che prima ho impostano nel blocks editor che va in un altro screen mi esce: switching forms is not currently supported during development

    RispondiElimina
    Risposte
    1. Tramite emulatore non è possibile testare app multiscreen (infatti quello che ti esce è il messaggio d'errore relativo) devi per forzascaricare l'app sul cellulare tramite comando download to connected phone

      Elimina
  11. Ciao Sebastiano, è da poco che sto usando AI e mi piace molto l'idea della programmazione visuale. Il mio scopo era di creare un dizionario con solo scritte e immagini, mi sono impegnato molto dal punto di vista grafico visto che AI è molto limitato ed ho tirato fuori due layout carini. La mia idea era di usare due o tre screen, uno per categoria di contenuti. Tutto funziona e si vede bene, l'unica cosa è che il passaggio tra lo screen uno è gli altri screen vuole almeno 4 secondi. Ho provato a eliminare elementi ridondanti nel layout, tipo alcuni screen arrangment e alcune label, ho diminuito le dimensioni dell immagini, ma niente; ho provato pure a togliere tutte le immagini ma vuole sempre 4 secondi per partire lo screen 2. Ho fatto come dici tu nel tutorial, ma perchè da te ci mette un attimo tra uno screen e l'altro e da me no ?? grazie mille, mi aiuteresti tanto. ciao

    RispondiElimina
    Risposte
    1. ciao, molto strano, magari dipende dalla "potenza" del dispositvo, App Inventor è abbastanza pesante da gestire.
      Se vuoi ed hai poche schermate puoi risolvere la cosa senza usare il multiscreen vero e proprio ma usando quello "simulato" ovvero con dei verticalarrangment da far diventare visibile/non visibile a seconda delle condizioni che imposti te.
      Il primo tutorial che trovi sul multiscreen tratta proprio di questo argomento, prova a guardarlo, ciao

      Elimina
  12. Scusate ma dopo aver scaricato il file BLK del codice sorgente con che programma lo devo aprire?

    RispondiElimina
    Risposte
    1. devi scaricare il file in formato .zip (il blk è all'interno dello zip ma a te non interessa)
      guarda questo tutorial per capire meglio come scaricare e caricare i progetti:
      http://seblogapps.blogspot.it/2011/04/tutorial-5-condividere-e-importare-le.html

      Elimina
  13. Ciao vorrei sapere come poter mantenere la connessione bluetooth in tutte le varie screen .

    RispondiElimina
  14. Scusate ma come faccio a mantenere lo schermo del cellulare sempre acceso quando la mia applicazione è attiva ?
    Grazie mille , Ciao

    RispondiElimina
    Risposte
    1. Un metodo diretto non esiste, puoi usare un paio di trucchetti:
      questo il primo http://puravidaapps.com/countdown.php
      l'app continua a funzionare ma lo schermo del dispositivo si spegnerà comunque,
      il trucco è usare un componente videoplayer, settarlo a grandezza 1x1px e all'evento videoplayer1.completed far partire di nuovo il video.
      Il secondo invece presuppone che tu utilizzi SL4A (un programma esterno quindi), come spiegato qua:
      http://puravidaapps.com/countdown1.php
      è più complesso ma questo richiede un wakelock al device e quindi lo terrà acceso finchè lo decidi tu (occhio quindi che è "pericoloso" da usare perchè se l'utente si dimentica di chiudere l'app il telefono non andrà più in standby...)

      Elimina
  15. Come faccio a caricare un esempio di progetto scaricato da questo blog?
    L'appinventor mi chiede un file .aia

    Grazie

    RispondiElimina
  16. salve non riesco a mettere a tutto schermo i video ...succee solo a me?

    RispondiElimina
  17. Ciao Sebastiano fai un lavoro eccezionale e utilissimo. Volevo chiederti c'è in modo o una funzione che permetta di aprire un screnn successivo e chiudere quello appena visto? Es. dal Screen2 clik button aprendo lo screen3 ma chiudendo contemporaneamente lo Screen2? Grazie mille

    RispondiElimina
    Risposte
    1. Certo si può fare con un piccolo "trucchetto"
      trovi come in questo video:
      https://www.youtube.com/watch?v=2vG4nAH39rw
      se scarichi il file sorgente vedi subito come si fa, è davvero semplice, ciao!

      Elimina
  18. Salve, e complimenti per i bellissimi e utilissimi tutorial, spiegati in modo chiaro è semplici per noi profani. Volevo chiederle una cosa, volevo creare una app che riguardasse la numismatica, visto che sono un appassionato, solo che dopo aver cominciato ho scoperto che non è possibile creare tante screen. il progetto prevedeva circa 100 pagine diverse, sono arrivato a 14 e mi ha consigliato di non aggiungerne altre. Come si può risolvere il problema. L'app e composta da pulsanti e label e immagini per lo piu

    RispondiElimina
  19. Ciao, complimenti per il tuo blog e per i tuoi video tutorial, chiari e precisi. Ho un problema, che non riesco a risolvere: ho creato una app multiscreen e ho inserito le procedure come indicato. L'apk sul mio cellulare (Android 6.0) funziona molto bene, sul tablet funziona con qualche incertezza, su un altro cellulare (Android 6.0) non funziona (4 button mandano in crash l'applicazione solo due funzionano). E su un vecchio gingerbread funziona correttamente. C'è un senso?

    RispondiElimina
  20. Ciao, complimenti per il tuo blog e per i tuoi video tutorial, chiari e precisi. Ho un problema, che non riesco a risolvere: ho creato una app multiscreen e ho inserito le procedure come indicato. L'apk sul mio cellulare (Android 6.0) funziona molto bene, sul tablet funziona con qualche incertezza, su un altro cellulare (Android 6.0) non funziona (4 button mandano in crash l'applicazione solo due funzionano). E su un vecchio gingerbread funziona correttamente. C'è un senso?

    RispondiElimina