RSS Feeds from Wordpress

[Chris_M_3]

I have been working on my first app, it has been a struggle for me but I am ending up with something pretty decent. One thing I am really trying to wrap my head around is creating an rss feed for a single wordpress site. I see the tutorial on the data bindings but it is not helping with me with getting a nice wordpress feed into the app. Can anyone point me in a good direction?

[Rakshith_K_Intel]

Here is documentation for using data-binding and web services:

https://software.intel.com/en-us/xdk/docs/using-web-services

In your case, open Web Services from the left panel in Develop tab, select "API Explorer Sandbox" - "GET" and enter your RSS feed URL, and click the "Try It" button, it will load the RSS feed response, follow the documentation above to do the data-binding into your UI.

[Chris_M_3]

Thanks for that. So I can get the title into the list now, and the date, how do I make it so it opens the blog post in the InAppBrowser when I click on it?

I am working in Framework7 and I know they have a plugin for RSS feeds. Is this something I can add into the XDK easier?

[Rakshith_K_Intel]

you can add an onclick attribute to the list item or add a click event handler, and run this code to open InAppBrowser:

window.open(url, '_blank', 'location=yes');

[Chris_M_3]

Ok, this may be a dumb thing to ask. But where do I add the onclick? The code to open the InAppBrowser has to be in the .js page right? You cant select a click event in the XDK for the item, so I guess I add it manualy? This is the item I want them to be able to click, then open the block post they want in the InAppBrowser

          <div class="widget uib_w_1 d-margins" data-uib="framework7/list_block" data-ver="0">
                <div class="list-block">
                  <ul ng-controller="angular_controllers.uib_w_5.controller">
                    <li class="media-item widget uib_w_5 d-margins" data-uib="framework7/media_item" data-ver="0" data-sm="rsstestapiexplorer" data-sc="multiple" data-rpath=".rss.channel.item[]" ng-repeat="entry in entries" ng-click="select_entry($event, entry)" data-adidx="{{$index}}">
                      <div class="item-content">
                        <div class="item-media">
                          <img height="80">
                        </div>
                        <div class="item-inner">
                          <div class="item-title-row">
                            <div class="item-title">{{entry.title}}</div>
                            <div class="item-after"></div>
                          </div>
                          <div class="item-subtitle">Posted On</div>
                          <div class="item-text">{{entry.pubDate}}</div>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>

Also, the entry date comes out like with the time behind it, how can I narrow it down to just the month and day?

[Chris_M_3]

Also one more things. I cant fine a selector for the Featured Image of the wordpress post. Is there any way to add that? I added a plugin to the site that adds it to the feed. http://jasonhewlett.com/feed/

[Chris_P_Intel]

>> But where do I add the onclick?

Hmmm. The Ionic list items should be showing in the Interactivity pane.  But they are absent. I'll make sure that gets updated.

Do the following to add the onclick to your listitems.  

1. Note it's 'uib', which is a class name.  I see in your code above, the media_item has a uib of  "uib_w_5".
2. If you haven't done so already, add a button to your page (you can throw it away later).  Go to the Interactivity pane and set a "Custom Script" on that button, then choose "Edit Custom Script".

When the index_init_scripts.js file opens you'll see the handler for your button. The register_event_handler probably looks like this:

 function register_event_handlers()
 {
    
    /* button  Button */
    $(document).on("click", ".uib_w_6", function(evt)
    {
        /* your code goes here */ 
    });
 }

So, now we are going to add another handler for your media item. It'll look like this:

 function register_event_handlers()
 {
    
    /* button  Button */
    $(document).on("click", ".uib_w_6", function(evt)
    {
        /* your code goes here */ 
    });
    
     /* mediaitem  */
    $(document).on("click", ".uib_w_5", function(evt)
    {
        /* your code goes here */ 
    });
    
 }

So that's the handler for any of those media items. Now, you probably want the "entry".  You can get it from the data_support.entry_from_$this routine.  I'll show it:

 function register_event_handlers()
 {
    
    /* button  Button */
    $(document).on("click", ".uib_w_6", function(evt)
    {
        /* your code goes here */ 
    });
    
     /* mediaitem   */
    $(document).on("click", ".uib_w_5", function(evt)
    {
        var entry = data_support.entry_from_$this($(this));      //entry: {title: pubDate:}
    });
    
 }

The entry is the individual entry returned from the Ajax request. It has all the fields you saw in the services explorer (not just the ones you put checkboxes next to).  I see in your code entry.title and entry.pubDate.  So those are there. But there are others as well.  

Hope this helps,

Chris

[Chris_M_3]

I am using Framework7, not sure if that makes a difference?

[Chris_P_Intel]

Everything above applies regardless.

If the framework 7 media items are listed in the Interactivity pane, then you can add a Custom Script directly to the item, and that'll make things slightly easier. But, honestly, it's only saving you a lookup of a uib class name.

[Campanero]

THAKN YOU!!!

:D

Rakshith Krishnappa (Intel) wrote:

Here is documentation for using data-binding and web services:

https://software.intel.com/en-us/xdk/docs/using-web-services

In your case, open Web Services from the left panel in Develop tab, select "API Explorer Sandbox" - "GET" and enter your RSS feed URL, and click the "Try It" button, it will load the RSS feed response, follow the documentation above to do the data-binding into your UI.