Feed Icon  

Contact

  • Bryant Likes
  • Send mail to the author(s) E-mail
  • twitter
  • View Bryant Likes's profile on LinkedIn
  • del.icio.us
Get Microsoft Silverlight
by clicking "Install Microsoft Silverlight" you accept the
Silverlight license agreement

Hosting By

Hot Topics

Tags

Open Source Projects

Archives

Ads

Page 1 of 5 in the ASPNetWebServices category(RSS) Next Page

Twilight: A Silverlight Twitter Badge

Posted in ASP.Net/Web Services | Silverlight | Twitter at Friday, January 23, 2009 2:27 PM Pacific Standard Time

When Twitter first came out I signed up but never really caught on until recently. I finally figured out that you really need to follow some people first to get the hang of it. Now I enjoy using Twitter and read peoples tweets using Witty, a WPF Twitter client. Even though I only have a few followers, it still feels like you’re part of a bigger conversation since your own posts get mixed in with the posts of people you’re following.

So now that I’m using Twitter I wanted to put my latest tweets on my blog. Twitter provides a flash based Twitter badge and an HTML version as well, but since I’m a Silverlight developer I thought it would be cool to use Silverlight. I came across Silvester which is a Silverlight Twitter Widget and looks great, but I wanted to create a widget/badge that didn’t require a proxy server.

For my entry in the MIX 10K contest I created a Silverlight feed reader that would allow you to subscribe to a bunch of feeds and it would keep them updated and stored your subscriptions in isolated storage. Since you can’t actually access most feeds directly (unless the host has a client access file which most don’t) I used the Google Ajax Feed proxy to grab all my feeds. This worked great because Google has a client access policy that allows you to get the content plus it puts it all into a single format and returns it as json. All I had to do was generate classes in my application to mirror the object structure of the json and then use a DataContractJsonSerializer to deserialize the json into objects.

So when I started on my Twitter badge I basically took the AgFeedReader project and removed the isolated storage and the feed subscription interface. I really only needed a single feed which I would set using an InitParam. I was able to get my twitter feed using the Google Ajax Feed Proxy, but that proxy only returns the last four items from the feed and omits a lot of the rich data that Twitter provides. So I decided to try another approach.

I started by looking at the script that is part of the Twitter HTML badge. The key was the script they provide to get the feeds which includes a callback parameter. You call the json script and add a callback=YourJavascriptFunction. So in my Silverlight application I add two scripts to the page: the first is the Twitter Json script and the second is a stub javascript function that calls back into my Silverlight application. This gets around the security issue which prevents you from downloading the json directly.

Now back in my Silverlight application I get passed in a ScriptObject which is the json. This ScriptObject is really just an array of Tweets, but since it is an array I actually have to manually convert it to my .Net objects. There is a good MSDN page here that describes all the rules for the interop between javascript objects and .Net objects. Below is my method that gets called from Javascript:

[ScriptableMember]

public void TwitterCallback(ScriptObject json)

{

    twitList.ItemsSource = json.ConvertTo<Tweet[]>();

}

 

The twitList is my ListBox and the Tweet class is a .Net class that I created that mirrors the json returned by Twitter.

In order to display the Tweets I wanted to not just have text but have clickable links. The Silvester Twitter Gadget has a very nice LinkLabel control that will allow you to have a text area with clickable links. So instead of reinventing the wheel I just used that in place of my normal TextBlocks from the AgFeedReader project. I did change one line of code but for the most part it worked perfectly.

Anyhow, it is a pretty standard Twitter Badge right now, but that is only a few hours of work and I’m hoping to add a few more features to it. I’m hoping to put the xap along with some javascript helper files up on a server somewhere so that anyone can add it to their blog, but if you’re interested let me know and I’ll try to get it done this weekend. If you’re reading this through a feed reader, head over to my blog and you will be able to see the Twitter Badge in action.

Integrating MVC with Silverlight (Part 2)

Posted in ASP.Net/Web Services | Silverlight | MVC at Thursday, June 05, 2008 1:41 PM Pacific Daylight Time

Ok, so in my first post on Integrating MVC with Silverlight I didn't actually get to the Silverlight part. I only laid out the navigation and set it up so that it would work with Silverlight when I did add it in. So while on the flight from Orlando to Phoenix I re-wrote my menu using Silverlight 1.0 (using some old wpf/e code I had laying around).  Below is a screenshot of my updated sample which now has Silverlight:

image

