Mess with Silverlight

Fixing Fusion

If you’re running VMWare Fusion on Snow Leopard, you may have hit a few snags with MacFUSE and remote servers. Here’s how to fix it.

Posted by Jack 09/16/2009 10:09AM

Visual Browsing + Data Mashups, Oh My!

Just stumbled across a nifty Silverlight feature on Bing, Visual Search. So far it looks limited to predefined subjects, but hopefully there will be simple, smart ways for end users to start mashing up datasources underneath a slick visual browsing interface. http://www.bing.com/visualsearch?form=SGEWEB

Posted by Rob 09/16/2009 01:48AM

September 10th, 2009

Bing-o-card officially live.

We previewed it a little while back, but we added functionality to allow the user to customize their own Bing-o game, and gave it it’s very own url, http://www.bing-o-card.com/. Go give it a spin!

September 10th, 2009

Saving time.

One of the hardest bits for us internally has been switching over to thinking in XAML terms. And not just on the programming side, though that’s been it’s own fun game of “oh, so that’s why it’s like that.”

In the world of web development, bitmaps are the de-facto product. It doesn’t matter how you compose something, how many filters, masks and effects you add to it, or even how the add them, so long as the end result is a shiny graphic that can be outputted to a nice PNG.

But XAML wants you to think in vectors. Yes, a bitmap will do in a pinch, but the amount of tweak-ability you get from having a path is just amazing. Not to mention that “we all know that” fact of vectors being scalable, which is what we’ve found XAML is all about.

The first few shots at doing interface work were a horror show for me. Rob would finish up a mockup, and I’d have to grind backward and rebuild everything from scratch. Or AIM him in the dead of night and demand he do it. Which he obviously wasn’t happy about.

Switching to Illustrator as our default composition tool saved us quite a few headaches. With vectors from the start, the basic elements could easily be imported into Blend.

But, it’s not quite good enough.

By default, Blend just imports everything as Paths, a very basic representation of a vector. It works, but for many elements, especially things like buttons or background elements, what we really want is a Border, or a Rect. Worse, since everything Blend imports is a Path, just reading the XAML becomes a chore (hence why I make Rob label things for me).

And let’s not forget that, once I start editing the XAML file, should I need to reimport a specific element, I have to round-trip back to Illustrator, create a new file, copy the new element into the document, go back to Blend, and then import that document and go through the whole clean-up procedure.

So even with vectors from the start, I’m still spending time rebuilding things.

My solution? Instead of going straight from Illustrator into Blend, I go into Fireworks first.

Yes, that Fireworks. The one no one uses.

Infragistics has built a fantastic Fireworks to XAML export plugin for Fireworks CS3 and CS4 that is the bee’s knees.

It handles things like converting rectangle shapes directly to borders, handles tiling patterns a bit better than the native import, and it supports selective copying to the pasteboard.

Its wealth of options just trumps what Blend does on it’s own.

Plus, since it’s Mac-compatible, I can export out the XAML into a text file, open it in TextMate on my Mac, and do basic clean-up before I pump it into Blend or Visual Studio.

Everything little that saves my time upfront, means more time for tweaking later. Which is exactly what we want.

September 9th, 2009

Where we are.

It’s been six weeks.

For six weeks, our team has been knee deep in the world of Silverlight, and we’re just starting to come up for air. Just beginning the process of really evaluating what it is these new tools afford us, and just what, if anything, we have to add to the conversation.

Personally, I’ve been spending my time in Visual Studio, which I do have thoughts on, praises for, gripes with, but those are sort of beside the point of this particular project. There are a million plus posts out there all about Visual Studio, many of them written by folks who’ve spent years in it’s shiny clutches and whom would be far better suited to criticize it.

The question we really wanted to answer was: Can a Mac shop do Silverlight development? And perhaps, why would it?

That’s the big question. Why would a Mac shop do Silverlight instead of Flash? Why run in virtualization when you can run natively? Why work with something so clearly outside of the normal Mac ecosystem?

Because it’s better. Not at everything, but at some things. It’s a young toolset, and it shows. But unlike Flash, with it’s winding history of purposes, Silverlight and Expression were conceived and built to do rich interactivity on the web from Day 1. There are no absurd limitations, or strange artifacts from the past. No legacy behaviors that only make sense when you consider the kit’s full history. There’s just a bunch of blocks from which you build rich applications. There’s just a language designed, at it’s outset, for object-oriented development, with features and a library to match.

