Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

(Difference between revisions)

Flickr Rss reader with SAX, Picasso in Nokia X

From Wiki
Jump to: navigation, search
BuildNokia (Talk | contribs)
(BuildNokia -)
BuildNokia (Talk | contribs)
(BuildNokia -)
Line 1: Line 1:
 
[[Category:Nokia X]][[Category:Nokia X 1.0]]
 
[[Category:Nokia X]][[Category:Nokia X 1.0]]
{{Abstract|This article explains how to create an RSS reader for the public FlickrRss using SAX Parser, and how to show images using Picasso library. }}  
+
{{Abstract|This article explains how to create an RSS feed of images using the SAX parser and the Picasso library. }}  
  
 
{{Note|This is an entry in the [[Nokia X Wiki Challenge 2014Q1]]}}
 
{{Note|This is an entry in the [[Nokia X Wiki Challenge 2014Q1]]}}

Revision as of 21:35, 17 April 2014

This article explains how to create an RSS feed of images using the SAX parser and the Picasso library.

Note.pngNote: This is an entry in the Nokia X Wiki Challenge 2014Q1

Article Metadata
Code Example
Source file: GitHub
Tested with
SDK: Android SDK v16
Devices(s): Nexus 4, Nokia X Emulator
Dependencies: Picasso API
Platform Security
Capabilities: INTERNET
Article
Created: ciccioska (17 Apr 2014)
Updated: ciccioska
Last edited: BuildNokia (17 Apr 2014)

Contents

Introduction

This example explains how to download an XML file, such as an RSS file, parse it, and display entries into a ListView. We'll use the FlickrRss feed in this example. .

SAX Parser

Before we start, we need to create our utility classes to download and manipulate the XML remote file. To do that we will instantiate the Sax Parser in a FlickParser object.

XMLReader xmlReader = SAXParserFactory.newInstance().newSAXParser().getXMLReader();
FlickrHandler fHandler = new FlickrHandler();
xmlReader.setContentHandler(fHandler);
xmlReader.parse(new InputSource(is));
items = fHandler.getItems();

Here we use another custom object called FlickHandler. FlickHandler handles the start element, end element and data characters as described below:

public void startElement(String uri, String localName, String qName,Attributes attributes)
 
public void endElement(String uri, String localName, String qName)
 
public void characters(char[] ch, int start, int length)

Picasso Library

The Picasso library is a very useful and versatile tool for managing images from local storage or remote resources.

Picasso asynchronously and transparently downloads, resizes, and assigns images to the ImageView component, which handles the display side UI.

To use the Picasso library we need to add it to the project. This is easy to do with Android Studio:

First, click on Project Structure

Project Structure

Then choose Modules > Dependency, click on the green plus sign, and search the Picasso library.

Choose dependency

Once you've done this, you can use the Picasso library in your code.

When you parse the XML, you

  1. populate a collection of custom Entry objects
  2. define an adapter that extends an ArrayList of your custom object, the Entry
  3. populate each item in the ListView with the relevant information from the XML entry

This is illustrated by the following code.

@Override
public View getView(int position, View convertView, ViewGroup parent){
Entry item = getItem(position);
EntryHolder holder;
if (convertView == null) {
convertView = inflater.inflate(resource, parent, false);
holder = new EntryHolder();
holder.titleView = (TextView) convertView.findViewById(R.id.title);
holder.authorView = (TextView) convertView.findViewById(R.id.author);
holder.imageView = (ImageView) convertView.findViewById(R.id.imageView);
convertView.setTag(holder);
} else {
holder = (EntryHolder) convertView.getTag();
}
holder.titleView.setText(item.title);
holder.authorView.setText(item.author);
Picasso.with(getContext()).load(item.link).centerCrop().resize(80,80).into(holder.imageView);
holder.authorView.setText(item.author);
return convertView;
}

As you can see, the text components of the RSS feed are managed with the TextView element, and the imageView is handled with Picasso. In particular, note that Picasso transparently handles loading (.load(item.link)), cropping centerCrop()), and resizing .resize(80,80)the image, and finally assigning it to the ImageView object (.into(holder.imageView)). That's all very simple and transparent for the developer!

Summary

In this simple example we learned how to use the SAX parser and the Picasso library to create an RSS feed of images. The complete code used in the example is attached.

Application Sample

Version Hint

Windows Phone: [[Category:Windows Phone]]
[[Category:Windows Phone 7.5]]
[[Category:Windows Phone 8]]

Nokia Asha: [[Category:Nokia Asha]]
[[Category:Nokia Asha Platform 1.0]]

Series 40: [[Category:Series 40]]
[[Category:Series 40 1st Edition]] [[Category:Series 40 2nd Edition]]
[[Category:Series 40 3rd Edition (initial release)]] [[Category:Series 40 3rd Edition FP1]] [[Category:Series 40 3rd Edition FP2]]
[[Category:Series 40 5th Edition (initial release)]] [[Category:Series 40 5th Edition FP1]]
[[Category:Series 40 6th Edition (initial release)]] [[Category:Series 40 6th Edition FP1]] [[Category:Series 40 Developer Platform 1.0]] [[Category:Series 40 Developer Platform 1.1]] [[Category:Series 40 Developer Platform 2.0]]

Symbian: [[Category:Symbian]]
[[Category:S60 1st Edition]] [[Category:S60 2nd Edition (initial release)]] [[Category:S60 2nd Edition FP1]] [[Category:S60 2nd Edition FP2]] [[Category:S60 2nd Edition FP3]]
[[Category:S60 3rd Edition (initial release)]] [[Category:S60 3rd Edition FP1]] [[Category:S60 3rd Edition FP2]]
[[Category:S60 5th Edition]]
[[Category:Symbian^3]] [[Category:Symbian Anna]] [[Category:Nokia Belle]]

464 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×