Home | | Internet & World Wide Web HOW TO PROGRAM | | Internet Programming | | Web Programming | Creating Controls - Creating a Movie Viewer for Silverlight 1.0

Chapter: Internet & World Wide Web HOW TO PROGRAM - Rich Internet Application Client Technologies - Microsoft ilverlight and Rich Internet Applications

| Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail |

Creating Controls - Creating a Movie Viewer for Silverlight 1.0

We use a TextBlock element to display Silverlight Movie Viewer at the top of the page.

3. Creating Controls


We use a TextBlock element to display Silverlight Movie Viewer at the top of the page. Create this element using Expression Blend’s TextBlock tool, name the element titleText, then change to the Solid color brush in the Brushes inspector and use the color selector to make the text white. Adjust the text size in the Text inspector to 24 (Fig. 19.8).


Next, we create another Canvas element called controls, using the Canvas tool. The controls Canvas will contain the application’s buttons, which are themselves Canvases. This Canvas is a child of the Page Canvas element. Create this Canvas at the bottom of the application, spanning the width of the application. Set the Height to 160 and make sure that the Canvas is at the bottom of the application by moving it until it snaps into place.

Creating the Video Thumbnail Buttons

For each video, we create a button consisting of the video’s thumbnail and title. Double-click the controls Canvas with the Selection tool to activate it, then create four new Can vases in the controls Canvas. Set each Canvas’s Width to 120 and Height to 114. In each Canvas, create an Image element, with the Source attribute pointing to the video’s thumb-nail JPEG image, for example baileyThumb.jpg (Fig. 19.9). You can select the Image tool by clicking the Asset Library button (Fig. 19.3), checking Show All and selecting Image (Fig. 19.10). Set the Image’s Width and Height to 120 and 90, and place it at the top of the Canvas. Add a TextBlock containing the text Crazy Dog. Do the same for the other three Canvases, setting the Image’s Sources to featherAndHammerThumb.jpg, apollo15Launch-Thumb.jpg and F35Thumb.jpg. The TextBlocks for the three Canvases should contain Gravity, Apollo 15 and F35 Landing, respectively. Name the Canvases crazyDogButton, gravityButton, apollo15Button, and f35Button, and space them evenly across the controls Canvas. Finally, to make each of these Canvases appear to act like a button, we will set their Cursor properties to Hand in the Common Properties inspector. This way, the us-er’s cursor will change to a hand when the cursor is moved over each button Canvas.

Creating the Video Playback Control Buttons

Next, we create a play button, a stop button, a pause button, and a full-screen button. These buttons are all contained in the controls Canvas. To create the play button, first create a Canvas named playButton, then set its Width and Height to 30. Set the RadiusX and RadiusY to 2 to give the button rounded corners. These properties are located in the advanced properties section of the Appearance inspector (Fig. 19.11). Inside this Canvas, use the Rectangle tool to draw a Rectangle with the same width and height as the Canvas, and set its background to a gradient going from dark blue to light blue. Then, using the Pen tool, draw two Paths to make an arrow pointing right (a play button). Use the Pen tool to click once at each endpoint of the line. After drawing each line, use the Select tool to move the line into place. The Path element allows you to draw shapes that include curves and arcs, but here we are just using it to draw simple lines. Set each Path’s Stroke

color to white. Set the StrokeThickness property in the Appearance inspector to 4. Set each Path’s StrokeEndLineCap and StrokeStartLineCap to Round in the Appearance inspector.

Finally, set the Cursor property of the playButton Canvas to Hand.


Copy the playButton Canvas and paste it three times. Move one copy just to the right of the playButton, then move another to the right side of the application. Double-click the button to the right of the playButton to make it the active Canvas, and remove the Paths. This will be the stop button. Draw a Rectangle with a Width of 14 and Height of 18. Set the RadiusX and RadiusY to 2 in the Appearance inspector, then set the Fill to solid white and the Stroke to No Brush. Finally, set the Name of the Canvas to stopButton.