My experience over the last six weeks has been littered with happy surprises. A few not-so-happy ones, sure (why Textblocks don’t support a character spacing attribute remains a mystery to me), but on the whole, I walk away each day impressed at how easy what I’m trying to do ends up being. I wake up each morning thinking, “Maybe there’s an easier way…” and inevitably, there is. Once I switch off my Mac brain, and turn on my Silverlight brain, I find myself shoulder-deep in an environment where its obvious someone spent a good deal of time trying to anticipate what I’d be doing, and how they could make it easier. I generally feel the reverse way in Flash.

This is a set of tools everyone should be familiar with, that any Mac cowboy out there should play with, if only for a weekend. There are good ideas under this hood. Ideas that have yet to come to any other platform.

In the coming weeks, we’ll be highlighting those as best we can, but know they’re there. And try your best to trust us.

August 27th, 2009

Out of the browser = out of this world.

There are a lot of resources out there documenting Flash vs Silverlight (ShineDraw is a good one, and provides tons of little demos and source code), and at the end of the day if you want to make a weird rotating interface that blurs and bounces when you throw it, you can pull it off in either. The real question- particularly if you are a shop that has done pretty much everything up to this point in Flash- is “Why”?

Why go to the trouble of learning new tools and juming through some hoops when we can keep doing things like we’ve been doing?

Jack and I will have different answers. I know there are some technical bits he is appreciating, but from my perspective, I just want to make awesome stuff, and I need a reason to use Silverlight other than much higher quality video support (especially if the bulk of my projects aren’t video based). To me, I want to make awesome web apps that can break out of the browser and live on the desktop. And Silverlight 3 is starting to deliver that in a sweet way.

Yes, I know about AIR, and I am not a fan. As a mac end user, I feel like I am getting a compromised experience- the clunky performance doesn’t help this perception either.

We’re starting to play with one ourselves, but until we unleash it, I’d like to take a sec and point out a particularly awesome example of this in action- Gadfly, from Clarity Consultanting. (Full disclosure- we met some Clarity folks out having some beers last night and they are nice folks).

First, it’s a nice, full featured web-based twitter client authored in Silverlight. See:

gadfly on the web

Nice. But where it get’s really cool is clicking on that little “out of browser” button. That brings up a very familiar looking screen to those used to installing modern Mac apps.

gadfly install Very Cool. Upon launching it, Gadfly behaves like a regular Mac App, with a dock icon, and about this app screen and so on. The best part, it’s the same app thats deployed online, and I didn’t need to install and optional runtime environment locally to run it. I just hit the button. Compare that to tweetdeck or something, where you have to go install the AIR framework before you can even see the app in action.

gadfly on desktop

No contest. Silverlight 3 is the best cross platform tool for deploying rich internet apps (RIAs as the cool kids say) on the web and desktop in one fell swoop, and THAT’S why I am interested in jumping through a couple hoops to get a new tool into my team’s toolbox.

Go check out GadFly yourself!

August 25th, 2009

Tighter integration for tighter products.

In a nutshell, here’s my creative process: We sit around, and think of an idea. Then I’ll spend a little bit scribbling sketches on a whiteboard and doing a very preliminary wireframe to define a core set of features, then it’s off to the formal design stage with my creative team. After making something snazzy in Illustrator or Photoshop, I throw the files to Jack and his team and wait for them to do their dev magic. It works well enough, except for a habit I seem to have…

While I’m waiting for that cake to bake, I start thinking of shiny things I’d like to sprinkle on top. Usually these ideas start small, but before too long, I’m adding functionality that we didn’t think of during the design phase. Stuff that’s awesome and would make the product better. And sometimes, bless his heart, Jack is able to incorporate this stuff, but alot of the time shouting and door slamming ensues.

Stepping back, it’s a simple enough problem to understand. Resources, especially at a small shop are finite, and budgets and timeframes are always tight. I can’t very well expect that half of the team to drop everything and squeeze in late minute additions (even if they are almost universally bad ass) when they’re already in the middle of a project plan– unless I get in there and lend a hand. If I can offload upfront grunt work, they should accommodate my (sweet) last minute requests a little down the road.

Starting with manageable assets is probably a good first step.

My maiden voyage importing Illustrator files into Blend

Jack gave me a little advice- mainly to keep my original art as clean as possible, clear extra stuff off the art board, work on one screen at a time, etc. Honestly, I was a bit hesitant. Even my (much) earlier attempts at bringing illustrator into Flash broke something at some point or another. I had a sample UI with gradients, transparencies- nothing too exotic, but definitely a little more than stacks of solid colored blocks.

It imported just fine. Pixel perfect, in fact. The only downsides- groups get lost in translation, so all of my converted type was imported as a pile of individual assets, and buttons with icons on them all got separated. The icons themselves, for that matter were broken apart into individual bits. It all looked good visually, but I can understand what Jack is saying when he says it takes a couple hours of his time to go get everything ready for manipulation.

