DevCorner: parsing di HTML con Jsoup e SmartImageView

Continuiamo a piccoli passi il nostro FeedReader costruito step by step e questa settimana è giunto il momento di mettere le immagini nella nostra ListView: visto che da bravi programmatori siamo pigri e preferiamo non reinventare la ruota, lo faremo utilizzando due librerie: Jsoup per parsare l'HTML e SmartImageView. Pronti per cominciare?

Per prima cosa inseriamo le due librerie citate precedentemente: per Jsoup sarà sufficiente aggiungere la seguente stringa al gradle.build:

compile 'org.jsoup:jsoup:1.7.3'

mentre per quel che riguarda SmartImageView possiamo scaricare il jar da questo indirizzo e, dopo averlo copiato nella cartella libs facciamo click col destro e selezioniamo Add as library.

A questo punto, nella nostra row.xml che definisce l'interfaccia delle singole righe della ListView sostituiamo l'ImageView che avevamo temporaneamente posizionato a sinistra con una SmartImageView, oggetto utilizzabile grazie all'omonima libreria di loopj.

Passiamo adesso alla nostra classe XMLParser e, nella serie di else if, aggiungiamone uno che parsi il content:encoded: quello che verrà ottenuto sarà del codice HTML, che possiamo parsare con Jsoup che abbiamo precedentemente importato.

Dichiariamo quindi un oggetto di tipo Document e, per tirare fuori il link all'immagine, estrapoliamo il parametro src del primo elemento img. Fatto questo non ci rimane che assegnarlo al nostro oggetto articoloCorrente tramite il metodo setImmagine.

else if (xpp.getName().equalsIgnoreCase("content:encoded")) {
                    if (insideItem)
                    {
                        String htmlData= new String(xpp.nextText());
                        Log.e("contetn?", htmlData);
                        Document doc = Jsoup.parse(htmlData);
                        String pic= doc.select("img").first().attr("abs:src");
                        articoloCorrente.setImmagine(pic);
                        articoloCorrente.setContenuto(htmlData);
                    }
                }

Arrivati qui non ci rimane che completare l'opera facendo impostare l'immagine alla SmartImageView direttamente dall'URL: per farlo apriamo il nostro ArticoloAdapter e, dopo aver dichiarato la SmartImageView utilizziamo il metodo setImageUrl per impostare la foto.

@Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View vi = convertView;
        if (convertView == null)
            vi = inflater.inflate(R.layout.row, null);

        TextView titolo = (TextView) vi.findViewById(R.id.titolo);
        TextView autore = (TextView) vi.findViewById(R.id.autore);
        SmartImageView immagine = (SmartImageView) vi.findViewById(R.id.immagine);
        Articolo articoloCorrente = listaArticoli.get(position);
        titolo.setText(articoloCorrente.getTitolo());
        autore.setText(articoloCorrente.getAutore());
        immagine.setImageUrl(articoloCorrente.getImmagine());
        return vi;
    }

Per questa settimana è tutto: adesso il nostro feed reader sta prendendo forma ed abbiamo una lista di articoli con immagine, titolo e autore.

Il lavoro riprende tra due settimane, ma nel frattempo potete consultare il codice su GitHub e porci qualsiasi domanda sul forum nella sezione Sviluppo.