Double-click the button at the far right of the application to make it the active Canvas, and remove the Paths. This will be the full-screen button that will enable the user to toggle between a full-screen view and a browser window view of the application. Draw a Rectangle with a Width and Height of 22. Set the RadiusX, RadiusY and StrokeThickness to 2, the Fill to No Brush, and the Stroke to solid white. Then, draw a second Rectangle with a Width and Height of 10, starting at the bottom-left of the previous Rectangle. Give this Rectangle the same StrokeThickness and Fill and Stroke colors as the larger Rectangle. Finally, name this Canvas fullscreenButton.


Double-click the button that is still on top of the playButton to make it the active Canvas, and remove the Paths. This will be the pause button. Draw two vertical paths with the same properties as the paths in the play button, and space them apart by a few pixels. Name this Canvas pauseButton and set its Visibility attribute to Collapsed (i.e., hidden). We’ll programmatically display this button when it is needed.


The application displays the current time of the video in hh:mm:ss format in the time Text TextBlock, located inside the timeCanvas Canvas. To create this element, first create a Canvas named timeCanvas to the left of the full-screen button, and give it a Width of 75 and Height of 23. Inside this Canvas, create a Rectangle that takes up the entire Canvas.


Set this Rectangle’s RadiusX and RadiusY to 2, and its StrokeThickness to 1. Set the Stroke color to solid black, and the Fill to a gradient going from grey to white. Create a TextBlock named timeText using the TextBlock tool, and set its initial text value to "00:00:00". Use the default font (Lucida Sans Unicode) and font size (14.667). This TextBlock’s text value will be updated programmatically in our JavaScript code-behind file.


Creating the Volume and Timeline Controls


The application allows the user to select the volume level through a volume control. To cre-ate this control, first create a Canvas named volumeCanvas with a Width of 15 and a Height of 30 to the right of the full-screen button. Use the Rectangle tool to create a vertical Rect-angle (the slider). Give the Rectangle a Width of 4 and Height of 30. Set the Fill of the Rect-angle to light grey. Set the Stroke of the Rectangle to black, with a StrokeThickness of 1.


Use the Rectangle tool to create a horizontal Rectangle (to mark the current volume). Give the Rectangle a Width of 14 and Height of 2. Set its Fill to white, its Stroke to No Brush and its Opacity to 50% (in the Appearance inspector). Center the horizontal Rectangle on the center of the vertical Rectangle. Finally, name the horizontal Rectangle volumeHead

and the Canvas volumeCanvas.


Next, we create a video timeline that serves two purposes. The timeline acts as a progress bar while the video is being downloaded. This is accomplished by having a dark grey Rectangle with a Width of 400 located underneath a light grey Rectangle with an initial Width of 0. The light Rectangle’s Width is set programmatically in the JavaScript code-behind file to indicate the download progress. Also, a vertical Rectangle acts as the playhead, indicating the current playback progress of the video. To create the video time-line, first create a Canvas named timelineCanvas to the right of the stop button. Give this Canvas a Width of 400 and a Height of 20, and a Cursor of Hand. Inside this Canvas, create a Rectangle named timelineRectangle with a Width of 400 and a Height of 4. Set its StrokeThickness to 1, its Fill to dark grey and its Stroke to black. Center the Rectangle vertically, then copy and paste the Rectangle. Name the copy downloadProgress-Rectangle, set its Fill to a lighter grey and set its Width to 0. Note that because download-ProgressRectangle appears after the timelineRectangle in the Objects and Timeline inspector, it appears on top of the timelineRectangle. You can also specify the z-order of elements (discussed in Section 5.6) using an object’s ZIndex attribute. Higher ZIndex integer values position the element closer to the foreground and in front of other elements with smaller ZIndex values.


Create a Rectangle named playHead with a Width of 2 and a Height of 20. Place this Rectangle at the far left of the Canvas and center it vertically. Set this Rectangle’s Fill to