My task was to take the big pile of things and make a nice nested orderly pile of objects. Coming from a flash background, I’m familiar with objects/movieclips/buttons, but at this stage of my xaml career (ha) I haven’t really ventured beyond “canvases”. Jack tried to explain the metaphor to me but it shot over my head. I was busy spending 20 minutes trying to figure out whythings were stacked backwards in my list (PRO TIP: that little button with the arrow at the bottom of the object list let’s you choose whether to sort up or down).

Anyhow, aside from a couple weird quirks- sometimes objects would shoot to random areas of the canvas when I reordered them, and some assets imported as children of an existing canvas, it was pretty simple, albeit time consuming.

But I’ve now earned an hour to make last minute feature requests. Check out the before and after!

animated_vs

August 19th, 2009

Hello, World.

Explanation

It seems fitting that our first Silverlight application was a Twitter client. They’re the new “Hello, World”. It was a decent way to dip our toes in, since I’ve built similar client’s in other environments, and because they’re so straightforward.

Watch the video above to see me build one in about a half an hour.

A few notes on what’s transpiring above.

As I mention in the screencast, we can’t connect directly to Twitter to download the latest tweet from a user due to how Twitter’s setup the cross domain security on their site, so my solution was to build a quick and dirty PHP script and throw it up on our server.

To save time, I ended up using Matt Williams’s excellent PHP Twitter library, but you could easily write your own without too many headaches.

All we need to do is connect to Twitter via the API, and grab the latest tweet from a given user’s timeline. For our site, we’re actually aggregating several user’s twitter feeds, one of which we’re displaying all tweets from (the @MessSilverlight account) and three of which we only want to display those tweets tagged with #mws from.

The PHP looks like this:

<?php
 
error_reporting(0);
header("Cache-Control: no-cache");
header("Expires: -1");
 
require_once("Arc90/Service/Twitter.php");
 
$username = 'your_username';
$password = 'your_password';
 
$statuses = array();
$mostrecentstatus = null;
 
$users_to_search = array();
 
$usernames = explode(",", $_GET['users']);
 
foreach($usernames as $user)
{
	$users_to_search[]['id'] = $user;
	if ($_GET['onlytagged']) $only_when_tagged_with[$user] = "#".$_GET['onlytagged'];
}
 
if (count($usernames) < 1) die("No users given to fetch");
 
$twitter  = new Arc90_Service_Twitter($username, $password);
$twitter->setSSL(false);
 
foreach($users_to_search as $user)
{
	$latest = null;
	$big = $twitter->getRateLimitStatus('json', $user);
	$timeline =  $twitter->getUserTimeline('json', $user);
	$data = json_decode($timeline);
	if ($only_when_tagged_with[$user['id']]) 
	{
		foreach($data as $status) 
		{
			if ($latest) continue;			
			if (substr_count($status->text, $only_when_tagged_with[$user['id']]) > 0) 
			{
				$status->text = str_ireplace($only_when_tagged_with[$user['id']], '', $status->text);
				$latest = $status;
			}
		}
	} else {
		$latest = $data[0];
	}
	$statuses[] = $latest;
	$mostrecentstatus = $latest;
}
 
foreach($statuses as $status)
{
	$dateof = strtotime($status->created_at);
	if ($dateof > strtotime($mostrecentstatus->created_at)) $mostrecentstatus = $status;
}
 
if ($mostrecentstatus->text)
{
	$status_obj = new StdClass();
	$status_obj->status = $mostrecentstatus->text;
	$status_obj->created_at = date("F j, Y g:i a", strtotime($mostrecentstatus->created_at));
	$status_obj->screen_name = $mostrecentstatus->user->screen_name;
	$status_obj->status_id = $mostrecentstatus->id;
 
	echo json_encode($status_obj);
	exit;	
 
}
?>

The code above is released under the Microsoft Public License, same as every other project on this site, so feel free to use it.

August 12th, 2009

Moving parts.

Installers; Friend of the user, scourge of the deadline, voodoo-priests of dependencies and inaccurate progress bars.

I’ve spent one too many hours now getting everything ready for Silverlight development. It wasn’t hard per-se, but there was a laundry list of things to be downloaded, installed, configured and sorted before I could get to building things and lest you suffer like I, hopefully this helps.

The video above shows the general process of getting things going. I’ve obviously edited out a good bit of the thumb twiddling parts, not so much to misrepresent anything, but because I don’t fancy serving up a 5.3 gigabyte video download to ever person who searches their way into this post. You can watch the video or following along with me here. Either way we’re gonna end up in the same place.

What You’ll Need

I’d download everything linked below before you get started. It’s easier to stay in flow if you don’t have to sit and wait on a file to come down from the tubes before you can move along to the next step.

