Desenvolupament d'aplicacions amb App Inventor
3- Creem l'aplicació
L'aplicació només tindrà una pantalla però en cada moment només es veurà una
part dels elements. La pantalla ens pot quedar com a les figures següents.
Els elements que apareixen a la pantalla es descriuen a continuació. La primera agrupació
conté els quatre botons del menú principal:
| Propietat |
Valor |
Comentaris |
| Nom |
HorizontalArrangement_menu |
Aquest nom l'hem de posar en el requadre Components |
| Width |
Fill parent |
|
| Propietat |
Valor |
Comentaris |
| Nom |
Button_des |
Aquest nom l'hem de posar en el requadre Components |
| Image |
descendent.gif |
|
| Text |
(buit) |
|
| Propietat |
Valor |
Comentaris |
| Nom |
Button_asc |
Aquest nom l'hem de posar en el requadre Components |
| Image |
ascendent.gif |
|
| Text |
(buit) |
|
| Propietat |
Valor |
Comentaris |
| Nom |
Button_afegir |
Aquest nom l'hem de posar en el requadre Components |
| Image |
afegir.gif |
|
| Text |
(buit) |
|
| Propietat |
Valor |
Comentaris |
| Nom |
Button_cercar |
Aquest nom l'hem de posar en el requadre Components |
| Image |
cercar.gif |
|
| Text |
(buit) |
|
En aquesta etiqueta és on sortiran els missatges i informacions.
| Propietat |
Valor |
Comentaris |
| Nom |
Label_text |
Aquest nom l'hem de posar en el requadre Components |
| HasMargins |
Marcat |
|
| Width |
Fill parent |
|
Aquesta agrupació conté els botons que corresponen a l'acció de modificar:
| Propietat |
Valor |
Comentaris |
| Nom |
HorizontalArrangement_modif |
Aquest nom l'hem de posar en el requadre Components |
| AlignHorizontal |
Center |
|
| Width |
Fill parent |
|
| Propietat |
Valor |
Comentaris |
| Nom |
Button_modif |
Aquest nom l'hem de posar en el requadre Components |
| Image |
modif.gif |
|
| Text |
(buit) |
|
| Propietat |
Valor |
Comentaris |
| Nom |
Label2 |
Aquest nom l'hem de posar en el requadre Components |
| BackgroundColor |
None |
|
| Text |
Text |
|
| TextColor |
None |
|
| Propietat |
Valor |
Comentaris |
| Nom |
Button_enrere |
Aquest nom l'hem de posar en el requadre Components |
| Image |
enrere.gif |
|
| Text |
(buit) |
|
A la següent agrupació és on es mostraran els resultats de les cerques i els llistats
de llibres. Es poden mostrar fins a cinc llibres, que es presentaran en els cinc
botons que hi ha a la part superior d'aquesta agrupació.
| Propietat |
Valor |
Comentaris |
| Nom |
VerticalArrangement_llista |
Aquest nom l'hem de posar en el requadre Components |
| Width |
Fill parent |
|
| Propietat |
Valor |
Comentaris |
| Nom |
Button_resp1 |
Aquest nom l'hem de posar en el requadre Components |
| BackgroundColor |
White |
|
| Width |
Fill parent |
|
| Propietat |
Valor |
Comentaris |
| Nom |
Button_resp2 |
Aquest nom l'hem de posar en el requadre Components |
| BackgroundColor |
White |
|
| Width |
Fill parent |
|
| Propietat |
Valor |
Comentaris |
| Nom |
Button_resp3 |
Aquest nom l'hem de posar en el requadre Components |
| BackgroundColor |
White |
|
| Width |
Fill parent |
|
| Propietat |
Valor |
Comentaris |
| Nom |
Button_resp4 |
Aquest nom l'hem de posar en el requadre Components |
| BackgroundColor |
White |
|
| Width |
Fill parent |
|
| Propietat |
Valor |
Comentaris |
| Nom |
Button_resp5 |
Aquest nom l'hem de posar en el requadre Components |
| BackgroundColor |
White |
|
| Width |
Fill parent |
|
Els botons de l'agrupació següent permeten passar a la pàgina anterior o a la
següent del llistat.
| Propietat |
Valor |
Comentaris |
| Nom |
HorizontalArrangement_botLlis |
Aquest nom l'hem de posar en el requadre Components |
| AlignHorizontal |
Center |
|
| Width |
Fill parent |
|
| Propietat |
Valor |
Comentaris |
| Nom |
Button_ant |
Aquest nom l'hem de posar en el requadre Components |
| Image |
anterior.gif |
|
| Text |
(buit) |
|
| Propietat |
Valor |
Comentaris |
| Nom |
Label3 |
Aquest nom l'hem de posar en el requadre Components |
| BackgroundColor |
None |
|
| Text |
Text |
|
| TextColor |
None |
|
| Propietat |
Valor |
Comentaris |
| Nom |
Button_seg |
Aquest nom l'hem de posar en el requadre Components |
| Image |
seguent.gif |
|
| Text |
(buit) |
|
La següent agrupació conté els camps necessaris per fer una cerca.
| Propietat |
Valor |
Comentaris |
| Nom |
HorizontalArrangement_cerca |
Aquest nom l'hem de posar en el requadre Components |
| AlignVertical |
Center |
|
| Width |
Fill parent |
|
| Propietat |
Valor |
Comentaris |
| Nom |
VerticalArrangement1 |
Aquest nom l'hem de posar en el requadre Components |
| Width |
Fill parent |
|
| Propietat |
Valor |
Comentaris |
| Nom |
TextBox_cercaA |
Aquest nom l'hem de posar en el requadre Components |
| Width |
Fill parent |
|
| Hint |
Autor |
|
| Propietat |
Valor |
Comentaris |
| Nom |
TextBox_cercaT |
Aquest nom l'hem de posar en el requadre Components |
| Width |
Fill parent |
|
| Hint |
Títol |
|
| Propietat |
Valor |
Comentaris |
| Nom |
Switch_esb |
Aquest nom l'hem de posar en el requadre Components |
| Text |
Incloure esborrats |
|
| Propietat |
Valor |
Comentaris |
| Nom |
Button_cerca |
Aquest nom l'hem de posar en el requadre Components |
| Image |
acceptar.gif |
|
| Text |
(buit) |
|
La següent agrupació conté els camps necessaris per afegir o modificar les dades d'un llibre. Per a
cada camp hi ha una agrupació que conté l'etiqueta i l'espai per escriure.
| Propietat |
Valor |
Comentaris |
| Nom |
VerticalArrangement_afegir |
Aquest nom l'hem de posar en el requadre Components |
| Width |
Fill parent |
|
| Propietat |
Valor |
Comentaris |
| Nom |
HorizontalArrangement_titol |
Aquest nom l'hem de posar en el requadre Components |
| Width |
Fill parent |
|
| Propietat |
Valor |
Comentaris |
| Nom |
Label_titol |
Aquest nom l'hem de posar en el requadre Components |
| Text |
Títol: |
|
| Propietat |
Valor |
Comentaris |
| Nom |
TextBox_titol |
Aquest nom l'hem de posar en el requadre Components |
| Width |
Fill parent |
|
| Propietat |
Valor |
Comentaris |
| Nom |
HorizontalArrangement_autor |
Aquest nom l'hem de posar en el requadre Components |
| Width |
Fill parent |
|
| Propietat |
Valor |
Comentaris |
| Nom |
Label_autor |
Aquest nom l'hem de posar en el requadre Components |
| Text |
Autor: |
|
| Propietat |
Valor |
Comentaris |
| Nom |
TextBox_autor |
Aquest nom l'hem de posar en el requadre Components |
| Width |
Fill parent |
|
| Nom |
HorizontalArrangement_editor |
Aquest nom l'hem de posar en el requadre Components |
| Width |
Fill parent |
|
| Propietat |
Valor |
Comentaris |
| Nom |
Label_editor |
Aquest nom l'hem de posar en el requadre Components |
| Text |
Autor: |
|
| Propietat |
Valor |
Comentaris |
| Nom |
TextBox_editor |
Aquest nom l'hem de posar en el requadre Components |
| Width |
Fill parent |
|
| Nom |
HorizontalArrangement_any |
Aquest nom l'hem de posar en el requadre Components |
| Width |
Fill parent |
|
| Propietat |
Valor |
Comentaris |
| Nom |
Label_any |
Aquest nom l'hem de posar en el requadre Components |
| Text |
Any edició: |
|
| Propietat |
Valor |
Comentaris |
| Nom |
TextBox_any |
Aquest nom l'hem de posar en el requadre Components |
| Width |
20 percent |
|
| Nom |
HorizontalArrangement_genere |
Aquest nom l'hem de posar en el requadre Components |
| Width |
Fill parent |
|
| Propietat |
Valor |
Comentaris |
| Nom |
Label_genere |
Aquest nom l'hem de posar en el requadre Components |
| Text |
Gènere: |
|
| Propietat |
Valor |
Comentaris |
| Nom |
TextBox_genere |
Aquest nom l'hem de posar en el requadre Components |
| Propietat |
Valor |
Comentaris |
| Nom |
ListPicker_genere |
Aquest nom l'hem de posar en el requadre Components |
| BackgroundColor |
Blue |
|
| FontBold |
Marcat |
|
| ItemBackgroundColor |
Blue |
|
| ItemTextColor |
Yellow |
|
| Shape |
Rounded |
|
| Text |
Gènere: |
|
| TextAlignment |
Center |
|
| TextColor |
White |
|
| Propietat |
Valor |
Comentaris |
| Nom |
Label_coment |
Aquest nom l'hem de posar en el requadre Components |
| Text |
Comentaris: |
|
| Propietat |
Valor |
Comentaris |
| Nom |
TextBox_coment |
Aquest nom l'hem de posar en el requadre Components |
| Width |
Fill parent |
|
| Propietat |
Valor |
Comentaris |
| Nom |
Switch_esbor |
Aquest nom l'hem de posar en el requadre Components |
| Text |
Esborrat |
|
| Nom |
HorizontalArrangement_accept |
Aquest nom l'hem de posar en el requadre Components |
| AlignHorizontal |
Center |
|
| Width |
Fill parent |
|
| Nom |
Button_accept |
Aquest nom l'hem de posar en el requadre Components |
| Image |
acceptar.gif |
|
Finalment, l'element que permet intercanviar dades al web.
| Nom |
Web1 |
Aquest nom l'hem de posar en el requadre Components |
El programa té set vistes diferents. La taula següent indica el que es
mostra a cada una:
| Element |
0 Inici |
1 Afegir |
2 Cercar |
3 Cap resultat |
4 Un resultat |
5 n resultats |
6 Modificar |
7 Carregant |
| Label_text |
X |
X |
X |
X |
X |
X |
X |
|
| HorizontalArrangement_modif |
|
|
|
|
X |
|
|
| VerticalArrangement_llista |
|
|
|
|
|
X |
|
|
| HorizontalArrangement_cerca |
|
|
X |
|
|
|
|
|
| VerticalArrangement_afegir |
|
X |
|
|
|
|
X |
|
A continuació anem a veure el programa. Comencem per inicialitzar les
variables i la pantalla. A l'inicialitzar la pantalla cal llegir els gèneres
existents per tal que estiguin disponibles al menú desplegable.
Ara comentem les funcions. La primera funció és la que,
segons el paràmetre, ens mostra les diferents vistes.
La següent funció és la que mostra els resultats quan n'hi ha més d'un.
Aquesta funció ens indica els resultats de la cerca.
La funció següent és per a quan només hi ha un resultat a mostrar.
Aquesta funció és la que correspon a una comanda de cerca.
La darrera funció és la que es fa servir per demanar la llista de llibres.
El bloc següent és el que tracta la informació que es rep del web.
A continuació tenim les accions corresponents als botons i interruptors.
Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.
