App Inventor



App7- PaintPot (Part 1)

Correu electrònic Imprimeix PDF

Aquest tutorial té dues parts: Part 1 | Part 2

Aquest tutorial us presenta el component llenç (canvas) que permet crear gràfics simples de dues dimensions. Aneu a construir una aplicació que us permetrà dibuixar en la pantalla del telèfon en diferents colors.

pot

Títol de la pantalla


Per començar, aneu al panell Propietats de la dreta de l'espai de Disseny i canvia el títol de la pantalla a "PaintPot". Heu de veure aquest canvi al telèfon, amb el nou títol que mostra a la barra de títol.

Hi ha tres noms en App Inventor, i és fàcil confondre's:

  1. El nom que trieu per al projecte a mida que esteu treballant (en aquest cas, PaintPot). Aquest també serà el nom de l'aplicació si s'empaqueta per al telèfon.
  2. El nom "Screen1", que és el nom de la component pantalla. Veuràs que apareix en el panell Components dins l'espai de Disseny. No es pot canviar aquest nom de la primera pantalla en la versió actual de l'app Inventor però podeu crear noves pantalles i posar-li els noms que creieu convenients.
  3. La propietat Títol de la pantalla, que és el que veuràs a la barra del títol del telèfon. El títol és una propietat del component de la pantalla. El títol comença sent "Screen1", ja que és el que em utilitzat a HelloPurr. No obstant això, podeu canviar-lo ara que estem fent per PaintPot. Recordeu, el nom i el títol de Screen1 són inicialment iguals però els podeu canviar si voleu.
  • Configurar els components

    Per fer PaintPot utilitzarem els següents components :
    • Tres botons de selecció de pintura color vermell, blau o verd i un altre botó per netejar el dibuix.
    • Un llenç, la superfície de dibuix. Aquest llenç té una Imatge de fons (BackgroundImage), que és aquest gatet del tutorial HelloPurr. També podeu dibuixar en un llenç en blanc si voleu. Això es fa deixant el llenç sense imatge de fons.
    • També hi ha un component que no es veu: s'utilitza un arranjament horitzontal (HorizontalArrangement) per fer que els tres botons dels colors quedin alineats.

    Tenim per tant cinc components en total. Anem a per ells i construir l'aplicació!!!

    Botons de colors

    • Arrossegueu un component Button al visor i canvieu l'atribut Text del botó a "Vermell", poseu el color vermell en el  BackgroundColor.
    • Feu clic a Button1 de la llista dels components en el visor per ressaltar (que ja estigui ressaltat) i utilitzar el botó Canvia el nom ... per canviar el seu nom de "Button1" per "BotoVermell".
    • De la mateixa manera, fer dos botons més un blau i un verd, anomenats «BotoBlau" i "BotoVerd", col·locats verticalment sota el botó vermell.

    Així és com aquest hauria d'estar l'espai de disseny, amb els noms dels botons que apareixen a la llista dels components del projecte. En aquest projecte, estem canviant els noms dels components en lloc de deixar-los amb els noms predeterminats tal i com ho vam fer amb HelloPurr. L'ús de noms significatius fa que els nostres projectes siguin més llegibles a tu mateix i per els altres.

    3botons

    També hauríes de veure els tres botons a la pantalla del telèfon.


    Organitzar la pantalla amb l'arranjament de la pantalla

    Ara heu de tenir tres botons, un sobre l'altre. El següent pas és fer que s'alinein horitzontalment. Per a això, utilitzarem el component HorizontalArrangement.
    1. Dins la categoria Disseny (layout) de la Paleta, arrossegueu el component HorizontalArrangement i col·loqueu-lo sota els botons. Canvieu el nom d'aquest component de "HorizontalArrangement1" a "TresBotons".
    2. Al tauler Propietats (properties), canvieu el Ample (width) de TresBotons a "Fill Parent..." així  s'omplirà tota l'amplada de la pantalla.
    3. Desplaceu els tres botons un al costat de l'altre dins del component HorizontalArrangement. Consell: Veuràs una línia vertical de color blau que mostra on s'està arrossegant la peça.

    Si ens fixem en la llista dels components del projecte, veuràs que l'esquema ens mostra els tres botons dels colors dins del del  TresBotons  desplaçats cap a la dreta, (com un diagrama d'arbre) per mostrar-nos que ara són els seus subcomponents. Observeu que tots els components estan sagnats sota Screen1 doncs són els seus components.

    w

    També heu de veure que els tres botons s'alinean en una fila a la pantalla del telèfon, tot i que les coses podrien no ser exactament com a l'espai de disseny. Per exemple, el contorn del Arrangement es mostra a l'espai de disseny, però no en el telèfon.
    En general, s'utilitza Arrangement en la pantalla per crear dissenys verticals o horitzontals simples. Podeu crear dissenys més complexos anant als components Arranjament de pantalla (Screen Arrangement). També hi ha un component TableArrangement (no coberts en aquest tutorial).

    Botó de la lona i botó neteja

    Els dos últims components són el llenç i el botó d'esborrar.
    1. De les categories de la paleta Dibuix i Animació (Drawing and Animation) arrossegueu  un component de la lona (Canvas) al Visor. Canvia el seu nom a "DibuixLlens". Estableixi la seva Amplada a "Fill Parent..." i establiu la seva altura a 300 píxels.
    2. Afegiu una imatge de fons de la lona. Feu clic al camp que conté "None..." costat de BackgroundImage a Propietats del panell de la lona. Podeu utilitzar el mateix arxiu kitty.png, si encara el teniu a l'escriptori d'un tutorial anterior. O podeu utilitzar una altra imatge.
    3. Des de la paleta, arrossegueu l'últim botó a la pantalla, col·locant-lo sota la lona. Canvieu la seva id a "BotoNeteja" i canvia el seu atribut de Text a "Netejar".

    Ara ja heu completat els passos per configurar l'aspecte de l'aplicació. Així és com hauria de ser l'espai de Disseny. A continuació, definirem com es comporten els components.

    Afegir accions als components

    Feu clic al botó de blocs per canviar l'Editor de blocs. Primer va a configurar els botons que canvien el color de la pintura. Posteriorment afegirà blocs per decidir el que passa quan algú toca o arrossega la pantalla.

    Afegeix controladors d'accions als botons

    En l'Editor de blocs:
    1. Obriu el calaix per BotoVermell i arrossegueu el bloc when BotoVermell.Click.
    2. Obriu el calaix DrawingCanvas. Arrossega el bloc set DrawingCanvas.PaintColor to (recordem que el bloc conjunt de components és un desplegable de manera PaintColor és una selecció a la llista desplegable) i situal a la do secció de when ButtonRed.Click

     

    ee

     

     

    App8- Pong

    Correu electrònic Imprimeix PDF

    El joc del Ping Pong d'un jugador, via l'Artur Coll:

     

     
    Pàgina 5 de 5

    Més Llegit...

    Ultimes Noticies

    mod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_counter
    mod_vvisit_counterAvui96
    mod_vvisit_counterAhir88
    mod_vvisit_counterAquesta setmana96
    mod_vvisit_counterÚltima setmana683
    mod_vvisit_counterAquest mes1767
    mod_vvisit_counterÚltim mes3205
    mod_vvisit_counterTotal348773