| Comments

yo, check it.  expression design has released a service pack

what!?  i know how can that be?  a service pack < 8 months after its release?  i say awesome.  i've been wanting microsoft teams to continue to become more and more agile especially with regards to very helpful features or great improvements of existing features based on user feedback.

one such point of feedback that is implemented in is that of xaml generation of the layers and/or complete surface.  you didn't know design can generate xaml?  shame on you.  i did a podcast (you should really subscribe to the podcast feed on the left of my blog or just use this link) talking about using vector images (svg) and importing into expression design and getting xaml that you could use in your applications. 

there are essentially two ways of doing this in expression design:

    1. if you only want pieces of your design file to be xaml (i.e., you want to xaml-ize a fragment of the design), you can select the layer(s) in your design file and go to the edit menu and choose 'Copy as XAML' and bam, you now have xaml for those selected fragments in your clipboard.  go forth and develop.
    2. if you want the entire design surface to be a xaml representation, you would use the file menu and choose export.  from there you'll be presented with what looks like a typical 'save as' dialog box.  change the file type to xaml and after choosing location/name click ok.  you'll now be presented with a much improved options window (in service pack 1):

in previous versions the options weren't exactly clear.  for instance the xaml type you wanted (either WPF or ) was in a different tab).  i really like this improved export user interface.  i especially like the option of converting text to paths.  this really helps when you don't want to (or can't) redistribute any type faces.  upon export, you will get all the xaml plus (if you chose that option) path data for your text areas.  very cool.

so if you have design files or vector files that you would want to use in silverlight, this is the perfect tool and function to create the xaml representation of that data.  so go get service pack 1 for expression design and you'll be happy.

| Comments

while perusing the silverlight.net forums i found a question of "creating half circle in blend" and posted my answer (actually posted the xaml of my answer).

Manipulating Expressionrather than try to articulate it in text, which i started out doing and was failing in my own mind, i decided to do a quick screencast demonstrating what i did.  keep in mind i'm not a vector guy but did it the way i knew how.  i hope that someone can correct me with a super easier way of doing it, but until then i'm fine with my method :-).  essentially i used expression design to do most of the manipulation of creating the elements/images i would use in blend.  i think blend does well for some simple element tasks, but if you want to do some more complex things (not that this is a complex example, just making a point), you might be better served in design.  you can view this screencast by subscribing to my podcast feeds on the left area of my blog.

 

i hope this helps answer the question more visually of what i did.  any questions or methods of improvement are welcome in the comments.

| Comments

i recently started to embark on a little 3 part series involving taking a pdf document of a baseball field and doing some and love with it.  it led me along a path of creating some intense xaml design elements actually and i thought i'd share (in simpler form) the process i used.

is a graphic tool that enables creating vector art that can then be exported to xaml (either WPF or silverlight).  it is a great tool that i'm starting to be more and more familiar with.  design understands various import and export format but sometimes your existing assets might not be directly importable.  have no fear there is a simple process (hopefully someone will automate this in one of their tools).  i just added a podcast (feeds listed on the left of this site) demonstrating the steps i used to convert an .svg file to readable in expression design, then export to silverlight xaml for an application.  it's only 8 minutes and might help if you are running into similar challenges.  you'll see that pdf documents with graphics also might give you some love.

| Comments

in my previous post i talked about converting rss data to json using the asp.net ajax javascriptserializer class.  i wanted to use this because i wanted an easier way of interacting with some simple data for a sample i was messing with.  i didn't really see the need to wrap it in a web service call, etc. and in the end i wanted json data.  period.

so why did i want the json data?  to mess with it in of course! what i wanted to do was display my rss feed data in a different way, just out of curiosity.  my goal: display my rss data, in my own handwriting, on a post it note.  in silverlight.  here's what i did.

the font

first, i needed my own handwriting in a true type font (fyi: silverlight supports using open type and true type fonts).  so i went on over to the tablet pc powertoys and grabbed the "My Font Tool" -- this is a tool that allows you to ink the alphabet and then it turns it into a true type font for you.  i did that process and boom, i bring you "Tim Heuer Normal":

Tim Heuer Normal TrueType

okay, great, that step is done.  on to the post it.  headed on over to istockphoto.com for a quick gander at some good stuff and snagged a good one for me.  downloaded it with my credits, used expression design to clean it up and it was ready to go, png-style.

