Parsear HTML con htmlparser para Android Guillem Pérez He escogido esta librería(http://htmlparser.sourceforge.net/) aunque no había muchos ejemplos porque la he visto realmente ligera y esta en java hay otra librería como la mozilla-parser pero pesa bastante más que esta. Primero de todo hemos de saber cual es la estructura de la pagina web. Como podemos ver en nuestro ejemplo la pagina de cuantarazon.com tiene una estructura prefijada: <div class="box story"> <a class="tag" href="http://www.cuantarazon.com/368724/bikini-soluble#comments_title" title="34 comentarios">34</a> <h2><a href="http://www.cuantarazon.com/368724/bikini-soluble">bikini SOLUBLE</a></h2> <p class="story_content"> <a href="http://www.cuantarazon.com/368724/bikini-soluble" class="crlink"><img src="http://images8.cuantarazon.com/crs/2011/10/cr_368724_bikini_soluble.jpg" alt="bikini SOLUBLE - No sé si será útil para las tías, pero los tíos seguro que disfrutaremos"/></a> </p> <div class="source"> Fuente: <a href="http://www.quo.es/sexo/curiosidades/el_primer_bikini_soluble" rel="external">http://www.quo.es/sexo/curiosidades/el_primer_bikini_soluble</a> <div class="box story"> <a class="tag" href="http://www.cuantarazon.com/368648/superheroes#comments_title" title="10 comentarios">10</a> <h2><a href="http://www.cuantarazon.com/368648/superheroes">superhéroes</a></h2> <p class="story_content"> <a href="http://www.cuantarazon.com/368648/superheroes" class="crlink"><img src="http://images8.cuantarazon.com/crs/2011/10/cr_368648_superheroes.jpg" alt="superhéroes - que ayudan a entender la fisica clásica"/></a> </p>
<div class="source"> Fuente: <a href="http://www.taringa.net/posts/imagenes/12747644/las-imagenes- Frikis-Del-Dia-061011-_93-Pics_.html" rel="external">http://www.taringa.net/posts/imagenes/12747644/las-imagenes-frikis-del-dia- 061011-_93-Pics_.html</a> He borrado algún div entremedio para simplificar la lectura del html. De esta manera podemos ver que en cada div con la clase box story empieza una entrada en este caso una divertida fotografiá que queremos recoger y mostrar en nuestro dispositivo android. Lo que debemos hacer es recoger cada div box story esto lo logramos con el siguiente código java: TagNameFilter filter0 = new TagNameFilter (); filter0.setname ("DIV"); HasAttributeFilter filter1 = new HasAttributeFilter(); filter1.setattributename("class"); filter1.setattributevalue("box story"); NodeFilter[] array0 = new NodeFilter[2]; array0[0] = filter0; array0[1] = filter1; AndFilter filter2 = new AndFilter (); filter2.setpredicates (array0); NodeFilter[] array1 = new NodeFilter[1]; array1[0] = filter2; FilterBean bean = new FilterBean (); bean.setfilters (array1); bean.seturl (url); bean.getnodes(); Este código esta en uno de los ejemplos de la librería lo único que he implementado es cambiar la etiqueta de los miembros que queremos leer: en setname, en lugar de DIV también podríamos leer todos los links de la pagina poniendo A o todas las imágenes poniendo en su lugar la etiqueta IMG. Podemos parsear cualquier elemento html poniendo su etiqueta en mayúsculas. Otra de las características fundamentales es la clase HasAttributeFilter, donde podremos ir creando las instancias necesarias según el numero de atributos que queramos filtrar, normalmente con uno o como mucho dos atributos ya es más que suficiente. Como podemos ver en el ejemplo del código para poner un atributo debemos poner el nombre de este y luego su valor, en este caso box story. Si hubiéramos querido coger el link de fuente en su lugar tendríamos que poner el valor source en su lugar de esta forma recogeríamos los dos div= source que hay en el html. Por último añadimos los filtros en el FilterBean que estará encargada del parseo, por eso es muy importante ponerle el link que queremos usar, sea el correcto y sin acortar en este caso http://www.cuantarazon.com y después podremos recoger estos nodos con bean.getnodes(), obteniendo la lista de nodos, partes del html, un ejemplo muy sencillo para probar si hemos hecho
bien el parser es: NodeList nodelist = bean.getnodes(); for(int m=0;m<list.size();m++){ Node temp = list.elementat(m); System.out.println ("Node " + m "\n" + temp.tohtml()); Debería devolver por pantalla la parte del html que queremos parsear, a partir de este punto teniendo en cuenta que es satisfactorio el parser queremos recoger el link de la imagen lo haremos recogiendo los elementos del parser que sean una instancia de ImageTag si quisiéramos recoger links podríamos hacer lo mismo pero con LinkTag. NodeFilter filter = new TagNameFilter ("IMG"); NodeList list = new NodeList(); try { for (NodeIterator e =nodelist.elements() ; e.hasmorenodes ();) e.nextnode ().collectinto (list, filter); catch (ParserException e1) { e1.printstacktrace(); Con este sencillo código hemos filtrados los elementos que había dentro de un nodo, que previamente hemos rellenado con la parte del código html que queríamos usar, obteniendo una lista ( list ) de los elementos con IMG. Por lo tanto en la list ya tendríamos el link de nuestra imagen. Para poder manejarla más fácilmente la pasaremos a la clase ImageTag de esta forma podremos usar los metodos extractimagelocn() donde nos devuelve la dirección de la imagen. for(int m=0;m<list.size();m++){ Node temp = list.elementat(m); ImageTag link = new ImageTag(); if( temp instanceof ImageTag){ link = (ImageTag) temp; data.add( new Imagen( link.getattribute("alt"), link.extractimagelocn() ) ); Revisamos que todos los links sean una instancia de ImageTag y de esta forma podemos hacer un casting para usar sus métodos, en este caso también he querido leer el Atributo ALT de la imagen porque tiene una detallada información del titulo que es muy fácil leerla des del mismo sitio y luego llamo el método ya dicho para poder recoger la localización. He creado una clase Imagen para colocar rápidamente los datos recolectados, además da la oportunidad de que si en un futuro queremos recoger más datos de las imágenes, como el source por ejemplo solamente tendremos que añadir más variables para conseguirlo, la clase Imagen es la típica de un objeto con sets y gets en este caso con el constructor ya demandamos que se introduzcan los datos. Ahora ya deberíamos tener funcionando el parser, con un sencillo main en java llamando a la función podríamos ver que las salidas son las correctas, antes de pasarlo a la gui de android, dando más agilidad al testeo.
En esta parte usaremos la gui de Android para mostrar los resultados, usare un ArrayAdapter para hacer la lista, sigue el mismo patron que en la pagina de sgoliver y para no repetir lo podeis encontrar como hacerlo aquí: http://www.sgoliver.net/blog/?p=1431 Muy importante usar la AsyncTask, al descargar los datos tardamos más del tiempo en que el android detecta que la aplicación no responde y entonces cerraría la app, también hay que remarcar que el update de la información se ha de hacer desde la aplicación principal y no des de la AsyncTask porque entonces tendríamos un error al no ser el propio hilo de la app que intenta actualizarse, de esta forma tenemos una AsyncTask, con entrada de un string ( la url de cuantocabron que queremos parsear ) y se ve de esta forma: private class Task_DownImagenes_CuantoCabron extends AsyncTask<String, Void, Void> { private List<Imagen> imagenes = new ArrayList<Imagen>(); private final ProgressDialog dialog = new ProgressDialog( CuantoCabronActivity.this); private String URL; // can use UI thread here protected void onpreexecute() { this.dialog.setmessage("descargando\n nuevas imagens..."); this.dialog.setcancelable(false); this.dialog.show(); protected Void doinbackground(string... url) { try { this.url = url[0]; ParserCuantoCabron parser = new ParserCuantoCabron(url[0]); this.imagenes = parser.run(); catch (Exception e) { return null; @Override protected void onpostexecute(void result) { if (this.dialog.isshowing()) { this.dialog.dismiss(); if(this.imagenes!=null ) updateviewimagenes(imagenes); Como podéis ver a parte tenemos un dialog para mostrar que la aplicación esta ocupada que cuando llega el momento se cierra, en la parte onpostexecute ya tenemos los datos recogidos y procedemos ha hacer un update para ver los resultados. Llamamos updateviewimagenes que esta contenida en la activity, que consiste en el inflate del xml listview con el arrayadapter. En el momento de ejecutarlo podremos ver el siguiente resultado:
Esta app pretende ser un ejemplo como parsear el html por lo que no explicare como descargar imágenes de servidores para no desviarnos del tema principal. Como habéis poder ver gracias a la librería htmlparser recolectar datos de las paginas html es bastante fácil de conseguir siempre que estructuremos lo que queremos parsear, pasando cada objeto des del bloque más grande posible a bloques más pequeños donde se pueda coger los datos para montar nuestro objeto virtual que después usaremos para inflar el xml. Si quieres ver más cosas como este tutorial recuerda en visitar: www.androidconnect.org