No brush, its StrokeThickness to 1, its Stroke to white, and its Opacity to 50%.


Using a MediaElement to Display Audio/Video

The MediaElement allows you to include video and/or audio in your Silverlight applica-tion. It supports WMV/VC-1 (including high-definition video), WMA and MP3 for-mats.


First, create a Canvas named movieViewCanvas and set its Height to 260 and Width to 640. Inside the Canvas, add a MediaElement named movieMediaElement. To access the MediaElement tool, click the Asset Library button (Fig. 19.3), check Show All and select MediaElement (Fig. 19.10). Set the MediaElement’s Width and Height to those of the Canvas. Set the Source attribute to point to bailey.wmv in the Media inspector.


This Canvas also contains a Play button overlaid on the video. First, create a Canvas named playOverlayCanvas with an Opacity of 60%, a Width of 200 and a Height of 180. Inside this Canvas, create a Rectangle with the same Width and Height as the Canvas, a Fill of black, a Stroke of No brush, and a RadiusX and RadiusY of 40. Create an Ellipse using the Ellipse tool with a Width of 100 and a Height of 100. Set its Fill to No brush, its Stroke to white, and its StrokeThickness to 6. In the middle of this Ellipse, draw two Paths in the shape of a right arrow, both with a Width and Height of 30, a StrokeThickness of 6, and a StrokeStartLineCap and StrokeEndLineCap of Round. Underneath the Ellipse, create a TextBlock containing the text Play. Set the font size to 36 in the Text inspector.


Finally, set the playOverlayCanvas Visibility attribute to Collapsed, since we will show this Canvas programmatically.


Creating Event Handlers in XAML


Expression Blend 2 August Preview does not currently have a user interface to set event handlers, so we will manually set them in Scene.xaml (Fig. 19.12). The timelineTimer Storyboard’s Completed attribute (line 8) registers an event that calls the updateTime function located in our JavaScript code-behind file (Fig. 19.13) when the animation has completed. This JavaScript function updates user-interface elements such as the timeline marker.


1    <!-- Fig. 19.12: Page.xaml -->


2    <!-- Movie Viewer user interface described in XAML. -->


4    <Canvas xmlns="http://schemas.microsoft.com/client/2007"


5          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"


6          Width="640" Height="480" x:Name="Page" Loaded="canvasLoaded">


7          <Canvas.Resources>


8                 <Storyboard x:Name="timelineTimer" Completed="updateTime" >


<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"

10   Storyboard.TargetName="invisibleRectangle"

11   Storyboard.TargetProperty="(UIElement.Opacity)">

12   <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>

13   <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>


14   </DoubleAnimationUsingKeyFrames>


15   <ColorAnimationUsingKeyFrames BeginTime="00:00:00"



16   Duration="00:00:00.0010000" Storyboard.TargetName="Page"

17   Storyboard.TargetProperty="(Panel.Background).

18   (GradientBrush.GradientStops)[1].(GradientStop.Color)">

19                            <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF474747"/>


20                      </ColorAnimationUsingKeyFrames>


21                </Storyboard>


22         </Canvas.Resources>


23         <Canvas.Background>


24                <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">


25                      <GradientStop Color="#FF000000" Offset="0"/>


26                      <GradientStop Color="#FF505050" Offset="1"/>


27                </LinearGradientBrush>


28         </Canvas.Background>


29         <Rectangle Visibility="Collapsed" x:Name="invisibleRectangle"


30                Width="21" Height="16" Fill="#FFFFFFFF" Stroke="#FF000000"


31                Canvas.Left="7" Canvas.Top="103"/>


32         <TextBlock Width="278" Height="60" Canvas.Left="192" Canvas.Top="8"


33                FontSize="24" TextWrapping="Wrap" x:Name="titleText"><Run