the silverlight application

now on to silverlight...i started using expression blend to create my project.  a simple canvas that had my post-it note image on it and then added some TextBlock elements to represent the rss item title and text:

the hosting page for the silverlight control

now in the page that will be hosting the control i had to add the reference to my JSON-ized rss data using my asp.net handler that i previously wrote about.  i ran into a snag here as i suddenly realized that my json-izer just emitted json data.  that's it.  it wasn't referenced in and javascript variable or anything.  in some situations maybe that is fine, but i needed to "set" a variable to the json data to be able to reference the object later.  i quickly added a param to my json-izer to specify a callback method.  what this would do (if present) would emit javascript that basically called a function.  so if you pass in "c=evalRss" it would result in emitting:

evalRss([{...json data...}]);

this would allow me to set the object data to a variable.  in my hosting page i can now add a reference to my json-izer as such:

<script src="http://blah/rss2json.ashx?u=http://feeds.feedburner.com/timheuer&c=evalRss"></script>

of course i needed to implement the function so i added a simple javascript variable and the callback function:

var rss = null;
function evalRss(objGraph)
{
rss = objGraph;
}

as emiril would say "bam" -- now i have an "rss" object to mess around with...okay, moving on.

setting the textblock elements to the rss data

in my quick sample here, i'm only going to use the latest item in the rss feed, but read later on how you could use them all...remember, sample here folks.

i already had a default handleLoad function that was stubbed out for me and wired up by expression blend, so i'll go ahead and use that.  in the handleLoad function i take the control reference, find my TextBlock elements and set them to my rss data (remember, since my json-izer was a script reference, the json data is already there):

handleLoad: function(control, userContext, rootElement) 
{
this.control = control;
this.header = control.content.findName("ItemHeader");
this.itemtext = control.content.findName("ItemContent");
this.header.Text = rss[0].Channel.Items[0].Title;
this.itemtext.Text = rss[0].Channel.Items[0].Description;
}

okay, whew, got that far.  so when i run the application i get:

RSS Data

yeah, data.  yes, i see it to.  the html.  blech.  i'll have to think about that.  but for now, let's move on.  now i did notice that my text blabbed on beyond the image height and for this sample i didn't like that.  no problem...back to blend.  i created a rectangle (no stroke, no fill) that was the same left/top/width/height as my ItemContent TextBlock.  then with a ctrl+click on both those elements (rectangle, textblock) i headed up to the object menu, select path...make clipping path.  done.  my textblock now is clipped at the shape of the rectangle (you'll not the Clip data added in the textblock attributes).

embedding the font

but wait, i'm not done!  i said that i wanted this in my handwriting.  sweet, i'll just set the textblocks to my font...er...um...wait.  argh.  that's not supported (yet).  no worries there is a way!  here's how to go about it (or at least one way).  first add your true type font to your project.

NOTE: fonts usually have licenses with them.  you need to make sure you understand your font's license before you start embedding it all over the place.  in my case, i contacted tim heuer headquarters and they said it was okay.

now, how do i get the font on the textblock.  here's the process i used.  first, i new'd up a downloader object to get silverlight to download the font to the control and thus have access to it.  i put this in my handleLoad event handler because i want the font to be there asap:

 this.downloader = control.createObject("downloader"); 
this.downloader.addEventListener("completed",
Silverlight.createDelegate(this, this.handleFontDownloaded));
this.downloader.open("GET", "timheuer.ttf");
this.downloader.send();

you'll notice that i added an event listener for the "completed" event of the downloader.  that is where the magic happens with two functions: setFontSource and fontFamily (okay, one function, one attribute).  the SetFontSource (setFontSource in javascript) expects a downloader object as the only parameter.  we're going to use the this.downloader object we created above.  we'll do the setFontSource-ing on our TextBlock elements.  after we call that function, then we can go back to the TextBlock elements and set the fontFamily attribute to the named font value.  i call out named because even though your font file might be "timheuer.ttf" that is not the name of the font family.  all this is done in the handleFontDownloaded event handler and looks like this when completed:

handleFontDownloaded: function(sender, eventArgs) 
{
this.header.setFontSource(sender);
this.itemtext.setFontSource(sender);
this.header.fontFamily = "Tim Heuer Normal";
this.itemtext.fontFamily = "Tim Heuer Normal";
}