So I'm still using the partial rendering by switching out the master page, which still isn't the ideal solution. What I'd really like is a way to call ViewPartial and pass in the name of the content area that I want to render. I'm also still not integrated with the MVC url system and have the Urls hardcoded in my javascript. Also, even thought the menu control could have state it doesn't actually show which page is currently selected.

So this example does integrate Silverlight with MVC, however, it still needs some more work. Since my flight to Burbank just got delayed from 8:25 to 10:15 maybe I'll have some time to work out these other issues. :(

Download Updated Sample Code Here

Integrating MVC with Silverlight

Posted in ASP.Net/Web Services | Silverlight | MVC at Wednesday, June 04, 2008 10:53 AM Pacific Daylight Time

Ok, so before I go any farther I want to spell out a couple of things. First, my sample code doesn't have any Silverlight in it yet. Since I didn't have a whole lot of time and beta 2 is only a day or so away I didn't think it was worth the effort. This post is more about figuring out where Silverlight would go rather than actually demoing what it would do. Second, I'm an MVC newbie so there is probably a better way to do what I'm trying to do. However, I've been at TechEd 2008 this week attending MVC and Silverlight sessions and talking to the MS folks and so far haven't seen a good answer.

So with that out of the way, here is what I've been thinking about. I'm trying to understand the best way to integrate Silverlight (or Flash for that matter) into an MVC application. I know that I can just stick the Silverlight html tags into my view and that will work just fine, but if I do that then my Controllers will probably not know about Silverlight and vice-versa. For instance, here is the scenario that I've been thinking about.

Let's say I have a nice looking Silverlight menu bar. Now I could easily add that control to my master page and put links in to all my MVC pages. However, I probably want to do a couple of things: (1) I would like the control to know about where I am at so I can display some kind of context information and (2) I would like the control to get the correct urls from MVC instead of them being hardcoded. Now maybe there is a nice way to do this that I haven't thought about, but instead here is what I came up with (and what is in the sample code at the end of the article).

The way that I made this work is pretty simple, but it still feels a little dirty. I created a second master page that I called Partial that contains nothing but the MainContent content area. This goes in the shared views area next to the Site master page.

<%@ Master Language="C#" ... %>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>

Next, I added a mode parameter of type string to all the actions in my Home controller which I pass as the name of the master page in the View method (using preview 3 here).

public ActionResult About(string mode)
{
    ViewData["Title"] = "About Page";

    return View("About", mode);
}

Lastly I wrote a little javascript (which uses the asp.net ajax library) to get the contents of the page passing the Partial as the mode and then I stick the results into the content div.

function asyncNav(url) {

    url = url + '?mode=Partial';

    var request = new Sys.Net.WebRequest();
    request.set_url(url);
    request.set_httpVerb("GET");
    request.add_completed(updateMain);
    request.invoke();

}

function updateMain(executor, eventArgs) {
    if (executor.get_responseAvailable()) {
        $get("content").innerHTML = executor.get_responseData();
    }
    else {
        if (executor.get_timedOut())
            alert("Timeout");
        else if (executor.get_aborted())
            alert("Aborted");
    }
}

So now my navigation can accomplish both of my goals because it doesn't unload when the user clicks a link so it has context and it is using urls that comply with MVC. I know, I know, I'm not actually using Silverlight yet, but I think that will be pretty easy to implement and I'm planning on giving it a shot as soon as Beta 2 is released. For now, check out my code and let me know what you think. Am I on the right path or am I missing the boat?

Download Sample Code Here

Update: Just posted Part 2 here which actually uses Silverlight.

Video.Show

Posted in ASP.Net/Web Services | .NET | WPF | Silverlight at Monday, November 12, 2007 1:01 AM Pacific Standard Time

Tim Sneath [via Lamont] shows off the new Video.Show reference application:

Video.Show is an end-to-end solution that provides a reference-quality sample for user-generated video content sites. Taking advantage of all of our latest technologies: .NET Framework 3.5, ASP.NET AJAX, LINQ, Silverlight, Expression Encoder and imageSilverlight Streaming, Video.Show provides support for uploading, encoding, tagging, viewing and commenting on videos.

I was especially interested to see how they wrote the Linq data layer since it is shared out as a service. My own recent experience with this (which I will be sharing shortly) was that it was a little difficult to do. I was happy to see that the approach I took was the same as the one Vertigo took. You end up creating a set of objects that you pass outside of the service layer which are almost replicas of the Linq objects that get generated out of the database.

Overall it looks like a great reference app. Lots of code to look at and digest. You can download the bits here.

Web Experience Events

Posted in General | ASP.Net/Web Services | .NET | Silverlight at Tuesday, June 05, 2007 4:31 AM Pacific Daylight Time