Foreground="#FFFFFFFF" Text="Silverlight Movie Viewer"/></TextBlock>

35         <Canvas x:Name="controls" Width="640" Height="160" Canvas.Top="320">


36                <Canvas MouseLeftButtonDown="movieThumbHandler" Cursor="Hand"


37                      Width="120" Height="114" Canvas.Left="33" Canvas.Top="38"


38                      x:Name="crazyDogButton">


39                      <Image Width="120" Height="90" Source="baileyThumb.jpg"/>


40                      <TextBlock Width="78" Height="24" Canvas.Left="23"

41            Canvas.Top="90" TextWrapping="Wrap"><Run


42                            oreground="#FFFFFFFF" Text="Crazy Dog"/></TextBlock>


43                </Canvas>


44                <Canvas MouseLeftButtonDown="movieThumbHandler" Width="120"


45                      Height="114" Canvas.Left="184" Canvas.Top="38" Cursor="Hand"


46                      x:Name="gravityButton">


47                      <Image Width="120" Height="90"

48                            Source="featherAndHammerThumb.jpg"/>


49                      <TextBlock Width="52" Height="24" Canvas.Top="90"

50            TextWrapping="Wrap" Canvas.Left="34"><Run


                                 Foreground="#FFFFFFFF" Text="Gravity"/></TextBlock>




                     <Canvas MouseLeftButtonDown="movieThumbHandler" Width="120"


                           Height="114" Canvas.Left="335" Canvas.Top="38" Cursor="Hand"




                           <Image Width="120" Height="90" Source="apollo15LaunchThumb.jpg"/>


<TextBlock Width="72" Height="24" Canvas.Left="26"

58   Canvas.Top="90" TextWrapping="Wrap">

59   <Run Foreground="#FFFFFFFF" Text="Apollo 15"/></TextBlock>

60   </Canvas>


61   <Canvas MouseLeftButtonDown="movieThumbHandler" Width="120"


62   Height="114" Canvas.Left="487" Canvas.Top="38" Cursor="Hand"


63   x:Name="f35Button">


64   <Image Width="120" Height="90" Source="F35Thumb.jpg"/>


65   <TextBlock Width="88" Height="24" Canvas.Left="16"

66   Canvas.Top="90" TextWrapping="Wrap"><Run


67   Foreground="#FFFFFFFF" Text="F35 Landing"/></TextBlock>


68   </Canvas>


70   <!-- define the buttons -->


71   <Canvas MouseLeftButtonDown="playAndPauseButtonEventHandler"


72   Width="30" Height="30" x:Name="playButton" Cursor="Hand"


73   Canvas.Left="10">


74   <Rectangle Stroke="#FF000000" Width="30" Height="30"



75   RadiusX="4" RadiusY="4">

76   <Rectangle.Fill>

77   <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5"

78   MappingMode="RelativeToBoundingBox" SpreadMethod="Pad">

79   <GradientStop Color="#FF0000FF" Offset="0"/>

80   <GradientStop Color="#FF0084FF" Offset="1"/>

81   </LinearGradientBrush>

82   </Rectangle.Fill>


83   </Rectangle>


84   <Path Stretch="Fill" Stroke="#FFFFFFFF"



85   StrokeThickness="4" Width="12" Height="12" Data="M223,388

86   L244,403" StrokeEndLineCap="Round" StrokeStartLineCap="Round"

87   Canvas.Left="10" Canvas.Top="4"/>



88   <Path Stretch="Fill" Stroke="#FFFFFFFF"

89   StrokeThickness="4" Width="12" Height="12" Data="M223,388

90   L244,403" RenderTransformOrigin="0.5,0.5"

91   StrokeEndLineCap="Square" StrokeStartLineCap="Round"

92   Canvas.Left="10" Canvas.Top="13">

93   <Path.RenderTransform>

94   <TransformGroup>

95   <ScaleTransform ScaleX="1" ScaleY="-1"/>

