| Comments

recently i've been getting a few notes/questions about working with web services and asp.net ajax.  my colleague, rob bagby completed a series of great web casts last year covering the topic of the ajax libraries in detail, one of which deals with web services.  there are also two webcasts that deal with calling WCF services using the ajax libraries.  i highly recommend checking them out!

| Comments

in my previous sample i talked about creating custom expression encoder templates.  good times.  also jesse alluded to a something him and i have been working on with regard to what he calls "hyper video" and what i've previously referred to as 'timed overlays' in an example.

in going through both of these i found an issue that i forgot to write about (but a helpful commenter reminded me: thanks ernie!) with regard to using the expression encoder templates and asp.net ajax.

the problem

expression encoder uses a model of encapsulating silverlight and the media elements within an asp.net ajax control.  because they do that, they include the Microsoft AJAX client library (MicrosoftAjax.js) in the template output.  this poses a problem when you implement their code within an asp.net page that already has asp.net ajax in it! 

if you don't make any changes and have a ScriptManager in your code in addition to the template output, you'll see errors like Sys._application, yada yada.

the solution

the solution is two part.

first, you'll notice that in your expression encoder output you'll see the script reference to MicrosoftAjax.js.  if you are including a ScriptManager on your page for other ajax-ness, then you can remove this.  why? well because ScriptManager brings down the MicrosoftAjax.js file for you automatically (read: trust me, you don't need it).

second, you have to move your other javascript references from expression encoder to within the ScriptManager.  it will look something like this when completed:

<asp:ScriptManager id="sm" runat="server"> 
<Scripts>
<asp:ScriptReference Path="~/Silverlight.js" />
<asp:ScriptReference Path="~/BasePlayer.js" />
<asp:ScriptReference Path="~/PlayerStrings.js" />
<asp:ScriptReference Path="~/player.js" />
<asp:ScriptReference Path="~/StartPlayer.js" />
</Scripts>
</asp:ScriptManager>

this is only necessary if you have expression encoder template output as well as you are implementing asp.net ajax content on your page/application.

hope this helps.

| Comments

i was working on a little sample and wanted to make it a bit easier on myself to work with my rss data.  my thought was to use the JSON format for the data and that way i could get at the data in super-cool-ajaxy-type ways.  what was cool was what i found as i began searching.

ASP.NET Ajax provides a class library to javascript!  in System.Web.Script.Serialization.JavascriptSerializer is where you will find your magic.  the JavascriptSerializer can be used on anything that uses XmlSerialization.  sweet.

so now all i had to do was take my RSS data (already in good xml format) and serialize that to xml.  once the rss is in a strongly typed respresentation using XmlSerialization, then i can pass that object to the JavascriptSerializer and voila...json formatted representation.

so my rss:

<?xml version="1.0" encoding="UTF-8"?> <channel> 
<title>Method ~ of ~ failed</title> <link>http://timheuer.com/blog/Default.aspx</link>
<description>ramblings from the digital underbelly</description>
<language>en-US</language> <copyright>timheuer</copyright>
<managingEditor>[email protected]</managingEditor>
<generator>Subtext Version 1.9.5.176</generator> ...

becomes:

{"Version":"2.0","Channel":{"Categories":[],"Cloud":null,
"Copyright":"timheuer","Description":"ramblings from the digital underbelly",
"Docs":null,"Generator":"Subtext Version 1.9.5.176", ...

wicked.  i put this in an asp.net handler file for me so now i can easily reference some rss data and immediately get back json data to work with, something like:

<script src="http://mysite/rss2json.ashx?u=http://feeds.feedburner.com/timheuer"></script>

you can get an rss serializer with this function built in over at piyush's blog.  very cool, now i can move on to my next step...

| Comments

you can tell when a new fiscal year has started (or at least the month after a new fiscal year).  people are back from vacations, meetings are more frequent, last-minute trips are planned, you get the picture.  all of this has been counterproductive to me being able to really sit down and do some fun things with .  not to feat though, some great things have been going on.

after i had helped "bcl man" :-) upload some videos of ironruby, i decided it did not do him justice to use one of the vanilla templates and altered it a bit to match the current style of his site.  it took all of 10 minutes to do it.  how?  well, i'm working on a screencast to demonstrate just how easy it is to cheat :-).  in the meantime, scott did notice that one of the minimalist templates was removed missing from the expression media encoder update.  what is great is that the team listened to the feedback (wait, aren't they listening to a fellow employee now?) and put it back in.  very cool.  although i'm not a huge fan of 'clean' i think it represents a good start for using silverlight to render media in a custom player.  to use 'clean' simply extract it into your <installdir>\Microsoft Expression\Media Encoder 1.0\Templates\en\ folder and it will show up in the output options.

which brings me to my next thoughts...there is a lot of options to learn silverlight out there.  i've been trying to provide some quick hits myself.  in doing so i think there have been a lot of assumptions made to our users/developers.  if you troll the forums, you'll notice people are struggling at times with simply getting started.  i've been asked a few times and helped a few of 'what do i need' to do silverlight.  well, here's my toolbox (in install order).

    • windows vista ultimate (hey, i'm a windows guy...and it has ultimate in the title...c'mon tell me you don't want that over premium :-))
    • expression design -- not using too much, but that's because i'm working in simple art now.
    • blend 2 august preview -- note that you can install this on top of blend v1 rtm and they run side-by-side if needed.  when you install blend2 you'll notice that there is only one silverlight project type (javascript)...standby and keep installing...
    • visual studio 2008 beta 2 -- why beta 2?  well, up until beta 2 dropped, i'd been using visual studio 2005 to do silverlight...which is perfectly fine actually (some subtle nuances, but okay if you don't want to install beta), but then with the beta 2 drop i noticed that it is now my single ide.  why?  multi-targeting baby.  i can start a new project and tell the ide what fx version to use...wicked, wicked cool -- this has been needed for some time!
    • silverlight 1.1 alpha refresh -- now why not just v1?  well, here's the deal...installing v1.1 alpha refresh *gives you 1.0 already* -- i've seen people install both...you don't need to.  installing 1.1 gives you both my friend.  now, the plugin for 1.1 doesn't auto update right now so you'll have to update yourself, but for me as a developer, i recommend using v1.1 to get your chops going.
    • silverlight tools for alpha -- this gives you the orcas project templates, intellisense, project linking, etc.  when you are in vs2008, these help.

that's it -- when you have that, you have a great environment to develop silverlight apps.  now there are a few other things you can put on (like media encoder), but i'm just talking basics here that make me productive.  now when you launch blend2 you'll see the 1.1 project templates as well.

now, here's my workflow when doing a silverlight app.

      1. i start in blend.  why?  it really is a fun tool to work in.  for what i've been doing it makes sense to start there.  honestly i don't want to do xaml by hand...forgive me.  blend is an intuitive tool even for non-professional interactive folks like myself.  i make sure the xaml i need is there, tight, etc.  i create my xaml controls, etc.  if i'm using javascript for v1, sometimes i just stay in there and use notepad for javascript.
      2. once i've gotten it to a certain point (and assuming i'm doing 1.1 development) i right click on the project in blend and say "edit in visual studio" -- boom vs2008 launches and i can get to some geek code.
      3. at this point it is iterative for me.  i'll inevitably find something that wasn't right in my thoughts in deisgn and move back and forth -- i keep both tools open at this point.

