CHAPTER 19 - Create News Apps by Linking to Apple Daily RSS

Earlier, in order to link to Yahoo Weather, we used part of the code from EZoApp’s RSS component. Here, we will show you how to create an Apple Daily news app by using EZoApp’s RSS component and linking to Apple Daily’s RSS. (Completed example: http://jqmdesigner.appspot.com/designer.html#&ref=5746677923184640)

Step 1 is not dragging-and-dropping a component or writing code, but rather finding the Apple Daily’s RSS service (http://www.appledaily.com.tw/rss). Usually, news websites will provide RSS service, as do many blog sites. If you learn the trick here, it would be easy to create a RSS reader for your own blog. After we find Apple Daily’s RSS page, we can see that it provides RSS for different types of news; basically, they contain the latest news and excerpts.

Clicking to enter any one "latest" news RSS, you can see that its contents are a bunch of code; this is also what we will use in this chapter. (http://www.appledaily.com.tw/rss/newcreate/kind/rnews/type/new)

After we see the source of our contents, we will begin using the RSS component. Let us try to find out first if we can link it! Drag-and-drop a RSS component onto the screen, then set the value of service in the property panel to the URL of the latest news RSS site:

Clicking Preview, you should see that the linking is successful, and you don’t even need to worry about cross-domain like linking with JSON. (Example: http://jqmdesigner.appspot.com/designer.html#&ref=6598162437373952)

Let us find out what the RSS we took in looks like. Add a console.log in success so we can look at it.

success: function (data) {
  if (data.responseData.feed && data.responseData.feed.entries) {
    var models = data.responseData.feed.entries;
    console.log(models);
    $listview.gk('model', models);
    $listview.css('visibility', 'visible');
  }
}

We can see that all the "{{ }}" in the RSS component have corresponding names. Thus, we didn’t need to change the JS code (the change we made above is only for adding the console); we just needed to modify the property panel and the "{{ }}" in the HTML. (If you need a refresher, go back to read Chapter 15 - Linking JSON.)

So, we will make some slight changes to the code now. The desired functions mainly are, "on the left there is a slide panel where users can select a news category. Clicking the news category will bring up the excerpts of the news, and clicking one of the excerpts will bring up another page showing the news." Thus, we will add a slide panel on the screen first. If you forgot how to do this, you can go back to read "Hidden Components/Slide panel". At the same time, we will make some changes to the "{{ }}" above, because we only need date, link, and title. Next, modify the HTML so it looks like the code below: (Preview: http://jqmdesigner.appspot.com/designer.html#&ref=4768575088754688)

<div id="home" data-role="page">
  <div data-role="header" data-position="fixed" data-theme="b">
    <h3>最新新聞</h3>
    <a href="#left-menu" class="ui-btn ui-btn-left ui-icon-bullets ui-btn-icon-notext ui-corner-all">Button</a>
  </div>
  <div role="main" class="ui-content">
    <div id="gk-1019hUt6" is="rss-news" service="http://www.appledaily.com.tw/rss/newcreate/kind/rnews/type/new" rownum="10">
      <ul data-role="listview" data-autodividers="true" data-inset="true" is="json-listview">
        <li divider="{{publishedDate}}" is="listview-li">
          <span style="color:#000;font-size:14px;white-space: normal;">{{title}}</span>
        </li>
      </ul>
    </div>
  </div>
    <div id="left-menu" data-role="panel" data-position="left" data-theme="b">
    <a class="ui-btn" data-theme="b">最新</a>
    <a class="ui-btn" data-theme="b">正妹</a>
    <a class="ui-btn" data-theme="b">體育</a>
    <a class="ui-btn" data-theme="b">娛樂</a>
    <a class="ui-btn" data-theme="b">生活</a>
    <a class="ui-btn" data-theme="b">國際</a>
    <a class="ui-btn" data-theme="b">社會</a>
    <a class="ui-btn" data-theme="b">財經</a>
    </div>
</div>

Then, add data-rel="close" in the button to close the menu when clicking the button. Next, add apple="rss URL"; this will make it easier for us to dynamically push the URL to the RSS component when clicking the button later.

<div id="left-menu" data-role="panel" data-position="left" data-theme="b">
  <a class="ui-btn" data-rel="close" data-theme="b" apple="http://www.appledaily.com.tw/rss/create/kind/rnews/type/new">最新</a>
  <a class="ui-btn" data-rel="close" data-theme="b" apple="http://www.appledaily.com.tw/rss/newcreate/kind/rnews/type/114">正妹</a>
  <a class="ui-btn" data-rel="close" data-theme="b" apple="http://www.appledaily.com.tw/rss/newcreate/kind/rnews/type/107">體育</a>
  <a class="ui-btn" data-rel="close" data-theme="b" apple="http://www.appledaily.com.tw/rss/newcreate/kind/rnews/type/106">娛樂</a>
  <a class="ui-btn" data-rel="close" data-theme="b" apple="http://www.appledaily.com.tw/rss/newcreate/kind/rnews/type/105">生活</a>
  <a class="ui-btn" data-rel="close" data-theme="b" apple="http://www.appledaily.com.tw/rss/newcreate/kind/rnews/type/103">國際</a>
  <a class="ui-btn" data-rel="close" data-theme="b" apple="http://www.appledaily.com.tw/rss/newcreate/kind/rnews/type/102">社會</a>
  <a class="ui-btn" data-rel="close" data-theme="b" apple="http://www.appledaily.com.tw/rss/newcreate/kind/rnews/type/104">財經</a>
</div>

When the above is done, we will begin to modify the JS code. First, wrap the if within a function so we can easily reuse it; then add an on click function at the beginning, so it can change header’s text and dynamically load the RSS URL. (Example: http://jqmdesigner.appspot.com/designer.html#&ref=5077335858479104)

$(document).on("gkComponentsReady", function () {
  var $ele = $("#gk-1019hUt6"),
    FEED_URL = $ele.attr("service"),
    $listview = $("#gk-1019hUt6").find('[data-role="listview"]');
  rowNum = $ele.attr('rowNum');

  $('#left-menu a').on('click', function () {
    var url = $(this).attr('apple');  // 獲取apple內的網址
    var header = $(this).text();
    $('h3').text(header + '新聞');  // 換header文字
    fn_rss(url);
  });

  fn_rss(FEED_URL);

  function fn_rss(e) {
    if (e) {
      $.ajax({
        beforeSend: function () {
          $listview.css('visibility', 'hidden');
        },
        url: 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=' + rowNum + '&callback=?&q=' + encodeURIComponent(e),
        dataType: 'json',
        success: function (data) {
          if (data.responseData.feed && data.responseData.feed.entries) {
            var models = data.responseData.feed.entries;
            $listview.gk('model', models);
            $listview.css('visibility', 'visible');
          }
        }
      });
    }
  }
});

The last step is to read the news after clicking it. Of course, we would want to be able to go back to the previous page after reading the news. In order to do that, we need to add a new detail page.

Then, we will add an iframe in this detail page and display the clicked URL in it.

<div id="detail" 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">
    <iframe id="rsscontent"></iframe>
  </div>
</div>

Because we want to obtain the URL, we will switch back to the home page and modify the HTML a bit by adding a link=.

<div id="gk-1019hUt6" is="rss-news" service="http://www.appledaily.com.tw/rss/newcreate/kind/rnews/type/new" rownum="10">
  <ul data-role="listview" data-autodividers="true" data-inset="true" is="json-listview" id="rsslist">
    <li divider="{{publishedDate}}" is="listview-li">
      <a href="#detail" link="{{link}}">
        <span style="color:#000;font-size:14px;white-space: normal;">{{title}}</span>
      </a>
    </li>
  </ul>
</div>

The last step is to modify the JS code. Here, we will use an additional trick, which is replace. Because the URLs that we used all start with www, if we want the link to point to a mobile version page, we need to replace www with m. Therefore, we will add the additional replace function. Furthermore, we will also add the pageshow code of the detail page.

var newURL;
$(document).on("gkComponentsReady", function () {
  var $ele = $("#gk-1019hUt6"),
    FEED_URL = $ele.attr("service"),
    $listview = $("#gk-1019hUt6").find('[data-role="listview"]');
  rowNum = $ele.attr('rowNum');

  $('#left-menu a').on('click', function () {
    var url = $(this).attr('apple');
    var header = $(this).text();
    $('h3').text(header + '新聞');
    fn_rss(url);
  });

  fn_rss(FEED_URL);

  function fn_rss(e) {
    if (e) {
      $.ajax({
        beforeSend: function () {
          $listview.css('visibility', 'hidden');
        },
        url: 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=' + rowNum + '&callback=?&q=' + encodeURIComponent(e),
        dataType: 'json',
        success: function (data) {
          if (data.responseData.feed && data.responseData.feed.entries) {
            var models = data.responseData.feed.entries;
            $listview.gk('model', models);
            $listview.css('visibility', 'visible');
            $('#rsslist li a').on('click', function () {
              var rssURL = $(this).attr('link');
              newURL = rssURL.replace('http://www','http://m');

            });
          }
        }
      });
    }
  }
});

$(document).on("pageshow", "#detail", function () {
  $('#rsscontent').attr('src', newURL);
});

That’s it. We are done. We just need to add a little bit of CSS for layout to wrap it up! Completed example: http://jqmdesigner.appspot.com/designer.html#&ref=5734245603475456

Continue reading CHAPTER 20 – Create Score Card Apps by Linking to Google Sheets
Or Return to Table of Contents