×
Namespaces

Variants
Actions
(Difference between revisions)

Flickr Rss reader with SAX, Picasso in Nokia X

From Nokia Developer Wiki
Jump to: navigation, search
ciccioska (Talk | contribs)
(Ciccioska -)
 
ciccioska (Talk | contribs)
(Ciccioska -)
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 do an Rss reader for the public FlickrRss with SAX Parser and show images with 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]]}}
  
''Enter article metadata as described below. Note that this template can be placed anywhere in the article. Do not remove parameters that you do not use''
 
 
{{ArticleMetaData <!-- v1.3 -->
 
{{ArticleMetaData <!-- v1.3 -->
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
+
|sourcecode= [https://github.com/ciccioska/nokia-x-rssexample GitHub]<!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.wgt]]) -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.wgt]]) -->
|devices= <!-- Devices tested against - e.g. Nokia Lumia 928, Nokia Asha 501) -->
+
|devices= Nokia X Emulator<!-- Devices tested against - e.g. Nokia Lumia 928, Nokia Asha 501) -->
 
|sdk= Android SDK v16, Nokia X<!-- SDK(s) built and tested against (e.g. Windows Phone 8.0 SDK) -->
 
|sdk= Android SDK v16, Nokia X<!-- SDK(s) built and tested against (e.g. Windows Phone 8.0 SDK) -->
 
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->  
 
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->  
Line 20: Line 18:
 
|review-by=<!-- After re-review: [[User:username]] -->
 
|review-by=<!-- After re-review: [[User:username]] -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
|update-by= <!-- After significant update: [[User:username]]-->
+
|update-by= [[User:ciccioska]]<!-- After significant update: [[User:username]]-->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 
|creationdate= <!-- Format YYYYMMDD -->
 
|creationdate= <!-- Format YYYYMMDD -->
|author= <!-- Enter link [[User:username]] -->
+
|author= [[User:ciccioska]]<!-- Enter link [[User:username]] -->
 
}}
 
}}
  
Line 33: Line 31:
  
 
Before we need to create our utilities classe 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 need to create our utilities classe 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
 
+
<code java>
 
             XMLReader xmlReader = SAXParserFactory.newInstance().newSAXParser().getXMLReader();
 
             XMLReader xmlReader = SAXParserFactory.newInstance().newSAXParser().getXMLReader();
 
             FlickrHandler fHandler = new FlickrHandler();
 
             FlickrHandler fHandler = new FlickrHandler();
Line 39: Line 37:
 
             xmlReader.parse(new InputSource(is));
 
             xmlReader.parse(new InputSource(is));
 
             items = fHandler.getItems();
 
             items = fHandler.getItems();
 
+
</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 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:
 
+
<code java>
 
             public void startElement(String uri, String localName, String qName,Attributes attributes)
 
             public void startElement(String uri, String localName, String qName,Attributes attributes)
  
Line 47: Line 45:
  
 
             public void characters(char[] ch, int start, int length)
 
             public void characters(char[] ch, int start, int length)
 
+
</code>
 
== Picasso Library ==  
 
== Picasso Library ==  
 
The library picasso is very useful and versatile tool for the management of 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.
 
The library picasso is very useful and versatile tool for the management of 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.
Line 58: Line 56:
  
 
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:
 
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:
 
+
<code java>
 
     @Override
 
     @Override
 
     public View getView(int position, View convertView, ViewGroup parent){
 
     public View getView(int position, View convertView, ViewGroup parent){
Line 79: Line 77:
 
         return convertView;
 
         return convertView;
 
     }
 
     }
 
+
</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 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!
  

Revision as of 19:14, 14 April 2014

This article explains how to do an Rss reader for the public FlickrRss with SAX Parser and show images with 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, Nokia X
Devices(s): Nokia X Emulator
Article
Created: ciccioska (17 Apr 2014)
Updated: ciccioska
Last edited: ciccioska (14 Apr 2014)

Contents

Introduction

In this example we can se how it is possible to download XML file such as a RSS parse it and display entries into a ListView. The RSS is located here.


SAX Parser

Before we need to create our utilities classe 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

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

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:

            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 library picasso is very useful and versatile tool for the management of 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.

Click on Project Structure File 1.png

than we can choose "Modules > Dependency" and click on green plus and search the Picasso library File 2.png

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:

    @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 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!

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.

Remove Category:Draft when the page is complete or near complete


The "platform categories" will be displayed here in preview only - Copy paste relevant categories into text here

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]]


Add categories below using category selector.

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

×