Ich habe mal wieder eine ganze Weile nichts geschrieben und muss dieses nun aufholen. Die lange Pause hatte sicherlich viel mit der Arbeit zu tun, allerdings auch mit einigen privaten Projekten.

Ich habe in der letzten Zeit ein wenig mit dem PivotViewer herumgespielt und das Resultat kann man sich nun als neue ansehen (kobolde2.de).

Dies soll nun die neue Bildergallerie der Seite werden und kann stets upgedatet werden.

Als verwendete Technologie kommt hier Silverlight zum Einsatz. Der PivotViewer  ist ein Control, welches heruntergeladen und ins Projekt eingebunden werden muss. Das Handling der Sortierung, Suche usw. übernimmt das Control von alleine, man muss es nur mit einer passenden Collection (Schema) an Bildinformation versorgen. Dazu gibt es verschiedene Möglichkeiten:

Für den leichten Einstieg und dem schnellen Erfolg sollten man sich die Excel Tools einfach mal ansehen. Bilder und Kategorien hinzufügen, Veröffentlichen und das Ergebnis bestaunen. Um das Ergebnis anzeigen zu lassen sind folgende Schritte notwendig (Silverlight Projekt setze ich jetzt einfach mal voraus):

  • Verweis auf System.Windows.Pivot
  • in der MainPage.xaml eine Referenz alâ
    xmlns:pivot="clr-namespace:System.Windows.Pivot;assembly=System.Windows.Pivot"
  • hinzufügen des Controls an beliebiger Stelle
    <pivot:PivotViewer x:Name="PivotViewer" Width="720" />
  • laden der fertigen Collection
    PivotViewer.LoadCollection(http://serverurl.de/fertiges.cxml, string.Empty);

Warum dieses Control? Was ist so besonders daran?
Abgesehen von dem bereits fertigen Funktionen nutzt das Control “DeepZoom”, eine Technik bei der nur die Inhalte vom Server geladen werden, die auch benötigt werden. Dazu wird bei der Erstellung der Collection jedes einzelne Bild in viele viele Einzelbilder zerstückelt. Je nach Größe des Ursprungsbildes können sehr viele einzelne Dateien mit einer geringen Bildgröße erstellt werden. Wird nun das Control geladen, wird quasi ein Übersichtsbild geladen. Fängt der Benutzer an in das Bild hinein zu zoomen, werden einzelne Teilbilder unbemerkt für den Benutzer zur Laufzeit nachgeladen. Das bedeutet, das zwar eventuell auf dem Server eine größere Datenmenge für die Bilder vorgehalten werden muss, für den Benutzer die Ladezeit jedoch optimiert ist und er eine schöne freundliche Oberfläche erhält.

Die Steuerung in dem Control ist relativ einfach gehalten. Der Benutzer kann durch verschiedene Filter die Auswahlmenge eingeschränken, die Bilder durch verschiedene Sortierungen der Kategorien anders aufbereitet darstellen. Eine Navigation mit der Tastatur ist ebenso möglich.

image

 

Schaut’s euch einfach mal an Smiley

 

Tim Heuer hat eine 7-teilige Serie für einen erfolgreichen Beginn mit der Silverlight Entwicklung für Einsteiger verfasst.

Teil 1: Getting started – Tools and Hello World
Teil 2: Defining the UI layout and Navigation
Teil 3: Accessing Data
Teil 4: Binding the data and storing some for later
Teil 5: Integrating other controls
Teil 6: Polish the UI with Styles and Templates
Teil 7: Out-of-browser experiences

Sehr interessante Sachen dabei!!

 

Heute habe ich mal nach Silverlight Spielen gesucht und bin fündig geworden…

Gibt schon ein paar schöne Sachen!

http://www.nokola.com/ (verschiedene Anwendungen, u.a. ShockGame – in Level 5 gescheitert :( , SourceCode wird bereit gestellt)
Tank Combat (Level 3 wird schon kniffliger aber lösbar)
Duck Hunt (Moorhuhn in Version 0.5 würde ich sagen)

 

Da ich momentan Urlaub habe, konnte ich mich heute aus Lust und Laune mal wieder dem Thema Silverlight etwas nähern, wobei folgende Anwendung entstanden ist…

Zuerst war es wichtig, das mein Server den Datenrequest zustimmt und das wird mit einer Policy, in der crossdomain.xml erledigt. Diese Datei muss sich im Root befinden und folgenden Inhalt besitzen:

crossdomain.xml:

  1. <?xml version="1.0" ?>
  2. <cross-domain-policy>
  3. <allow-access-from secure="true" domain="*" />
  4. </cross-domain-policy>

Anschließend konnte mit der Entwicklung begonnen werden. Zuerst definierte ich eine XML Datei, die die Datenstruktur für die Anzeige enthalten sollte. Diese persons.xml enthält die Personen, die als Visitenkarte zur Anzeige gebracht werden sollen.

persons.xml

  1. <?xml version="1.0" ?>
  2. <Persons>
  3. <Person>
  4. <Name>Daniel</Name>
  5. <Street>Musterstr. 6</Street>
  6. <Zip>12699</Zip>
  7. <Location>Berlin, Germany</Location>
  8. <Picture>http://servername/pfadzumbild.jpg</Picture>
  9. </Person>
  10. <Person>
  11. <Name>Katrin</Name>
  12. <Street>Musterstr. 6</Street>
  13. <Zip>10059</Zip>
  14. <Location>Berlin, Germany</Location>
  15. <Picture>http://servername/pfad2zumbild.jpg</Picture>
  16. </Person>
  17. </Persons>

Danach ging es nur noch ums Daten holen, auseinander pflücken und dem Control zuzuweisen…

Page.xaml.cs

  1. public partial class Page : UserControl
  2. {
  3. public Page()
  4. {
  5. InitializeComponent();
  6. LoadXml();
  7. }
  8.  
  9. private void LoadXml()
  10. {
  11. Uri uri = new Uri("http://host/pfadzur/persons.xml");
  12. WebClient client = new WebClient();
  13. client.DownloadStringCompleted += new DownloadStringCompletedEventHandler(client_DownloadStringCompleted);
  14. client.DownloadStringAsync(uri);
  15. }
  16.  
  17. void client_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
  18. {
  19. //Wenn Fehler dann stoppen
  20. if (e.Error != null)
  21. {
  22. Debugger.Break();
  23. return;
  24. }
  25.  
  26. //sonst weiter
  27. StringReader sr = new StringReader(e.Result);
  28. XmlReader xr = XmlReader.Create(sr);
  29. XDocument xdoc = XDocument.Load(xr, LoadOptions.None);
  30.  
  31. var query = from item in xdoc.Descendants(XName.Get("Person"))
  32. select new karte()
  33. {
  34. PersonImage = item.Element(XName.Get("Picture")).Value,
  35. PersonLocation = item.Element(XName.Get("Location")).Value,
  36. PersonName = item.Element(XName.Get("Name")).Value,
  37. PersonStreet = item.Element(XName.Get("Street")).Value,
  38. PersonZip = item.Element(XName.Get("Zip")).Value
  39. };
  40. List<karte> visitenkarten = new List<karte>();
  41.  
  42. foreach (karte v in query.ToList())
  43. {
  44. visitenkarten.Add(v);
  45. }
  46.  
  47. VisitenkartenList.ItemsSource = visitenkarten;
  48. }
  49. }

Visitenkarten.xaml.cs

  1. public partial class Visitenkarte : UserControl
  2. {
  3. public Visitenkarte()
  4. {
  5. // Required to initialize variables
  6. InitializeComponent();
  7. this.Loaded += new RoutedEventHandler(Visitenkarte_Loaded);
  8. }
  9.  
  10. void Visitenkarte_Loaded(object sender, RoutedEventArgs e)
  11. {
  12. karte k = this.DataContext as karte;
  13. if (k != null)
  14. {
  15. _Name.Text = k.PersonName;
  16. _Strasse.Text = k.PersonStreet;
  17. _PLZ.Text = k.PersonZip;
  18. _Ort.Text = k.PersonLocation;
  19. if (!string.IsNullOrEmpty(k.PersonImage))
  20. {
  21. Uri uri = new Uri(k.PersonImage, UriKind.Absolute);
  22. ImageSource imgSource = new BitmapImage(uri);
  23. _image.Source = imgSource;
  24. }
  25. }
  26. }
  27. }

karte.cs

  1. public class karte
  2. {
  3.  
  4. public string PersonName { get; set; }
  5. public string PersonStreet { get; set; }
  6. public string PersonZip { get; set; }
  7. public string PersonLocation { get; set; }
  8. public string PersonImage { get; set; }
  9. }

Das ganze ist dann schnell fertig gestellt und in eine Seite eingebunden. Bitte achtet nicht auf’s Layout, ich bin Entwickler :)

