Getting Started guide for SilverlightTemplates

SilverlightTemplates.com is excited to share the Getting Started Guide for Silverlight designers. If you follow this link: Getting Started it should give you all the information you need to start using the site.

Our intent with SilverlightTemplates.com was to give Silverlight designers/developers a community portal to get their work out in front of as large an audience as possible. To that end, we are working hard with bloggers, user groups and other commercial sites to spread the word. If you belong to a Silverlight-oriented group, please spread the word. We will gladly do a "link exchange" (you know, you link to us and we'll link to you) as this is a great way to build a strong community.

Load a Xap file from Binary

Recently I was faced with a situation where I needed to load a .xap file from a database and preview the file using Silverlight. Typically, to display a Silverlight app hosted in a web site, one would use the
tag. A detailed description of how to use this with all the available parameters can be found here.

The .xap file, which is really just a compressed package of all the necessary bits needed to run a Silverlight application, typically is stored in the file system and is referenced using the src attribute of the tag. So right there is the problem. Our .xap files are not stored in the file system, but rather in binary fields in our SQL Server 2008 database. The src property is a string indicating the path and file name of the .xap package. Argh.

To deal with this, what was needed is a way to reference the .xap file (stored in the database) with a relative url. A Silverlight application has a mime type of application/x-silverlight. This is important to note because of an interesting way one can use an .aspx page to render binary content. Prior to this, I had used an .aspx page to render jpeg images from a binary stream. Basically, this is done by clearing the response content completely in the code-behind of the page and writing the bits to the response content stream. Set the content-type and your good to go.

Well, as it turns out, this technique not only works for images, but *any* binary format that has an associated mime type. A comprehensive list of mime types can be found here. In the case of images, to set the image source to a binary file stored in a database all you do is create a page as I described and then set the src property to the url of that page. So let's say you want to retrieve an image from your database and render it using an img tag and the url of your page is ../mySite/ImageLoader.aspx. You could call the page passing it the id of the record you want to load and render the image like so:
<img src="..mySite/ImageLoader.aspx?imgId=42" />

That's it. Simple.

See where I'm going with this? How is that different from:

<object type="application/x-silverlight-2"
 data="data:application/x-silverlight," width="450" height="220">
 <param name="source" value="../mySite/ImageLoader.aspx?xapId=42"/>
object>

Answer: It's not. Just have the page set the content type to application/x-silverlight and you are good to go. For reference, here's the code that rewrites the output stream:

int bufferSize = 1024 * 100;   // load 100KB at a time
byte[] buffer = new byte[bufferSize];
int bytesRead = 0;
long bytesToRead;
MemoryStream ms = new MemoryStream(src.ToArray());

// src is the binary file to read. How you load that is a story for another day

bytesToRead = src.Length;
Response.ContentType = this.GetContentType(filetype);
try
{
  while (bytesToRead > 0)
  {
      if (Response.IsClientConnected)
      {
          bytesRead = ms.Read(buffer, 0, bufferSize);
          Response.OutputStream.Write(buffer, 0, bytesRead);
          Response.Flush();

          bytesToRead -= bytesRead;

          // re-initialize the buffer and counter
          bytesRead = 0;
          Array.Clear(buffer, 0, buffer.Length);
      }
      else
      {
          // make sure to break out of the loop if the client disconnects prematurely
          bytesToRead = -1;
      }
  }
}
catch (Exception ex)
{
  string err = ex.Message;
  Response.Write("" + ERROR_READING_FILE + "");
}
finally
{
  if (ms != null)
  {
      ms.Close();
  }
}

Introducing SiverlightTemplates.com

Well, it's finally here. I am proud to announce the launch of a new site: SilverlightTemplates.com. This site is a portal for designers/developers to show off their stuff and give them a place to sell their wares. It's a place for people looking for web site templates using Silverlight to hook up with talent from around the world to get some of the hottest site templates money can buy. Are there free Silverlight tempates available. Absolutely. And, you get what you pay for. With SilverlightTemplates.com, you not only get top-quality web site templates using Silverlight, but also a portal to the vast resources in the world of Silverlight and .NET development in general. Check it out and register: SilverlightTemplates.com

Generate A Schema from a SQL Server Table

Xml Serialization can help if you have to save some very complex data from the web. This is the process:

1. Post an xml document representing the business object(s) of what you want to save. This should conform to a valid schema (which I'll show you how to generate in just a second).


2. Deserialize (unmarshall) the xml document on the server.


3. Save the data to the database


4. Return something (depends on your specific requirements).

So, to start with, you'll need a valid schema for the tables(s) to which you want to save data. Here's the code (in the form of a console application) to generate those schemas (unless you have some sick affinity with writing these by hand):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data.SqlClient;
using System.Data;

namespace GenSchema
{
 class Program
 {
  static void Main(string[] args)
  {
   string constr = @"Data Source=YOURSERVER\;Initial Catalog=YOURDB;Integrated Security=True";
   string table = "yourTable";
   SqlConnection conn = new SqlConnection(constr);
   using (conn)
   {
    SqlDataAdapter sql = new SqlDataAdapter("SELECT * FROM " + table, conn);

    sql.TableMappings.Add("Table", table);
    DataSet ds = new DataSet("NewDataset");
    sql.FillSchema(ds, SchemaType.Mapped);
    ds.WriteXmlSchema(table + ".xsd");
   }
  }
 }
}

Of course, you would fill in the information for your connection string and the table with which you want to work.

Next, to deserialize the data, you must pass in an xml document that conforms to the schema you just generated. That may require some testing, but once you get it right you're golden. If you haven't already, use the xsd.exe utility to generate the C# class from your schema. You'll notice that there are various xml attributes assigned to each property. These will be used in the deserialization process. If you already have the classes (if you're using LINQ to SQL, for example) then simply rename this new class to something else. It's only purpose is to hold the deserialized information temporarily anyway. Here's the code to deserialize your data:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data.SqlClient;
using System.Data;
using System.Xml;
using System.Xml.Serialization;
using System.Text;
namespace GenSchema
{
 class Program
 {
  static void DeSerialize(string xDoc)
  {
   XmlSerializer ser = new XmlSerializer(typeof(MyObject));
   XmlTextReader reader = new XmlTextReader(xDoc);
   MyObject obj = (MyObject)ser.Deserialize(reader);
   reader.Close();
   // Save using whatever method you choose.
  }
 }

Certainly, your situation will require some modifications to the above code, but this should at least get you started in the right direction. Hope it helps.

Filter Lists Using jQuery

Here's a little snippet that will filter a list as the user types as well as bold the search expression within the list.

$("#searchMyProjects").keyup(function() {
    var filter = $(this).val(), count = 0;
    $("span.projectSelectionName").each(function() {
    if ($(this).text().search(new RegExp(filter, "i")) < 0) {
     $(this).parent().parent().hide();
     $(this).hide();
    } else {
     $(this).parent().parent().show();
     $(this).html($(this).text().replace(new RegExp(filter, "i"), "<b>" + filter + "</b>"));
     $(this).show();
     count++;
    }
   });
   $("#filterCount").text(count);
});      

The filter expression s updated with <b> tags to highlight the search expression within the text. You can use whatever styling you want, of course.

Enjoy.

Upgrading A Subversion Repository

I recently had to move several Subversion repositories from one server to another. Normally, this isn't a big deal, but these repositories were using an old version of Subversion (1.4.something) and had to be upgraded to 1.6.1 which was an entirely different file format. I was able to find the following documentation which fortunately made the process very simple. The following is taken from the Collabnet site. I actually only needed steps 1 and 2. Hope this helps.

HOW TO UPGRADE/DOWNGRADE YOUR REPOSITORY:
----------------------------------------

1. Use an 'svnadmin' binary from a release with the same schema version
as your repository to create a dumpfile of your repository:

$ mv myrepos old-repos
$ svnadmin dump old-repos > dumpfile

2. Use an 'svnadmin' binary from a release with the same schema version
as you want your repository to have to load the dumpfile into a new
repository:

$ svnadmin create myrepos
$ svnadmin load myrepos < dumpfile

OR, if you're feeling saucy, you can do it all at once with a pipe:

$ svnadmin-new create myrepos
$ svnadmin-old dump old-repos | svnadmin-new load myrepos

(If you are running at least version 1.4 and would like to make a
format 3 repository, pass the --pre-1.4-compatible flag to
"svnadmin create".)

3. [OPTIONAL] Loading a dumpfile is both time- and disk-consuming,
as it replays every commit. If your new repository is a BDB
respository, then after the load is complete, you may want to
free up some disk space by removing unused BerkeleyDB logfiles:

$ svnadmin list-unused-dblogs newrepos | xargs rm

Note: If you're using BerkeleyDB 4.2 or newer this will be done
automatically for you, unless you've configured the repository
not to behave this way.

4. Don't forget to copy over any hook scripts (and DB_CONFIG for BDB
repositories, if you changed it) from the old to the new
repository:

$ cp old-repos/hooks/* repos/hooks/
$ cp old-repos/db/DB_CONFIG repos/db/

Setting Up a Subversion Server With Port Forwarding

Setting up a Subversion repository, like anything else, is really easy if you know how to do it. Fortunately, VisualSVN Server handles most of the painful stuff that used to have to be done manually. Now it's as simple as installing and setting up your router.

So first, install VisualSVN Server. It comes with it's own set of instructions that are very easy to follow.

Next, open up the admin console to your router and find the section that handles port forwarding. VisualSVN Server gives you the option of using either port 8080 or 8443 for a secure connection. I'd recommend going the secure route, just because. Enter the ip address of the machine on which VisualSVN Server is installed and enter 8443 as the start and end for the ip range. If needed, enter HTTPS as the service type.

That's it. Done. So now you should be able to access your repository from the internet using https://[router_ip_address]:8443/svn/. So let's say your router's ip address is 79.168.199.4 and you have a repository called MyCoolStuff. The url to your repository (from outside your network) would be https://79.168.199.4:8443/svn/MyCoolStuff.