Creating a Cover Viewer for Silverlight 1.1 Alpha

Our next example is a Deitel book cover viewer (Fig. 19.20) written in XAML (Fig. 19.21) with a Visual Basic code-behind file (Fig. 19.22) for Silverlight 1.1 Alpha

Creatinga CoverViewerforSilverlight1.1Alpha

Our
next example is a Deitel book cover viewer (Fig. 19.20) written in XAML (Fig.
19.21) with a Visual Basic code-behind file (Fig. 19.22) for Silverlight 1.1
Alpha

Refresh.
This cover viewer retrieves an RSS feed containing the image URIs, and displays
three covers at a time. Clicking the cover on the left or right triggers an
animation that moves the cover the user clicked to the center. You can test a
live version of this application at test.deitel.com/examples/iw3htp4/silverlight/CoverViewer/index.html.

Creating a
Silverlight 1.1 Application in Visual Studio 2008

To
create a Silverlight 1.1 Alpha Refresh project, open Visual Studio 2008 and
select NewProject
inthe File menu.Next,select Visual Basic (for yourlaterprojects,youcanalsose-lect VisualC#),
then Silverlight,
then specify the name and location of your project, and click OK. The project will initially contain a XAML file, Page.xaml, a code-behind file, Page.xaml.vb, Silverlight.js andtheHTMLwrapper, TestPage.html.Youcanworkon this project in
both Visual Studio and Expression Blend at the same time. When you make a
change in one program, then switch to the other, it will alert you that the
file has been modified outside the program and prompt you to reload the file.
Select Yes to
ensure that you include any changes you made in the other program.

At line 7 of Page.xaml (Fig. 19.21), we define the x:Class attribute, which specifies the Class that contains our event handlers, in this case the Page class in Page.xaml.vb
(lines 9–159 of Fig. 19.22). The GUI contains two TextBlocks—titleTextBlock
(lines 230–233) and errorTextBlock (lines 234–236)–and three Images—prevImage
(lines 237–248), currentImage
(lines 249–250) and nextImage
(lines 251–262). Both next-Image and
prevImage havea MouseLeftButtonDown attribute,registeringthe
eventhandlers
for this event.

In lines 10–100 (of which
lines 12–99 are not shown to save space), the nextImageAnimation Storyboard movesandresizes
thethree images sothat the nextImage replaces the currentImage,
the currentImage replaces the prevImage,
and the prevImage
disappears. This animation code was generated
using Expression Blend. To create this ani-mation, first click the Create
newStoryboard button (Fig. 19.4). Name the Storyboard nextImageAnimation, andselect theCreateasa Resourcecheckbox.Then,selectnext-Image andclickRecordKeyframe.Movethetimeslider
to0.5seconds,then
moveandresize the element so
that it replaces currentImage. You can click the Play button to see a preview of the animation.

Storyboard
nextImageAnimation hasa Completed attribute (line 11)that specifies the event handler to be called when the animation is
complete. In lines 101–227 (of which lines
103–226 are not shown to save space), the prevImageAnimation Storyboard moves and resizes the three
images so that the prevImage replaces the currentImage,
the currentImage
replaces the nextImage,
andthe nextImage disappears.Thisanimationalso
has a Completed attribute (line 102) that specifies the event handler to
be called when the animation is complete.

In method Page_Loaded (lines 17–78), line 19 initializes the application using
the InitializeComponent
method located intheautogenerated Page.g.vb file (located inthe obj\Debug directory).ThisfiletakesanyXAMLelements
thathavean x:Name attribute,and uses the FindName method to map each element to a variable of the same
name. This means that we do not have to do this manually, as we did for the
Silverlight 1.0 MovieViewer
example.Italsoallows us touseVisualStudio’sIntelliSense featuretoautocom-plete XAML element names in our code-behind file.

Lines 20–77 try to
download an RSS file, bookCoversRSS.xml
(Fig. 19.23), and create an array of image Uris. First, lines 21–23 create a BrowserHttpWebRequest object that downloads the RSS
file located at the URI created by concatenating the appRootURI variable with bookCoversRSS.xml.
Note that the BrowserHttpWebRequest object does not currently
support cross-domain requests, so the application and the RSS file must be
located on the same server. Lines 26 and 29 get the object used to manipulate
the request’s response, then get the stream associated with that object. Lines
34–35 create an XmlReader object to parse the
RSS content. The XmlReader class provides read-only access to the ele-ments in an
XML document. Lines 38–65 contain a While loop in which the
condition remains True until the XmlReader
has reached the end of the RSS. Lines 41–42 search for an item element in the RSS, and lines 45–53 read the contents of
that element and search for an image element inside the item element. Upon finding an image element, lines 56– 59 add
the contents of the image element (the image’s filename) to the imageURIArray-List asa complete Uri includingtheapplication’s
root Uri (appRootURI).Line69closes
the BrowserHttpWebRequest. Lines 72–73 set the Source attribute of the currentImage and nextImage
to the first and second elements of the imageURIArrayList. Lines 75–76 catch any exceptions and display the error
message in the errorTextBlock.

1<?xml version = "1.0" encoding = "ISO-8859-1" ?>

2<!-- Fig. 19.23: bookCoversRSS.xml -->

3<!-- RSS for Deitel book-cover
viewer -->

4<rss version = "2.0">

5<link rel = "alternate" type = "application/rss+xml"

6title = "Deitel Cover
Viewer" href = "http://www.deitel.com/" />

7<channel>

8<title>Deitel
Cover Viewer</title>

9<link>http://www.deitel.com/</link>

10<description>View
the Deitel book covers.</description>

11<copyright>2008
Deitel And Associates</copyright>

12<language>en-us</language>

13

14<item>

15<title>C How
to Program</title>

16<link>images/chtp5.jpg</link>

17<image>images/chtp5.jpg</image>

18</item>

19<item>

20<title>C++ How
to Program</title>

21<link>images/cpphtp6.jpg</link>

22<image>images/cpphtp6.jpg</image>

</item>

24<item>

25<title>Internet
How to Program</title>

26<link>images/iw3htp4.jpg</link>

27<image>images/iw3htp4.jpg</image>

28</item>

29<item>

30<title>Java
How to Program</title>

31<link>images/jhtp7.jpg</link>

32<image>images/jhtp7.jpg</image>

33</item>

34<item>

35<title>VB How
to Program</title>

36<link>images/vbhtp3.jpg</link>

37<image>images/vbhtp3.jpg</image>

38</item>

39<item>

40<title>Visual
C# How to Program</title>

41<link>images/vcsharphtp2.jpg</link>

42<image>images/vcsharphtp2.jpg</image>

43</item>

44<item>

45<title>Simply
C++</title>

46<link>images/simplycpp.jpg</link>

47<image>images/simplycpp.jpg</image>

48</item>

49<item>

50<title>Simply
VB 2005</title>

51<link>images/simplyvb2005.jpg</link>

52<image>images/simplyvb2005.jpg</image>

53</item>

54<item>

55<title>Simply
Java</title>

56<link>images/simplyjava.jpg</link>

57<image>images/simplyjava.jpg</image>

58</item>

59<item>

60<title>Small
C++ How to Program</title>

61<link>images/smallcpphtp5.jpg</link>

62<image>images/smallcpphtp5.jpg</image>

63</item>

64<item>

65<title>Small
Java</title>

66<link>images/smalljavahtp6.jpg</link>

67<image>images/smalljavahtp6.jpg</image>

68</item>

69</channel>

70</rss>

Fig. 19.23 | RSSforDeitelbook-cover
viewer.

Method
appRootURIGen (Fig. 19.22, lines 151–158) first uses the HtmlPage element to find the AbsolutePath of the page. Lines 155–156 find the last forward slash (/)
of the Uri
andsavethe Uri uptothatlast
slashasastring,usingthe Substring method.Line 157 returns a string concatenating "http://", the Silverlight application’s Host (the domain name or IP address of the server) and the path string.

If so, line 134 begins the nextImageAnimation Storyboard. Upon completion, this Storyboard willcallthe nextImageSwitch method (lines81–102).Line
86checks whetherthere is only one more
book cover to the right, in which case it will increment the currentImageIndex byone (line 87),updatethe Source of prevImage and currentImage (90–91), and hide nextImage
(line 92). If there is more than one book cover to the right, lines 94–100 will
increment the currentImageIndex by one (line 94), update the Source of all three Images (lines 97–99), and
ensure that prevImage is visible (line 100), in case the user is going from
the first book cover (where prevImage
would be hidden) to the second book cover. Methods prevImageHandler (lines 139–148) and prevImageSwitch (lines
105–126) provide the corresponding functionality for prevImage.