Membuat RSS Reader untuk Windows Phone 8 App

Hallo reader! Lama kita tidak bersua. Maaf, kebentur ujian dan bikin aplikasi *ngeles Smile with tongue out
Disini saya akan menjelaskan ke readers semua cara membuat RSS Reader untuk aplikasi Windows Phone 8. RSS sendiri merupakan file berformat XML untuk sindikasi yang telah digunakan (di antaranya dan kebanyakan) situs web berita dan web blog (Wikipedia). Disini saya akan mencoba mengambil data di dalam RSS yang kemudian dipangkas menjadi sebuah informasi, bukan lagi dalam bentuk XML. Sedikit info, aplikasi yang saya buat ini akan menampilkan tips kesehatan yang  diambil dari rss feed-nya Health.com

Ada 4 komponen yang harus kita perhatikan untuk membuat RSS reader ini yaitu:

  1. Menambahkan references ke Syndication DLL
  2. Membuat RSS Text Trimmer
  3. Membuat kode di file XAML
  4. Membuat kode di file xaml.cs

Kita bahas satu persatu ya readers

Menambahkan references ke Syndication DLL

Tujuan kita menambahkan Syndication DLL ini adalah agar kita bisa menggunakan kelas SyndicationFeed yang akan gunakan untuk meload rss feed. Berikut ini adalah langkah-langkahnya. Check this out!

  • Pada menu Project, pilih Add References, lalu pilih Browse tab

image

  • Cari folder “Program Files (x86) lalu navigasikan ke Microsoft SDKs/Silverlight/v4.0/Libraries/Client/
  • Pilih System.ServiceModel.Syndication.dll, dan terakhir klik OK.

image

 

Membuat RSS Text Trimmer

RSS Trimmer berfungsi memangkas feed pada RSS yang tidak diperlukan, seperti HTML tags dan newline characters. Sedangkan, dalam RSS Text Trimmer, kita akan memangkas feed pada RSS sehingga menjadi bentuk teks utuh. Langkah-langkah membuat RSS Text Trimmer seperti ini nih readers:

  1. klik kanan di nama project, lalu pilih Add dan klik New Item.
  2. Pada Installed Templates Pane, pilih Visual C# dan pada panel tengah pilih class.
  3. image
  4. Beri nama RssTextTrimmer.cs dan pilih Add.
  5. Di solution explorer, double-clikc RssTextTrimmer.cs dan ketikkan kode berikut ini

using System;
using System.Net;
using System.Windows.Data;
using System.Globalization;
using System.Text.RegularExpressions;

namespace Health_Calc
{
    public class RssTextTrimmer : IValueConverter
    {
        // Clean up text fields from each SyndicationItem.
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value == null) return null;

            int maxLength = 200;
            int strLength = 0;
            string fixedString = “”;

            
            fixedString = Regex.Replace(value.ToString(), “<[^>]+>”, string.Empty);

            // Remove newline characters
            fixedString = fixedString.Replace(“\r”, “”).Replace(“\n”, “”);

            // Remove encoded HTML characters
            fixedString = HttpUtility.HtmlDecode(fixedString);

            strLength = fixedString.ToString().Length;

           
            if (strLength == 0)
            {
                return null;
            }

            // Truncate the text if it is too long.
            else if (strLength >= maxLength)
            {
                fixedString = fixedString.Substring(0, maxLength);

                fixedString = fixedString.Substring(0, fixedString.LastIndexOf(” “));
            }

            fixedString += “…”;

            return fixedString;
        }

        // This code sample does not use TwoWay binding and thus, we do not need to flesh out ConvertBack. 
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

 

6.   Mengeset RssTextTrimmer class menjadi converter dengan cara double-click App.xaml dan menambahkan kode dibawah ini ke dalam tag  <Application.Resources> :

<converter:RssTextTrimmer xmlns:converter=”clr-namespace:Health_Calc” x:Key=”RssTextTrimmer” />

Membuat Kode XAML

Double-click halaman xaml yang akan kita jadikan interface aplikasi kita lalu ketikkan kode dibawah ini

