Ako bola vytvorená aplikácie Vyvojárske blogy

Pre sledovanie príspevkov z tohto blogu môžete používať aj Windows 8.1 aplikáciu Vývojárske blogy. Aplikáciu nájdete vo Windows obchode http://apps.microsoft.com/windows/app/vyvojarske-blogy/eb3864a5-faa3-4fe6-a318-ca91669e6865. Zatiaľ prezentuje údaje z dvoch blogov, tohto a blogu http://blogs.msdn.com/b/vyvojarisk postupne bude rozšírená o ďalšie zdroje.

Fungovanie používateľského rozhrania aplikácie je zrejmé z obrázkov

Vytvorenie projektu

Intuitívne vás asi napadne použiť projekt typu Split App. Na hlavnej stránke ItemsPage budú dlaždice jednotlivých blogov. Na stránke SplitPage budú najnovšie príspevky používateľom vybraného blogu. Takýto typ projektu je vhodný vtedy ak potrebujete koncentrovať údaje z veľa blogov. Ak koncentrujete údaje len z niekoľkých tematických blogov, výhodnejší bude projekt typu Grid App, do ktorého neskôr pridáte aj stránku typu Split Page. Na hlavnej stránke budú nie dlaždice blogov, ale najnovšie príspevky opticky rozdelené podľa blogov. Takýto projekt má oveľa vyššiu informačnú hodnotu. Vytvorte teda projekt typu Grid App.

V prvej fáze budete vytvárať “wireframe” model, teda surové zobrazenie údajov bez obrázkov, formátovania textov a akýchkoľvek dizajnových záležitostí. Tieto doplníte po odskúšaní funkcionality všetkých stránok

Načítanie údajov z blogu

Prvou fázou príkladu, bude získavanie údajov z dátového zdroja, ktorým je v tomto prípade blog. Väčšina blogových portálov umožňuje získavať metadáta a aj úplné znenie príspevkov vo formátoch RSS aj Atom. Budú nás zaujímať atribúty názov, autor, dátum a text blogových príspevkov. WindowsRT API obsahuje sadu tried v Windows.Web.Syndication, ktoré vám získavanie a spracovávanie údajov z RSS zdrojov výrazne zjednodušia.

Budeme upravovať súbor SampleDataSource, ktorý je po vytvorení projektu napojený na statický zdroj údajov v súbore SampleData.json. Najskôr upravte atribúty v triede SampleDataItem. Premenujte ju na BlogClanok. Predmetom záujmu aplikácie budú jednak atribúty týkajúce sa názvu článku, mena autora, dátumu publikovania článku a taktiež aj text článku a URL adresa originálneho článku.

public class BlogClanok

{

public BlogClanok(String title, String autor, String content,

DateTime pubdate)

{

this.Title = title;

this.Author = autor;

this.Content = content;

this.PubDate = pubdate;

}

 

 

public string Title { get; set; }

public string Author { get; set; }

public string Content { get; set; }

public DateTime PubDate { get; set; }

public Uri Link { get; set; }

 

 

public override string ToString()

{

return this.Title;

}

}

 

Teraz môžete vytvoriť atribúty pre triedu SampleDataGroup. V originálnej šablóne je táto trieda použitá na zapuzdrenie objektov do kategórii, v našom príklade bude zapuzdrovať články jednotlivých blogov. Premenujte ju na BlogData.

public class BlogData

{

public BlogData(String title, String description, DateTime pubdate)

{

this.Title = title;

this.Description = description;

this.PubDate = pubdate;

this.Items = new ObservableCollection<BlogClanok>();

}

 

 

 

public string Title { get; set; }

public string Description { get; set; }

public DateTime PubDate { get; set; }

 

public ObservableCollection<BlogClanok> Items { get; private set; }

 

public override string ToString()

{

return this.Title;

}

}

 

Napokon upravte triedu SampleDataSource ktorá bude zapuzdrovať články sústredené z viacerých RSS zdrojov, čiže viacerých blogov. Táto trieda bude plniť úlohu zdroja údajov pre prezentačné rozhranie, ktoré bude články zobrazovať.

Atribút Groups typu ObservableCollection, teda kolekcia objektov bude zapuzdrovať jednotlivé články.

private ObservableCollection<BlogData> _groups = new

ObservableCollection<BlogData>();

 

public ObservableCollection<BlogData> Groups

{

get { return this._groups; }

}

 

Úlohou metódy GetSampleDataAsync () je asynchrónne načítanie údajov z viacerých zdrojov (feed1, feed2…). Pre jednoduchosť zatiaľ budete využívať len jeden RSS zdroj. Pôvodne po vytvorení šablóny táto metóda načítavala statické údaje zo súboru SampleData.json

private async Task GetSampleDataAsync()

