Building Rich Web Applications with Microsoft SilverLight

1
Building Rich Web Applications with Microsoft
SilverLight

• Noah Subrin
• SRA University
• Spring 2008
• Week 3

2
Todays Agenda (Week 3)

• Student QA\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?editorials
  id9872

6
Student QA\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 QA

• 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 QA

• 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.asp
  x

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
• Lets 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/lea
  rn/videocat.aspx?cat1

24
More Resources Channel 9

• Channel9.msdn.com/Media/?TagID209
• 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
• QA

27
Questions ?

• Feel free to contact me at noah_subrin_at_sra.com
• Thank you for your participation!