Building a real world silverlight4 Application


Published on

Given to the Phoenix Silverlight User Group by Kim Schmidt and David Silverlight, and Victor Gaudioso from afar, and many people contributed to the app. They are mentioned in the slides.

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Mention that they can benefit from our project. “Hey, we have been working on this project for over a year. You can just download the source code and benefit from our work”
  • 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. Typically, a separated presentation pattern is implemented to make as much of your UI-related code unit testable as possible. Because the code in your views is notoriously hard to unit test, these separated presentation patterns help you place as much of the code as possible in a testable ViewModel class. Ideally, you would not have any code in your views, just some XAML markup that defines the visual aspects of your application and some binding expressions to display data from your ViewModel and Model. When it comes to multi-targeting, a separated presentation pattern has another significant advantage. It allows you to reuse all of your UI logic, because you have factored out that logic into separate classes. Although it's not impossible to multi-target some of the code in your views (the XAML, controls, and code-behind), we've found that the differences between WPF and Silverlight are big enough that multi-targeting your XAML is not practical. XAML has different abilities, and the controls that are available for WPF and Silverlight are not the same. This not only affects the XAML, but it also affects the code-behind.Although it's not likely that you are able to reuse all of your UI-related code, a separated presentation pattern helps you reuse as much of the presentation logic as possible.
  • Making this HappenOn the DomainServices folder, I have:1. Copied the namespaces, using definitions and related methods for that Entity. 2. Comment out the //[EnableClientAccess()] - there must be only one. Which I have left on the root for reference and regenerating over.3. Added the magic word "Partial", being it a public partial class instead of an alone class... this allows having many filmany files, one for entity.4. Copied the methods from the original file and once done, delete or comment them from the original file.5. Name the resulting file as [Name Of The DomainService].[Name Of the Entity].cs --> This allows having them ordered by name and having a quick access to them.
  • Building a real world silverlight4 Application

    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 Not Implemented,Bloopers, & Other Entertainment
    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 Us: Company: TheSilverlightGroup Email: Phone: 561-212-5707We always appreciate hearing from you. We want to know what you think & create, & we will promote what you do!