one note i've found is that when you "F5" your project (that's keyboard-shortcut-lingo for 'run') in vs2008 it launches it as a file system.  this could be frustrating for some if you are using downloader objects as the RC doesn't allow the file:/// protocol anymore (which by default launching as a file system project it would be using).  if i know i'll be doing this, i simply open the blend project as a web site (file, open web site) and then it runs under cassini, problem solved.

so that's my quick and dirty on my environment and my workflow.  simple enough i think.

off to samples.  so here's my plan on what i'd like to create and stuff i'm working on:

    • cheating at building a custom media player
    • consuming web services in silverlight
    • writing a custom control for silverlight: part 1 and part 2 
    • end-to-end using silverlight streaming
    • part 1: getting vector art for a starting point (using expression design and files you find on the internet)
    • part 2: leveraging the vector art in silverlight in combination with asp.net ajax for a compliementary interaction
    • part 3: using asp.net ajax to create a silverlight control and create some dynamic interaction with both (for this series, my comrade is coming to the rescue to demonstrate a pattern on doing this).
    • integrating windows live services with silverlight
    • integrating 3rd party api's (yelp, facebook) with silverlight

i noticed that laurence also is working on some good things and sees the need as well for some back-to-basics starting points.

so what do you think?  what would you like to see from all of us?  seriously, please comment and suggest.  i really want to make people more productive in their use of our tools and frameworks...give some thought and make some suggestions on what you'd like to see or what from the above would be lame (i might do it anyway, but just want a pre-opinion i guess).

| Comments