Once you’ve got everything downloaded, you’ll be ready to go.

Installing VMWare and Windows 7

[Rob already covered this]. Good for him. You can watch the video to get the gist of what installing Windows 7 entails, but it’s pretty much like he says. Click-on-this easy.

One thing I do recommend is turning off 3D acceleration. For whatever reason, Blend and Design both run pig-dog slow when this option is turned on in VMWare.

Installing the Trials

Since we’re not MSDN subscribers, and we wanted to give everything a good-and-thorough once over before we invested too heavily in the entire suite of tools, I opted to just use trials for this entire project. Microsoft graciously makes perfectly functional trials available for every piece of kit we need to do Silverlight development.

Now, the order I’m doing this in, in theory, doesn’t matter. But it’s the order I did it in, and everything seemed to work without any hitches, glitches or snitches, so I’m advising you do the same if only because I’m a superstitious person.

1. Setup a shared folder

During your first run of your new VMWare machine, it probably asked you if you wanted to mirror or share out any folders. I generally select “None” on that screen, if only because I prefer turning things when I need them, than turning them off when they cause me problems.

I collected all my downloaded files into a folder on my Mac’s desktop, and connected that folder to the VMWare machine. You can do this whether the instance is running or not. Go to the “Virtual Machine” menu in VMWare, and select “Settings”. Click on “Sharing”. Click the checkbox next to “Share folders on your Mac” to enable sharing, and then click the “+” button to add a new share. Just navigate to whatever folder you stored all those downloads in.

Once this is setup, close the Settings and dive into your VMWare machine. You should see a folder on the desktop of the machine labeled “VMWare Shared Folders”. Open that up and look for the share you just created.

2. Install Power ISO

Once you’ve got VMWare installed on your Mac, and you’ve got Windows 7 installed within a new virtual machine, you’ll want to get Power ISO running. One of the later trials we’ll install is only distributed as an ISO disk image, and as best I could tell, Windows 7 doesn’t have a way to mount them on its own.

Run the file you downloaded earlier of the PowerISO’s site and let it restart the instance.

2. Install Expression Studio

Second verse, same as the first. Once the machine comes back up from its restart, open up the Expression Studio trial installer and let it run.

3. Install Visual Studio 2008 Trial

Here’s where that PowerISO trial comes in handy. Launch PowerISO (it should be in the “Start Menu” under “All Programs” somewhere) and select “Mount” from it’s toolbar. Navigate to the downloaded installer collection and select the file “VS2008ProEdition90dayTrialENUX1435622.iso”. It should mount of the machine’s “E:” drive, unless you’ve got a weird VMWare configuration going.

Open File Explorer (the icon next to Internet Explorer’s big blue E) and click on “Computer”. You should see the VS2008 disc mounted on your E: drive. Double click to launch the installer, and run through setup. This will take an hour or more.

4. Install Service Pack 1

Once Visual Studio is installed, install the service pack you downloaded. This will also take quite awhile.

5. Install Silverlight 3 Tools

You know the drill by now.

6. Run a Test

After all packages are installed, you’ll want to double check that the environment is properly configured. Find Visual Studio in your Program Menu and launch it. The first time round, it’s gonna prompt you to pick a language preference. Most of what I’ve found online regarding Silverlight development was written in C#, so that’s what I picked. Should you have a deep-rooted needed to code in Visual Basic, by all means pick that.

Once you get to the main screen, create a new project in Visual Studio. From the available list of templates, pick “Silverlight Application”. When it prompts you asking whether you’d like it to create a website for the project, click “Yes”. Trust me, this saves you pain later.

Once the project has been created, go searching for Expression Blend. After it loads, open the project you just created in Visual Studio. From with the project, open MainPage.xaml. Add anything you want to the canvas and hit save.

Return to Visual Studio, and click build and run your project (easiest way is just hit the green play button up top).

If IE launches, and you see your project, you’re good to go.

August 7th, 2009

Hipster Bing-O! Preview

In honor of Lollapalooza- and all the good people watching that rolls into Chicago each year with it- we’d like to give you a peek at a silly little project we tossed together, Hipster Bing-O!

Yeah, these things and derivatives have been around for ages, but we thought it would be a good little chance to play with integrating Silverlight with the Bing API.

Take a peek. We still want to tune the search parameters a little bit before toss it up on it’s own domain, which will most likely be monday (domain name propogation, joy). We’re also open to feedback, so holler back in comments.

We’ll get the full source files and documentation up monday as well– right now we’ve got to get over to grant park and start looking for dudes in girljeans and ladies in kanye glasses.

← Older Entries

Newer Entries →