Das Projekt kann im Downloadbereich heruntergeladen werden.

Achja... das ist mein Zeigefinger um Missverständnisse vorzubeugen :)

 

Als ich mir eben ein Beispielprojekt von Oliver Scheer ansehen wollte, bekam ich die folgenden Fehlermeldungen:

UserControl is not supported in a Windows Presentation Foundation (WPF) project.
ControlTemplate is not supported in a Windows Presentation Foundation (WPF) project.

und viele viele mehr…

Des Rätsels Lösung ist banal und einfach zugleich! Da ich meinen Rechner neu aufsetzen musste, hatte ich noch kein Expression Blend 2 SP1 installiert. Nach der Installation läuft es nun wieder problemlos!

image

 

Oliver Scheer hat einen mit Silverlight 2 erstellten Comic veröffentlicht und sucht noch Ideen für eine gute Story.

image

Ich habe ihm mal eine zukommen lassen…

http://www.the-oliver.com/project/comic/

 

Lang hat es gedauert, aber nun ist der Linux-Pendant zu Microsoft Silverlight erschienen. Moonlight 1.0 beruht allerdings auf Silverlight 1.0, die aktuelle Version ist aber bereits die Version Silverlight 2.0.

Es wird sicherlich wieder einige Monate dauern bis auch dieses unterstützt wird, aber ich bin mir sicher, das auch bald die “Pinguin-User” diese Technik nutzen können! ;)

