Building Rich Web Applications with Microsoft SilverLight

1. Building Rich Web Applications with Microsoft SilverLight Noah Subrin SRA University Spring 2008 Week 3

2. Today’s Agenda (Week 3) • Student Q&A\Feedback • Week 2 Review Questions • Take-home lab review (QuickStart 1) (media, animation, scripting, mouse events) • Chapter 7 – Responding to Input Events • More Additional Resources

3. Housekeeping Items • Toll free audio is available at 1-866-836-1423 Attendee access code: 6259066021 As a courtesy to the class, please mute/unmute your phone by pressing *6 or press the mute key on your phone unless you have something to share with the class

4. Class Slides • The semesters slides are not yet available on the SRA Portal. You may download them from my blog site http://blogs.federalsystems.net or by using Webex File\Transfer function

5. Class Feedback • A student hosted some of our html pages with SL 1.0 control and .xaml files on an Apache web server on Windows OS and was able to serve the pages without any problems • News yesterday (5/20) Novell just released SilverLight for Linux source code (Moonlight) http://reddevnews.com/news/article.aspx?editorialsid=9872

6. Student Q&A\Feedback • Are there any questions or comments anyone would like to share with the class? • A student asked about what is the output of a UserControl project in Blend 1.0. The output is a .xaml file and a .csproj file that can be opened in Visual Studio

7. More Student Q&A • Difference between VS2008 SL templates (“Web site” vs JS app) Web site project has the following: 1 – Inline call to CreateObjectEx 2 – Overrides onerror call to fill a DIV tag containing the error info

8. More Student Q&A • Q - How do I get rid of the squiggly lines when I view the .xaml file in Visual Studio • A – Check 2 things 1 - Right click the .xaml file in VS. Select Open with. Select xml editor (default) and click the ‘Set as Default’ 2 – In Visual Studio Solution Explorer right click the project – choose properties – and select target framework to .Net Framework 2.0

9. Week 2 Review Questions • T/F We can create multiple SilverLight instances per web page • How do we target a particular version of SilverLight in our code? • T/F We need Visual Studio or Blend to create XAML files. • Every SL .xaml file contains at least one ____ object.

10. Week 2 Review Questions (continued) • What 2 properties are used to position a Canvas Object? • What property do we use to set the z-order? • Name some of the basic Shape objects in SL 1.0 • How do we create complex shapes that contain curves and arcs?

11. Week 2 Review Questions (continued) • Name the 2 parts of most Shape objects? • What property do we use to set the alpha or transparency of a UIElement? • What property do we use to selectively draw portions of an element?

12. SilverLight 1.0 QuickStart Review • We will proceed with our review of SL 1.0 Quickstart and take a look at media (audio and video), animations, scripting, and mouse events • Note the Blend 1.0 Quickstart has additional material about creating event handlers and animations within Blend

13. Questions? • Break

14. Demos – More 1.0 Controls • Cool Wall • NeoGeo SilverLight Zooming Control • Page Turner These controls can be found in the Community Gallery of the silverlight.net web site www.silverlight.net/community/communitygallery.aspx

15. Chapter 7 – Responding to Input Events • Event handlers p 144 note these two parameters: sender – instance of the object that raised the event args – additional info about the event

16. Syntax of Adding Event Handlers • Use either of these 2 approaches: 1. In XAML using attribute syntax 2. In JavaScript using element.AddEventListener syntax We can also remove EventHandlers

17. Book Code – Mouse Events • Five mouse events supported by UIElements • No click event but we use MouseLeftButtonDown • OnLoad p 31 three parameters – control,context, rootElement • We have to simulate double clicking by checking for multiple events within a give time frame (p151)

18. Book Code – Event Bubbling • When an event is raised, it is passed on to its ancestor elements • Canvas only raises its own events within the boundaries of its Width and Height • Drag and Drop example p156-7 • Uses UIElement functions CaptureMouse and ReleaseMouseCapture

19. Book Code – Event Bubbling • Building custom scrollbars with JavaScript and XAML • P158 Building a Scrollbar • Let’s look at the xaml in Blend2 • Create the 3 child controls using CreateFromXAML method • Dynamically add resize and mouse events

20. SilverLight 1.0 Stylus Support p166 • Supports stylus for pen digitizers on Tablet PC using “ink” support • MouseEventArgs contains devicetype (Stylus,Mouse, or Touch) • Uses InkPresenter UIElement

21. SilverLight 1.0 also supports Keyboard Events p172 • KeyDown and KeyUp • Not all keystrokes are supported by the SilverLight control • We can find out what keys are pressed by looking at four properties of the keyEventArgs parameter Key, PlatformKeyCode, Shift, Control

22. Summary of Input Events • We can capture mouse and keyboard events and create event handlers for them • There also is support for styluses • Some missing events (such as double click) can be simulated • We can do drag and drop and create custom scrollbars using SL 1.0

23. Additional Resources • SL 1.0 “How Do I?” Videos www.silverlight.net/learn/videocat.aspx?cat=1

24. More Resources – Channel 9 • Channel9.msdn.com/Media/?TagID=209 See Silverlight media, videos, podcasts, screencasts, and photos

25. Optional Take Home Class Exercise • SDK – 1.0 QuickStart (section on sample controls)

26. Next Class Session – May 29 • Review the optional take home exercise (sample controls) • Review Questions • Review Chapter 8 from the course text - Downloading Content on Demand • Q&A

27. Questions ? • Feel free to contact me at noah_subrin@sra.com • Thank you for your participation!