Dokumentation: Content App Framework Andreas Breuninger, medialesson GmbH Januar 2013
Inhaltsverzeichnis 1. DataService... 3 1.1. Laden/Parsen der Daten... 3 1.1.1. GetDataset() -> GetDataAsync<T>() -> GetXmlAsync() -> ParseData<T>()... 3 1.2. Dataset-Model... 3 1.3. Bing Web/Bildersuche... 3 2. Utilities... 4 2.1. AppHelper... 4 2.2. HubItemTemplateSelector... 4 3. MainViewModel... 5 3.1. Methoden... 5 3.1.1. Init()... 5 3.1.2. GetImageResults() & GetWebResults()... 5 3.2. Sections... 5 4. MainPage... 6 4.1. CollectionViewSource... 6 4.2. SemanticZoom... 6 4.2.1. ZoomedInView... 6 4.3. ViewStates... 6 4.4. AdControl... 6 Seite 2/6
1. DataService 1.1. Laden/Parsen der Daten 1.1.1. GetDataset() -> GetDataAsync<T>() -> GetXmlAsync() -> ParseData<T>() Diese Funktionen werden dazu verwendet einen Stream auf die Content.xml Datei zu öffnen, und mittels XmlSerializer in ein Dataset-Model zu deserialisieren. Das Model spiegelt die Struktur der Xml-Datei wieder. 1.2. Dataset-Model Die Adressierung der Felder für den XmlSerializer erfolgt über Attribute der einzelnen Properties. [XmlRoot("Dataset")] public class Dataset { [XmlElement("Title")] public String Title { get; set; } [XmlElement("HeroImage")] public HeroImage HeroImage { get; set; } [XmlElement("LegalNotice")] public String LegalNotice { get; set; } [XmlElement("ShareUrl")] public String ShareUrl { get; set; } [XmlElement("Intro")] public String Intro { get; set; } } [XmlElement("Chapter")] public List<Chapter> Chapters { get; set; } 1.3. Bing Web/Bildersuche Für die Suche nach Bildern und Webseiten mittels Bing-API ist die Funktion SearchBingAsync() zuständig. Als Parameter werden der Suchstring, der Typ der Suche (Bilder/Web), maximale Anzahl an Ergebnissen und die Sprache entgegen genommen. Die Parameter count und locale sind als optional deklariert und mit Standardwerten vordefiniert. In Abhängigkeit des Typs der Suche wird die Parse-Funktion für Bilder oder Web aufgerufen, um die geparsten Ergebnisse als Objekte zurückzugeben. Seite 3/6
2. Utilities 2.1. AppHelper Die Init-Methode der AppHelper-Klasse fügt der Anwendung neue Ressourcen, wie zum Beispiel den ViewModelLocator oder die StandardStyles.xaml, hinzu. An dieser Stelle wird auch das Event für den Settings-Charm registriert. SettingsPane.GetForCurrentView().CommandsRequested += SettingsHelper_CommandsRequested; Ein Aufruf der Einstellungen für die Anwendung löst dieses Ereignis aus. Dabei werden aus den Ressourcen der Anwendung der PrivacyLink gelesen und die aufzurufende URL in einer Variable gespeichert. Diese Variable wird zusammen mit weiteren Parametern als neuer SettingsCommand den ApplicationCommands hinzugefügt. 2.2. HubItemTemplateSelector Der HubItemTemplateSelector ist eine abgeleitete Klasse von DataTemplateSelector. Die Methode SelectTemplateCore wurde für unsere Zwecke überschrieben. Je nach übergebenen Datentyp wird eines der zuvor in den Ressourcen der MainPage definierten ItemTemplates zurückgeliefert. Die ItemTemplates sind wie folgt in der MainPage.xaml definiert. Seite 4/6
3. MainViewModel 3.1. Methoden 3.1.1. Init() Diese Methode wird aufgerufen, nachdem das Loaded Event der MainPage gefeuert wurde. Diese Methode wird dazu verwendet, den DataService anzustoßen, die Daten der Xml-Datei zu laden, die Bing Bilder und Websuche auszuführen und die für uns benötigten Properties zu setzen. 3.1.2. GetImageResults() & GetWebResults() Der Aufruf erfolgt wieder über einen RelayCommand aus der SectionPage heraus. Diese Funktionen laden wie der Funktionsname schon erahnen lässt die Bilder und Webseiten, wenn die SectionPage aufgerufen wurde. 3.2. Sections Die einzelnen Sektionen (HeroImage, Einführung, ) werden als Objekte in einer ObservableCollection des Typs GroupInfoList<object> vorgehalten. GroupInfoList ist eine eigens definierte Klasse, abgeleitet von List<object>. Die ObservableCollection benachrichtigt das System automatisch über Änderungen an der Collection, wenn z.b. ein Eintrag der Liste hinzugefügt, oder die gesamte Liste aktualisiert wurde. Um auf Änderungen der Liste via Code reagieren zu können, kann man sich an dem CollectionChanged Event registrieren. Seite 5/6
4. MainPage Der grundlegende Aufbau der MainPage ist schlicht gehalten. Die Definition der CollectionViewSource Datenquelle, Konverter und ItemTemplates erfolgt in den Resourcen des Page- Elements. Die View selbst beinhaltet ein Grid für das Layout, SemanticZoom Elementen für die Snapped/FullScreen-Ansicht und die VisualStates. 4.1. CollectionViewSource Die CollectionViewSource ist eine Providerklasse für Objekte, die das Gruppieren von Daten ermöglicht. Die Source-Property ist an die Sections-Property des MainViewModels gebunden. Die ItemSource dagegen wird via Code-Behind in der MainPage gesetzt. 4.2. SemanticZoom Beschrieben wird nachfolgend nur der SemanticZoom für die ZoomedInView, die Vorgehensweise für ZoomedOutView ist analog zu der ZoomedInView. 4.2.1. ZoomedInView Die aus dem MainViewModel gelieferten Sections werden in der ZoomedInView in einer ListView dargestellt. Die ItemSource ist an die CollectionViewSource gebunden. Die Darstellung der einzelnen Abschnitte ändert sich in Abhängigkeit vom aktuellen Typ der Sektion über den ItemTemplateSelector. 4.3. ViewStates Die einzelnen ViewState der Anwendung, in unserem Fall Snapped und Fullscreen sind bereits im XAML Code der Page definiert. Über den VisualStateManager passen wir unsere View für den aktuellen State der Anwendung an. So wird im Snapped-State die Visibility eines zuvor nicht gerenderten SemanticZoom Elements auf Visible geschalten. Um sicherzustellen, dass von unserem DateTemplateSelector die richtigen Templates zurückgeliefert werden, gibt es diese in den Ausführungen für die Vollbildansicht und für den Snapped-State. 4.4. AdControl Für die Anzeige von Werbeschaltflächen wurde bei zwei ItemTemplates das AdControl aus dem Microsoft Ad SDK hinzugefügt. Die Properties AdUnitId und ApplicationId sind über statische Ressourcen gebunden. Die Sichtbarkeit der Werbeanzeige ist an eine Property des MainViewModels und einen Converter gebunden. Somit wird sichergestellt, dass die Anzeige nur in der ZoomedInView dargestellt wird. Seite 6/6