96   <SkewTransform AngleX="0" AngleY="0"/>

97   <RotateTransform Angle="0"/>

98   <TranslateTransform X="0" Y="0"/>

99   </TransformGroup>

100  </Path.RenderTransform>


101  </Path>


102  </Canvas>


103  <Canvas x:Name="timeCanvas" Width="75" Height="23" Canvas.Left="497"


104  Canvas.Top="3">


105  <Rectangle Stroke="#FF000000" Width="75" Height="25" RadiusX="2"


106  RadiusY="2" StrokeThickness="1">


107  <Rectangle.Fill>



108  <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

109  <GradientStop Color="#FF9A9A9A" Offset="0"/>

110  <GradientStop Color="#FFFFFFFF" Offset="1"/>

111  </LinearGradientBrush>

112                         </Rectangle.Fill>


113                   </Rectangle>


114                   <TextBlock x:Name="timeText" Width="68" Height="17"


115                         Foreground="#FF000000" TextWrapping="Wrap" Canvas.Left="4"


116                         Canvas.Top="3"><Run Text="00:00:00"/></TextBlock>


117             </Canvas>


118             <Canvas MouseLeftButtonDown="volumeHandler" Cursor="Hand"


119                   x:Name="volumeCanvas" Width="15" Height="30"


120                   Canvas.Left="616">


121                   <Rectangle Fill="#FF868686"


122                         Stroke="#FF000000" Width="4" Height="30" Canvas.Left="6"/>


123                   <Rectangle Opacity="0.5" x:Name="volumeHead" Width="14"


124                         Height="2" Fill="#FFFFFFFF" Stroke="#FFFFFFFF"


125                         StrokeThickness="0" RadiusX="0" RadiusY="0" Canvas.Left="1"


126                         Canvas.Top="14"/>


127             </Canvas>


128             <Canvas x:Name="timelineCanvas" Width="401" Height="26"


129                   Canvas.Left="87" Canvas.Top="2" Cursor="Hand" >


130                   <Rectangle x:Name="timelineRectangle" Width="400" Height="4"


131                         Fill="#FFA6A6A6" Stroke="#FF000000" Canvas.Top="11"/>


132                   <Rectangle MouseLeftButtonDown="timelineHandler"


133                         x:Name="downloadProgressRectangle" Width="0"


134                         Height="4" Fill="#FFD5D5D5" Stroke="#FF000000"


135                         Canvas.Top="11"/>


136                   <Rectangle Opacity="0.5" x:Name="playHead" Width="2" Height="20"


137                         Stroke="#FFFFFFFF" Canvas.Left="1" Canvas.Top="3"/>


138             </Canvas>


139             <Canvas MouseLeftButtonDown="playAndPauseButtonEventHandler"


Width="30" Height="30" x:Name="pauseButton" Cursor="Hand”

141                   Canvas.Left="10" Visibility="Collapsed" >


142                   <Rectangle Stroke="#FF000000" Width="30" Height="30"


143                         RadiusX="4" RadiusY="4">



145  <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5"

146  MappingMode="RelativeToBoundingBox" SpreadMethod="Pad">

147  <GradientStop Color="#FF0000FF" Offset="0"/>

148  <GradientStop Color="#FF0084FF" Offset="1"/>

149  </LinearGradientBrush>

150                         </Rectangle.Fill>


151                   </Rectangle>


152                   <Path Stretch="Fill" Stroke="#FFFFFFFF"


153                         StrokeThickness="4" Width="4" Height="18"


154                         RenderTransformOrigin="0.5,0.5" StrokeEndLineCap="Round"


155                         StrokeStartLineCap="Round" Canvas.Left="9"


156                         StrokeDashCap="Flat" Canvas.Top="6" Data="M223,388L223,308"/>


157                   <Path Stretch="Fill" Stroke="#FFFFFFFF"


158                         StrokeThickness="4" Width="4" Height="18"


