Ok this was my first time at trying to mod a javascript WYSIWYG editor. My goal was to create a TinyMCE image upload plugin for ASP.NET.  I just recently started using TinyMCE as my editor of choice and noticed that it was not convenient in anyway to insert an image to the editor.  By default the "advimage" plugin only allows you to point to an existing image via a URL.  Well, in my opinion this is kind of worthless because users will want to insert a new image from their own computer while creating content.  What I did was modify the advimage plugin to include such functionality.  I did try searching the exisiting third party plugin site for TinyMCE but solutions either required PHP or the ones in .NET were not and "AJAX" like UI.  Because I'm a .NET guy I made a simple image uploader tool that is now part of the advimage plugin.

I would like to post the code of what I did, but I think this post would be a bit difficult to read. However, I did leave comments in the image.htm file.  I've set this up on codeplex so please go to the project site to download the the files needed. Both the source and just the files you need are available for download.

Project Location:  http://tinyslupload.codeplex.com

Overall concept of changes:

- Added a generic handler to handle the image upload into the directory specified
- Created a Silverlight 3 application that performs a file upload with a progress bar indicator
- Modified the image.htm file to include a new tab with the silverlight application in there
- Modified the javascript language file to include 2 new variables
- Added the Silverlight.js file

Screenshots

Project Location:  http://tinyslupload.codeplex.com

This post will show how to go about reusing the same storyboard in Silverlight 3. In this case I will be reusing the same Storyboard animation to make 3 ellipses grow and shrink.  Each Ellipse will start at 50 x50 and grow to 75 x 75 then go back to 50 x 50 depending if the mouse has entered or left the element.  As for most of the time with me, this post is a concept and not part of a full solution.  However, I am using this concept in a solution I am currently working on.  Ok, so let’s go about accomplishing this.

First off we need to have our Storyboard created.  For the interest in time I will not step through how to create it in Expression Blend 3.  Although this storyboard is not too complicated and could be made just by writing the XAML itself.

The most important item to recognize here is that I do not specify the Storyboard.TargetName in the DoubleAnimationUsingKeyFrames.This will be specified in the code behind. This is the main component to resuing our StoryBoard.

Next I put 3 Ellipse elements on the UserControl.  The XAML is as follows:

The important item to recognize here is that all of the Ellipse elements share the same MouseEnter and MouseLeave events (MouseEnter="Item_MouseEnter" MouseLeave="Item_MouseLeave").  Also note that each Ellipse has its own x:Name.

Now for the code behind in our UserControl.  I will only show you the events as this is pretty much just an empty user control.

In the code above, you’ll notice you need to cast the sender object as whatever object is sending in the event. In our case this is an Ellipse.  Second, you’ll see we need to use the SetValue() method and give the StoryBoard it’s StoryBoard.TargetName property and set that value to the Name of the Ellipse sending in the event.

Another important note is to make sure you start and stop the storyboards.

And this is it.  With this you get to reuse a storyboard animation in Silverlight for the same object, with minimal amount of code. Good luck with your solution!

Since the October 2009 version of the toolkit was released, I've been meaning to create a ReorderList in Silverlight.  I wanted to mimic the functionality of the AJAX Toolkit ReorderList for reordering only.  I'll probably expand on this in the future to allow the insert/update/delete aspect as well.

So I did my best as creating that with the new drag and drop functionality in the Silverlight toolkit and a ListBox.

My Environment: 

• Visual Studio 2008 Professional
• ASP.NET 3.5
• Silverlight 3
• October 2009 Silverlight Toolkit
• Web Service (ASMX)
• LINQ to SQL
• SQL 2005

Here is a screenshot from Visual Studio for the solution

  

First I created a sample table in my database to hold the items called Items

  

Note: I have an ItemOrder column of type INT.  This will allow us to keep track of the order of the items.

Next we need to put methods in our Web Service to retrieve the items and to update the items.  Below is the code from the Web Service:

Please note that the TestDBContextDataContext testDB = new TestDBContextDataContext(); is from the LINQ to SQL model I had already setup.  The LINQ to SQL model consisted of me dragging the Items table I made in SQL to the LINQ to SQL Designer

In the UpdateItems method we are