{

if (this._groups.Count != 0) return;

Task<SampleDataGroup> feed1 =

GetFeedAsync(“https://novywindows.wordpress.com/feed&#8221;);

this.Feeds.Add(await feed1);

}

 

Metóda GetFeedAsync má ako parameter URL adresu RSS zdroja. Metóda dokáže spracovať údaje podľa špecifikácií RSS aj Atom. Všimnite si dvojnásobnú kontrolu každého atribútu či existuje, teda či jeho hodnota sa nerovná NULL a či text má aspoň jeden znak. Metóda využíva objekt SyndicationClient. Najskôr sa načítajú atribúty týkajúce sa blogu a následne v cykle typu foreach sa načítajú jednotlivé články. Načítané údaje týkajúce sa blogu sa budú ukladať do inštancií triedy BlogData, údaje o článkoch do inštancií triedy BlogClanky.

private async Task<BlogData> GetFeedAsync(string feedUriString)

{

SyndicationClient client

= new SyndicationClient();

Uri feedUri = new Uri(feedUriString);

 

try

{

SyndicationFeed feed = await client.RetrieveFeedAsync(feedUri);

 

BlogData blogData = new BlogData(“”, “”, DateTime.Now);

 

if (feed.Title != null && feed.Title.Text != null)

{

blogData.Title = feed.Title.Text;

}

if (feed.Subtitle != null && feed.Subtitle.Text != null)

{

feedData.Description = feed.Subtitle.Text;

}

if (feed.Items != null && feed.Items.Count > 0)

{

blogData.PubDate = feed.Items[0].PublishedDate.DateTime;

 

foreach (SyndicationItem item in feed.Items)

{

BlogClanok blogClanok = new BlogClanok(“”, “”, “”, DateTime.Now);

if (item.Title != null && item.Title.Text != null)

{

blogClanok.Title = item.Title.Text;

}

if (item.PublishedDate != null)

{

blogClanok.PubDate = item.PublishedDate.DateTime;

}

if (item.Authors != null && item.Authors.Count > 0)

{

blogClanok.Author = item.Authors[0].Name.ToString();

}

// Spracovanie rozdielov medzi RSS a Atom.

if (feed.SourceFormat == SyndicationFormat.Atom10)

{

if (item.Content != null && item.Content.Text != null)

{

blogClanok.Content = item.Content.Text;

}

if (item.Id != null)

{

blogClanok.Link = new Uri(item.Id);

}

}

else if (feed.SourceFormat == SyndicationFormat.Rss20)

{

if (item.Summary != null && item.Summary.Text != null)

{

blogClanok.Content = item.Summary.Text;

}

if (item.Links != null && item.Links.Count > 0)

{

blogClanok.Link = item.Links[0].Uri;

}

}

blogData.Items.Add(blogClanok);

}

}

return blogData;

}

catch (Exception)

{

return null;

}

}

 

Metóda GetGroupAsync vráti zdroj, ktorý obsahuje článok s konkrétnym názvom. Vystačíte s originálnou procedúrou, stačí zmeniť len unikátny identifikátor na Title. Metóda GetItemAsync vráti vybraný článok

Zobrazenie článkov viacerých blogov

V tomto štádiu môžete aplikáciu spustiť. Zobrazia sa dlaždice s názvami článkov blogu bez obrázkov, nakoľko ste zatiaľ nemenili šablónu zobrazenia prvku GridView.

Odporúčame vyskúšať prostriedky Visual Studia pre ladenie a nechať si vypísať načítané údaje. V súbore App.xaml.cs v metóde OnLaunched umiestnite zarážku na riadok

await sampleDataSource.GetFeedsAsync();

a spustite aplikáciu. Keď sa vykonávanie kódu na vybranom riadku preruší, klávesou F10 ho nechajte vykonať. Týmto krokom by sa mali načítať údaje. Následne ich môžete nechať vypísať. Ak na vybraný článok aplikujete položku kontextového menu HTML Visualizer, mal by sa vám zobraziť článok aj s prípadnými obrázkami

Ak sa vám zobrazili požadované údaje a správne sformátovaný článok, máte etapu načítania údajov úspešne za sebou a môžete pristúpiť k návrhu používateľského rozhrania pre zobrazenie blogových článkov.

Ak načítavate príspevky z viacerých webových zdrojov pri inicializácii aplikácie, je vysoko pravdepodobné, že vaša aplikácia neprejde schvaľovacím procesom z dôvodu dlhej doby nábehu.

Jedným z riešení môže byť nechať zobraziť stránku GroupedItemsPage prázdnu bez údajov a v metóde Loaded začať načítavať údaje z viacerých zdrojov až keď je stránka zobrazená. Používateľovi sa potom bude javiť nábeh aplikácie tak, že budú na obrazovke pribúdať jednotlivé skupiny príspevkov tak, ako sa budú načítavať.

Zobrazenie článkov vybraného blogu

Články vybraného blogu sa štandardne zobrazujú na stránke GroupedDetailPage.xaml. Pokiaľ nezmeníte šablónu zobrazí sa vľavo prázdne miesto, ktoré je v šablóne vyhradené pre obrázok a popis vybranej kategórie.

V tomto type aplikácie sa to nehodí, stačí názov vybraného blogu v záhlaví aplikácie. Ilustračný obrázok priradený staticky ku každému blogu by len zaberal priestor. Namiesto neho môžete zobraziť viac článkov. Odstráňte preto sekciu <GridView.Header>. Dizajnu zobrazovania názvov článkov sa budete venovať neskôr.

Všimnite si, že až na koncentrovanejšie zobrazenie článkov sme zatiaľ pri tomto zobrazení neposkytli žiadnu pridanú hodnotu. Pre zobrazovanie článkov vybraného blogu bude možno lepšia šablóna SplitView. Klikaním na obdĺžnikové dlaždice s názvami článkov v ľavej časti stránky sa bude meniť článok aktuálne zobrazovaný v pravej časti. Takéto zobrazenie má lepšiu informatívnu hodnotu aj operatívnosť ako klasický zoznam článkov.

Pre tento účel je potrebné pridať do projektu stránku Split Page. Môžete tak urobiť cez kontextové menu Add – New Item – SplitPage.

Poradím vám užitočný trik, ako prácne nevytvárať používateľské rozhranie stránky SplitPage a jej napojenie na zdroj údajov.. Vytvorte novú aplikáciu typu Split App. Z tohto projektu prekopírujte súbory SplitPage.xaml a SplitPage.xaml.cs. V obidvoch súboroch zmeňte namespace podľa názvu vašej aplikácie.

Na stránke GroupedItemsPage.xaml.cs zmeňte navigáciu pri kliknutí na názov blogu aby smerovala nie na GroupDetailPage.xaml, ale na novo pridanú stránku SplitPage.xaml

void Header_Click(object sender, RoutedEventArgs e)

{

var group = (sender as FrameworkElement).DataContext;

this.Frame.Navigate(typeof(SplitPage), ((BlogData)group).Title);

}

 

V úvode state o používateľskom rozhraní sme síce deklarovali, že prvej fáze budeme vytvárať iba “wireframe” model, teda surové zobrazenie údajov bez obrázkov, či formátovania textu, no v žiadnom prípade sa pri zobrazení textu blogového príspevku neuspokojíme s textovým výpisom zdrojového HTML kódu stránky. Namiesto textu zobrazovaného pomocou prvku TextBlock použijeme prvok WebView.

<WebView x:Name=”contentView” Grid.Row=”2″ Grid.ColumnSpan=”2″ Margin=”0,20,0,0″ />

 

V metóde ItemListView_SelectionChanged je potrebné sprostredkovať zmeny výberu článku. Prvku WebView musíte priradiť URI (Uniform Resource Identifier) aktuálne vybraného článku, ktorý sa má zobraziť.

void ItemListView_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if (this.UsingLogicalPageNavigation()) this.InvalidateVisualState();

Selector list = sender as Selector;

BlogClanok selectedItem = list.SelectedItem as BlogClanok;

if (selectedItem != null)

{

this.contentView.NavigateToString(selectedItem.Content);

}

else

{

this.contentView.NavigateToString(“”);

}

}

 