159                         Data="M223,388L223,403" RenderTransformOrigin="0.5,0.5"


160                         StrokeEndLineCap="Round" StrokeStartLineCap="Round"


161                         Canvas.Left="17" StrokeDashCap="Flat" Canvas.Top="6"/>


162             </Canvas>


163             <Canvas MouseLeftButtonDown="toggleFullScreen" Width="30"


164                   Height="30" x:Name="fullscreenButton" Cursor="Hand"


165                   Canvas.Left="582" Canvas.Top="1">


166                   <Rectangle Stroke="#FF000000" Width="30" Height="30"


167                         RadiusX="4" RadiusY="4">



169  <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5"

170  MappingMode="RelativeToBoundingBox" SpreadMethod="Pad">

171  <GradientStop Color="#FF0000FF" Offset="0"/>

172  <GradientStop Color="#FF0084FF" Offset="1"/>

173  </LinearGradientBrush>

174                         </Rectangle.Fill>


175                   </Rectangle>


176                   <Rectangle Width="22" Height="22" Stroke="#FFFFFFFF"


177                         StrokeEndLineCap="Square" StrokeStartLineCap="Round"


178                         StrokeThickness="2" RadiusX="2" RadiusY="2" Canvas.Left="4"


179                         Canvas.Top="4"/>


180                   <Rectangle Width="10" Height="10" Stroke="#FFFFFFFF"


181                         StrokeEndLineCap="Square" StrokeStartLineCap="Round"


182                         StrokeThickness="2" RadiusX="2" RadiusY="2" Canvas.Left="4"


183                         Canvas.Top="16"/>


184             </Canvas>


185             <Canvas MouseLeftButtonDown="stopButtonEventHandler" Width="30"


186                   Height="30" x:Name="stopButton" Cursor="Hand" Canvas.Left="46">


187                   <Rectangle Stroke="#FF000000" Width="30" Height="30"


188                         RadiusX="4" RadiusY="4">



190  <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5"

191  MappingMode="RelativeToBoundingBox" SpreadMethod="Pad">

192  <GradientStop Color="#FF0000FF" Offset="0"/>

193  <GradientStop Color="#FF0084FF" Offset="1"/>

194  </LinearGradientBrush>

195                         </Rectangle.Fill>


196                   </Rectangle>


197                   <Rectangle RadiusX="2" RadiusY="2" Width="14"


198                         Height="18" Canvas.Left="8" Fill="#FFFFFFFF"


199                         StrokeThickness="0" Canvas.Top="6"/>


200             </Canvas>


201      </Canvas>


202      <Canvas x:Name="movieViewCanvas" Width="640" Height="260"


203             Canvas.Top="46">


204             <MediaElement AutoPlay="false" MediaEnded="movieEndedHandler"


205                   MediaOpened="movieOpenedHandler" x:Name="movieMediaElement"


206                   Width="640" Height="260" Source="bailey.wmv" />


207             <Canvas MouseLeftButtonDown="playAndPauseButtonEventHandler"


208                   Width="200" Height="180" Canvas.Left="220" Canvas.Top="35"


209                   Opacity="0.6" Visibility="Collapsed" x:Name="playOverlayCanvas">


210                   <Canvas.RenderTransform>



212  <ScaleTransform ScaleX="1" ScaleY="1"/>

213  <SkewTransform AngleX="0"  AngleY="0"/>

214  <RotateTransform Angle="0"/>

215  <TranslateTransform X="0"  Y="0"/>

216                         </TransformGroup>


217                   </Canvas.RenderTransform>


218                   <Rectangle Fill="#FF000000"


219                         Width="200" Height="180" RadiusX="40"


220                         RadiusY="40" Canvas.Left="0" Canvas.Top="0"/>


221                   <Ellipse Stroke="#FFFFFFFF" StrokeThickness="6"


222                         Width="100" Height="100" Canvas.Left="49" Canvas.Top="14"/>