Via Tim Heuer I read about Kirk's xbox contest:

XBox 360To help fill those seats, we are giving away two XBox 360s to people simply who blog about the event with some pre-canned text. The first XBox 360 will be given away during the keynote at the Los Angeles Web Experience event this week, the second will be given away during the keynote at the Denver Web Experience event next week. To win, all you gotta do is blog about it, because that's how we are going to draw the winner.

I'm already signed up for the LA event since it looks like it will be pretty interesting. So here is my xbox entry form:

Microsoft is hosting free Microsoft Web Experience events at the Los Angeles Microsoft office on June 8th and the Denver Microsoft office on June 15th. They will be presenting information on building the next generation user experience on the web.

They are providing breakfast and lunch, hosting a reception with beer and wine, and attendees are automatically registered in a drawing for an XBox 360 and a Zune that will be given away at each event.

For more information, visit http://kaevans.sts.winisp.net/Shared%20Documents/webexperience.aspx.

See you there!

Technorati Tags:

Silverlight Streaming CS Module

Posted in ASP.Net/Web Services | WPF/E | Silverlight at Wednesday, May 02, 2007 5:17 AM Pacific Daylight Time

Now that there is a central place to host your Silverlight applications, creating a Community Server Module for Silverlight is a lot easier. I took my previous WPF/E CS Module and modified it to work with the Silverlight streaming service. If you want to add this to your blog follow these steps:

1) Download my CS Module source code and compile it. Follow the installation instructions in the readme.txt file.

2) Create an account on the Silverlight streaming service.

3) Read Tim Heuer's excellent post on how to create and upload your Silverlight application to the server.

4) Write a blog post and embed the <silverlight /> tag with your information.

The Silverlight app should show up in the blog post, but I know that the url that I output in the feeds will not be correct. I've only found how to preview my own applications when I'm logged in but I haven't found an easy way to send a link. I'm sure this is possible (if not, can we get it added?).

Here is a sample Silverlight 1.1 app for your viewing pleasure.

Silverlight Hello World in C# from VS 2005

Posted in ASP.Net/Web Services | WPF/E | Silverlight at Tuesday, May 01, 2007 5:31 PM Pacific Daylight Time

Well I've been downloading the VS Orcas for a few days and it still isn't done. I really wanted to try out the .NET support in Silverlight 1.1 and so I asked if this could be done with VS 2005 and Scott Louvau replied:

Well, in VS2005 you can create a class library which will build against the Silverlight runtime, but it's a little work.

1. Create a Class Library.
2. Remove all references from it.
3. Right-click on the Project and pick Properties.
4. On the Build tab, click Advanced and check 'Do not reference mscorlib.dll'
5. Manually add references to mscorlib, agclr, System, System.Core, System.Silverlight, and System.Xml.Core from the Silverlight install folder (\Program Files\Microsoft Silverlight\)

At this point your build outputs should be Silverlight consumable binaries. It looks like the equivalent command line call to csc.exe (the C# compiler) should include the references to the mentioned binaries and the /nostdlib option but may require others as well.

 -Scott

I tried it out and it work pretty well. If you're interested I've uploaded my project so that you can download it and try it out. You will need Silverlight 1.1 installed and VS studio 2005.

Download the sample code here

I've also posted the code to my server but I couldn't figure out how to setup IIS to allow DLL files to be downloaded. Maybe tomorrow.

Upgrading from WPF/E to Silverlight

Posted in ASP.Net/Web Services | WPF/E | Silverlight at Tuesday, May 01, 2007 5:10 AM Pacific Daylight Time

I'm going through the process of updating my WPF/E Samples to Silverlight. Since it is a little more painful than the last update I thought I would walk you through the process so you don't have to figure the out.

  1. Copy the Silverlight.js file to your web server in order to replace the aghost.js file. You can delete the aghost.js file (you could leave it and replace the contents with the contents from the Silverlight.js file, but eventually you'll probably want to have the same file name to make future upgrades easier).
  2. Change the script reference from aghost.js to Silverlight.js:

    <script type="text/javascript" src="Silverlight.js"></script>

  3. Now you need to call Sys.Silverlight.createObject() instead of new aghost(). The parameters have changed quite a bit so here is the new mappings:

    WPF/E:

    new agHost( "WpfeControlHost", // DIV tag id. "WpfeControl", // WPF/E control id. "400px", // Width of rectangular region of WPF/E control in pixels. "100px", // Height of rectangular region of WPF/E control in pixels. "#D6D6D6", // Background color of rectangular region of WPF/E control. null, // SourceElement property value. "HelloWorld.xaml", // Source property value. "false", // WindowlessMode property value. "30", // MaxFrameRate property value. 'myErrorHandler'); // OnError property value -- notice use of single quotes.

    
    

     

    Silverlight:

    Sys.Silverlight.createObject( "HelloWorld.xaml", // Source property value. WpfeControlHost, // DOM reference to hosting DIV tag. "WpfeControl", // Unique control id value. { // Control properties. width:'400', // Width of rectangular region of control in pixels. height:'100', // Height of rectangular region of control in pixels. inplaceInstallPrompt:false,// Determines whether to display in-place install prompt if invalid version detected. background:'#D6D6D6', // Background color of control. isWindowless:'false', // Determines whether to display control in Windowless mode. framerate:'30', // MaxFrameRate property value. version:'0.9' // Control version to use. }, { onError:'myErrorHandler', // OnError property value -- event handler function name. onLoad:null // OnLoad property value -- event handler function name. }, null); // Context value -- event handler function name.

    
    

    Notice a few things have changed besides just the order and the addition of some new parameters. First, there are no quotes around the ID of the hosting DIV tag. Second, you really only have five parameters to pass in. The forth and fifth parameters are javascript objects that have multiple properties.

  4. Now the real fun begins. At this point you can run your page to see if you get any Silverlight errors. When I ran my rolling gear example I got this error message:

 

 

 

 

 

 

 

 

 

At least the error messages are much more descriptive now. :)

So for my gear example I just had to change the routed event from Canvas.OnLoad to Canvas.Loaded and it now works.

As I upgrade the rest of my examples I post any other tips/tricks I find here as well.

Update: Tip #1 - Search and replace your Xaml files to remove all instances of java script: in your event handlers (note: I added a space in the java script so that my blog filter wouldn't comment it out).

Update2: The MouseMove event has changed quite a bit. Instead of getting the x and y like this: args.GetValue("X") you now call: mouseEventArgs.getPosition(element).x. The documentation always passing in a null for the element parameter, so I'm not totally sure what it is used for.

Update3: If you were hosting your script that used to create the aghost object inside the div that would host the control, you need to move the script outside the div tag since the script references the div by the id and not by the string (and I guess it isn't part of the dom yet since we haven't hit the end tag). Let me know if you need an example.

Update4: The CreateFromXaml method is no longer on the Silverlight control object directly, but under the content object. So instead of wpfeControl.createFromXaml("...") you now need to call wpfeControl.content.createFromXaml("...").

Update5: I wish I found this article sooner: What's New in Silverlight (1.0 Beta and 1.1 Alpha)?

Update6: ActualWidth and ActualHeight now require the content object as well. So you need to change control.ActualHeight to control.content.actualHeight.

Update7: SetSource now requires a part parameter. If you're using it to load images you pass an empty string as the part.

Woot! My Hong Button example is now working in Silverlight.

WPF/E Server Controls

Posted in ASP.Net/Web Services | WPF/E at Monday, March 12, 2007 5:02 PM Pacific Standard Time

Donald Burnett has an interesting piece call Poor, maligned, and misunderstood by many: WPF/E which I found to be an interesting read. He brings up two myths about WPF/E that (1) it doesn't support databinding and (2) it doesn't have any input controls. I think I've personally contributed to dispelling the first myth here and here but I haven't spent much time on the second one. I've spent a lot of time thinking about it and I've written about it in the WPF/E forums but haven't done anything beyond that.

Then today I read Martin Grayson's updated tutorial on creating glassy buttons in WPF.

picture of the glass buttons app runing

I thought the buttons looked pretty cool and so I set out to create them in WPF/E. I decided to code them up as a server control instead of just writing plain old xaml. You can view the end result of my work here:

 I wrote the code to create the server code once and now I just use an ASP.Net page to generate my Xaml. The ASPX page is very simple and looks like this:

<%@ Page Language="C#" CodeFile="Buttons.aspx.cs" Inherits="Buttons" %>
<%@ Register Assembly="Wpfe.Controls" Namespace="Wpfe.Controls" TagPrefix="cc1" %>
<Canvas xmlns='http://schemas.microsoft.com/client/2007'
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800" Height="600">
<cc1:GlassButton ID="GlassButton1" MouseLeftButtonDown="javascript:click" Left="200" Top="200" Width="179" Height="34" Text="My First Button" runat="server"/>
<cc1:GlassButton ID="GlassButton2" MouseLeftButtonDown="javascript:click" Left="200" Top="300" Width="179" Height="34" Text="My Second Button" runat="server"/>
<cc1:GlassButton ID="GlassButton3" MouseLeftButtonDown="javascript:click" Left="200" Top="400" Width="179" Height="34" Text="My Third Button" runat="server"/>
<Canvas.Background>
<ImageBrush ImageSource="Aero_grass.jpg" />
</Canvas.Background>
</Canvas>

To create the button controls I simple followed Martin's tutorial using notepad and created the WPF/E xaml. Then I wrote a server control that output the Xaml and added properties to allow the output to be formatted the way I wanted. The link to the source is below if you're interested, but really this is just a proof of concept. I think there is so much more that could be done in this area and this is just scratching the surface.

What controls would you like to see? I'm thinking a basic button, textbox, dropdown, radio, and checkbox controls would be nice to have and probably not to difficult to create. I'm hoping to finish up Part 3 of my WPF/E data grids series using a WPF/E data grid server control. Anyone interested in starting a codeplex project?

Source Code Download

Simulating Data Grids in WPF/E - Part 2

Posted in ASP.Net/Web Services | WPF/E at Thursday, March 08, 2007 5:23 AM Pacific Standard Time

The source code for this article can be downloaded here. You can view a live sample of the grid in action here.

This article builds on Part 1 where we used ASP.Net AJAX to get a list of employees and then format then with Xaml to add them to our data grid. Please refer back to Part 1 for all the requirements to get this running since we will be using the same database and project.

A Slightly Different Approach

In Part 1 we used ASP.Net AJAX to get an array of employee objects which we then formatted as Xaml using a template after which we positioned each employee canvas on a simulated grid. This works pretty well, but I wanted to demonstrate a slightly different approach to getting the Xaml for each employee. In this article we will make use of the downloader object to download the Xaml for each employee and the formatting of the Xaml will be done on the server using XSLT.

The approach of using the downloader object is probably best suited for applications where there is a lot of Xaml or there is a lot of formatting that needs to be done to the xaml (like replacing values). In this case it might make a lot of sense to push this task down to the server instead of performing it on the client's machine. However, since this may require more data to be transferred over the wire it could potentially slow things down for clients with slower connection. So both approaches have benefits and drawbacks.

Step 1: Get the Employee IDs

Diving into the code, the first step will be getting the list of employees from the server. To do this we will make use of ASP.Net AJAX again. In the code I created another web service method called GetEmployeeIDs which simply returns an array of integers of all the employee IDs. We call this method using ASP.Net AJAX just as we called GetEmployees in the previous version. We will store this list in our javascript grid object and use it to pull the Xaml for each employee. Below is the call to get the Employee IDs:

EmployeeService.GetEmployeeIDs(delegate(this, this.loadEmployees));

The loadEmployees method of the grid object stores the list of IDs and then calls the startDownload method of the grid object.

Step 2: Download the Xaml

In order to allow the grid object to download the Xaml for each employee we need to create a HTTP handler to do the job. Instead of using a find/replace method of formatting the Xaml with the employee specific information I decided to take the XSLT route since the final result is XML. The first step, however, is to get the employee data in an XML format. To do this I created another method on the EmployeeData object that makes the following SQL Query and returns the result as a string:

select EmployeeID, LastName, FirstName, Title from Employees where EmployeeID = @empID for xml auto

By adding the for xml auto to the end of the statement we will get our results in XML format which will look like:

<Employees EmployeeID="1" LastName="Davolio" FirstName="Nancy" Title="Sales Rep" />

Now we can run this through our XSLT to create the output Xaml that we want. You can view the XSLT here.

Our HTTP handler just takes the XML and transforms it using our XSL and then write it to the output stream. You can view the resulting Xaml here.

*Note: you might notice that I create a new downloader object for each download. I started out using the same object each time but it kept crashing IE so I think there is some kind of bug. Creating a new object each time seemed to solve the problem.

Step 3: Add the Xaml to the Canvas

Once we've download the Xaml we just add it to the canvas and set the Canvas.Left and Canvas.Top properties to position it on the grid.

var empXaml = this.control.createFromXamlDownloader(sender);

empXaml["Canvas.Top"] = this.top;
empXaml["Canvas.Left"] = this.left;
this.canvas.children.add(empXaml);

The top and left properties are incremented each time using the incrementMargins method of the grid object. Next we either download the next employee or if we are done we hide the progress bar which I've added since the last example.

Next Steps

Just like last time I've left out quite a few things. Some of them I plan to implement in Part 3 which I'm working on now. But others, like mouse over effects and better images, are left for you to do. Have fun!

Page 1 of 5 in the ASPNetWebServices category(RSS) Next Page