Cerca con Google

Translate

16 maggio 2011

Tutorial 8 - I blocchi della palette Basic


La guida di oggi spiegherà nel dettaglio l'utilizzo e le peculiarità degli elementi che si trovano nella prima palette del Design Editor di App Inventor, ovvero quella denominata "Basic"


Partiremo dal vedere le proprietà del componente Screen1, l'elemento base per ogni applicazione creata in App Inventor che presenta interessanti possibilità di personalizzazione dell'intera app.
In Screen1 infatti possiamo definire l'icona ed il titolo della nostra applicazione, l'orientamento e l'immagine di sfondo ed altro ancora...








Proseguiremo poi la trattazione esaminando gli elementi:

  • Button
  • CheckBox
  • Image
  • Label
  • ListPicker
  • PasswordTextBox
  • TextBox

Ho tralasciato volutamente gli elementi clock, canvas e tinydb per non rendere troppo pesante la lezione di oggi che risulta già piuttosto lunga e "faticosa"
Come al solito spero troviate utile ed interessante anche questa lezione, per ogni domanda o chiarimento usate pure il modulo commenti.
Alla prossima (stavolta spero sarò più celere nel pubblicare nuove lezioni)

Buona Visione quindi!!!
(l'audio all'inizio è un pò "ballerino" poi si sistema...)