223                   <Path Fill="#FF010000" Stretch="Fill" Stroke="#FFDFDFDF"


224                         StrokeThickness="6" Width="30" Height="30" Canvas.Left="86"


225                         Canvas.Top="36" Data="M295,189 L319,213"


226                         StrokeEndLineCap="Round" StrokeStartLineCap="Round"/>


227                   <Path Fill="#FF010000" Stretch="Fill" Stroke="#FFDFDFDF"


228                         StrokeThickness="6" Width="30" Height="30" Canvas.Left="86"


229                         Canvas.Top="61" Data="M295,189 L319,213"


230                         RenderTransformOrigin="0.5,0.5" StrokeEndLineCap="Round"


231                         StrokeStartLineCap="Round">



233  <TransformGroup>

234  <ScaleTransform ScaleX="1" ScaleY="1"/>

235  <SkewTransform AngleX="0" AngleY="0"/>

236  <RotateTransform Angle="-90"/>

237  <TranslateTransform X="0" Y="0"/>

238  </TransformGroup>

239                         </Path.RenderTransform>


240                   </Path>


241                   <TextBlock Width="74" Height="49" Canvas.Left="64"


242                         Canvas.Top="120" FontSize="36" Foreground="#FFFFFFFF"


243                         Text="Play" TextWrapping="Wrap"/>


244             </Canvas>


245      </Canvas>



Fig. 19.12 | Movie Viewer user interface described in XAML.


Configuring the Event Handlers


For each of the thumbnail button Canvases (crazyDogButton, gravityButton, apollo15Button and f35Button), we specify a MouseLeftButtonDown attribute (lines 36, 44, 53 and 61, respectively). This registers the movieThumbHandler function (Fig. 19.13, lines 157–178) as the event handler to call when the user clicks one of these Canvases with the left mouse button. Each of the playback control buttons also has a MouseLeftButton-Down attribute (lines 71, 139, 163, 185 and 207 for the play, pause, full-screen, stop, play overlay buttons, respectively). Each of these buttons has a separate event handler function.


The volumeCanvas has a MouseLeftButtonDown attribute (line 118) that allows the user to change the volume by calling volumeHandler (Fig. 19.13, lines 239–245) when the user clicks somewhere on the volumeCanvas.


The downloadProgressRectangle has a MouseLeftButtonDown attribute (line 132) that allows the user to jump anywhere in the video by calling the timelineHandler func-tion (lines 225–236, Fig. 19.13) when the user clicks somewhere on the downloadPro-gressRectangle.


The movieMediaElement’s MediaOpened attribute (line 205) is set to movieOpened Handler. When a new video is opened, function movieOpenedHandler (Fig. 19.13, lines 137–143) is called to ensure that the Play overlay button is visible, and to start the timer that keeps the timeline and time up to date. When you open a movie the MediaElement begins playing the movie by default. We don’t want this to happen until the user clicks the play button, so we set its AutoPlay attribute to false (line 204). The movieMediaEle-ment’s MediaEnded attribute (line 204) is set to movieEndedHandler. When the video finishes playing, the movieEndedHandler function (Fig. 19.13, lines 146–155) is called to reset the video to the beginning and to ensure that the Play overlay button is visible.


Registering Event Handlers in JavaScript

An alternative to registering event handlers in the XAML is to register event handlers in the JavaScript code. While this technique requires a few more lines of code, it has two key advantages. First, it keeps the application’s logic (in this case, event handling) separate from the application’s user interface. Second, it allows you to add and remove event lis-teners dynamically. The JavaScript for adding an event handler is:


variableName = objectName.addEventHandler( "EventName", eventHandler );


The JavaScript for removing an event handler is:


objectName.removeEventHandler( "EventName", variableName );


When an event is registered in JavaScript using the addEventListener method, we must assign the return value of the method to a variable. This way, if we wish to remove an event listener using the removeEventListener, we can remove only that specific event listener.


Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.