Po spustení aplikácie sa budú vybrané články zobrazovať v okne, správne naformátované aj s prípadnými obrázkami.

Zobrazenie článkov vybraného blogu

Články vybraného blogu sa zobrazujú na stránke ItemDetailPage.xaml. Vaša úloha je jednoduchá, zobraziť článok v okne WebView.

Do XAML kódu na stránke ItemDetailPage.xaml pridajte jeden riadok

<WebView x:Name=”webView” Grid.Row=”1″ Margin=”40,0,20,2″/>

 

Na do kódu v súbore ItemDetailPage.xaml.cs je potrebné priradiť prvku WebView URL adresu blogového príspevku

private async void navigationHelper_LoadState(object sender, LoadStateEventArgs e)

{

var item = await SampleDataSource.GetItemAsync((String)e.NavigationParameter);

this.DefaultViewModel[“Item”] = item;

 

webView.Navigate((Uri)item.Link);

}

 

Finalizácia dizajnu

V tejto fáze máte odladený “wireframe” plne funkčnej aplikácie a nastáva čas na dotvorenie dizajnu podľa zámeru zadávateľa, prípadne tvorcov aplikácie

Reklamy

Pridaj komentár

Zadajte svoje údaje, alebo kliknite na ikonu pre prihlásenie:

WordPress.com Logo

Na komentovanie používate váš WordPress.com účet. Odhlásiť sa / Zmeniť )

Twitter picture

Na komentovanie používate váš Twitter účet. Odhlásiť sa / Zmeniť )

Facebook photo

Na komentovanie používate váš Facebook účet. Odhlásiť sa / Zmeniť )

Google+ photo

Na komentovanie používate váš Google+ účet. Odhlásiť sa / Zmeniť )

Connecting to %s


%d bloggers like this: