John Mendez

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

ASP.NET, Silverlight tinymce

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!

Silverlight silverlight

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.

Silverlight silverlight