Asial Blog

OnsenUI: How to Create Flickr Public Photos App in 5min

Category :
Frontend(HTML5)
Tags :
onsenui
angularjs
flickr
Animation
HTML5

In this blog, I will walk through how to make an App that fetch photos from Flickr public photos api using Onsen UI. Plus how to use Button's spinner animation to make the App looks alive.




We will create the app below. Feel free to play with it.




1. Create the project from an Onsen minimum template



1. Go to Dashboard and click New Project






2. Choose Onsen UI Minimum Template





Name the project Flickr, and launch the IDE.



The template provides a navigator that manages two pages--page1.html and page2.html.






2. Write some codes



1. Delete page2.html


Since our app is a one page application, we do not need page2.html.
Right-click on page2.html and choose Delete.



2. Change navigator toolbar's title


Double click home_navigator.html and change title="Page 1" to title="Flickr"






3. Create a Controller for managing the feeds


Create a file called flickr.js in www folder.



  1. function FlickrController ($scope) {
  2.  
  3.     $scope.fetchPhotos = function(){
  4.         $scope.failed = false;        
  5.         $scope.isFetching = true;
  6.  
  7.         $.ajax({
  8.             url: "http://api.flickr.com/services/feeds/photos_public.gne?format=json",
  9.             dataType: "jsonp",
  10.             jsonpCallback: 'jsonFlickrFeed',            
  11.             success: function(feeds){
  12.                 $scope.$apply(function(){
  13.                     $scope.feeds = feeds;
  14.                     $scope.isFetching = false;
  15.                     $scope.failed = false;
  16.                 });
  17.             },
  18.             error: function(error){
  19.                 $scope.$apply(function(){
  20.                     $scope.failed = true;                                   
  21.                     $scope.isFetching = false;    
  22.                 });
  23.             }
  24.         });
  25.     };
  26. }


3. Linking flickr.js with index.html


Add this line to index.html



  1. <script src="flickr.js"></script>





4. Modify page1.html to display the feeds in FlickrController


Open page1.html and replace the centent with the following codes:



  1. <div ng-controller="FlickrController">
  2.     <ons-list>
  3.         <ons-list-item class="center">                          
  4.                 <ons-button type="cta" should-spin="{{isFetching}}" ng-click="fetchPhotos()">Fetch Photos</ons-button>
  5.         </ons-list-item>
  6.  
  7.         <ons-list-item ng-animate="'zoom'" ng-show="failed">
  8.             Oops! looks like Flickr is down.
  9.         </ons-list-item>
  10.  
  11.         <ons-list-item ng-repeat="item in feeds.items">
  12.             <img width="100%" ng-src="{{item.media.m}}">
  13.         </ons-list-item>
  14.     </ons-list>
  15. </div>

5. How FlickrController and page1.html are connected


Onsen UI uses AngularJs under the hood. In AngularJs, we can link a controller to an element using ng-controller. The controller can provide data to DOM via scope as illustrated in the figure below:





1 We declare a controller called FlickrController by defining a function with $scope injected. We can then use the $scope to provide data to the DOM. We link the DOM to the controller via ng-controller


2 When the button is click, we tell Angular to call fetchPhotos() function of the scope.


3 We want the button to display a spinner when we are busy fetching photos from Flickr.


4 feeds.items is an array fetched from Flickr api. We use ng-repeat to display all items in that array.


5 Using ng-show we can show error message when the api call fails.



3. Wrap UP



  • Onsen UI makes it easy to write rich UI application with cool animation.

  • Using ng-controller, we can easily provide data to the DOM.



4. Complete source code


index.html



  1. <!doctype html>
  2. <html lang="en" ng-app="myApp">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6.   <link rel="stylesheet" href="plugins/plugin-loader.css">     
  7.   <script type="text/javascript" src="plugins/plugin-loader.js"></script>
  8.  
  9.   <script src="flickr.js"></script>
  10.  
  11.   <script>
  12.     angular.module('myApp', ['onsen.directives']);
  13.  
  14.     document.addEventListener("deviceready", onDeviceReady, false);
  15.  
  16.     function onDeviceReady() {
  17.         // Now safe to use the Cordova API
  18.     }
  19.   </script>    
  20. </head>
  21.  
  22. <body>
  23.  
  24.   <ons-screen page="home_navigator.html"></ons-screen>
  25.  
  26. </body>
  27. </html>