<Grid Margin=”0,-20,0,0″>
                    <Button Content=”Load Tips” Height=”72″ HorizontalAlignment=”Left” Margin=”9,18,0,0″ Name=”loadFeedButton1″ VerticalAlignment=”Top” Width=”273″  Click=”loadFeedButton1_Click” Background=”#FFFF0D0D” />

                    <ListBox Name=”feedListBox1″ Height=”495″ HorizontalAlignment=”Left” Margin=”-2,95,0,0″ VerticalAlignment=”Top” Width=”456″ ScrollViewer.VerticalScrollBarVisibility=”Auto” SelectionChanged=”feedListBox1_SelectionChanged” >
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel VerticalAlignment=”Top”>
                                    <TextBlock TextDecorations=”Underline” FontSize=”24″ Name=”feedTitle” TextWrapping=”Wrap” Margin=”12,0,0,0″ HorizontalAlignment=”Left” Foreground=”{StaticResource PhoneAccentBrush}” Text=”{Binding Title.Text, Converter={StaticResource RssTextTrimmer}}” />
                                    <TextBlock Name=”feedSummary” TextWrapping=”Wrap” Margin=”12,0,0,0″ Text=”{Binding Summary.Text, Converter={StaticResource RssTextTrimmer}}” />
                                    <TextBlock Name=”feedPubDate” Foreground=”{StaticResource PhoneSubtleBrush}” Margin=”12,0,0,10″ Text=”{Binding PublishDate.DateTime}” />
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                    <Border BorderBrush=”{StaticResource PhoneAccentBrush}” BorderThickness=”1″ Height=”2″ HorizontalAlignment=”Left” Margin=”20,88,0,0″ Name=”border1″ VerticalAlignment=”Top” Width=”438″ />
                </Grid>

Membuat Kode di xaml.cs

Pertama-tama buka file xaml.cs kita, lalu ketikkan kode berikut ini (penjelasan program saya sertakan di dalam komen di tiap-tiap kode)

using System;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using Microsoft.Phone.Controls;
using System.IO;
using System.ServiceModel.Syndication;
using System.Xml;
using Microsoft.Phone.Tasks;
using System.Windows.Navigation;

namespace Health_Calc
{
    public partial class healthtips : PhoneApplicationPage
    {
        public healthtips()
        {
            InitializeComponent();
           
        }
        private void loadFeedButton1_Click(object sender, System.Windows.RoutedEventArgs e)
        {
           
            WebClient webClient = new WebClient();

            webClient.DownloadStringCompleted += new DownloadStringCompletedEventHandler(webClient_DownloadStringCompleted);

            webClient.DownloadStringAsync(new System.Uri(“http://www.health.com/health/diet-fitness/feed”));
        }

              
      
        private void webClient_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
        {
            if (e.Error != null)
            {
                Deployment.Current.Dispatcher.BeginInvoke(() =>
                {
                   
                    MessageBox.Show(e.Error.Message);
                });
            }
            else
            {
                // Save the feed into the State property in case the application is tombstoned.
                this.State[“feed”] = e.Result;
               

                UpdateFeedList(e.Result);
            }
        }

        // This method determines whether the user has navigated to the application after the application was tombstoned.
        protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
        {
            // First, check whether the feed is already saved in the page state.
            if (this.State.ContainsKey(“feed”))
            {
               
                if (feedListBox1.Items.Count == 0)
                {
                    UpdateFeedList(State[“feed”] as string);
                }
               
            }
        }
       
       
        private void UpdateFeedList(string feedXML)
        {
            // Load the feed into a SyndicationFeed instance
            StringReader stringReader = new StringReader(feedXML);
            XmlReader xmlReader = XmlReader.Create(stringReader);
            SyndicationFeed feed = SyndicationFeed.Load(xmlReader);
           

            Deployment.Current.Dispatcher.BeginInvoke(() =>
            {
                // Bind the list of SyndicationItems to our ListBox
                feedListBox1.ItemsSource = feed.Items;

                loadFeedButton1.Content = “Refresh Tips”;
               
            });

        }

        // The SelectionChanged handler for the feed items
        private void feedListBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            ListBox listBox = sender as ListBox;

            if (listBox != null && listBox.SelectedItem != null)
            {
               
                SyndicationItem sItem = (SyndicationItem)listBox.SelectedItem;

               
                if (sItem.Links.Count > 0)
                {
                    // Get the associated URI of the feed item.
                    Uri uri = sItem.Links.FirstOrDefault().Uri;

                    WebBrowserTask webBrowserTask = new WebBrowserTask();
                    webBrowserTask.Uri = uri;
                    webBrowserTask.Show();
                }
            }
        }

       
        private void klikbar(object sender, EventArgs e)
        {
            NavigationService.Navigate(new Uri(“/about.xaml”, UriKind.Relative));
        }

 
        }
}

Yup! Itu tadi tutorial singkat gimana cara bikin RSS reader untuk windows phone 8. Semoga bisa membantu readers semua Smile

 

Sumber :

http://msdn.microsoft.com/en-us/library/windowsphone/develop/hh487167(v=vs.105).aspx

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s