Moonlight 1.0

 

Oliver Scheer informiert über das Silverlight 2 Toolkit, welches auf Codeplex zu finden ist.

Da scheint es echt spannende Controls und Charts zu geben... :D

image

Sogar noch etwas ausführlichere Infos mit Demos und Code findet man bei Tim Heuer.

 

Ich war ja am Montag und Dienstag beim Silverlight Liftoff und dort haben wir viele Beispiele von Silverlight zu sehen bekommen. Ein Projekt stach besonders hervor - der Car-Shop.

Leider war dieser noch nicht auf Silverlight 2 optimiert was er nun aber zu sein scheint. Ich finde diese Anwendung ziemlich gelungen und es zeigt so einige Stärken von Silverlight.

Zu finden ist die Anwendung unter http://cs.w3a.de

image

Es ist auf jeden Fall einen Blick wert!

Ich komme gerade aus Frankfurt zurück, wo mein zweites Training zu Silverlight in den letzten beiden Tagen stattgefunden hat. Ein neugieriger Blick auf die Seite des Evangelisten Oliver Scheer brachte mir diese brandneue News (17:45 Uhr) "da war der Herr gerade mal 45 Minuten mit dem Training fertig und eventuell auf dem Weg zum Flughafen" :)

© 2012 Daniel Buschke - Blog Suffusion theme by Sayontan Sinha