CHAPTER 21 - Create "Wanted Pirates Poster" App by Linking to Picasa

This chapter will show you how to create the One Piece (海賊王) "Wanted Pirates Poster (海賊懸賞單)". EZoApp's RSS component is really easy to use. As long as the server end provides RSS service, it can directly link the data together. (However, it is better to use JSON, although JSON and XML require a bit more work while developing the app due to the cross-domain issue. Nevertheless, once the app is created and run on cellphones, there will be no cross-domain issue. So, do not worry!)

Completed example: http://jqmdesigner.appspot.com/designer.html#&ref=5688465010196480

The process is very simple. First, put your pictures in a Picasa photo album; then use the RSS component method we introduced earlier (use part of its code) to link to the album; lastly, put the pictures in the EZoApp's imggallery component. That's it. (There are many different ways to create this. But since we are focused on introducing EZoApp, we will use EZoApp's component.)

Before we begin, let us first drag-and-drop the imggallery component onto the screen. We can see that it is a section of code that consumes JSON. However, the code is dead, and it cannot add new contents. Thus, we will link to Google Picasa's RSS and automatically generate the URLs of the pictures.

Before linking to Picasa, let us take a look at it first. Because Google integrated Picasa and Google+ in recent years, all traffic going to Picasa is re-directed to Google+. However, it is actually quite easy to change it back. For example, if your Google+ photo album's URL is "https://plus.google.com/u/0/photos/a series of numbers", just change it to "https://picasaweb.google.com/a series of numbers?noredirect=1", then you can link to your photo album. Remember to set the album's access permission to "Only users who have the link." Now, you can link to pictures in this album.

You can see the RSS option on the right. Click it and you will see the RSS contents. Let us copy this URL first.

Once we have the RSS, we can start to write the code. First, modify the HTML of the imggallery component to rotate some of the pictures originally displayed in landscape view to portrait view; then, add an a link to each of the pictures. This will link to a page with a full-size picture and its description.

<div id="home" data-role="page">
  <div data-role="header" data-position="fixed" data-theme="b">
    <h3>海賊懸賞單</h3>
  </div>
  <div role="main" class="ui-content">
    <div id="ccc" is="imggallery" style="background-color:#fafafa;width:100%;margin:0 auto;">
      <div style="width:80px; height:120px; overflow:hidden; border:3px solid #ccc; display:inline-block;margin:1px;">
        <a href="#imgpage" data-transition="slide">
          <img data-src="{{data-src}}" style="width:100%; height:100%;">
        </a>
      </div>
    </div>
  </div>
</div>

The above is the code for the home page. Next, add a new imgpage page. This is the page where the full-size picture will be shown when a thumbnail on the home page is clicked. The page's HTML is shown below:

<div id="imgpage" data-role="page" is="page">
  <div data-role="header" data-position="fixed" data-theme="b">
    <h3>懸賞單</h3>
    <a class="ui-btn ui-btn-left ui-icon-back ui-btn-icon-notext ui-corner-all" data-rel="back">Button</a>
  </div>
  <div role="main" class="ui-content" is="content"></div>
</div>

After the HTML is ready, we will start to write the JS. First, let us combine the RSS component and the imggallery component, and use Google feed to receive the RSS. Note: you must add max-results=500 in the RSS (500 is the max number of pictures to display; without this setting it might only display the default value of 20 pictures); add num=500 in the Google feed as well.

In addition, we will add an imggallery function to save the description and URL of every picture in the RSS in a matrix to facilitate later use. Also, create two global variables to pass information from home to imgpage.

var imgarc, name;
$(document).on("gkComponentsReady", function (w) {
  var $ele = $("#ccc"),
    a, content,
    img = [],
    rss = 'https://picasaweb.google.com/data/feed/base/user/106084724785448071914/albumid/6072114366225515377?alt=rss&kind=photo&authkey=Gv1sRgCLOj4pDWlNap4AE&hl=zh_TW&max-results=500 ',
    url = 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=500&callback=?&q=' + encodeURIComponent(rss);
  $.ajax({
    type: "GET",
    url: url,
    dataType: "json",
    error: function (e) {
      console.log('oh no');
    },
    success: function (e) {
      a = $(e);
      num = a[0].responseData.feed.entries.length;  // 圖片總數
      content = a[0].responseData.feed.entries[0].mediaGroups[0].contents[0].url;  // 圖片網址
      name = a[0].responseData.feed.entries[0].mediaGroups[0].contents[0].description;  // 圖片描述
      console.log(a);
      console.log(num);
      console.log(content);
      console.log(name);
      imggallery(num);
      $('.name').text(name);
    }
  });

  function imggallery(num) {
    for (var i = 0; i < num; i++) {
      img.push({  // 寫入陣列
        "data-src": a[0].responseData.feed.entries[i].mediaGroups[0].contents[0].url,
        "name": a[0].responseData.feed.entries[i].mediaGroups[0].contents[0].description
      });
    }
    if (img.length >= num) {
      console.log(img);
      $ele.gk("model", img);
    }
    $ele.find('a').on('click', function () {
      var aIndex = $(this).parent('div').index();
      imgsrc = $(this).find('img').attr('src');
      name = img[aIndex].name;
      console.log(name);
      console.log(imgsrc);
    });
  }
});

Let me give an additional explanation for the long line "a[0].responseData.feed.entries[0].mediaGroups[0].contents[0].url" that we saw in the code above. Because Picasa album's RSS is composed of objects and arrays, we need to dig in level by level to get to the content. That's why we need to write many concole.logs to look at the detailed information.

Finally, add the program code for imgpage. It simply executes a pageshow event. Similarly, add another pageshow event in home, which clears the imgpage when switching back to home.

(function () {
  $(document).on('pageshow', '#imgpage', function () {
    $('#imgpage .ui-content').html('<img src="' + imgsrc + '" style="width:100%;"/>');
    $('#imgpage h3').text(name);
  });
})();
(function () {
  $(document).on('pageshow', '#home', function () {
    $('#imgpage .ui-content').find('img').remove();
    $('#imgpage h3').text('');
  });
})();

That's it. We have completed the app that creates an album from Picasa automatically, with detailed descriptions displayed on the page along with the picture. Completed example: http://jqmdesigner.appspot.com/designer.html#&ref=5688465010196480

Continue reading CHAPTER 22 - Create Latest Pictures App by Linking to Flickr
Or Return to Table of Contents