what?! you don't know what facebook is?  haven't you heard all the cool kids are doing it so you should totally jump on it with complete disregard to whether or not there is any benefit to you at all.  then just accept every single friend request and you can have yet another disparate network of your own!  (i'm actually experimenting with adding random friends to see if people accept them the way myspace grew -- friends in myspace seem to almost be a chest-pounding reputation/currency thing.)

seriously, though if you haven't heard about it, it is worth a read.  is it myspace all over?  well, some have pondered.  facebook grew up on college campuses and is gaining popularity with the 'adults' of the world.  a myspace for the linkedin crowd might be a good analogy...i don't know, maybe it isn't.  either way, it is growing in popularity and gaining share over myspace.  i've been lingering on it and like a lot of what they have.  is it different than myspace?  i have no idea...myspace to me isn't built for me -- i get blinded whenever i visit a myspace page, so i just don't look.

one thing facebook has done is create a developer ecosystem to their offering.  this enables geeks and organizations to better infiltrate the facebook network and provide 'stuff' for the subscribers.  arguably, most facebook users are consumers of these services rather than dev geeks like me (and possibly you), so it remains to be seen the usefullness of some of these applications being written for facebook.  there are some leaders: twitter integration, map of vacations, photo albums, etc., and then the obscure ones like red bull roshambull games, etc.

facebook has apis.  developers like apis.  the visual studio express team partnered with facebook to create some .net wrappers for the facebook apis and put it on codeplex as the .  this enables microsoft developers to rapidly develop facebook applications for the client, web, , whatever.  i took a look at them and created a few apps to hack around with.

my first one was to take a look at mapping my friends on a virtual map.  now this time i did search around and notice that there were already about 10 'map my friends' applications out there and most work well.  i decided just as an experiment to myself that i'd play around with this concept still and use instead (sadly, all the examples used google maps).  after using the toolkit to easily get my friends, i then geocoded their locations and displayed on a map.  i accomplished this actually using ASP.NET AJAX to asynchronously get the friends list and then apply them to the virtual earth map.  you can see the application in action here:

i decided not to upload it to facebook as i already mentioned there are about 10 already up there...who needs another one.

the other thing i wanted to do was wrap my head around some of the outcomes of the iPhoneDevCamp recently.  i figured i'd take a look at webkit/safari and see what i could come up with.  there already is a mobile facebook application, but i thought i'd look at making the iphone version of this and see what i came up with.

SIDENOTE: as i was asking someone to test this out for me on an actual iphone, they did point out that someone created a facebook app for iphone...calling it .  i took a look at had some trouble using it (namely because i didn't have an iphone) but also it seemed to link to the mobile app that already existed?  maybe i'll have to try on the iphone itself.

i think what is most interesting is all this talk about the 'full web' experience on the iphone.  if that is the case, then why the need for all the iphone-specific apps (i.e., http://iphone.yourfavoritesite.com)?  well, to me it solidifies that the 'full web' experience on a mobile device still isn't the best and for the best experience you still adapt your design when you know what your target devices are.  i don't think there is anything wrong with that concept.  heck, that's why facebook has a mobile site!

perhaps one of the greatest things that came out of iphonedevcamp was someone looking at keeping the user's UI consistent with other areas of the iphone.  created the "" framework, which is basically a javascript file and a css file that models/emulates some of the iphone interface.  great work joe.  i think apps that maintain consistency with the everyday operations may be perhaps the most successful.  so i took the iUI framework to my facebook concept.  i didn't really dive into the iUI framework too deep, but did notice the output didn't render appropriately in Safari2, Firefox, or IE, but did great on Safari3.  i found this interesting and will have to take more time to examine if there are some safari3 specific things that apple is introducing and possibly breaking compat with standards or even their own past browsers.  nonetheless, i had safari3 to test, so away i went. 

learning the capabilities of the facebook api wasn't difficult, it is relatively well documented and the facebook toolkit aided me in development (note: there are other toolkits for facebook as well for PHP, Java, Ruby, etc.).  my goal was to emulate my home page in facebook when you login.  i noticed that the API didn't have everything i needed wanted, but i'm progressing along anyway.  i figured the key features would be the friend list (and recent status), the inbox notifications, your wall, and a way to update your status.  using the iUI i came up with this (i call it ):

ooh, very iphoney :-).  i chose to help keep brand integrity with facebook and not use the iphone (and iUI) default lighter blue chrome, but instead use the 'facebook blue' colors.  i had to modify some images, but it didn't take long.  when you click on the friends link you'll get the wipe effect that is common to the iphone and then view a list of your friends by alpha (last name) and their most recent status update:

once you move along the home screen you'll notice the iUI features take over.  the title changes based on the css elements and then a back button appears to go back to the home area (the one labeled facebook).  you could finger gesture up/down to scroll your friends here.

i went into an apple store to test this in an actual iphone...not sure if it is my crappy code :-) or a demo unit, but the browser seemed really, really slow...

the other areas are similar in concept/design.  the search/status options will open up text boxes to submit information (still debugging this), but you get the picture.  yes there are still some issues like alpha sorting within the listing of names, etc.  one thing i had to do as well for the login was use the full login experience (since i didn't have an iphone i couldn't use the mobile app on safari3), so deal with it :-).

now was it necessary for another mobile app for facebook?  maybe not.  but i'm just trying to broaden my knowledge of things.  facebook is growing and their openness to providing developer support is great.  it will be interesting to see what useful apps might arise for facebook.