54 commenti:

  1. ciao! è possibile associare ad ogni voce del list picker un'immagine?

    grazie
    damiano

    RispondiElimina
  2. dipende...il listpicker è solo testuale, ovvero quando lo lanci ti presenta comunque una lista di scelta in forma testuale.
    Però poi quello che viene scelto dall'utente lo puoi dare come input ad un immagine in modo da cambiare l'immagine a seconda della scelta fatta nel listpicker.
    Spero di essere stato abbastanza chiaro, ciao

    RispondiElimina
  3. chiarissimo come sempre. peccato, non serve al mio scopo. Tra le altre cose mi sto scontrando con il tinyDB avrei una domanda ma te la faccio sul tutorial giusto, cosi serve pure ad altri :)

    ciao

    RispondiElimina
  4. Ciao!
    Avrei bisogno di creare una o più sottoliste.
    Ovvero dalla lista principale seleziono un elemento e mi deve aprire una seconda lista.

    Ho cercato in tutto il web e il massimo che ho trovato è questo: https://sites.google.com/site/blocks123/lists
    ma non riesco nel mio intento!

    hai qualche dritta? grazie!

    RispondiElimina
  5. prova a vedere se questo fa al caso tuo, a te servono due listpicker, dopo che scegli la prima selezione ti apre anche la seconda?
    prova a vedere con questo template

    http://code.google.com/p/resource-calculators/downloads/detail?name=mpOpen.zip

    RispondiElimina
  6. Esatto!!! Di listpicker comunque ce n'è solo uno, ma sembra faccia proprio al caso mio!

    Grazie 1000

    RispondiElimina
  7. Ciao!
    Complimenti per il blog grazie al quale da inesperto e a digiuno di conoscenze di linguaggi di programmazione sono riuscito a creare una app. In questa inserendo delle date in una textbox previo clic su un button riesco a inserire le date in una listpcker aprendo la quale posso visionare tutto l'elenco. Ora vorrei cancellare un idem della listpcker, cosa riesco a fare tramite il comando removelist idem. Il mio problema inizia qui: vorrei settare la variabile che regola gli idem della lp dopo la correzione, ci riesco ma quando vado ad aprire di nuovo la listpicker ritrovo tuti gli item raggruppati tra parentesi nello spazio che prima conteneva il primo item.
    Come posso fare a riottenere l'elenco ?
    Spero di essere stato abbastanza chiaro, grazie comunque per l'attenzione e complimenti ancora per il tuo blog.

    RispondiElimina
    Risposte
    1. spero di aver capito quello che cerchi di fare,
      gli elementi li devi mettere in "items" e vanno separati da una virgola,
      quando esegui una modifica (tipo rimozione) di un elemento devi ricreare la variabile "items" con l'elemento in meno.
      Non definire Items nel design editor, ma fallo solo da blocks editor.
      Puoi creare la lista con makealist e quando hai l'evento BeforePicking della LP ricarichi la lista aggiornata.
      Usa anche le funzioni di watch nel blocks editor per controllare i valori di "items" durante il funzionamento dell'app.
      Se hai ancora problemi se vuoi mandami il tuo file sorgente così forse ci capiamo meglio!ciao

      Elimina
    2. Grazie per la risposta immediata, ho scaricato il file sorgente, come posso inviartelo?

      Elimina
  8. Ciao,

    devo creare una semplice applicazione con una serie di pulsanti che visualizzano del testo, purtroppo non riesco a formattare il testo con i giusti rientri a capo, mi puoi suggerire una soluzione?

    Grazie mille

    RispondiElimina
    Risposte
    1. purtroppo l'unica opzione di formattazione disponibile è andare a capo,
      nella maketext inserisci \n quando vuoi andare a capo
      Per esempio la stringa "a questo punto\nvado a capo", andrà a capo dopo "a questo punto"
      spero di esserti stato d'aiuto, ciao

      Elimina
    2. scusa posso avere un esempio di come si fa il maketest

      Elimina
  9. Ciao a tutti. Complimenti a Sebastiano per gli ottimi tutorial, vorrei, se possibile, fare una richiesta, sulla base di questo tutorial sarebbe possibile averne altri per ogni palette? la mia richiesta nasce dall'esigenza di volere imparare ma con zero nozioni di programmazione, sto seguendo con attenzione i tutorial ma spesso mi perdo, grazie comunque.

    RispondiElimina
    Risposte
    1. Ciao,capisco le tue difficoltà,avevo pensato inizialmente di fare un tutorial per ogni palette ma poi la cosa diventava a mio avviso troppo lunga e noiosa (questo tutorial ha la lunghezza record di 54min!) ho così deciso di concentrarmi su due tipi di tutorial:
      1-la realizzazione di qualche semplice app completa
      2-la spiegazione in un particolare elemento di AI (sempre con un esempio pratico)
      in questo modo si possono comunque imparare pian piano i principi della programmazione (quando li uso cerco di spiegare per esempio la funzione if..else, la definizione di una funzione,etc...) ed al tempo stesso i tutorial risultano meno "pesanti"
      Se hai qualche problema specifico su qualche argomento fammelo sapere e vedrò magari di accontentarti con uno dei prox tutorial

      Elimina
    2. Grazie per la risposta, tranquillo, immaginavo già una risposta del genere perché in effetti diverrebbe troppo lunga, grazie comunque per la disponibilità, vedrò di fare più pratica per arrivare a qualche risultato accettabile, complimenti ancora per la tua iniziativa che seguirò con dedizione.

      Elimina
    3. grazie a te per i complimenti! fan sempre molto piacere :)

      Elimina
  10. Ciao, innanzi tutto mi sembra doveroso cominciare con i ringraziamenti per quello che hai fatto/farai per chi vuole cominciare a programmare android, quindi grazie. Comunque volevo farti due domande, una riguarda questo tutorial, l'altra ho cercato ma non so dove chiedere:

    0) quando avviavi l'app aggiungevi pulsanti textbox etc, ho notato che l'immagine di sfondo tende a scendere, addirittura quando hai inserito l'immagine della foto non si vede più, come si fissa l'immagine di background??

    1) è possibile risalire al codice java e/o xml e quindi eventualmente modificare direttamente da codice? se si come?

    2) Non è proprio possibile decidere dove inserire un button o altro (es. textbox) all'interno della schermata??

    RispondiElimina
  11. ciao rispondo alle tue domande (curioso che parti dalla 0...):)
    0)se usi solo backgroundimage l'immagine di fondo non si muove, può essere che nel design editor le fa vedere in movimento ma poi una volta installata sul telefono lo sfondo resta li dov'è
    1)no, non è attualmente possibile
    2)si è possibile usando gli screenarrangment, esiste il "vertical" "horizontal" e "table",
    mettendo prima uno di questi componenti e poi al loro interno che ne so un button o una label puoi mettere queste ultime allineate in orizzontale o verticale, poi da poco è anche possibile decidere come centrarle rispetto allo schermo

    RispondiElimina
  12. Ciao una domanda da neofita. Le app qui sviluppate con app inventor sono compatibili anche su tablet?
    Grazie

    RispondiElimina
  13. Si certamente!
    Se poi usi marketizer anche le grafiche verranno scalate a dovere per una buona visualizzazione su tablet

    RispondiElimina
  14. Questo commento è stato eliminato dall'autore.

    RispondiElimina
    Risposte
    1. Ciao Sebastiano, bel lavoro il tuo, ti volevo segnalare che ho provato con successo tutti i comandi che tratti in questo video e solo ListPicker non mi funziona e non riesco a capire il perché mi aiuteresti gentilmente a capire come mai? Con un'altro algoritmo che ho trovato a questo link invece va alla grande:
      https://www.youtube.com/watch?v=b9PgK9M12Pc

      Ciao e grazie

      Elimina
    2. Ciao, così su due piedi non ti saprei dire, il componente è molto semplice, metti gli elementi che vuoi che vengano visualizzati separati da delle virgole ed il gioco è fatto.
      Se vuoi mandami il tuo file in formato zip e vedo cosa hai sbagliato, ciao

      Elimina
  15. Prima di tutto voglio ringraziarti per il fantastico blog. Ora sto tentando di fare un applicazione formata, principalmente da list picker e il mio problema è questo: vorrei fare sì che se nella prima lista si sceglie la voce "Matematica" appare listpicker_mat, ma se si seleziona "Italiano" diventi visibile solo listpicker_ita. (chiaramente "listpicker_mat" e "listpicker_ita" sono i nomi dei listpicker)

    RispondiElimina
    Risposte
    1. Vorrei che mi contattassi in privato: lpcdc4@gmail.com

      Elimina
  16. Ciao Seb,
    io ti ringrazio sempre con i clic per ciò che fai per noi, oggi ti volevo chiedere (non ricordo se lo hai già detto in un tutorial, se così scusami se te lo richiedo ma non posso rivederli tutti) se è possibile scrivere in un TextBox il valore "1" e all'uscita dal TextBox stesso, un comando mi formatta il valore "1" e lo trasforma in "01" a due cifre, grazie.
    Sergio

    RispondiElimina
    Risposte
    1. beh, si lo puoi fare in vari modi, quando ti servirà usare il valore del textbox formattato usi le funzioni matematiche per formattarlo a due cifre per esempio con la funzione "format as decimal", metti la tua textbox come "Numbersonly" così l'utente può inserire solo numeri.
      Per esempio metti una textbox e a fianco un pulsante di conferma dell'inserimento.
      All evento button.click esegui la formattazione a seconda delle tue necessità

      Elimina
  17. Ciao ho creato una picco applicazione con una textbox delle immagini e delle liste, quando scrivo nella textbox un determinato componente mi fa apparire l' immagine associata.
    Volevo chiederti, sai se è possibile fare una cosa tipo motore di ricerca? Esempio se nella lista associata all' immagine 1 ho dentro parole del tipo,
    uno-uno
    due-uno
    tre-tre
    quattro-uno
    uno-cinque
    ecc...
    se scrivo solo uno mi restituisce solo le stringe con la parola uno
    invece adesso sono costretto a scrivere esattamente la parola perchè ho usato il componente "is in list?"
    Grazie!

    RispondiElimina
    Risposte
    1. forse invece del componente "is in list" dovresti usare quello testuale "contains" e scorrere tutta la lista tramite un indice che gestisci te e un ciclo "while" oppure usando direttamente "foreach"
      Così puoi controllare elemento per elemento e se ti ritorna true estrai l'indice relativo a quell'elemento.
      Puoi usare questo approccio per piccole liste perchè credo che con liste più estese rallenti molto l'app (sul forum puoi chiedere a enfandroid come ha realizzato la sua app sulla raccolta differenziata)

      Elimina
    2. Ho fatto varie prove ma credo che questo metodo da te descritto è ancora un po' lontano dalle mie capacità, però vorrei capire, io ho fatto varie prove ma senza risultati, potresti spiegarmi meglio? Ovviamente ora anche io ti darò maggiori dettagli.
      Allora ho creato delle variabili con ognuna una "make a list" il mio metodo, che funziona benissimo, è quello di scrivere una parola, se questa parola è contenuta nella lista della variabile "a" mi fa apparire un' immagine se nella "b" un' altra immagine ecc.. e fino a qui potrei anche accontentarmi, però vorrei andare oltre perché il programma sarebbe più utile se quando scrivo anche solo una porzione di testo mi facesse vedere l' elenco di tutte le parole con quella porzione di testo (per l' immagine associata poi vedro come fare per ora un passo alla volta) forse mi sono bloccato perché non so creare un indice, ho iniziato due giorni fa con app-inventor, ho qualche base C++ ma poca roba, seguirò anche il tuo consiglio del forum.
      Grazie ancora e ottimo lavoro!!

      Elimina
    3. Sono riuscito a far cercare una parola nella lista e a estrarre tutte le stringhe con la parola scritta nella textbox facendole scrivere in una label, però me le scrive nella label solo se la parola nella textbox è inclusa nella prima stringa della lista, in caso contrario mi passa all' else, comunque fino a qui ci sono arrivato grazie ai tuoi consigli di contains e foreach, ora vedo di scervellarmi ancora un po' :) Grazie!!

      Elimina
    4. Ecco ho parlato troppo presto :) sono appena riuscito a fare funzionare il programma come volevo, ora mi piacerebbe sapere come associare a ogni elemento della lista estratto una piccola immagine, si può?

      Elimina
    5. se hai risolto quasi tutto ed ora vuoi solo associare l'immagine, potresti modificare i tuoi dati dove l'ultimo elemento è il nome dell'immagine che hai caricato come assett da design editor
      per esempio un elemento sarà composto da:
      mela,5€,mela.jpg
      crei questi elementi con il make a list,
      poi nella visualizzazione avrai che ne so, due label per le info "mela" e "5€" e un elemento "image" dove caricherai mela.jpg
      forse questo tutorial : http://appinventor.mit.edu/explore/content/makequiz-and-takequiz.html
      che spiega come lavorare sulle liste e potrebbe parzialmente fare al caso tuo
      forse poi sarà il caso di spostarsi sul forum dove puoi inserire i blocchi e magari il codice sorgente del tuo progetto, fammi sapere come procede, ciao

      Elimina
    6. Ciao Sebastiano,
      ho scritto sul forum ma per ora non ho ricevuto risposta,
      non ho capito molto bene cosa devo fare, il mio nick sul forum è sistema09 se puoi darmi maggiori dettagli sulla mia discussione "Make a list e associazione immagine" mi faresti un grosso favore, ora pubblico anche le immagini del codice così sarà più facile capire e magari puoi darmi qualche consiglio in più perché sicuramente, essendo inesperto, per fare quello che mi serve ci sono vie più semplici e meno contorte di quelle utilizzate da me.
      Grazie!

      Elimina
  18. Ciao seb,

    è possibile modificare il layout di listpicker? ad esempio, ottenere la lista degli item con il pallino di spunta (o quadrato di spunta) alla sinistra di ogni item e che, dopo aver selezionato, si riempie di un colore?

    grazie in ogni caso e del lavoro svolto sul blog.
    ciao

    RispondiElimina
    Risposte
    1. purtroppo ad oggi c'è solo quello stile per il listpicker

      Elimina
  19. altra domanda: è possibile mantenere 2 bottoni affiancati nella parte bassa dello schermo (anche ruotando il dispositivo)? ho inserito tra il logo superiore e l'horizontal screen inferiore (in cui ci sono i 2 bottoni) un vertical screen con fill parent sia per height sia per width, ma non funziona...

    grazie..

    RispondiElimina
    Risposte
    1. hai tolto la proprietà "scollable", probabilmente quello è il problema, guarda il video del tutorial 31 (http://seblogapps.blogspot.com/2012/04/tutorial-31-applicazione-con-schermate.html)
      in cui abbiamo proprio un layout con i due pulsanti in basso... :)

      Elimina
  20. Salve Sebastiano,
    Volevo chiederti come posso usare il clock per i miei scopi,ti spiegho io sto creando un'applicazione con una pagina aggiornamenti e ogni volta che qualcuno va in quello pagina esce un NOTIFIER che dice che bisogna vedere ogni sett. gli aggiornamenti e il clock farà si che fra una sett. uscirà il notifier come posso

    RispondiElimina
    Risposte
    1. potresti fare così, usi clock e tinydb
      con il clock salvi la data attuale nel tinydb, poi ogni volta che il tuo utente va alla pagina dove vuoi appaia il notifier, controlli la data di quell'istante con quella salvata nel tinydb,
      se sono passati per dire più di 7 giorni, allora fai apparire il notifier (e resetti il tinydb con la nuova data)
      guarda bene l'elemento clock e tutti i dati che ti può fornire, si riescono a fare molti calcoli sulle date che possono fare al caso tuo, ciao!

      Elimina
  21. Senti Sebastiano devo dirti che non ho capito nulla potresti parlare più terra terra perchè scusa come posso collegare il clock con il tiny??

    RispondiElimina
    Risposte
    1. è difficile spiegare più terra terra di così, devi studiarti bene il componente clock (http://explore.appinventor.mit.edu/content/basic#Clock)
      per capire che per esempio con il metodo "Getmillis" hai un numero che rappresenta la date e l'ora corrente rappresentata in millisecondi dal 1970, e con il metodo "AddDays" puoi aggiungere x giorni a questo valore così avrai un numero che è la rappresentazione in millisecondi dal 1970 a oggi + x giorni.
      A questo punto tu salvi nel tinydb il valore della data e ora corrente con Getmillis e ci aggiungi 7 giorni con "AddDays"
      poi fai un confronto tra il numero in "Getmillis" attuale e quello memorizzato, se maggiore di 7 vuol dire che son passati più di 7 giorni da quando l'utente ha aperto l'app
      più di così non riesco a spiegare ma son sicuro che se rileggi tutto pian piano e con calma capirai! :) fai delle prove con blocks editor finchè non risolvi (magari posta anche sul forum così altri ti possono aiutare)

      Elimina
  22. Ciao Sebastiano,

    ho la necessita' di scrivere una label con un font particolare, diverso da quelli istituzionali. Come faccio ad aggiungerlo?

    Grazie

    RispondiElimina
  23. Ciao una domanda sto seguendo un tutorial di app inventor 1 mi trovo spesso il blocco "join con due attacchi oppure quello con due incastri" che in app inventor 2 non vedo, oppure mi trovo il blocco "call make test" che non trovo, non riesco ad andare avanti perchè non so come proseguire puoi darmi una mano? grazie..

    RispondiElimina
    Risposte
    1. per la "join" se vuoi mettere più di due elementi basta che clicchi sul pulsante "quadratino su sfondo blu", e poi prendi l'elemento "string" e lo incastri sotto i due che ci sono già, così ne metti quanti ne vuoi...
      guarda questa immagine per capire meglio : http://i.imgur.com/K88a9a8.png
      la "make text" è equivalente alla "join" quindi in AI2 puoi usare la join...
      spero che così tu possa andare avanti :)

      Elimina
  24. Ciao Sebastiano! Ottimi tutorial! me li sto studiando tutti! Sei un tecnofenomeno!
    Spero tu possa aiutarmi allora! Ho bisogno di fare una cosa che non ho visto nei tutorial, come posso fare comparire sullo schermo una frase casuale, tra quelle che gli do io?
    Se non si puo come testo.. le metto in un video o in una foto, e a quel punto dovrò far comparire un video o una foto casuale :-)
    Grazie!

    RispondiElimina
    Risposte
    1. Puoi farlo in molti modi diversi, il più semplice è forse questo:
      1 - crei una lista (con "make a list") dove ogni elemento della lista è la tua frase
      2 - usi la funzione matematica "random" (la trovi nella palette math) e generi un numero casuale da 1 al numero di elementi della tua lista (anche qui c'è il metodo che ti ritorna il numero di elementi nella tua lista)
      3 - usi "select list item" con il numero casuale generato al punto 2
      4 - visualizzi la tua frase casuale,
      puoi vedere il tutorial sul gioco matematico delle frazioni per vedere come usare la funzione random ed impratichirti un pò di più con AI,ciao!

      Elimina
    2. Grandioso! Grazie mille! molto gentile come sempre!
      Chissà se riuscirò un giorno a coglierti impreparato :-O
      Dubito!

      Elimina
    3. ah ah ! si beh è molto facile non è che so tutto !!!! :)

      Elimina
  25. Ciao Seba,
    come posso far si che un Button mi faccia sia rendere visibile che invisbile un Arrengement?
    di base è impostato Arrangement Hide
    ButtonClick Arrangemente Hide --- TRUE
    e qui ci siamo
    ma per far si che quando ripremo ButtonClick Arrangement ritorni HIDE?

    RispondiElimina
  26. ciao una domanda dovrei fare dovrei far caricare una pagina dall'app tramite ftp, ovvero metto una pagina html dentro una cartella del mio sito e quando l'utente clicca sull'icona si pare la pagina praticamente subito,che preleva dall'ftp, non so se mi sono spiegato, grazie.

    RispondiElimina