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...)
ciao! è possibile associare ad ogni voce del list picker un'immagine?
RispondiEliminagrazie
damiano
dipende...il listpicker è solo testuale, ovvero quando lo lanci ti presenta comunque una lista di scelta in forma testuale.
RispondiEliminaPerò 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
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 :)
RispondiEliminaciao
Ciao!
RispondiEliminaAvrei 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!
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?
RispondiEliminaprova a vedere con questo template
http://code.google.com/p/resource-calculators/downloads/detail?name=mpOpen.zip
Esatto!!! Di listpicker comunque ce n'è solo uno, ma sembra faccia proprio al caso mio!
RispondiEliminaGrazie 1000
Ciao!
RispondiEliminaComplimenti 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.
spero di aver capito quello che cerchi di fare,
Eliminagli 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
Grazie per la risposta immediata, ho scaricato il file sorgente, come posso inviartelo?
Eliminas e b logapps@gmail.com
EliminaCiao,
RispondiEliminadevo 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
purtroppo l'unica opzione di formattazione disponibile è andare a capo,
Eliminanella 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
scusa posso avere un esempio di come si fa il maketest
EliminaCiao 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.
RispondiEliminaCiao,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:
Elimina1-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
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.
Eliminagrazie a te per i complimenti! fan sempre molto piacere :)
EliminaCiao, 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:
RispondiElimina0) 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??
ciao rispondo alle tue domande (curioso che parti dalla 0...):)
RispondiElimina0)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
Ciao una domanda da neofita. Le app qui sviluppate con app inventor sono compatibili anche su tablet?
RispondiEliminaGrazie
Si certamente!
RispondiEliminaSe poi usi marketizer anche le grafiche verranno scalate a dovere per una buona visualizzazione su tablet
Questo commento è stato eliminato dall'autore.
RispondiEliminaCiao 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:
Eliminahttps://www.youtube.com/watch?v=b9PgK9M12Pc
Ciao e grazie
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.
EliminaSe vuoi mandami il tuo file in formato zip e vedo cosa hai sbagliato, ciao
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)
RispondiEliminaVorrei che mi contattassi in privato: lpcdc4@gmail.com
EliminaCiao Seb,
RispondiEliminaio 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
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.
EliminaPer 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à
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.
RispondiEliminaVolevo 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!
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"
EliminaCosì 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)
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.
EliminaAllora 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!!
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!!
EliminaEcco 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ò?
Eliminase 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
Eliminaper 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
Ciao Sebastiano,
Eliminaho 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!
Ciao seb,
RispondiEliminaè 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
purtroppo ad oggi c'è solo quello stile per il listpicker
Eliminaaltra 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...
RispondiEliminagrazie..
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)
Eliminain cui abbiamo proprio un layout con i due pulsanti in basso... :)
era quello che cercavo...grazie
RispondiEliminaSalve Sebastiano,
RispondiEliminaVolevo 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
potresti fare così, usi clock e tinydb
Eliminacon 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!
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è difficile spiegare più terra terra di così, devi studiarti bene il componente clock (http://explore.appinventor.mit.edu/content/basic#Clock)
Eliminaper 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)
Ciao Sebastiano,
RispondiEliminaho la necessita' di scrivere una label con un font particolare, diverso da quelli istituzionali. Come faccio ad aggiungerlo?
Grazie
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..
RispondiEliminaper 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...
Eliminaguarda 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 :)
Ciao Sebastiano! Ottimi tutorial! me li sto studiando tutti! Sei un tecnofenomeno!
RispondiEliminaSpero 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!
Puoi farlo in molti modi diversi, il più semplice è forse questo:
Elimina1 - 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!
Grandioso! Grazie mille! molto gentile come sempre!
EliminaChissà se riuscirò un giorno a coglierti impreparato :-O
Dubito!
ah ah ! si beh è molto facile non è che so tutto !!!! :)
Eliminalo scopriremo solo vivendo :-D
EliminaCiao Seba,
RispondiEliminacome 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?
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