Day 2 (Saturday) was packed full of interesting presentations.  From about 4:30 to 5:00, I did a presentation on how to build animations with blend and use them in Silverlight.  Here is the description:

In this presentation, I’ll talk about the implementation details of building the picture slider used in the Community Media Browser preview hosted at http://labs.leveragesoftware.com/gallery.html .  In this informal talk I’ll discuss how LoadXaml() was critical to this process as well as other tricks.  Because the picture slider is running from a live web feed, there
is no way to know ahead of time how many picture we may have to scroll so clipping type solutions just don’t make sense.  Time permitting, we’ll talk about other issues involved in building this application and of course take questions.

The slides and presentation are all bundled up in this zip file if you would like to download them.

http://peterkellner.net/misc/SilverLightSF.zip

silverlightdevcamp

SilverlightDevCampSF is an upcoming gathering, inspired by BarCamp, to build Silverlight applications, It’s organized by volunteers & Silverlight enthusiasts, with attendance free to all. At this event, I will be presenting a 30 minute presentation on how to build animation into a Silverlight application. I’ll talk about the implementation details of building the picture slider used in the Community Media Browser preview hosted at

http://labs.leveragesoftware.com/gallery.html .  In this informal talk I’ll discuss how LoadXaml() was critical to this process as well as other tricks.  Because the picture slider is running from a live web feed, there is no way to know ahead of time how many picture we may have to scroll so clipping type solutions just don’t make sense.  Time permitting, we’ll talk about other issues involved in building this application and of course take
questions.

Searchlight was born from the desire to show the outstanding ability of Silverlight to create a compelling web application using existing infrastructure technology.  The products was developed working with Leverage Software, a
San Francisco company dedicated to delivering first class communities for it’s customer’s, Peter Kellner (the Silverlight technology guy), and Uday Gajendar, the design specialist.  Our efforts can be viewed by going to the LeverageSoftware Labs Link Here.  Simply follow the directions on that web page to run the web application. In this article, many of the Silverlight features in Searchlight are discussed.

Background

Searchlight was built to run with the first Alpha 1.1 version of Silverlight shipped from Microsoft.  Searchlight takes advantage of Leverage Software’s extensive web service api to provide real time data based on those web feeds.  Currently, Leverage Software’s  main access to the Dwell Community is an html application that can be found at
http://dwell.leveragesoftware.com/.  Using the Silverlight Alpha 1.1 combined with

Microsoft’s Expression Blend, a new compelling interface to the Dwell Community was built.  Below is a screen shot of the application running after it has been loaded for the first time.

Dynamic Data Content

Silverlight supports access to remote data feeds. This allows for interactive applications to be built that rely on external datasources seamlessly.  For example, when the user clicks on the Furniture Menu choice, a query is sent to the Dwell on line community and all members who have pictures tagged with the word furniture are retrieved.

Responsiveness

Silverlight runs on the client side which means all user interaction (events) are processed in the browser and do not require a round trip to the server. For example, when the user wants to scroll pictures right to left they would press the green right arrow button and the pictures will scroll.  Notice also the nice halo affect when you mouse over the green scroll button.

Again, because Silverlight is all client side, the speed at which the pictures scroll is determined by how long the user holds down the mouse over the arrow key before releasing. If the user quickly clicks the green arrow button, the pictures move quickly, if they click and hold for a second, then release, the picture will  scroll more slowly.  In addition the little green dots give you immediate feedback of how many pictures are in the entire scrollable region, and where you are in that list.  For example, if you look at the second line of pictures (Wimlarch), you’ll notice that there are
6 green dots with 5 illuminated on the left (as shown below).

This means, you are looking at 5/6ths of the pictures (83 percent), and that you are scrolled all the way to the left. If half the green dots were illuminated, then you would only be looking at half the pictures for that particular person (line). Again, because this is a completely client side programming model (Silverlight), as you scroll, the green dots automatically change and there is no server load and no traffic on the internet (with the exception of the actual
images being downloaded if they have not previously been cached in the browser).

Layout/Size Management

It’s important for a real functioning application to be able to manage the information inside it’s borders. The amount of screen area available to the program is different depending on how big the users browser is, as well as how much space the user has allocated to the browser window.

