SlideShare ist ein Scribd-Unternehmen logo
Silverlight Tipp & Tricks für Fortgeschrittene Sebastian Schmitt & André Wussow, SnipClip
Agenda (1) Kurze Vorstellung von SnipClip Stolpersteine: Namespace-Änderung Web-Service-Aufrufe TextBox-Bug Überlappende HTML-Elemente Skalierung im Fullscreen-Modus Button-Fokus im Fullscreen-Modus Sebastian Schmitt & André Wussow, SnipClip
Agenda (2) Tipps & Tricks: Zentrale Style-Vorgaben Dynamisches Nachladen Screenshots mit Crossdomain-Bildern JavaScript Interaktion Navigation Framework Perspective 3D & PixelShader Out-of-Browser Sebastian Schmitt & André Wussow, SnipClip
Kurze Vorstellung von SnipClip Sebastian Schmitt & André Wussow, SnipClip
Stolpersteine
Namespace-Änderung Problem: Bei Namespace-Änderung in VS 2008 erhält man eine irreführende Ausnahme: „Ungültige oder nicht wohlgeformte Anwendung. Überprüfen Sie das Manifest.“ Sebastian Schmitt & André Wussow, SnipClip Lösung: Eigenschaften des Projekts    Silverlight-Tab    Drop-Down-Menü  Startup object  öffnen und den (einzigen) Eintrag neu auswählen
Web-Service-Aufrufe Problem: Bei Aufruf eines Web Services (bzw. generell bei Crossdomain-Aufrufen) erhält man eine  CommunicationException Sebastian Schmitt & André Wussow, SnipClip Lösung: Die  clientaccesspolicy.xml  oder die  crossdomain.xml  müssen im Root-Verzeichnis des Web Services liegen und für den Client sichtbar sein (Infos: http://msdn.microsoft.com/en-us/library/cc645032(VS.95).aspx)
TextBox-Bug Problem: MouseLeftButtonDown -Event funktioniert seit dem Release von Silverlight 2.0 nicht mehr Lösung: Stattdessen  GotFocus -Event verwenden Sebastian Schmitt & André Wussow, SnipClip
HTML-Überlappung Sebastian Schmitt & André Wussow, SnipClip
HTML-Überlappung Lösung: Bei den Parametern des Silverlight-Controls  hinzufügen: <param name=&quot;windowless&quot; value=&quot;true&quot; />   Silverlight läuft nicht mehr in eigenem Fenster Sebastian Schmitt & André Wussow, SnipClip Problem:  Wenn ein Silverlight-Control in eine HTML-Seite eingebettet wird, kann es nicht von anderen HTML-Elementen überlagert werden (z.B. Facebook-Menüs)
HTML-Überlappung Sebastian Schmitt & André Wussow, SnipClip
Fullscreen-Skalierung Problem: UserControls werden im Fullscreen-Modus verschoben Lösung: Höhe und Breite im UserControl undefiniert lassen Das VerticalAlignment  und das  HorizontalAlignment  des obersten LayoutRoots auf  Center  und den  RenderTransformOrigin  auf  Point(0.5,0.5)  setzen Den obersten LayoutRoot über eine  ScaleTransform  skalieren Sebastian Schmitt & André Wussow, SnipClip
Button-Fokus im Fullscreen Problem: Beim Wechsel in den Fullscreen-Modus bleibt der Fokus auf dem Fullscreen-Button   wenn der Fullscreen-Modus wieder verlassen wird, liegt der Fokus fälschlicherweise immer noch auf dem Button Sebastian Schmitt & André Wussow, SnipClip Lösung: VisualStateManager.GoToState (EnterFullscreenButton, „Normal“, false);   funktioniert allerdings nur dann, wenn der Mauszeiger sich nach Verlassen des Fullscreen-Modus innerhalb der Silverlight-Anwendung befindet
Tipps & Tricks
Zentrale Style-Vorgaben Problem: In UserControls (z.B. Dialogen) sollen optische Vorgaben wiederverwendet werden, weil ansonsten der XAML-Code schwer zu warten ist und unnötig aufgebläht wird Lösung: Optische Vorgaben werden zentral in den Ressourcen der  App.xaml  gespeichert und können über {StaticResource RedGradient} erreicht werden Sebastian Schmitt & André Wussow, SnipClip
Dynamisches Nachladen (1) Problem: Wenn eine komplexe Anwendung aus vielen UserControls besteht, benötigt sie bei erstmaligem Laden sehr lange Sebastian Schmitt & André Wussow, SnipClip Lösung: UserControls dynamisch nachladen Dabei besser SilverlightApplication Template zur Auslagerung verwenden (anstatt SilverlightLibrary) Vorteile: zentrale  App.xaml  für Style-Vorgaben und XAP-Komprimierung der DLLs
Dynamisches Nachladen (2) Vorgehensweise: UserControls in neue SilverlightApplication auslagern (z.B.  Dialogs.xap ) Zentrale Style-Informationen aus der alten  App.xaml  in die neue  App.xaml  kopieren Zur Laufzeit die  Dialogs.xap  nachladen und aus deren  ApplicationManifest.xaml  die enthaltenen DLLs per LINQ ermitteln Über  Referenzen      Eigenschaften      Copy Local = True  kann man die DLLs festlegen, welche in der  Dialogs.xap  abgelegt werden Sebastian Schmitt & André Wussow, SnipClip
Crossdomain-Screenshots Sebastian Schmitt & André Wussow, SnipClip Problem: Wenn man in Silverlight 3 einen Screenshot der Anwendung via  WriteableBitmap -Klasse macht, werden Bilder, welche von einer anderen Domain geladen wurden, aus Sicherheitsgründen ignoriert Lösung: Bilder im  IsolatedStorage  zwischenspeichern und erneut daraus laden Erst danach den Screenshot anfertigen
JavaScript Interaktion Benötigt bei Integration div. API‘s z.B.: SocialNetworks (Facebook JS, OpenSocial, …) Silverlight -> JavaScript via  ScriptObject JavaScript –> Silverlight via  ScriptableType  &  ScriptableMember Sebastian Schmitt & André Wussow, SnipClip
Navigation Framework Ermöglicht das komfortable Navigieren zwischen einzelnen Seiten Vollständige Integration in die Browser-Navigation (vor, zurück) „ MVC“-Prinzip:  Frame übernimmt Validierung und stellt Container dar Page ist die eigentliche Seite als UserControl DeepLinking übernimmt eindeutige Identifikation der einzelnen Ressourcen (Pages) UriMapper erledigt „Url Rewriting“ und sorgt für friendly Urls Sebastian Schmitt & André Wussow, SnipClip
Navigation Framework Projekt-Vorlage „Silverlight Navigation Application Sebastian Schmitt & André Wussow, SnipClip
Perspective 3D & Pixel Shader Shader Effekte (bzw. PixelShader) erlauben pixelgenaue Manipulation gerenderter UI-Elemente Vorgefertigte Effekte (Blur, DropShadow) Eigene Effekte möglich via HLS ( High Level Shader Language ) Normal auf GPU ausgeführt, in Silverlight via Software Algorithmus WPF PixelShader Effects Library  (http://www.codeplex.com/wpffx) Bietet u.a.  BandedSwirl, ColorKeyAlpha, ColorTone, ContrastAdjust uvm.  Perspective 3D unterstützt das Anordnen von Elementen auf 3D-Ebene Sebastian Schmitt & André Wussow, SnipClip
Out-of-Browser Silverlight 3 bietet nun die Installation auf den Desktop an Silverlight Applikationen laufen eigenständig ohne Browser Web Service Kommunikation z.B. nach wie vor möglich. Automatische Aktualisierung Sebastian Schmitt & André Wussow, SnipClip
Kontaktdaten E-Mail: [email_address] [email_address] Blog: www.paidcontentisback.com Homepage: www.snipclip.com Quellcode: www.snipclip.com/webtech09-tipps.zip

Weitere ähnliche Inhalte

Ähnlich wie Silverlight - Tipps & Tricks für Fortgeschrittene

Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
Sebastian Springer
 
Deployment 2.0
Deployment 2.0Deployment 2.0
Deployment 2.0
Daniel Andrisek
 
Windows Server 8 - eine Vorschau
Windows Server 8 - eine VorschauWindows Server 8 - eine Vorschau
Windows Server 8 - eine Vorschau
Digicomp Academy AG
 
B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009
Andreas Schulte
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Benjamin Schmid
 
APEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursAPEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkurs
Steven Grzbielok
 
PHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzePHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-Ansätze
Ralf Lütke
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
Conny Stier
 
Java Magazin 5 / 2010 - Twitter nachgebaut mit Lift
Java Magazin 5 / 2010 - Twitter nachgebaut mit LiftJava Magazin 5 / 2010 - Twitter nachgebaut mit Lift
Java Magazin 5 / 2010 - Twitter nachgebaut mit Lift
Johannes Hohenbichler
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
Karionis
 
Web-GUIs mit Vaadin
 Web-GUIs mit Vaadin Web-GUIs mit Vaadin
Web-GUIs mit Vaadin
gedoplan
 
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
DNUG e.V.
 
Große Applikationen mit AngularJS
Große Applikationen mit AngularJSGroße Applikationen mit AngularJS
Große Applikationen mit AngularJS
Sebastian Springer
 
JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
Sebastian Springer
 
Einführung in Windows Presentation Foundation
Einführung in Windows Presentation FoundationEinführung in Windows Presentation Foundation
Einführung in Windows Presentation Foundation
chmoser79
 
DACHNUG50 LeapTippsAndTricks.pdf
DACHNUG50 LeapTippsAndTricks.pdfDACHNUG50 LeapTippsAndTricks.pdf
DACHNUG50 LeapTippsAndTricks.pdf
DNUG e.V.
 
Steinzeit war gestern! Wege der Cloud-nativen Evolution.
Steinzeit war gestern! Wege der Cloud-nativen Evolution.Steinzeit war gestern! Wege der Cloud-nativen Evolution.
Steinzeit war gestern! Wege der Cloud-nativen Evolution.
QAware GmbH
 
Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010
SharepointUGDD
 
DNUG Dresden Blend
DNUG Dresden BlendDNUG Dresden Blend
DNUG Dresden Blend
Martin Hey
 

Ähnlich wie Silverlight - Tipps & Tricks für Fortgeschrittene (20)

Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
 
Deployment 2.0
Deployment 2.0Deployment 2.0
Deployment 2.0
 
Windows Server 8 - eine Vorschau
Windows Server 8 - eine VorschauWindows Server 8 - eine Vorschau
Windows Server 8 - eine Vorschau
 
B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
 
APEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursAPEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkurs
 
PHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzePHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-Ansätze
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
Java Magazin - Lift
Java Magazin - LiftJava Magazin - Lift
Java Magazin - Lift
 
Java Magazin 5 / 2010 - Twitter nachgebaut mit Lift
Java Magazin 5 / 2010 - Twitter nachgebaut mit LiftJava Magazin 5 / 2010 - Twitter nachgebaut mit Lift
Java Magazin 5 / 2010 - Twitter nachgebaut mit Lift
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
 
Web-GUIs mit Vaadin
 Web-GUIs mit Vaadin Web-GUIs mit Vaadin
Web-GUIs mit Vaadin
 
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
 
Große Applikationen mit AngularJS
Große Applikationen mit AngularJSGroße Applikationen mit AngularJS
Große Applikationen mit AngularJS
 
JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
 
Einführung in Windows Presentation Foundation
Einführung in Windows Presentation FoundationEinführung in Windows Presentation Foundation
Einführung in Windows Presentation Foundation
 
DACHNUG50 LeapTippsAndTricks.pdf
DACHNUG50 LeapTippsAndTricks.pdfDACHNUG50 LeapTippsAndTricks.pdf
DACHNUG50 LeapTippsAndTricks.pdf
 
Steinzeit war gestern! Wege der Cloud-nativen Evolution.
Steinzeit war gestern! Wege der Cloud-nativen Evolution.Steinzeit war gestern! Wege der Cloud-nativen Evolution.
Steinzeit war gestern! Wege der Cloud-nativen Evolution.
 
Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010
 
DNUG Dresden Blend
DNUG Dresden BlendDNUG Dresden Blend
DNUG Dresden Blend
 

Silverlight - Tipps & Tricks für Fortgeschrittene

  • 1. Silverlight Tipp & Tricks für Fortgeschrittene Sebastian Schmitt & André Wussow, SnipClip
  • 2. Agenda (1) Kurze Vorstellung von SnipClip Stolpersteine: Namespace-Änderung Web-Service-Aufrufe TextBox-Bug Überlappende HTML-Elemente Skalierung im Fullscreen-Modus Button-Fokus im Fullscreen-Modus Sebastian Schmitt & André Wussow, SnipClip
  • 3. Agenda (2) Tipps & Tricks: Zentrale Style-Vorgaben Dynamisches Nachladen Screenshots mit Crossdomain-Bildern JavaScript Interaktion Navigation Framework Perspective 3D & PixelShader Out-of-Browser Sebastian Schmitt & André Wussow, SnipClip
  • 4. Kurze Vorstellung von SnipClip Sebastian Schmitt & André Wussow, SnipClip
  • 6. Namespace-Änderung Problem: Bei Namespace-Änderung in VS 2008 erhält man eine irreführende Ausnahme: „Ungültige oder nicht wohlgeformte Anwendung. Überprüfen Sie das Manifest.“ Sebastian Schmitt & André Wussow, SnipClip Lösung: Eigenschaften des Projekts  Silverlight-Tab  Drop-Down-Menü Startup object öffnen und den (einzigen) Eintrag neu auswählen
  • 7. Web-Service-Aufrufe Problem: Bei Aufruf eines Web Services (bzw. generell bei Crossdomain-Aufrufen) erhält man eine CommunicationException Sebastian Schmitt & André Wussow, SnipClip Lösung: Die clientaccesspolicy.xml oder die crossdomain.xml müssen im Root-Verzeichnis des Web Services liegen und für den Client sichtbar sein (Infos: http://msdn.microsoft.com/en-us/library/cc645032(VS.95).aspx)
  • 8. TextBox-Bug Problem: MouseLeftButtonDown -Event funktioniert seit dem Release von Silverlight 2.0 nicht mehr Lösung: Stattdessen GotFocus -Event verwenden Sebastian Schmitt & André Wussow, SnipClip
  • 9. HTML-Überlappung Sebastian Schmitt & André Wussow, SnipClip
  • 10. HTML-Überlappung Lösung: Bei den Parametern des Silverlight-Controls hinzufügen: <param name=&quot;windowless&quot; value=&quot;true&quot; />  Silverlight läuft nicht mehr in eigenem Fenster Sebastian Schmitt & André Wussow, SnipClip Problem: Wenn ein Silverlight-Control in eine HTML-Seite eingebettet wird, kann es nicht von anderen HTML-Elementen überlagert werden (z.B. Facebook-Menüs)
  • 11. HTML-Überlappung Sebastian Schmitt & André Wussow, SnipClip
  • 12. Fullscreen-Skalierung Problem: UserControls werden im Fullscreen-Modus verschoben Lösung: Höhe und Breite im UserControl undefiniert lassen Das VerticalAlignment und das HorizontalAlignment des obersten LayoutRoots auf Center und den RenderTransformOrigin auf Point(0.5,0.5) setzen Den obersten LayoutRoot über eine ScaleTransform skalieren Sebastian Schmitt & André Wussow, SnipClip
  • 13. Button-Fokus im Fullscreen Problem: Beim Wechsel in den Fullscreen-Modus bleibt der Fokus auf dem Fullscreen-Button  wenn der Fullscreen-Modus wieder verlassen wird, liegt der Fokus fälschlicherweise immer noch auf dem Button Sebastian Schmitt & André Wussow, SnipClip Lösung: VisualStateManager.GoToState (EnterFullscreenButton, „Normal“, false);  funktioniert allerdings nur dann, wenn der Mauszeiger sich nach Verlassen des Fullscreen-Modus innerhalb der Silverlight-Anwendung befindet
  • 15. Zentrale Style-Vorgaben Problem: In UserControls (z.B. Dialogen) sollen optische Vorgaben wiederverwendet werden, weil ansonsten der XAML-Code schwer zu warten ist und unnötig aufgebläht wird Lösung: Optische Vorgaben werden zentral in den Ressourcen der App.xaml gespeichert und können über {StaticResource RedGradient} erreicht werden Sebastian Schmitt & André Wussow, SnipClip
  • 16. Dynamisches Nachladen (1) Problem: Wenn eine komplexe Anwendung aus vielen UserControls besteht, benötigt sie bei erstmaligem Laden sehr lange Sebastian Schmitt & André Wussow, SnipClip Lösung: UserControls dynamisch nachladen Dabei besser SilverlightApplication Template zur Auslagerung verwenden (anstatt SilverlightLibrary) Vorteile: zentrale App.xaml für Style-Vorgaben und XAP-Komprimierung der DLLs
  • 17. Dynamisches Nachladen (2) Vorgehensweise: UserControls in neue SilverlightApplication auslagern (z.B. Dialogs.xap ) Zentrale Style-Informationen aus der alten App.xaml in die neue App.xaml kopieren Zur Laufzeit die Dialogs.xap nachladen und aus deren ApplicationManifest.xaml die enthaltenen DLLs per LINQ ermitteln Über Referenzen  Eigenschaften  Copy Local = True kann man die DLLs festlegen, welche in der Dialogs.xap abgelegt werden Sebastian Schmitt & André Wussow, SnipClip
  • 18. Crossdomain-Screenshots Sebastian Schmitt & André Wussow, SnipClip Problem: Wenn man in Silverlight 3 einen Screenshot der Anwendung via WriteableBitmap -Klasse macht, werden Bilder, welche von einer anderen Domain geladen wurden, aus Sicherheitsgründen ignoriert Lösung: Bilder im IsolatedStorage zwischenspeichern und erneut daraus laden Erst danach den Screenshot anfertigen
  • 19. JavaScript Interaktion Benötigt bei Integration div. API‘s z.B.: SocialNetworks (Facebook JS, OpenSocial, …) Silverlight -> JavaScript via ScriptObject JavaScript –> Silverlight via ScriptableType & ScriptableMember Sebastian Schmitt & André Wussow, SnipClip
  • 20. Navigation Framework Ermöglicht das komfortable Navigieren zwischen einzelnen Seiten Vollständige Integration in die Browser-Navigation (vor, zurück) „ MVC“-Prinzip: Frame übernimmt Validierung und stellt Container dar Page ist die eigentliche Seite als UserControl DeepLinking übernimmt eindeutige Identifikation der einzelnen Ressourcen (Pages) UriMapper erledigt „Url Rewriting“ und sorgt für friendly Urls Sebastian Schmitt & André Wussow, SnipClip
  • 21. Navigation Framework Projekt-Vorlage „Silverlight Navigation Application Sebastian Schmitt & André Wussow, SnipClip
  • 22. Perspective 3D & Pixel Shader Shader Effekte (bzw. PixelShader) erlauben pixelgenaue Manipulation gerenderter UI-Elemente Vorgefertigte Effekte (Blur, DropShadow) Eigene Effekte möglich via HLS ( High Level Shader Language ) Normal auf GPU ausgeführt, in Silverlight via Software Algorithmus WPF PixelShader Effects Library (http://www.codeplex.com/wpffx) Bietet u.a. BandedSwirl, ColorKeyAlpha, ColorTone, ContrastAdjust uvm. Perspective 3D unterstützt das Anordnen von Elementen auf 3D-Ebene Sebastian Schmitt & André Wussow, SnipClip
  • 23. Out-of-Browser Silverlight 3 bietet nun die Installation auf den Desktop an Silverlight Applikationen laufen eigenständig ohne Browser Web Service Kommunikation z.B. nach wie vor möglich. Automatische Aktualisierung Sebastian Schmitt & André Wussow, SnipClip
  • 24. Kontaktdaten E-Mail: [email_address] [email_address] Blog: www.paidcontentisback.com Homepage: www.snipclip.com Quellcode: www.snipclip.com/webtech09-tipps.zip

Hinweis der Redaktion

  1. Social Game auf Facebook und MySpace Sammelspaß nach dem Vorbild der erfolgreichen Panini-Stickeralben Nutzer sammeln Videoschnipsel in vorgegebenen Alben, tauschen und wetteifern mit ihren Freunden