so what is happening here?  well silverlight has downloaded the font file using the downloader.  we've passed the downloader reference (which is the sender in the downloader completed event) to the setFontSource property of an element (in our case the TextBlock).  once the font source has been set we set the fontFamily.  so how does silverlight know what to look for?  magic i tell you, magic.  because we've set the font source to a downloader (which downloaded a file), that is the location it is now looking for the fontFamily value...and iterates through that downloader until it finds a match...in our case a true type font named "Tim Heuer Normal" to use.  once we have that i re-run the application and here we have:

RSS Data with Tim Heuer Font 

awesome. 

what about more than one font?

but what if you wanted multiple fonts?  would you need multiple downloaders?  no.  you see, the downloader supports compressed (zipped) files.  and it doesn't just have to be fonts.  it could be a mixture of media, fonts, xaml assets, etc.  in fact, that is how zero gravity gets all its assets for the game prior to play.  if you had a zip file that you added the "timheuer.ttf" file into, really the only thing that would change would be the downloader.open() function to downloader.open("GET", "myzipfile.zip") -- your setFontSource and fontFamily code wouldn't change!  if i had two fonts in the zip file then i could change the header to something like this.header.fontFamily = "Knockout C" or whatever other true type font is in the zip file.

having some fun

now that we have all that wired up, we can move things around and make it look like i posted a note just sticking it on the frigde or something -- not linear.  i can simply add a rotatetransform on my canvas and i'll get:

the fonts, etc. change no problems.

so my little quest was complete.  i got my handwriting in my rss feed in silverlight.  yippeee.  now if only i had an investor.

the issues and controls

there were issues as you saw.  first the characters.  the "my font" tool doesn't ask me to write every possible characters, so if i used some that weren't in my font, blech.  the point here is that you'd likely use a cool font that was professional.

the html -- yes.  i'll have to think about this one as i do have a use for this concept coming up.  my rss feed is html.  silverlight doesn't really have an "html" survace...it isn't interpreting <p> as a paragraph break, etc.  in this sample, it might be problematic, but other areas where you have text in textblocks and are embedding fonts you shouldn't have that issue.

what if you wanted to display all rss feeds?  would you need 10 textblocks and set them 10 times?  well, kinda.  my suggestion here is to use the control approach.  i already have the xaml for my post-it display.  i could take that, put it in a control, stuff it into the zip file with my font and have a control i could reference.  (for an example screencast on user controls in v1.0 see this link) for example, i could encapsulate the post-it in a control that looked something like this:

RssNotebook.RssItem = function(control, target, header, desc, x, y, downloader) 
{
this.header = target.findName("ItemHeader");
this.itemtext = target.findName("ItemContent");


this.header.setFontSource(downloader);
this.itemtext.setFontSource(downloader);
this.header.fontFamily = "Tim Heuer Normal";
this.itemtext.fontFamily = "Tim Heuer Normal";
this.header.Text = header;
this.itemtext.Text = desc;
target["Canvas.Top"] = y;
target["Canvas.Left"] = x;
}

then i can extract the RssItem xaml, put that in a file and add it to a zip with my timheuer.ttf file.  I now have a zip with RssItem.xaml and timheuer.ttf.  now with that i can alter my downloader completed event to look like this:

handleFontDownloaded: function(sender, eventArgs) 
{
var top = 0;
for (var i=1; i<3; i++)
{
var postit = this.control.content.createFromXaml( sender.getResponseText("RssItem.xaml"),
true);
this.root.children.add(postit);
new RssNotebook.RssItem(this.control, postit, rss[0].Channel.Items[i].Title,
rss[0].Channel.Items[i].Description, 0, top, sender); top += 100;
}
}

so what you see happening here is two things.  first let me be clear that this is still a sample, and for the control part i added a scale transform to reduce the size of the image just so i could display it here.  okay, what is happening is that i'm iterating through two of the rss items and createing the RssItem control within that iteration (createFromXaml) getting the xaml out of the downloaded zip file.  then in that control i'm doing the fontSource-ing and fontFamily-ing for the TextBlocks represented in their control. 

pretty cool huh?

i hope this may help with some things.  if not, ask me questions.  i've included the sample code in this post to help you out.

File: RssNotebook-single-style.zip</> (sample using single style)
File: RssNotebook-control-style.zip</> (sample using control style with zip file)

if you have any suggestions for other things you'd like to see, keep them coming!

| 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).