Silverlight exposes a class called the HttpBrowserClass which allows the client software (Silverlight) to react and adjust based on screen size. For example, if the browser size is reduced, the number of rows showing is reduced to the correct number (two in this case) and the pictures showing on each row is reduced to 4. Of course the little green dots adjust also. Here is a screen showing that situation.

Notice also that the menu choices are closer together. The point here is that each Silverlight control can change its position dynamically depending on external inputs such as browser size changes.

Special Effects.

Silverlight shines when it comes to special effects. Many effects can be achieved, while only a few are demonstrated here. The effects demonstrated here are as follows.

Picture Growth On Mouse Over

This means that as you mouse over a picture it slightly grows and when you mouse out it shrinks again.  This is to give you an idea that you can click on it.

Picture Flipping to the opposite side

When you click on a picture in the user’s collection, the picture fades in at a higher resolution as below.

If you click on the little orange triangle on the lower right corner of the picture, the picture actually flips over simulating a 3d flip and the information about the picture is displayed on the back side.

Accents On Mouse Over

Another Silverlight effect is what happens when you mouse over one of the green left or right arrow buttons.  Small expanding circles grow out of the button to indicate that this is something that can be pressed.

Links to External Web Sites

Silverlight supports many features of standard web browsers including the ability to link to external web sites. If you bring up the Credits screen by pressing the “Credits” button in the upper right corner, you will see the screen below.

Notice that under each of our names, there is a “View Website” button.  When this button is pressed, a new browser window is opened containing the information about one of us.  You can also get to more information about one of the members by clicking on their picture on the far left of the picture row.

Asynchronous Processing

Silverlight allows multiple things to be done at the same time. For example, when the program first loads, an initial web feed from the dwell community is retrieved. This can take several seconds so instead of nothing happening, a small image is displayed with dynamic content.

The little dial circles showing time passing. When the web download is complete, Silverlight has the built in capability to notify the running program that the work is complete so it can continue and bring all the controls and pictures to life.

Multiple Ways to See Similar Data

Silverlight has a complete custom programming model that allows the developer to show the data in lots of different ways. On the opening screen, if the user presses the “View Gallery” button on any of the picture rows, they will get a screen that looks like what is below.

Notice that as the picture is scrolled through the artists collection, the title and information about the picture is displayed. Again, this all happens with no server interaction or traffic.

Conclusions

Silverlight is indeed a compelling technology to build applications that can be run anywhere on the internet.  Searchlight demonstrates just a small number of Silverlight’s great features.  Understanding that there are always lots of ways to deliver the same result, Silverlight does give a way to deliver very rich content using the Microsoft development stack.  In this case, that includes Visual Studio, Microsoft Expressions Blend and of course the
.Net Programming language c#.  Many of the features of Silverlight .net alpha 1.1 are not yet available, so we anticipate when the final production release comes, we will be able to deliver even more functionality, even more efficiently than we can do it now.

If I were making stars, I’d give him them all!

Here is a link you can get the book from.

Pro WPF: Windows Presentation Foundation in .NET 3.0

Introduction to XAML among other things

http://www.sdforum.org/SDForum/Templates/CalendarEvent.aspx?CID=2140

Next Wednesday, April 4th, Cal and I will be presenting an overview of WPF and XAML at the Cubberly Community Center in Palo Alto for SDForum’s Windows SIG.  Many of you know Cal Schrotenboer as he has been teaching much of the Microsoft classes at Foothill College where we had our 2006 Code Camp.  Actually, Cal introduced me to Chuck Lindauer, the Dean at Foothill who was instrumental in making code camp such a success last year.  As the description above says, we will be discussing Microsoft’s new WPF and XAML technologies and how they apply to windows programming.  We’ll show demo’s and also answer questions.

I’m personally new to WPF so I asked Cal to come in and help.  He’s not only a good friend, but also knows .Net 3.0 which is what WPF is a part of very well.  He currently is offering one of the very few classes in
WPF as well as another .Net 3.0 technology WCF at foothill College.  Because Foothill College is heavily subsidized by the State of California, the classes are amazing in expensive.  Last I heard, 30 hours of classes was $100 and I know Cal teaches these classes both live and on the internet so people all over the world can attend.

Hope to see as many of you as possible at our presentation!