Building a Real World Silverlight4 App

• 1. LETS GET IT STARTED, HA!LETS GET IT STARTED IN HERE! David Silverlight & Kim Schmidt

2. David Silverlight Kim Schmidt, Victor Gaudioso, Cigdem Patlak, Colin Blair,John OKeefe, Al Pascual, Jose Luis Latorre Millas, Edu Couchez, Caleb Jenkins,David Kelley, Ariel Leroux 3. Why Do I Care About TheSilverlight User Group Starter Kit? See Silverlight 4 features out of demo mode and in realworld 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 = CommunityRecognition 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. Why Would I Listen to David & Kim?David Silverlight Kim Schmidt 6. Overview Project Demo Reviewing Concepts and Architecture Code Walk-Through Information About Joining the Fun! 7. The Silverlight UG WebsiteStarter Kit SUGWSK Worst Acronym Ever? The functionality for creating a rich Silverlight User GroupWebsite.or User Group Website.. Or Data DrivenApplication The project implements Silverlight 4, will explore its newfeatures, and apply them to the User Group functionality Tools used: Silverlight 4 Tools, Blend 4, Simple MVVMFramework 8. Architecture Silverlight 4 RIA Services Entity Framework MVVM using SimpleMVVM SQL Server Express Membership using Standard .NET Membershipprovider 9. Demo: Authentication & SocialNetworking Broadcasting 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. Membership and AuthenticationBack to the good ole days of .NET with membership and roles 12. Demo: Model View ViewModel& RIA Services 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. WCF RIA Services Simplifies the traditional n-tier application pattern bybringing together the ASP.NET and Silverlight platforms. Provides a pattern to write application logic that runs onthe mid-tier and controls access to data forqueries, changes and custom operations. It also provides end-to-end support for common tasks suchas data validation, authentication and roles by integratingwith Silverlight components on the client and ASP.NET onthe mid-tier. 15. RIA Services on MVVMWFC RIA Services- Two key aspects: - RIA Services Class Library - Separation Into Partial Classes 16. Demo: Printing 17. Printing (Yes, Actual Printing) The Silverlight 4 printing support allows you to specify a XAML tree toprint. Overall its pretty simple. It all starts with the PrintDocument class. Thisclass exposes several events that are used to call back to ask you abouthow to print individual pages. The PrintPage event passes in a PrintPageEventArgs objectthat 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. Printing (Yes, Actual Printing) Simple PrintDocument creation: PrintDocument doc = new PrintDocument(); doc.DocumentName = "Sample Print"; doc.StartPrint += new EventHandler(doc_StartPrint); doc.PrintPage += new EventHandler(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. 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. 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. Demo: Video & WebCam SupportTeam Member Victor Gaudioso getting our livestreaming working for the first time! 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. 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. Great Ideas NotImplemented, Bloopers, & OtherEntertainment 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 = CommunityRecognition Printing & WebCam Functionality Authentication & RIA Services Out-of-Browser Project for Speaker Notification 26. David Silverlight David KelleySilverlight 3 UGSK Jose Luis Latorre Millas Currently You Can View SL v3.0: http://www.seattlesilverlight.net http://www.sfsug.com Open Source Project: http://silverlightugstarter.codeplex.com/ 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. Community Collaboration This website is Open Source! We welcome any developer or designer to extend theapplication in any way: come play! For example, near the very end of the project as you seehere today, Al Pasqual totally replaced our Bingmapping section with his code, totally improving theapplication overall 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. Contact TheSilverlightGroup Company: Us: Email: [email protected] Phone: 561-212-5707 Email: [email protected] Phone: 949-735-8505We always appreciate hearing from you. We want to know what you think & create, & we will promote what you do!