Com crear Listviews per a AppInventor

Ferran Mas
@FerranMas
Estoig Digital
Aula AppInventor2
Com crear Listviews per a AppInventor
Cornellà, 20 de maig del 2017

1.- Justificació [a]
La majoria d’apps per a mòbils fan servir el format “Listview” per mostrar la seva informació

1.- Justificació [b]
Els objectes de que disposa AppInventor per fer llistes son: Listview i Listpicker però en cap cas
ens permeten afegir format i imatges al text.
Listview ListPicker Listview extern en HTML

2.- Entorn de treball
1. Symbaloo
2. AppInventor
3. Drive
4. TeamViewer
5. Hostinger
6. SublimeText
7. GitHub
8. MobileTest.me

3.- Plantilles de treball
Xarxa radios Eduradio Jugadors ACB Minerals Monuments

4.- La pàgina HTML format Mobile
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-
scale=1" />
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-
1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-
1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Capçalera</h1>
</div>
<div data-role="content">
<p>Aquí el contingut de la pàgina</p>
</div>
<div data-role="footer">
<h4>Peu</h4>
<div>
</div>
</body>
</html>
pagina.html

4.- La plantilla listview - Portada -
<div id="home" data-role="page">
<div data-role="header" data-theme="c">
<h1 id="titol" > Xarxa de Radios Escolars</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-ajax="false" data-filter="false" data-filter-
placeholder="Cercar" id="articleList" data-inset="true" >
<li id="list0"><a href="#pagina-0" id="link0" data-ajax="false" ><img
class="mini img-thumbnail" src="http://ceippuigdenafatima.cat/wp-
content/uploads/2015/02/Sense-nom.jpg" /><h1 class="myHeader">CEIP
Puig de Fatima </h1><p class="myParagraph">Puigpunyent (Mallorca)
  <img width="25" src="flags/catala.png" /> </p></a></li>
<li id="list1"><a href="#pagina-1" id="link1" data-ajax="false" ><img
class="mini img-thumbnail"
src="https://d1bm3dmew779uf.cloudfront.net/large/751a1aa256ec2a8662fb6
af04a92834a.jpg" /><h1 class="myHeader">EduRadio</h1><p
class="myParagraph">   <img width="25" src="flags/catala.png" />
</p></a></li>
<li id="list2"> ..........</li>
<li id="list3"> ..........</li>
<li id="list4"> ..........</li>
<li id="list5"> ..........</li>
<li id="list6"> ..........</li>
<li id="list7"> ..........</li>
</ul>
</div>
</div>
plantilla_radio.html

4.- La plantilla listview - Pagines -
<div id="pagina-7" data-role="page">
<div data-role="header">
<a href="#pagina-6" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-
transition="slide" data-direction="reverse" data-ajax="false" > Anterior</a>
<a href="#" data-icon="arrow-r" data-iconpos="right" data-rel="next" data-
transition="slide" data-direction="reverse" data-ajax="false"> Següent</a>
<h1>Radio INS Jaume Huguet</h1>
</div>
<div data-role="content"> <center>
<img
src="http://d1bm3dmew779uf.cloudfront.net/large/68ac082173a3f0d35841f53413c35
0b0.jpg" width="300" />
<br /> <br />
<audio controls>
<source
src="http://api.spreaker.com/listen/user/8044215/episode/latest/shoutcast.mp3"
type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<h5><a
href="http://www.institutjaumehuguet.cat/">http://www.institutjaumehuguet.cat/</a>
</h5>
<br /> <br /><a href="pistes_radio.php?id=8044215"><img
src="http://eduradio.tk/fotos/icona_listview.png"></a></center></div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" data-role="tab" data-icon="grid" class="ui-btn-
active">Inici</a></li>
</ul>
</div>
</div>
</div>
plantilla_radio.html

5.- Editem la plantilla listview
Podem optar per 3 opcions:
1. Utilitzar un programa d’edició web com
Dreamweaver
2. Utilitzar un editor de codi com SublimeText
3. Utilitzar un editor on-line com Squarefree.

6.- Hostatgem la plantilla en un hosting
Una de les millors propostes gratuïtes és
hostinger.es
Podem penjar la nostra pagina listview que serà
accessible des de l’app AppInventor emprant el
visor web ( WebViewer)

7.- Creem la nostra app amb el listview- Disseny-
● Listview.aia
● Listview.apk

7.- Creem la nostra app amb el listview- Codi-
● Listview.aia
● Listview.apk

!!! Moltes gràcies !!!
Ferran Mas
@FerranMas
Estoig Digital
Aula AppInventor

Com crear Listviews per a AppInventor

More Related Content

Recently uploaded

Featured

Com crear Listviews per a AppInventor