Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building a Real World Silverlight4 App


Published on

David Silverlight & Kim Schmidt presented this to the Phoenix Silverlight User Group prior to the Silverlight 4 release. The "Silverlight User Group Starter Kit" shown in the presentation was created by these rockstar developers: Kim Schmidt, David Silverlight, Victor Gaudioso, Cigdem Patlak, Colin Blair, John O'Keefe, Al Pascual, Jose Luis Latorre Millas, Edu Couchez, Caleb Jenkins, David Kelley, & Ariel Leroux - CLICK ON FIRST SLIDE FOR MUSIC

Published in: Technology
  • Be the first to comment

Building a Real World Silverlight4 App

  1. 1. LET’S GET IT STARTED, HA!LET’S GET IT STARTED IN HERE! David Silverlight & Kim Schmidt
  2. 2. David Silverlight Kim Schmidt, Victor Gaudioso, Cigdem Patlak, Colin Blair, John O’Keefe, Al Pascual, Jose Luis Latorre Millas, Edu Couchez, Caleb Jenkins, David Kelley, Ariel Leroux
  3. 3. Why Do I Care About TheSilverlight User Group Starter Kit? See Silverlight 4 features out of demo mode and in real world mode. “Out-of-the-Box” Fully Functional User Group Website Codebase that can applied to any Silverlight 4 application Uses Silverlight 4.0 Solid MVVM-based Architecture focusing on Best Practices Play, Learn, & Contribute to the Site = Community Recognition
  4. 4. What is This Talk About? Getting “hands on” with Silverlight 4 Streaming Live Presentations Making use of OOB functionality Remote Interaction RIA Services Print & Webcam
  5. 5. Why Would I Listen to David & Kim? David Silverlight Kim Schmidt
  6. 6. Overview Project Demo Reviewing Concepts and Architecture Code Walk-Through Information About Joining the Fun!
  7. 7. The Silverlight UG WebsiteStarter Kit SUGWSK – Worst Acronym Ever? The functionality for creating a rich Silverlight User Group Website….or User Group Website….. Or Data Driven Application The project implements Silverlight 4, will explore its new features, and apply them to the User Group functionality Tools used: Silverlight 4 Tools, Blend 4, Simple MVVM Framework
  8. 8. Architecture Silverlight 4 RIA Services Entity Framework MVVM using SimpleMVVM SQL Server Express Membership using Standard .NET Membership provider
  9. 9. Demo: Authentication & SocialNetworking Broadcasting
  10. 10. Membership and AuthenticationBack to the good ole days of .NET with membership and roles if (!AppServices.WebContext.Current.User.IsAuthenticated) { var loginWindow = new LoginRegistrationWindow(); loginWindow.Show(); loginWindow.Closed += new EventHandler(loginWindow_Closed); } else { PrintBadgePage PrintBadgeChildWindow = new PrintBadgePage(); PrintBadgeChildWindow.Show(); }
  11. 11. Membership and AuthenticationBack to the good ole days of .NET with membership and roles  <profile> <properties> <add name="FriendlyName" /> <add name="TwitterID" /> <add name="LinkedInID" /> <add name="Website" /> <add name="Address" /> <add name="City" /> <add name="State" /> <add name="ZipCode" /> <add name="Bio" /> <add name="PhotoURL" /> <add name="FacebookID" /> <add name="LinkedInID" /> </properties> </profile>
  12. 12. Demo: Model – View – ViewModel& RIA Services
  13. 13. Model – View – ViewModel The Model class has the code to contain and access data. The View is usually a control that has code (preferably in the form of XAML markup) that visualizes some of the data in your model and ViewModel. And then there is a class named either ViewModel, PresentationModel, or Presenter that will hold as much of the UI logic as possible.
  14. 14. WCF RIA Services Simplifies the traditional n-tier application pattern by bringing together the ASP.NET and Silverlight platforms. Provides a pattern to write application logic that runs on the mid-tier and controls access to data for queries, changes and custom operations. It also provides end-to-end support for common tasks such as data validation, authentication and roles by integrating with Silverlight components on the client and ASP.NET on the mid-tier.
  15. 15. RIA Services on MVVMWFC RIA Services- Two key aspects: - RIA Services Class Library - Separation Into Partial Classes
  16. 16. Demo: Printing
  17. 17. Printing (Yes, Actual Printing) The Silverlight 4 printing support allows you to specify a XAML tree to print. Overall its pretty simple. It all starts with the PrintDocument class. This class exposes several events that are used to call back to ask you about how to print individual pages. The PrintPage event passes in a PrintPageEventArgs object that contains a couple of pieces of information.  Width and Height - used to help size your XAML before being printed.  PageVisual which is any UIElement-derived element to be printed. Typically this is either a single control (e.g. DataGrid) or a container for other elements. You can also specify the whole page if youre just doing page printing.  HasMorePages - specify whether there are more pages to print with the HasMorePages property.
  18. 18. Printing (Yes, Actual Printing) Simple PrintDocument creation: PrintDocument doc = new PrintDocument(); doc.DocumentName = "Sample Print"; doc.StartPrint += new EventHandler<StartPrintEventArgs>(doc_StartPrint); doc.PrintPage += new EventHandler<PrintPageEventArgs>(doc_PrintPage); doc.Print(); Printing an Element void doc_PrintPage(object sender, PrintPageEventArgs e) { // Stretch to the size of the printed page printSurface.Width = e.PrintableArea.Width; printSurface.Height = e.PrintableArea.Height; // Assign the XAML element to be printed e.PageVisual = printSurface; // Specify whether to call again for another page e.HasMorePages = false; }
  19. 19. Printing ( 1 of 2)Printing an Event Pass void btnPrint_Click(object sender, RoutedEventArgs e) { //Create Event Badge Print Document PrintDocument badge2Print = new PrintDocument(); badge2Print.DocumentName = "EventAttendeeBadge"; //Hide the print section at the end of printing badge2Print.EndPrint += (owner, args) => { printGridCanvas.Visibility = Visibility.Collapsed; }; //Set the PageVisual element to the PrintGrid badge2Print.PrintPage += (owner, args) => { args.PageVisual = printGrid; }; badge2Print.Print(); }
  20. 20. Printing (2 of 2)Preparing a Grid for printing..void preparePrintData() { textBlockAttendeeIdPrint.Text = textBlockAttendeeId.Text; textBlockAttendeeNamePrint.Text = textBlockAttendeeNamePrint.Text; textBlockMeetingTimePrint.Text = textBlockMeetingTime.Text; textBlockMeetingTitlePrint.Text = textBlockMeetingTitle.Text; imageRectanglePrint.Fill = WebcamRectangle.Fill; printGridCanvas.Visibility = Visibility.Visible; }
  21. 21. Demo: Video & WebCam Support Team Member Victor Gaudioso getting our live streaming working for the first time!
  22. 22. Video and WebCam Support ( 1 of 2) void StartCamBtn_Click(object sender, RoutedEventArgs e) { if (!VideoIsPlaying) { VideoIsPlaying = true; if (CaptureDeviceConfiguration.AllowedDeviceAccess || CaptureDeviceConfiguration.RequestDeviceAccess()) { MyVideoBrush.SetSource(CapSrc); WebcamRectangle.Fill = MyVideoBrush; CapSrc.Start(); StartCamBtn.Content = "Stop Web Cam"; } } else { VideoIsPlaying = false; CapSrc.Stop(); StartCamBtn.Content = "Start Web Cam"; } }
  23. 23. Video and WebCam Support (2 of 2) void UploadPictureBtn_Click(object sender, RoutedEventArgs e) { OpenFileDialog pfd = new OpenFileDialog(); pfd.Filter = "PNG Files (*.png)|*.png|All Files (*.*)|*.*"; pfd.FilterIndex = 1; if ((bool)pfd.ShowDialog()) { Stream stream = pfd.File.OpenRead(); BitmapImage bi = new BitmapImage(); bi.SetSource(stream); ImageBrush brush = new ImageBrush(); brush.ImageSource = bi; WebcamRectangle.Fill = brush; } }
  24. 24. Great Ideas NotImplemented, Bloopers, & OtherEntertainment
  25. 25. Code Overview Out-of-the-Box” Fully Functional User Group Website Uses Silverlight 4.0 Solid MVVM Architecture Play, Learn, & Contribute to the Site = Community Recognition Printing & WebCam Functionality Authentication & RIA Services Out-of-Browser Project for Speaker Notification
  26. 26. David Silverlight David KelleySilverlight 3 UGSK Jose Luis Latorre Millas Currently You Can View SL v3.0:   Open Source Project: 
  27. 27. Credits to the Silverlight 4UGSK: Developers & Designers David Silverlight Kim Schmidt Jose Luis Latorre Millas Cigdem Patlak Victor Gaudioso Edu Couchez Colin Blair Al Pasqual
  28. 28. Community Collaboration This website is Open Source! We welcome any developer or designer to extend the application in any way: come play! For example, near the very end of the project as you see here today, Al Pasqual totally replaced our Bing mapping section with his code, totally improving the application overall
  29. 29. Future Enhancements Improved Design Assets Improved Menu Navigation; Menu Extensibility More Intuitive UX Automatic Social Networking Broadcasts when Viewing Online Extend the Platform: Win Phone 7 Series, Zune, Xbox Drag & Drop from Desktop to Browser More Elevated Trust, OOB Functionalities (Calendar) “Fun Factor” UI Elements YOU tell US!
  30. 30. Contact TheSilverlightGroup Company: Us: Email: Phone: 561-212-5707 Email: Phone: 949-735-8505We always appreciate hearing from you. We want to know what you think & create, & we will promote what you do!