[WindowsPhone] Lecteur de flux : Le détail du post

Bonjour à toutes et à tous,
on se retrouve aujourd'hui pour la quatrième partie de notre lecteur de flux. Et nous allons ajouter le détail de l'article.

Dossier complet

1. [WindowsPhone] Lecteur de flux : Couche Model
2. [WindowsPhone] Lecteur de flux : Couche ViewModel
3. [WindowsPhone] Lecteur de flux : Couche View
4. [WindowsPhone] Lecteur de flux : Le détail du post
5. [WindowsPhone] Lecteur de flux : LiveTiles, Isolated Storage & BackgroundAgent

Model

Donc la première des choses que nous allons faire c'est de rajouter la méthode qui va aller chercher le détails de l'article dans notre couche Model :

        public void LoadBlogPost(string BloggerId)
        {
            var myWebClient = new WebClient();
            myWebClient.DownloadStringCompleted += new DownloadStringCompletedEventHandler(myWebClient_DownloadStringCompleted);
            myWebClient.DownloadStringAsync(new Uri("http://pascalpereznet.blogspot.com/feeds/posts/full/" + BloggerId + "?alt=rss"));
        }

A noter que l'EventHandler lèvera la méthode myWebClient_DownloadStringCompleted que nous avons créé dans la première partie.

ViewModel

Nous créons maitenant le ViewModel associé et reprends les même informations qui le précédent ViewModel à la différence que nous n'avons ici besoin que du premier résultat de l'ObservableCollection que nous renverra notre classe communiquant avec le service.

using SampleRSSReader.Model.POCO;
using SampleRSSReader.Model.Services;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;

namespace SampleRSSReader.ViewModel
{
    public class PostViewModel : ViewModelBase
    {
        private PostItem _myBlogPost = new PostItem();
        public PostItem MyBlogPost
        {
            get
            {
                return _myBlogPost;
            }
            set
            {
                if (_myBlogPost != value)
                {
                    _myBlogPost = value;
                    NotifyPropertyChanged();
                }
            }
        }

        BloggerService Bloggersvc;

        public void OnNavigatedTo(string BloggerId)
        {
            IsBusy = true;
            Bloggersvc = new BloggerService();
            Bloggersvc.LoadAsyncComplete += Bloggersvc_LoadAsyncComplete;
            Bloggersvc.LoadBlogPost(BloggerId);
        }

        void Bloggersvc_LoadAsyncComplete(object sender, EventArgs e)
        {
            Deployment.Current.Dispatcher.BeginInvoke(() =>
            {
                MyBlogPost = Bloggersvc.PostData.FirstOrDefault();
                IsBusy = false;
                TreatmentCompleted();
            });
        }
    }
}

View

Nous allons directement dans notre dossier View pour rajouter une page qui nous allons appeler PostView, et nous retournons sur le MainViewPage.xaml.cs pour modifier le code lors de la sélection de l'article :

        private void LongListSelector_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            var myItem = (PostItem)(sender as LongListSelector).SelectedItem;
            NavigationService.Navigate(new Uri("/View/PostView.xaml?bid=" + myItem.BloggerId, UriKind.Relative));
            //WebBrowserTask myWebBrowser = new WebBrowserTask();
            //myWebBrowser.Uri = new Uri(myItem.Link);
            //myWebBrowser.Show();
        }

Nous naviguons d'une page à une autre en passant en paramètre le BloggerId. Et maintenant on va traiter cela dans le PostView.xaml.cs :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using SampleRSSReader.ViewModel;

namespace SampleRSSReader.View
{
    public partial class PostView : PhoneApplicationPage
    {
        ViewModelLocator _vml;
        public PostView()
        {
            InitializeComponent();
            _vml = new ViewModelLocator();
            DataContext = _vml;
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);
            _vml.PostViewModel.OnNavigatedTo(NavigationContext.QueryString["bid"].ToString());
        }
    }
}

Vous voyez qu'à nouveau nous surchargeons la méthode OnNavigatedTo et nous lançons la récupération des données.

IHM

Maintenant nous allons mettre cela en forme dans l'affichage.

Comme vous pouvez le constater, les titres sont modifiés et bindés, et nous exécutons cela sur notre émulateur. Et là nous nous apercevons que nous n'avons pas la possibilité de naviguer jusqu'à la fin de l'article. Normal, il nous manque un contrôle : le ScrollViewer.
Nous le rajoutons :

Maintenant, lorsque nous exécutons tout cela, nous remarquons deux choses :

1. Toute les balises HTML sont visibles.
2. Malgré le ScrollViewer, on ne voit toujours pas la fin de l'article.(si vous avez pris un article assez long)

Alors pour les balises HTML qui sont encore visibles, je vous propose d'ajouter un converter :
[WindowsPhone] TextPicker

Pour la limite de l'article nous arrivons à une limite mise en place sur les contrôles WP (donc ici notre TextBlock) qui consiste à ne pas excéder 2048 en hauteur et largeur. Pour contourner cela, il faudra découper notre texte en plusieurs parties ce qui s'effectuera naturellement lorsque nous chercherons à mettre en forme notre texte. Sujet qui sera traité à part.

Conclusion

Voilà c'est tout pour aujourd'hui. Vous pouvez retrouver comme d'habitude les sources du code ici. Les sources intègrent le converter.
La vidéo viendra un peu plus tard.
A vendredi pour un nouvel article ou à lundi pour un nouveau tuto (le dernier de la série).