1. Selecting the items from database again
2. Looping through those items and finding the same item in the updatedItems list based off the ItemUniqueID field
3. We assign the new ItemOrder value from the updatedItems list to the original items list in the database.

Now that we have the database and web service setup, we can now concentrate on the Silverlight part of this.

First we need to make the UserControl.  This is not too much work, since this is just an example. Below is the XAML code for the UserControl

Next is the code behind for the XAML

 The logic for the code above is the following:

• Include the using statement "using TestSL3.WebSvc;" to reference our web service
• Define an ObservableCollection to store the items in.
• Call our web service and get the items from the database
• Submit the items (with their new order number) to our Web Service once the reordering is done on the UI side

Screenshots

First Load Before the Reorder

  


Second: During the Reorder Process (repeat as needed)

  


Third (After Reorder Process)

  


Fourth (Database after hitting Submit in the UI)

  

And that is that. You can now have a ReorderList in Silverlight 3 with the help of the Toolkit!  Again, I hope to expand on this to add the ability to insert/update/delete.  If so I'll put it up here as a zip file for everyone to download.  Happy coding, leave any questions or suggestions as usual.

Well this will be short, but I'm putting this out there because I just spent about an hour trying to figure out (probably wasn't searching correctly, and I'm a bit tired) how to do the equivalent of Response.Redirect in a Silverlight 3 navigation application.  Keep in mind this is my first ever navigation app with Silverlight 3.  I basically had a login page (Home.xaml) and if the login was successful I wanted to navigate to another page (Products.xaml) within the application dynamically.  So after searching google and bing...nothing was showing up how I wanted.  The results either had to do with moving to the next or previous history within the navigation, or some had to do with just swapping the content on the current page with the new page.

So it came down to this simple code to accomplish the same thing as a Response.Redirect in Silverlight:

Ok everyone, this will be a simple and short post, but useful.  When dealing with Silverlight you will run into the issue of users not having it installed with the web browser they are using.
So instead of just showing the default image provided when creating a new silverlight application (as shown below), you can show some custom HTML code, or redirect to another web page.

This HTML code can include simple text or images as well. Tim Heuer has a great post describing on how to do this, so my post shows the code I used and also a few lines of javascript you can use to redirect to another web page if the user doesn't have silverlight.  Shown below is the modified code I made from the code that shows up in your test page:

Note: This was made using Silverlight 3

<div id="silverlightControlHost" style="width: 280px; height: 250px; text-align:center;">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
          <param name="source" value="ClientBin/TestSL3.xap"/>
          <param name="onError" value="onSilverlightError" />
          <param name="background" value="white" />
          <param name="minRuntimeVersion" value="3.0.40624.0" />
          <param name="autoUpgrade" value="true" />
         <%-- <script type="text/javascript">
              //redirect to another page because user does not have silverlight installed.
              window.location = "default.aspx";     
          </script>--%>
          <div style="width: 100%; border: solid 1px black;
               background-color: #4682B4;font-size: 12px;
               font-family: Tahoma; color: White;">
              <div>
                <br />
                <span style="color:#FFD700; font-family: Verdana; font-size: 13px; font-weight: bold;">You do not have Silverlight Installed</span>
                <br /><br />
                To enjoy the full experience of this website, you must install the Silverlight plug-in. <br />
              </div>
              <br /><br />
              <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration:none">
                   <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
              </a>
              <br /><br />
              <div>
                Once installed, you may have to close and re-open your web browser.
              </div>
              <br />
          </div>
        </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
      </div>

You'll see that I added the custom HTML code after the last param tag. You'll also notice that I have commented out the script tag. If you would like to redirect someone to another page, just uncomment it and replace the default.aspx with a location you would like the user to end up at. So this is the end result:

And that's that, now when a user to your website doesn't have silverlight installed, something more useful can show up so he/she knows what to expect.

Other useful resources:

Tutorial on a Splash Screen:

http://weblogs.asp.net/lduveau/archive/2009/09/05/tutorial-create-a-custom-silverlight-splash-screen.aspx

Tim Heuer's post:

http://timheuer.com/blog/archive/0001/01/01/creating-a-great-silverlight-deployment-experience.aspx


For those beginners out there like me with Silverlight, this can at least help the install experience for the user.  Happy coding!