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
ciccioska (Talk | contribs)
(Ciccioska -)
BuildNokia (Talk | contribs)
(BuildNokia - Edited for clarity, formatted for wiki)
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 do an Rss reader for the public FlickrRss with SAX Parser and show images with Picasso library. }}  
+
{{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. }}  
  
 
{{Note|This is an entry in the [[Nokia X Wiki Challenge 2014Q1]]}}
 
{{Note|This is an entry in the [[Nokia X Wiki Challenge 2014Q1]]}}
Line 9: Line 9:
 
|devices= Nexus 4, Nokia X Emulator<!-- Devices tested against - e.g. Nokia Lumia 928, Nokia Asha 501) -->
 
|devices= Nexus 4, Nokia X Emulator<!-- Devices tested against - e.g. Nokia Lumia 928, Nokia Asha 501) -->
 
|sdk= Android SDK v16<!-- SDK(s) built and tested against (e.g. Windows Phone 8.0 SDK) -->
 
|sdk= Android SDK v16<!-- SDK(s) built and tested against (e.g. Windows Phone 8.0 SDK) -->
|dependencies= [http://square.github.io/picasso/ Picasso Api]<!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->  
+
|dependencies= [http://square.github.io/picasso/ Picasso API]<!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->  
 
|signing=<!-- Special Signing requirements -->
 
|signing=<!-- Special Signing requirements -->
 
|capabilities= INTERNET<!-- Required capabilities for code (e.g. ID_CAP_LOCATION, ID_CAP_NETWORKING) -->
 
|capabilities= INTERNET<!-- Required capabilities for code (e.g. ID_CAP_LOCATION, ID_CAP_NETWORKING) -->
Line 25: Line 25:
  
 
== Introduction ==
 
== Introduction ==
In this example we can see how it is possible to download XML file such as a RSS parse it and display entries into a ListView. The RSS is located [https://api.flickr.com/services/feeds/photos_public.gne here].
+
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 [https://api.flickr.com/services/feeds/photos_public.gne the FlickrRss feed] in this example. .
  
 
===SAX Parser===
 
===SAX Parser===
  
Before we need to create our utility classes to download and manipulate the XML remote file. To do that we need to use an object that we called FlickParser where we instantiate the 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 {{Icode|FlickParser}} object.
 +
 
 
<code java>
 
<code java>
            XMLReader xmlReader = SAXParserFactory.newInstance().newSAXParser().getXMLReader();
+
XMLReader xmlReader = SAXParserFactory.newInstance().newSAXParser().getXMLReader();
            FlickrHandler fHandler = new FlickrHandler();
+
FlickrHandler fHandler = new FlickrHandler();
            xmlReader.setContentHandler(fHandler);
+
xmlReader.setContentHandler(fHandler);
            xmlReader.parse(new InputSource(is));
+
xmlReader.parse(new InputSource(is));
            items = fHandler.getItems();
+
items = fHandler.getItems();
 
</code>
 
</code>
Here as you can see use another custom object called FlickHandler, where we can handle the every start element, end element and data characters as described below:
+
 
 +
Here we use another custom object called {{Icode|FlickHandler}}. {{Icode|FlickHandler}} handles the start element, end element and data characters as described below:
 +
 
 
<code java>
 
<code java>
            public void startElement(String uri, String localName, String qName,Attributes attributes)
+
public void startElement(String uri, String localName, String qName,Attributes attributes)
  
            public void endElement(String uri, String localName, String qName)
+
public void endElement(String uri, String localName, String qName)
  
            public void characters(char[] ch, int start, int length)
+
public void characters(char[] ch, int start, int length)
 
</code>
 
</code>
  
 
===Picasso Library===  
 
===Picasso Library===  
The [http://square.github.io/picasso/ Picasso] library is very useful and versatile tool for the management of images from local storage or remote resources.  
+
The [http://square.github.io/picasso/ Picasso] library is a very useful and versatile tool for managing images from local storage or remote resources.  
  
In fact, thanks to it you can in a totally asynchronous and transparent to the developer, to manage the downloading of an image, resizing and his subsequent assignment to the ImageView component that handles the display side UI. To use the Picasso library we need to add it to the project and with Android Studio is very simple.
+
Picasso asynchronously and transparently downloads, resizes, and assigns images to the ImageView component, which handles the display side UI.  
  
Click on Project Structure  
+
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  
  
 
[[File:file_1.png|center|thumb|350px|Project Structure]]
 
[[File:file_1.png|center|thumb|350px|Project Structure]]
  
than we can choose "Modules > Dependency" and click on green plus and search the Picasso library
+
Then choose ''Modules > Dependency'', click on the green plus sign, and search the Picasso library.
  
 
[[File:file_2.png|center|thumb|350px|Choose dependency]]
 
[[File:file_2.png|center|thumb|350px|Choose dependency]]
  
After that we can use in our code! Infact during the parse of the XML we populate a collection of custom Object called Entry, than defining an Adapter who extends an ArrrayList of the our custom object, the Entry and we can set with each item of the ListView with the entry of the XML as descibed below:
+
Once you've done this, you can use the Picasso library in your code.
 +
 
 +
When you parse the XML, you
 +
# populate a collection of custom {{Icode|Entry}} objects
 +
# define an adapter that extends an {{Icode|ArrayList}} of your custom object, the Entry  
 +
# populate each item in the {{Icode|ListView}} with the relevant information from the XML entry
 +
 
 +
This is illustrated by the following code.
 
<code java>
 
<code java>
 
     @Override
 
     @Override
Line 82: Line 94:
 
     }
 
     }
 
</code>
 
</code>
As you can see there are all the TextView element of the item listview setted as expected, only the ImageView was managed with Picasso. In particular, we have not done anything to indicate that use of the image whose URL is contained in the link, the same image was manipulated at runtime with centerCrop and resize, and finally assigned to the object ImageView. That's all very simple and transparent for the developer!
+
 
 +
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 ({{Icode|.load(item.link)}}), cropping {{Icode|centerCrop()}}), and resizing {{Icode|.resize(80,80)}}the image, and finally assigning it to the {{Icode|ImageView}} object ({{Icode|.into(holder.imageView)}}). That's all very simple and transparent for the developer!
  
 
== Summary ==
 
== Summary ==
In this simple example we have done a quick look to some powerful library such as SAX and Picasso, is attached the complete code in the example.
+
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.
  
 
[[File:Device-2014-04-14-213311.png|center|thumb|240px|Application Sample]]
 
[[File:Device-2014-04-14-213311.png|center|thumb|240px|Application Sample]]
  
 
{{VersionHint}}
 
{{VersionHint}}

Revision as of 21:32, 17 April 2014

This article explains how to create an RSS reader for the public FlickrRss using SAX Parser, and how to show images using 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]]

453 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.

×