home_navigator.html


  1. <ons-navigator title="Flickr" page="page1.html"></ons-navigator>

flickr.js


  1. function FlickrController ($scope) {
  2.  
  3.     $scope.fetchPhotos = function(){
  4.         $scope.failed = false;        
  5.         $scope.isFetching = true;
  6.  
  7.         $.ajax({
  8.             url: "http://api.flickr.com/services/feeds/photos_public.gne?format=json",
  9.             dataType: "jsonp",
  10.             jsonpCallback: 'jsonFlickrFeed',            
  11.             success: function(feeds){
  12.                 $scope.$apply(function(){
  13.                     $scope.feeds = feeds;
  14.                     $scope.isFetching = false;
  15.                     $scope.failed = false;
  16.                 });
  17.             },
  18.             error: function(error){
  19.                 $scope.$apply(function(){
  20.                     $scope.failed = true;                                   
  21.                     $scope.isFetching = false;    
  22.                 });
  23.             }
  24.         });
  25.     };
  26. }

page1.html



  1. <div ng-controller="FlickrController">
  2.     <ons-list>
  3.         <ons-list-item class="center">                          
  4.                 <ons-button type="cta" should-spin="{{isFetching}}" ng-click="fetchPhotos()">Fetch Photos</ons-button>
  5.         </ons-list-item>
  6.  
  7.         <ons-list-item ng-animate="'zoom'" ng-show="failed">
  8.             Oops! looks like Flickr is down.
  9.         </ons-list-item>
  10.  
  11.         <ons-list-item ng-repeat="item in feeds.items">
  12.             <img width="100%" ng-src="{{item.media.m}}">
  13.         </ons-list-item>
  14.  
  15.     </ons-list>
  16.  
  17. </div>

Comments

  • Jim Johnson

    General question:

    How do you change the sliding menu direction and from left to right, to right to left? I can move the
    icon to the right side of page, but it open from left to right.

    Thanks

  • Kruy

    @Jim: Current sliding menu only support left to right direction. You need to change the source code. Here is the reference: https://github.com/OnsenUI/OnsenUI/blob/master/framework/directives/sliding_menu.js

    @Rajesh: you need to set infinit-scroll="true"

    <ons-scroller infinit-scroll-enable="true" on-scrolled="fetch()">

  • Gi

    I just tried this using Monaca and got this error:

    ReferenceError: $ is not defined
    http://pastebin.com/raw.php?i=BA5JTJNa

    Can you guys test this again? Because the app shown as working doesn't have the same code.

  • Gi

    Ah, it even crashes the Monaca Debugger sometimes.

  • Yahia

    For who got

    ReferenceError: $ is not defined

    you need to add jQuery Library to index.html

    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

  • Big Egg

    How can I use $http to load data?
    Something as

    var response = $http.get("https://api.flickr.com/services/feeds/photos_public.gne?format=json");//$http.jsonp
    response.success(function(feeds, status, headers, config) {
    console.log(feeds);
    $scope.$apply(function(){
    $scope.feeds = feeds;
    $scope.isFetching = false;
    $scope.failed = false;
    });
    });
    response.error(function(error, status, headers, config) {
    $scope.$apply(function(){
    $scope.failed = true;
    $scope.isFetching = false;
    });
    });

  • Cartier love bracelet unisex white gold

    How did this guy forget about us gray hats?
    [url=http://cartierlovebraceletunisexstainlesss.blogspot.com/]Cartier love bracelet unisex white gold[/url]

Comment form



captcha_key

Company information

Asial Corporation is a software engineering company located in Tokyo, Japan specializing in PHP, HTML5, and JavaScript programming.
We are able to offer a full range of professional services from user-interface design through to high-performance web system solutions.
Check out our company details here (Japanese only).

More company information

Recent posts