Well that’s a long title but I think you get the idea of what this post is about.
Building on top of my web part template I thought I ought to do something useful that I could share. So Combining the ability to peruse lists from a webpart and mangling this into Silverlight I made a webpart Image Library viewer.
Now this is pretty rough and ready the xaml is from the VB school of design, “Grey Blue and Boxy”, but get a designer on the case and your away. It contains elements of a jscript Control. The photos at the bottom scroll left and right and are added dynamically. This is a good use of the CreateFromXaml but using the “true” option for the namespace scope, which is better than find and replace of the video library example. It does full screen by clicking the little grey blue square (see what I mean about design) which is taken from the video library sample and doesn’t scale to exactly 4:3, again I don’t have time to investigate, it involves pencils and math’s and I’m a bit busy.
The webpart itself looks specifically for a list called “Image Library” one of the default lists created by portal sites. This can be changed so that you could have a toolpart selection. It relies on the list being an Image Library list. If the list is not there it blows up I haven’t spent long on this making it bomb proof.
If there are no pictures in the image library it resorts to displaying text in the webpart that the list is empty, not some custom display in the Silverlight part.
I think this is a good example of what can be created with very simple xaml, certainly better xaml than the video library which is all over the place (if you look at this, its offset for a start, making all the jscript fudges hard to understand). It has the rudiments of a control. It has scaling, clipping, timers, events. The thing that muddies it a little is the Sharepoint bit, but a quick view source and save as HTML should work nicely there.
Update : StandAlone not sharepoint project to help design it – Demo
Update 2 : ** RC1 Source Code **
Notes:
- Built on x64 platform (change your references)
- Built for Sharepoint 2003
- Uses Dummy SNK replace with your own (you dont have to but its wise)
- Designed with Sharepoint trust level set at full
Areas for Improvement:
- Range Checking number of images
- Design!
- Move into view animation of selection bar
- better resize
- Selectable Image library
- Checking of list conforms to type image library
- Downloading of thumbnails restricted to those in view and n+ more as you scroll into view it downloads as it needs
- Freeing of memory after building control
- Transistions on photos
- DblClick big photo to Zoom Full screen
- Option to use hi-res version of photos and appropriate download “waiting” icon when selected
- and a lot more I haven’t thought of yet
Again Feel free to use and change this but attribute original work to me please. Also Comment if you like it or not.
(PS I’m moving ISP’s 12th June 07 so if this stops working early sorry, I will be migrating sources to new ISP when I have access).
Technorati tags: Silverlight, Sharepoint, webparts
Interesting example! I tried clicking on the “Source Here” link but its not working….
Soory about that I forgot to change the web forwarding.
I have done this now but any problems try http://www.binaryjam.ukfsn.org as the domain part of the path.
Hi
I have gothough your example. I would like to have the steps of adding the webpart in the MOSS 2007
Thanks
I actually don’t have MOSS 2007 but I believe that 2003 webparts will work in MOSS. Could be wrong but someone commented to me that it does work in 2007.
First you have to compile this project in Studio 2003. Then you have to created a CAB file. Presuming you can do all that the command is
stsadm -o addwppack -filename [File.CAB] -force
there is a good guide on developing webparts that can be found here.
http://www.microsoft.com/belux/msdn/nl/community/columns/tisseghem/webparts1.mspx
I had a question about using this to open websites heres my reply for all to see. I also take time to describe some of the elements of the sourcecode so that hopefully its easy for anyone to add what they want.
Presuming that when you click any image you actually mean the scroller element, I guess you want to create a navigable control instead of an image display control and not the main image.
First off the Scroller bits.
Each of the thumbnails is a distinct Control. In the function downloadCompleted I iterate through the number of photos in my datalist to create these controls.
These controls are created by the statement new SilverlightFilmStripPartPhotoItem(…)
It might have been a good idea for me to put references to the items created in my original data but I didnt need to.
This statement only creates the JScript object and not the Silverlight object, that is created by the
templateInstance = this.control.content.createFromXaml(templateInstanceString, true);
statement. That template reference is passed into the constructor of the Jscript SilverlightFilmStripPartPhotoItem.
thats all very nice, but you are interested in events.
So handling events on each control then. In the constructor of the StrippartPhotoItems I create event handlers for the click event (plus others)
this.target.addEventListener(“MouseLeftButtonDown”, Sys.Silverlight.createDelegate(this, this.handleMouseLeftButtonDown));
When you click any image, each individual control object calls its own handleMouseLeftButtonDown function. If all I wanted to do was effect the object pressed then I could code my stuff in here, but I wanted to effect the parent. I could have passed a reference to the parent object in the constructor and done that, but I prefer the model of event raising or in this case function pointers.
What am I talking about ? Well in the function handleMouseLeftButtonDown I call another function
this.clickHandler(sender, this.photoUrl);
so what is clickHanlder looks like a variable of the constructor. Well it is and it isnt. The constructor of each PhotoItem has as its last parameter this statement
Sys.Silverlight.createDelegate(this, this.onPhotoItemClicked)
This creates a function pointer to the SilverlightFilmStripPart.Scene.onPhotoItemClicked function of the main scene object.
In here we set the MainImage to the url we want, passed by the photoItem control when it called this.clickHandler(sender, this.photoUrl);
So now to open a website by clicking on the Image. This is a change to the section
onPhotoItemClicked: function(sender, eventArgs) {
this.MainImage.Source=eventArgs;
},
For quickness try this
onPhotoItemClicked: function(sender, eventArgs) {
//this.MainImage.Source=eventArgs;
window.open(eventArgs);
},
For full control over the window to open ( I presume you want to open a window and not replace the current one)
see http://msdn2.microsoft.com/en-us/library/ms536651.aspx
This will no longer try and display a large image. Also find this line and comment it out
if (i==0)
this.MainImage.Source=this.PhotoItems[i].photoUrl;
In fact if your not using this as an image viwer but a fancy web page opener find all references in the xaml and the js and remove them.
Hope that helps.
its nice.
But I had requirement to navigate other page in same browser rather than popup.
so did some code changes and it works..
Here is summary..
I blocked below even handler.
onPhotoItemClicked: function(sender, eventArgs) {
//this.MainImage.Source=eventArgs;
},
and added one more parameter “siteUrl” in below functions
which gets value dynamically from picture library(added one more column “URL”).
function SilverlightFilmStripPartPhotoUrls(videoUrl, videoThumbnailUrl, siteUrl)
function SilverlightFilmStripPartPhotoItem(control, target, index, thumbnailUrl, photoUrl, siteUrl, clickHandler) {
and modified below eventhandler
SilverlightFilmStripPartPhotoItem.prototype.handleMouseLeftButtonDown = function(sender, eventArgs) {
//this.clickHandler(sender, this.photoUrl);
location.href = this.siteUrl;
}
So on clicking of samll image it navigates to another page in same site.
Hey,
This is just awesome..
I am working with MOSS for a while but now would be focussing on Silverlight and Smooth UI in MOSS…
This was a very good article in that direction..
Many Thanks…
I used this web part in MOSS 2007.Deployment was done successfully.
when i deployed this webpart…their is nothing that appears.
A white space appears and their is no javascript errors appear at all.
Many people are contacting me about this not working. In many cases what is happening is they have the older version of the source which included a CAB file and are just installing the CAB file.
Then there are those who do not know about -globalinstall for installing webparts like this or changing the security.
As I have said in other postings this part was developed on an x64 system so will not work on a 32 bit system. This was a technical article for developers of webparts and not for any one to just install a webpart, hence “sourcecode”.
So before anyone else asks me again.
1. Be a developer, I have no time for admins, this code needs compiling BY YOU in Vis Studio 2003, then create your own installation routine.
2. I have set my web.config from wss_minimal to Full, cos its easy, I am not writing for production environments, this is a proof of concept. You can worry about CAS.
3. Try a -globalinstall if your still having trouble.
4. Try and figure it out for yourself, plenty of others have already used this and figured it out, so I know its not the code.
5. Then and only then bother me about it, and even then I still might ignore you.
Sorry but getting a bit tired of people who can’t read or won’t try and figure stuff out for themselves, this is a developer article.
Can I try deploying this webpart to WSS 3.0? I’m still gonna try..The demo link above seems to be not working..
Demo working now.
MOSS 2007 demo using this projects XAML and js but done with the Data View web part which means there is no need to install anything on the server.
See http://www.wssdemo.com/pages/silverlight.aspx for how to.