HackingSilverlight

Dirty Dirty Silverlight Hack... - Silverlight 4 Hack: Use Native/Desktop CLR Without COM Registration

noreply@blogger.com (david.kelley) — Fri, 12 Mar 2010 17:46:00 +0000

Here is a hack of the month. Jeremiah is probably my favoriate Silverlight Prodagy and he has done it again with this wonderful hack, 'Use Native/Desktop CLR Without COM Registration' I like the first line, "WARNING: Information and code here can easily be abused. Please do not use it as a crutch in application planning, but more for utter despair or experimentation. Thus I wrote this blog post from that perspective."

Certainly Jeremiah's code can be abused but what is really interesting to me is how this is one more way to push the limits of what Silverlight can do. 'Hacking' doesn't have to be evil but can be just that pushing the limits and making things better. With that commentary here is the first paragraph and sample code from his article and for the rest you will have to go read his post:

Silverlight 4 + OOB + Elevated Trust gives us the ability to use COM. That would be extremely useful (vs. really useful), except we cannot use just any COM class. It has to support IDispatch (COM automation). It also has to have a ProgID associated to it. That leaves you still with quite a few built-in COM objects to work with, as Justin document's quite well here. What about running our own native or .NET code? One would have to register a COM object first, which requires administrator rights. That�s no fun for an end user! Optimally, it would be nice to be able to add your desktop CLR objects as resources to your XAP, and from Silverlight code, be able to instantiate and use your Desktop .NET classes. This is a hack to do just that.

Huh? What does the hack do?
Let me explain it in code.

/* Create our Desktop .NET helper */
dynamic fullDotNetProxy = fullDotNetProxy = ComAutomationFactory.CreateObject("ClrProxy");

/* Have our .NET helper load up our .NET assembly we extracted from our SL app resources */
dynamic assembly = fullDotNetProxy.GetAssembly(m_assembliesPath + "\\Inject.Test.dll");

/* Get our .NET Type */
dynamic testClassType = fullDotNetProxy.GetDotNetType(assembly, " Inject.Test.TestClass");

/* Create an object instance of our .NET type */
m_testClass = fullDotNetProxy.CreateInstance(testClassType);

/* Run our RunMe method on our .NET object */
m_testClass.RunMe();

Read the rest at:

http://jmorrill.hjtcentral.com/Home/tabid/428/EntryId/442/Silverlight-4-Hack-Use-Native-Desktop-CLR-Without-COM-Registration.aspx

Programatically Setting Margin On Elements...

noreply@blogger.com (david.kelley) — Thu, 04 Mar 2010 22:43:00 +0000

Foo.Margin = new Thickness(0, 50, 24, 6);

really thats it...

as defined by:

[Named UIElement].Margin = new Thickness( [double] , [double], [double], [double]);

or go the extra mile and use intellisense...

Does Your Agile/UX (User eXperience) Shop have a CMM Rating?

noreply@blogger.com (david.kelley) — Thu, 04 Mar 2010 05:32:00 +0000

I posted this article on Interact:

"CMM? what is that? is the typical response I get when asking about CMM. For starters CMM = Capability Maturity Model For Software Engineering project methodologies. Basically it�s a way to rate how good a software shop is with regard to its process. Now in the UX/Agile space talk of applying Software Engineering metrics such as the Capability Maturity Model For Software Engineering from Carnegie Mellon University might be a bit more than most will deal with however being exposed to both worlds I think it is worthwhile to talk about what UX/Agile can learn..."

Read more at http://www.interactseattle.org/?p=476

Hacking the Xap for Business Intelligence (BI)

noreply@blogger.com (david.kelley) — Tue, 16 Feb 2010 19:27:00 +0000

I did a post a while ago on 'Hacking Xap' files primarily around dynamical loading resources. The past few months I have been playing with another even cooler way to 'hack' xap files. In this case its about business and taking a precompiled xap file and instrumenting that xap file without recompiling your application or any code changes to the application. This kind of detailed usage information can be extremely helpful in looking at how applications are used and help identify key areas to focus on. From a hack standpoint to take a precompiled xap and put 'code' into all the method calls dynamically is just cool. Granted that collected information just doesn't show up on your desktop, you have to build a web service to collect the data but just the fact that I can take a precompiled xap and get it wired up without any jumping around is just cool.

so lets get to the meat of my experience...

I meet with a guy at PDC09 at well PDC from Preemptive Solutions http://www.preemptive.com/ and he brought up a tool that they have that is part of their 'dotfuscator' product. Most .net developers have either heard of 'dotfuscator' or seen it since its part of visual studio. But part of their main 'dotfuscator' tool is around 'Business Intelligence' and a little known additional feature that in my mind should be the main focus is my main interest and the subject of this post. In any case I got excited about this xap hacking tool er 'Business Intelligence tool' and he got myself a license.

So I got my license and found that getting it working is/was very problematic, not only a license key but an activation key and a bi key etc. I had to get a hold of tech support basically twice with an ongoing thread with their tech support... to be honest I'm no longer a fan of DRM or any other security system that prevents apps from running when installed or secures files. I understand that this is needed to keep software from being pirated and intellectual property stolen but preemptive got way overly excited with their implementation.

Install experience and setup aside it all seems pretty straight forward. The hard part of using the software is building the wcf service and collecting the data. Once you get a service up and running though you basically just need to load your xap and pick where you want to collect data in your app and point it at the web service. The fact that you don't need to re-compile your xap is just awesome. And from a ux standpoint getting this data really gives you insight into your application that you just couldn't get without writing alot of code up front.

If BI around usage of your application is important to you in building better Silverlight apps then this tool is worth the hassle of getting it setup. As a Silverlight 'guy' I would list this as a critical tool in your tool Silverlight toolbox.

So to be fair to the company they provide an endpoint that users can use and I'm told there is a codeplex project for helping you build an in house solution and put the results on a sharepoint web part. My only issue with that is having another company have my usage data which or course would be crazy. Certainly I would not want anyone having my data as I have virtually no trust in other companies and their network security... but alas others might be ok with that. and using sharepoint... well just say no ;) Sharepoint provides a great solution if you don't want to customize it too much... :)

More On Pixel Shaders

noreply@blogger.com (david.kelley) — Thu, 11 Feb 2010 17:18:00 +0000

So don't get to excited, I'm certainly not the apotheosis of man and pixelshaders like Walter (http://shazzam-tool.com/ ) but I do think they are really cool and along those lines I saw this great post off nokola this morning on 'Hue Shift in Pixel Shader 2.0' If your into pixel shaders this is a cool shader effict that as suggested in the title 'shifts the hue'. one of the reasons this post is cool is that it provides the shader source which makes worth while. :)

http://nokola.com/blog/post/2010/02/09/Someone-Said-it-Was-Impossible-Hue-Shift-in-Pixel-Shader-20-(Silverlight).aspx

Silverlight 4 - 3D (ish)

noreply@blogger.com (david.kelley) — Wed, 10 Feb 2010 22:35:00 +0000

One of the great new features in Silverlight 3 was the ability todo psuedo 3d via what alot of us joke about as 2.5D. things like prespective transforms and the like.

One of my fellow MVP's Einar Ingebrigtsen got a bit zellous (must have been bored) and make this awesome tool kit for 3d (ish) in Silverlight 4. Granted its not native into the platform but honestly I'm not sure I want it built in. To much over head... But using a toolkit likeEinar's Balder really makes it reasonable.

Here is the Sample Browser:
http://www.ingebrigtsen.info/silverlight/Balder/20100208/TestPage.html

and the code here:
http://balder.codeplex.com
and
http://github.com/einari/Balder

from a ux standpoint I think the kind of visualization work for business is just awesome. Balder should be in everyones tool kit.

Lunch With Interact - MVVM Made Easy

noreply@blogger.com (david.kelley) — Fri, 22 Jan 2010 18:53:00 +0000

We did a cool video pod cast on MVVM Made Easy. Had Erik Mork, Fabio Matsui and Jeremiah Morrill and we talked about MVVM and MVVM made easy and did a demo showing how to build an MVVM using this simple approach for an application in Silverlight.

http://www.vimeo.com/8915487

check it out for more info...

Dependency Injection Made Easy

noreply@blogger.com (david.kelley) — Thu, 21 Jan 2010 23:51:00 +0000

Part of the whole fun with doing 'ard'd samples is just the fun of doing something not quit PC but the bottom line really is doing clear and concise samples that are easy to understand. Granted MVVM really was getting out of control so there was allot of passion about this but in general simple, clear and concise works much better in teaching ideas and concepts especially for less then geniuses such as my self. Today's post comes out of some editing of a video blog post on MVVM Made Simple and some one's mention of using dependency injection over standard binding to a ViewModel in MVVM. That said that is what I'll show today. The most simple implementation of Dependency Injection. Take a look at this sample Xaml code from a few from a Silverlight app using MVVM Made Simple:

<UserControl.DataContext>
<Simple:AViewModelClass />
</UserControl.DataContext>

You can see that we are setting the data context to the view in XAML to a particular ViewModel. In MVVM the idea is that the View is data bound to a ViewModel using DataContext and typically done in Xaml. From here Dependency Injection is one of those concepts that is over complicated by most poeple and mixed with MVVM that makes all of it harder to understand. So really if you are already reading this I'm making the assuming you have worked with MVVM Made Simple and understands it complete. That being the case Dependency Injection is a tweak to MVVM that allows from a programmatic standpoint more flexibility as to the ViewModel being bound to the View.

The Xaml we looked at above is removed or at least the contents of DataContext is removed but in our codebehind we can do this:

this.DataContext = new AViewModelClass();

and now you know Dependency Injection... for 'ards (like me) at least. :)

Silverlight TV Episode 3: Multi-Touch 101 with Silverlight

noreply@blogger.com (david.kelley) — Wed, 20 Jan 2010 19:22:00 +0000

John interviews Silverlight MVP David Kelley (thats me) about developing multi-touch applications in Silverlight. I discuss the types of multi-touch hardware and my experiences in developing real world multi-touch applications. Then I jumps right into the code and shows how to create a multi-touch application with Silverlight 3 or 4! The application David demonstrates walks through the key multi-touch events, handling those events, touch IDs, tracking the location of the touch points, and much more. Being a sly devil, John even got David to commit to coming on the show again and demonstrating some advanced multi-touch samples and sharing his stories of how developers have broken their monitors using multi-touch!

David also calls out props to Tim Heuer and Davide Zordan!

http://channel9.msdn.com/shows/SilverlightTV/Silverlight-TV-Episode-3-Multi-Touch-101-with-Silverlight/#Page=1

here is a quick post to the SL3 code we used from Tim Heuer

Watch the video here:
http://timheuer.com/blog/archive/2009/07/30/silverlight-3-multi-touch-introduction-fundamentals-basics.aspx

this code converts easily to SL4 also here is a quick post more about the UX concepts used in multitouch

http://hackingsilverlight.blogspot.com/2010/01/silverlight-multi-touch-in-real-world.html

also the simon demo that includes multitouch (will have an SL4 version at MIX) that Davide Zordan and I worked on.

http://simon.codeplex.com/

also John's post is http://johnpapa.net/silverlight/multi-touch-101-silverlight-tv-episode-3/

watch for more on this topic in the next few months.

MIX10k Wirestones - the game...

noreply@blogger.com (david.kelley) — Fri, 15 Jan 2010 00:57:00 +0000

first shameless self promotion... Please check it out and vote 5 starts... Here is the link:

http://mix10k.visitmix.com/entry/details/186

That aside this is an interesting contest where the goal is to build the coolest application in under 10k in Silverlight 4 (what other kind is there?) and the problem is that this is not the binary but the source files... and it turns out the wirestone log in Adobe Illustrator had a lot of path data or defined 'points'... that being the case it took me a while to get something that would fit.

If you interested in games like this there is a codeplex project we use for demos at http://Simon.codeplex.com/ and you can go to http://www.HackingSilverlight.net/Simon.html to play the game.

Silverlight Multi-Touch In the Real World (once you go touch you never go back)

noreply@blogger.com (david.kelley) — Thu, 14 Jan 2010 15:47:00 +0000

John Papa asked me to help do a 10 minute segment for the Silverlight TV show for Channel 9. This got me thinking about multi touch from a demo standpoint and made me really think about what we have learned so far.

In the general since we (as an industry or society) are really just starting to see touch become a major part of our day to do human machine interaction. On the Microsoft stack using Surface, Windows 7 and WPF/Silverlight Multi touch support it is really becoming standard stuff. At Wirestone we have really been on the fore front of doing user experience testing and real world development over the past year primarily in the retail space. Now the specific projects I can't talk about yet but let me see if I can come up with some usability rules that might help in your development. If you first just trying to figure out how to do it in Silverlight (starting in at least Silverlight3 or better) there is one main API you need to care about.

take a look at this line of code:

Touch.FrameReported += new TouchFrameEventHandler(Touch_FrameReported);

this associates our one event handler that we care about. now lets take a look at using the event handler:

void Touch_FrameReported(object sender, TouchFrameEventArgs e)
{
foreach (TouchPoint tp in e.GetTouchPoints(Positions))
{
if (tp.Action == TouchAction.Down)
{
// DO SOMETHING
}
else if (tp.Action == TouchAction.Up)
{
// DO SOMETHING ELSE
}
else if (tp.Action == TouchAction.Move)
{
// OR DO SOMETHING MORE ELSE
}
}
}

you'll note that basically we are looping through the touch points, we get touch id's and based on the touch action we can do whatever it is we want. I encourage you to take a look at Tim's post on this and download his sample as he goes through this in detail and built a great multi touch app for testing how touch works using this method.

check it out here and download Tims app. (it also converts to SL4 seamlessly):

http://timheuer.com/blog/archive/2009/07/30/silverlight-3-multi-touch-introduction-fundamentals-basics.aspx

so now that we talked out how to do basic multi touch lets get back to my experience in user experience development with multi touch.

In our work we have been doing allot of users studies with Retail systems including kiosks, touch walls, surface and the like. But my favorite lesson learned has todo with the UX professionals... One day have a long day of debugging and unit testing I went home and wanted to check email on our home computer. I forget what it was exactly but I went to touch the screen and for several minutes I couldn't, I think I almost broke it before I realized that it wasn't touch. And the next week I realized that everyone on the team was having the same problem. Worse still once you realized that was a problem I found I can't stop... really once I went touch... I can't go back. don't get my wrong 'touch' will not replace the mouse in its current form/technology but it extends our experience and allows technology to be better integrated into our lives.

So lets talk about another story we saw in users studies. There are lots of different kinds of hardware, apps and technologies. One good thing to watch out for is the 'kinds' of things that register as a 'touch'. So in Silverlight on my multitouch laptop its not a big deal but I have seen hardware that the light conditions effect touches and even worse some of the hard where is so sensitive that the brush of a sleeve can cause problems. Granted this is more a surface thing then the typical Silverlight retail kiosk but still. When building experiences you need to get they system, hardware and any other bits in place so that you can see how users interact with the system so I can identify things like this 'before' they go live.

When considering design some good things to think about include How the user will tend to interact with the system. On thing you notice is that you loose those the mouse. no mouse overs etc. We have found that user's need and expect feedback. and many times when users 'touch' elements in the UI and nothing happens the user then tends to think that they did something wrong. Help the users by providing feed back even if its just a subtle 'bonk' noise that lets the users know the touch was received. When the user does touch something that does something make sure that 'something' shows that on the screen IE drop shadow forms and element moves slightly etc.

Also remember that we have trained our users to do and respond to computer UI a certain way. Consider that frequently we see users 'double' touch where the users expects there to be something like a double click. Users also tend to click the bottom of images or things below the image before things above. I can't express enough how much better a system is that has gone through extensive user testing and user centric design can be from a User Experience standpoint.

Another big topic in now days is gestures, in Silverlight this can mean 'more' code :) but focusing on the user we found that users tend to do only a few things 90% of the time or more... Touch, move and pinch... everything else that users use once they get past the fact they can touch everything is secondary at least currently. Although subtle things like letting users resize via pinch and the use of touch in the UI that has been carefully thought out regarding interaction really cranks up the end product.

But given considerations like that... touch is where its at and once you go touch, you never go back. :)

Getting Developers and Designers to play nice... and MIX

noreply@blogger.com (david.kelley) — Wed, 06 Jan 2010 19:45:00 +0000

For those of you that don't know MIX is the most important Microsoft related conference of the year. Also MIX has decided to have an open call this year for speakers... and the Public gets to vote... in an effort to get my sessions to the top of the list I'm emailing everyone in my contact list to ask your help in voting for my sessions... :)

Here are the steps:

1. Click http://visitmix.com/opencallvote/Entry?entryId=BREAKI077

2. Click �add to ballot�

3. Click �Submit Your Ballot�

If you have more time start here:

1. http://tinyurl.com/ye9uzwz

and then add all 3 sessions and vote them

Please and Thank you. and feel free to get all your friends to vote too�

For those of you that want more information here are the abstracts... normally you just send them to the people organizing a show but this year they are making everyone vote... :( or maybe this is a good thing... I guess it depends on if I get selected... ;)

Here are the 3 topics:

Title: Breaking Down Walls � The Story of Getting designers and developers working together in an Agency Environment

Abstract: Breaking Down Walls is about the wall between designers and developers in the typical design shop. Getting everyone to cross over, communicate and build better UX is where we are going and where many of the best Interactive Design firms are already. When designers and developers learn to communicate, and work together they really start to be able to make the best use of the tools they have from Adobe to Expression to Visual Studio, all these tools can be used in an open collaborative environment like never before. Learn to make magic here or at least learn how it has been done at Wirestone and other agencies that have done it successfully.

Title: Multi Dos and Don�t touches �Multi Touch Development from the trenches

Abstract: David talks about his experience in the retail space with real world multi-touch applications from touch kiosks to Surface and Silverlight. David will talk about the customer experience and how user centered design and multi-touch work in the retail world with �live� customers as well as the perspective of designers, developers, IA and others regarding multi-touch. From stories about developers touching too much and about good ideas gone amuck David gets it all out on the table.

Title: Hacking Silverlight 4

Abstract: From MVVM for Tard�s to hosting Silverlight in WPF and getting around silly security sandbox�s, this session is about pushing the limits of Silverlight and making things easier to do. With a �It shouldn�t be that hard� attitude to development some of the best work in Silverlight can sometimes be a bit of a hack and this session will talk about some of the most useful hacks. From using external hosts, the DOM bridge and even flash; Silverlight can do just about anything given half a chance or a few hacks.

again that link is http://tinyurl.com/ye9uzwz please vote for me :)

Asynchronous Image Loading in Silverlight

noreply@blogger.com (david.kelley) — Tue, 05 Jan 2010 06:47:00 +0000

So one task that was bugging me today was doing image loading asynchronously so as to not drag the app down. Now there are some 'xaml' ways of doing this in wpf and supposedly in SL but alas I have not seem it work well. I'm working on a larger class that does this better but here is the basics of how I got it to work in C# code... to start with lets take a look at the following code:

WebClient client = new WebClient();
client.OpenReadCompleted += new OpenReadCompletedEventHandler(wc_OpenReadCompleted);

if (ImagePath.IndexOf("http") < 0)
{
string URL = System.Windows.Browser.HtmlPage.Document.DocumentUri.AbsoluteUri;
ImagePath = URL.Substring(0, URL.LastIndexOf('/')) + "/" + ImagePath;
}

client.OpenReadAsync(new Uri(ImagePath, UriKind.RelativeOrAbsolute), ImagePath);

this code lived in the constructor of the class I made. Basically its a user control that replaces the image tag so I can use it in Xaml or programatically etc. in this case I needed to use it programmatically to generate this image 'effect' that I was working on so I passed it into the constructor. the key to the code above is it creates a web client, then checks the url and finally calls the async method that loads the image.

the next bit of code is the event handler:

void wc_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
try
{
BitmapImage ImageToLoad = new BitmapImage();
ImageToLoad.SetSource(e.Result as Stream);
TargetImage.Source = ImageToLoad;
}
catch (Exception)
{ }
}

this code is simple enough. Basically the BitmapImage is created and we load the result as a stream into it and then use that to set the source on an image. At least for me this seemed to work well. I'll probably add a few other features namely some reference counting so when I load 1000 of these it doesn't try to grab them all at once...

Silverlight Hosting in WPF

noreply@blogger.com (david.kelley) — Wed, 30 Dec 2009 09:21:00 +0000

Ok so we know this has been done. Yawn, and it can be done any number of ways from hacking it in a browser control but actually doing it in WPF without the browser control can be a huge pain. Here is a little trick that helps you do just that without all the jumping around.

Jeremiah, (this programmer extraordinaire with apparently WAY to much time on his hands) wrote this little codeplex project that is a 'WPF Panel' that hosts Silverlight. http://silverlightviewport.codeplex.com/

pretty slick, if you dive into the code it is kind of complicated but to use it is straight forward enough. If you download the project and run it you can see it in his test application running a xap in Window1.xaml.

<slvp:SilverlightViewportElement BaseUrl="http://silverlight.net/"
Source="http://silverlight.net/clientBin/showcasenav/ShowcaseNav.xap"
ViewportSize="550,550"
RenderFps="40"
x:Name="slViewport">
<slvp:SilverlightViewportElement.Effect>
<DropShadowEffect BlurRadius="50" />
</slvp:SilverlightViewportElement.Effect>
<slvp:SilverlightViewportElement.LayoutTransform>
<RotateTransform Angle="10" />
</slvp:SilverlightViewportElement.LayoutTransform>
</slvp:SilverlightViewportElement>

you'll notice this is all the standard WPF fare but lets look at the properties on the main panel itself. First is our base url that tells the control the domain in which the xap or silverlight application lives. Next we have the 'Source' which points to our xap file. We then set a view port size as 'ViewportSize' and then the last one we will mention is 'RenderFps' which is the 'speed' that the Silverlight is 'rendered' into your panel. In effect your app now runs in the WPF app. Nice and clean as long as you don't look at the source for the panel which is more a work of art... :)

Self Editing XML File

noreply@blogger.com (david.kelley) — Wed, 30 Dec 2009 08:58:00 +0000

This particular post is a rehash of one I didn't some years back. Basically it is a little technique I developed some 7 or 8 years ago to solve a simple database issue once but I wanted only one file to exist in this case the exe or sorts that was also the xml file. As this applies to Silverlight in the since that I can use this application technique to also be used as a shell for a Silverlight application without all the silly security barriers... > : )

DISCLAMIER: I AM NOT RESPONSIBLE FOR THE USE OF THIS TECHNOLOGY IN FACT YOU SHOULD STOP READING NOW BEFORE YOU HURT YOUR SELF OR OTHERS...

But lets not focus on that... lets focus on the mechanics of what we are talking about. A long time ago in a galaxy far far away there was a company called Microsoft that as the center of the universe they released this cool little DHTML technology back before they changed the name to AJAX and it was still cool called an HTA or Hyper Text Application or 'HTml Application' which basically is an HTML file with the file extension of '.hta' instead of '.html' and when you have one of these locally and you click on it, it then renders without all that silly browser chrome/buttons etc. oh and with the rights of a win32 app installed locally...

Basically with a little markup you can control and manipulate the browser chrome and any com object on the system with a script friendly API you can talk to.

Now this 'hta' thing works if the page is hosted on a web page too... albeit you get ONE security dialog that doesn�t really explain what is going on and if the user clicks ok the hta runs as a locally installed app w/o silly security sandbox stuff going on... and yes that basically means it can for all intents and purposes fdisk your hard drive...

DISCLAMER 2: STOP READING HERE AND DON'T DO THIS STUFF.

Like anything though this can be used for good and evil.

Ok back to how to-do it. if you Google HTA on Bing (or Google) you can get the reference material for hta's but basically it is an html file that runs in a version of IE w/o the sandbox. so basically any html that works there works in the hta too with the added addition of this tag:

<HTA:APPLICATION id="oVDProcess"
applicationName="Virtual Desktop - Lite"
singleinstance="yes"
caption="no"
contextmenu="no"
innerborder="no"
scroll="no"
showintaskbar="no"
version="1.0.032"
SELECTION="no"
windowState="normal"
icon="img\im_gray.ico"
/ >

Now as mentioned you can also access any of your com objects the XML Document object or the 'File System' object... here is some sample code from my magic self editing file:

var oDOM = null;
var giHeight = 360;
var giWidth = 800;

function initFrm() {
try {
self.resizeTo( giWidth, giHeight );
self.moveTo( ( window.screen.availWidth - giWidth ) / 2, ( window.screen.availHeight - giHeight ) / 2 );

oDOM = new ActiveXObject("Microsoft.XMLDOM");
oDOM.async = false;
oDOM.loadXML( oXMLDATA.innerHTML );
instantReport();
} catch(e) {
alert( "Your OS is missing components or they are disabled for processing XML data!\nDESC: " + e.description );
}
}

Notice in this case the code creates the xml document object and loads part of the 'HTML' in...

And here is another sample:

function saveSelf() {
var oFSO = new ActiveXObject("Scripting.FileSystemObject");
var oTempFile = oFSO.OpenTextFile( "xLinks.XML.hta", 1 );
var sSelfSource = String( oTempFile.ReadAll() );

var oPAGEARRAY = sSelfSource.split( '<meta' + ' val="2345"/>' );

var sNewSource = oPAGEARRAY[0] + '<meta' + ' val="2345"/> <xml id="oXMLDATA"> ' + oDOM.xml + ';</xml><meta' + ' val="2345"/> ' + oPAGEARRAY[2]

var oSDOM = new ActiveXObject("Microsoft.XMLDOM");
oSDOM.async = false;
oSDOM.loadXML( sNewSource );

if( oSDOM.xml != "" ) {
var oNewFile = oFSO.CreateTextFile( "xLinks.XML.hta", 1 );
oNewFile.WriteLine( oSDOM.xml );
oNewFile.close();
oNewFile = null;
alert( "Save Success!" );
window.close();
} else {
alert( "Save Operation Failed!" );
}
}

This function creates a File System Object. The trick here is basically the file runs as an HTA i.e. executable but then loads itself as a xml file or custom xml data base and updates 'records' in itself and overwrites itself. Now the trick here is that your HTML must be XML complaint. Really if you don't know what this means maybe you should start somewhere else before reading about how to hurt yourself with this stuff... :)

Hacking the Silverlight Xap file

noreply@blogger.com (david.kelley) — Mon, 07 Dec 2009 23:51:00 +0000

Every now and then I find I need to pull resources out of a Xap file. One of the issues with this is knowing what�s in the XAP. There have been a number of solutions I�ve used over the years (ok that is like 2.5 ish years) like having an index file either a Csv or Xml etc. A few weeks ago I ran across this little class that some guys were talking about on the Silverlight Insiders/MVP thread called un-zipper found here:

http://www.sharpgis.net/post/2009/04/21/REALLY-small-unzip-utility-for-Silverlight.aspx

What is cool about this class is it makes getting the assets out of a zap even if you don�t know what is in the xap up front easy and straight forward. From a using standpoint you basically need to create a webclient and a call and use the Unzipper to run through the contents. The Unzipper class deals with mucking up what is in the xap so all you need to-do is run through the collection and pull out what you need� Let us take a look at what you need to-do:
Assuming you have the Unzipper class (download here) you need the following libraries:

using System.Collections.ObjectModel;
using System.Net;
using System.Windows.Controls;

From here we need to create a web client

WebClient wc = new WebClient();
wc.OpenReadCompleted += new OpenReadCompletedEventHandler(wc_OpenReadCompleted);
wc.OpenReadAsync(new Uri("HackingXaps.xap", UriKind.RelativeOrAbsolute));

In this code we create the WebClient, add a handler and run the call pointed at our xap we want to load.

void wc_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
if (e.Error == null)
{
UnZipper unzip = new UnZipper(e.Result);

foreach (string filename in unzip.GetFileNamesInZip())
{
//do something with the file name�?
}
}
}

From here you can pretty much do whatever you want. Look to see this in the up coming version of the HackingSilverlight library.

Making an Integrator

noreply@blogger.com (david.kelley) — Thu, 26 Nov 2009 08:06:00 +0000

There are still a lot of names for it but I�m going with �Integrator.� I�m not sure exactly who coined this but I tend to like it. But what is an Integrator? At least in the context of the WPF/Silverlight world an Integrator tends to be some one that sits between a design team and the developer team at least initially when a company first gets someone to fill the integrator role. In the long term the Integrator becomes more the designer as part of an integrated team where there is not a design team or a developer team and we get into this Agile sort of cross discipline team that is building better UX faster in order of magnitude then anything before. There are lots of things that have come together of the past few decades to make this kind of team possible. We are going to focus on the Integrator but let take a quick look at the cross discipline team that the integrator role tends to move teams towards.

The New UX team tends to be on one spectrum a developer that can do dev work in the data base, in the web services space and then into the .NET and WPF. This developer might be a software architect with expanded data modeling an application modeling etc but tends to also be able to do some light reasonable UI and knows what good design looks like. The next team member might be an IA or Information Architect. Granted the Software Architect might have some IA skills and if so might even be a UX Architect. So the IA helps make sure the data and the flow of the IA in the IA are solid on the up take for the team but on the end the IA is making sure the user experience is good and doing user testing and other interfacing with users to make sure what they see makes since and works well.

From IA we start to get into the Integrator role, the Integrator will have a sound understanding of IA, UX and be able to write code but most importantly they are able to visually decompose what they see into Xaml and do design and design integration. Going Past the Integrator is the pure designer then might live in more disconnected tools. But as a team evolves into this sort of zen state each role including the dev�s, the IA, the architects, the designers and integrators tend to take on some of the skills of all the others. When everyone can do a little bit of everything the team is able to functional more tightly than ever before using some version of Agile and WPF/Silverlight todo more better and faster than before. It is even possible to take this even further and bring in the PM (Project Manager) to be able to work with customers and take on much of the skills of the IA.

In a way the Integrator can become kind of a seed that when planted in the fertile soil of a dev team that loves design and a design team that loves to see their hot designs alive over time turns the team into a UX monster (in a good way). Here is where we see the best innovation and the hottest UX (User eXperiences) at least in my experience.

Integrators are not born though they have to be grown (again in my experience). Now we get to the point of the article� how do you grow, build or otherwise make and Integrator?
So there seems to be two kinds of coal for building the integrator: The Designer and The Developer. In either case there are good points and bad points about each kind of �coal��
For the Developer (especially/mainly the WPF/Silverlight developer) the good points are if they are already comfortable with Xaml and building WPF/Silverlight applications jumping into blend and becoming technically proficient is relatively straight forward but on the downside� if a developer doesn�t have any design sense at all� really give up now before you hurt someone. The hardest part of making a rock star integrator is getting a design sense, point 8 Helvetica is NOT the same as point 9 Ariel and if there is a question over it then you need to start again. Ok so we then make a huge assumption that you have some design sense. How do you cultivate it? Well ideally working in blend with some hot designers (and no this does not mean �hot� looking although that is good too). But here is a good reading list for the dev aspiring �Design Integrator�

� Presentation Zen (really you must stop making crappy slides) http://www.amazon.com/Presentation-Zen-Simple-Design-Delivery/dp/0321525655/ref=sr_1_1?ie=UTF8&s=books&qid=1259022426&sr=8-1

� A Whole New Mind by Daniel Pink http://www.amazon.com/Whole-New-Mind-Right-Brainers-Future/dp/1594481717/ref=sr_1_1?ie=UTF8&s=books&qid=1259022506&sr=1-1

� Foundation Expression Blend 3 with Silverlight By Victor Gaudioso (http://www.amazon.com/Foundation-Expression-Blend-Silverlight-Foundations/dp/1430219505/ref=sr_1_1?ie=UTF8&s=books&qid=1259021904&sr=8-1 )

� Neuro Web Design � What makes them click? by Weinschenk http://www.amazon.com/Neuro-Web-Design-Makes-Click/dp/0321603605/ref=sr_1_1?ie=UTF8&s=books&qid=1259022564&sr=1-1

� Information Architecture by Wodtike and Govella http://www.amazon.com/Information-Architecture-Blueprints-Web-2nd/dp/0321600800/ref=sr_1_2?ie=UTF8&s=books&qid=1259022633&sr=1-2

� MVVM for tards (http://tard.codeplex.com/ )

� Foundation Silverlight 3 Animation by Jeff Paries http://www.amazon.com/Foundation-Silverlight-Animation-Jeff-Paries/dp/143022407X/ref=sr_1_1?ie=UTF8&s=books&qid=1259022673&sr=1-1

Once you get this or in the process of getting this along with working with a designer is learning how to talk to designers. More than any other thing is team dynamics and team dynamics is primarily about good communication. Outside of the basics of good communication is when coming from the dev world to the design world you need to get in touch with the vernacular as much as possible. Working with designers you can get it from osmosis to some degree assuming you don�t piss them off, part of this means that when you talk to designers about changing their process understand that you probably don�t understand their world and that you can�t be condescending with really you probably don�t know what you are talking about when it comes to design. As an example designer typically don�t� name and group elements in the same way that a dev is going to need them. When you talk to designers about naming conventions you need to be nice and explain why you need their help to have things grouped and named in the assets even from Photoshop and Illustrator.

What about making a designer into an integrator?

In this case the biggest problem tends to be getting past the normal design tools to looking at Xaml at times, wiring up a basic event and some basic code. Understanding the basics of how to work with dev�s is secondary to getting the new design integrator up to speed. While the designer brings the most critical skill to the Integrator role (being a design sense) they have a huge learning curve to wrap their mind around Xaml and Code. While a designer doesn�t need to code an Integrator needs too at least a bit. Much like the dev needing to understand design at a certain level the same goes for the designer to understand some coding in the context of Xaml and Visual Studio.

So how do you get a Designer to be able to write a method in Visual Studio? I would say to start with the most obvious and that is blend. The designer has to be interested in being an Integrator. If the designer is not passionate about learning to make their designs real then they are going to have a hard time. Starting with Blend the tool is designed to at least on some level be straight forward for designers and for starters they can focus on the WYSIWYG. For example all the short cut key codes are the same or mostly the same as Photoshop and the tool is great for doing WYSIWYG sort of �design� but the native format is Xaml. Once the designer gets to the point of being limited then introducing Xaml to the designer is a great next step. So building on this to being able to wire up and event in code and launching in VSTS is about the limit. Here is where the sweet spot kind of happens and this like the dev being an integrator works best when it is a composite designer developer team.

From a learning standpoint the reading list might be:

� Foundation Silverlight 3 Animation by Jeff Peries http://www.amazon.com/Foundation-Silverlight-Animation-Jeff-Paries/dp/143022407X/ref=sr_1_1?ie=UTF8&s=books&qid=1259022673&sr=1-1

� Foundation Expression Blend 3 with Silverlight By Victor Gaudioso (http://www.amazon.com/Foundation-Expression-Blend-Silverlight-Foundations/dp/1430219505/ref=sr_1_1?ie=UTF8&s=books&qid=1259021904&sr=8-1 )

� MVVM for tards (http://tard.codeplex.com/ )
� A Whole New Mind by Daniel Pink http://www.amazon.com/Whole-New-Mind-Right-Brainers-Future/dp/1594481717/ref=sr_1_1?ie=UTF8&s=books&qid=1259022506&sr=1-1

� Neuro Web Design � What makes them click? by Weinschenk http://www.amazon.com/Neuro-Web-Design-Makes-Click/dp/0321603605/ref=sr_1_1?ie=UTF8&s=books&qid=1259022564&sr=1-1

� Information Architecture by Wodtike and Govella http://www.amazon.com/Information-Architecture-Blueprints-Web-2nd/dp/0321600800/ref=sr_1_2?ie=UTF8&s=books&qid=1259022633&sr=1-2

So let us go back to what is an Integrator?

The Integrator needs to appreciate design and to do good design and recognize good design. An Integrator needs to be able to be able to visually decompose a design and build it in Blend as Xaml. An Integrator needs to learn how to talk to designers and developers and be able understand the needs of both. Dev�s need names, designers need design time data and that sort of thing. Most of all the Integrator needs to help facilitate the communication dynamic between design and development and that is what makes the magic juice you see in some of the high end UX companies building on the Microsoft Stack.

Lastly one of the key aspects of getting companies to buy off on supporting the transition from traditional approaches to composite teams (of designers, developers and integrators and IA�s and anyone else we can get our hands) is ROI for better UX. Companies need to see how better UX can increase productivity, increase sales and user satisfaction and more. And they need to see how the composite team using designers, developers and integrators using the Microsoft WPF/Silverlight stack (Xaml, .NET 4, Visual Studio, Expression Suite) saves development costs, time to market and enable the better UX in general. That is the job of the integrator�

Silverlight and Dual Screen Monitors...

noreply@blogger.com (david.kelley) — Tue, 24 Nov 2009 19:16:00 +0000

So I'm working on this dual screen kiosk thing and want to use Silverlight as for some reason I can't use WPF / .net4 etc. long story and not the point. What do I do now?

Well along time ago in a galaxy mostly still down the street I used do alot of 'dhtml' or ajax kinds of things or whatever we are calling it now days and there was this little thing called an hta you could do to get around all that silly security stuff in the browser that keeps you from nuking the hard drive, and file system access etc.

So the trick I found is to have the hta host the Silverlight app and have it resize its self to take up all the monitors. with a third monitor hidden in the kiosk... poof, Silverlight dual screen full screen black magic.

for those interested in hta's:

http://msdn.microsoft.com/en-us/library/ms536495(VS.85).aspx

basically you want the following properties set on the hta tag in the html header:

caption=no
contextmenu=no
indderborder=no
border=none
windowstate=normal
scroll=no
showintaskbar=no

and then on load on the body tag execute the following:

window.moveTo(0,0);
window.resizeTo(x,y);

which could be a function of
window.screen.availWidth and or window.screen.availHeight

see black ecma magic saves the day.

Developers on Better Design, User Experience and Why It Matters

noreply@blogger.com (david.kelley) — Thu, 22 Oct 2009 21:10:00 +0000

The PDC BOF team is pleased to announce another Birds-of-a-Feather session.

Developers on Better Design, User Experience and Why It Matters

What is the return-on-investment of building better User Experiences (UX)?
How does User Interface (UI) design affect your business?

Come join the discussion on why User Experience matters and how it applies to the real world.

In the current world of web 2.0 and with talk of design being important, help us understand why it matters to you and what we get out of good User Interface design. Let�s talk about the technologies on the web and on the desktop that do and don�t support the development of well designed applications, and how we can apply better practices to our own projects. Equally important, let�s discuss how we can bridge the typical gap in cross discipline team dynamics.

Tell us about your secret sauce or just listen to what others have to say. From great enabling technologies like Silverlight or WPF to tried and true web development in ASP.NET using MVC, everyone has a story to tell about UI and design in the Microsoft world.

http://www.pdcbof.com/post/220173613/bof-session-developers-on-better-design-user

Finally a Simple MVVM in Silverlight

noreply@blogger.com (david.kelley) — Sat, 17 Oct 2009 08:05:00 +0000

So a week or so ago I ran across this article/post by Jeremiah Morrill (MVVM-for-Tarded-Folks-Like-Me-or-MVVM-and-What-it-Means-to-Me.aspx ) was agasp that some spent the time to make MVVM so understandable. What will I do now that everyone can understand MVVM? I pinged Jeremiah and he was open to making this a framework on codeplex seeing as there are only 35 versions of MVVM frameworks out there already albeit no matter how good they are they usually include bits that have todo with 5 or 7 other design patterns so lets take a look at building an MVVM app with just the Simple Framework for MVVM. To start with the Simple framework consistes of one class with three lines of real code:

public class TardViewModelBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;

public void InvokePropertyChanged(string propertyName)
{
var e = new PropertyChangedEventArgs(propertyName);
PropertyChangedEventHandler changed = PropertyChanged;
if (changed != null) changed(this, e);
}
}

I know I know its a work of art but this really is all you need. Now using this class is just as simple to create an MVVM application using the simple framework. First create a model class like so:

public class AModelClass
{
// super easy version
public string SomeValue { get; set; }
}

ok so maybe also make it return some data magically. Next you need to create your complex view model class that inherits from ViewModelBase like so (WARNING: this is the complicated part...)

public class AViewModelClass : ViewModelBase
{
private AModelClass MyModel;

public AViewModelClass()
{
MyModel = new AModelClass();
}

public string SomeValue
{
get { return MyModel.SomeValue; }
set
{
if (MyModel.SomeValue != value)
{
MyModel.SomeValue = value;
InvokePropertyChanged("SomeValue");
}
}
}
}

So now we have a model that returns some data and then we have our view model that we can bind do. Now to create a View (ie user control) with xaml akin to this:

>UserControl.DataContext<
>Simple:AViewModelClass /<
>/UserControl.DataContext<
>Grid x:Name="LayoutRoot" Background="White"<
>TextBox Text="{Binding SomeValue, Mode=TwoWay}" /<
>/Grid>

If you really like you can get extra complicated and load view in shell or whatever in Xaml like so:

>simple:AViewClass /<

so some other fancy thing... but that is all it takes to have some Model View View Model going on. Nice simple...

http://simple.codeplex.com/

stay tuned for maybe commanding for tards...

Silverlight Hack of the Week - Auto Zoom

noreply@blogger.com (david.kelley) — Fri, 16 Oct 2009 21:56:00 +0000

Justin Angel did a tweet about this and I must admit its cool and I had never even thought out this before but you can set autozoom and on zoom event in silverlight for when the browser host supports zoom on a page.

AutoZoom
Auto zoom is the simplest. hook this up in the html and this the silverlight control will be able to be zoomed as the browser zooms.

<param name="enableautozoom" value="[bool (ie true or false for the tards that dont know what a bool is]"/>

http://msdn.microsoft.com/en-us/library/dd833074(VS.95).aspx

on zoom
so if you are using the first feature you can also then have an event handlers to do something special on zoom. the on zoom html param allows you to define an event handler on such.

<param name="onzoom" value="[functionname]"/>

http://msdn.microsoft.com/en-us/library/dd833068(VS.95).aspx

http://msdn.microsoft.com/en-us/library/system.windows.interop.content.zoomed(VS.95).aspx

all in all some simple hacks that are not so much hacks but just kind of obscure things in Silverlight.

Building a Dial Control

noreply@blogger.com (david.kelley) — Thu, 24 Sep 2009 15:48:00 +0000

A friend posed a question a few weeks back about implementing a dial control. I found a few but they seemed problematic so I decided it can't possibly be that hard. So the idea is a control with a custom event for dial position change that I can add templates etc to change the look and feel of the control to any kind of dial I want and bind an event handler to so that in can control say volumn. I posted how to implement a custom event last week so I'll focus specifically on the rest of the dial control. Lets start with the template in Generic.xaml.

<Style TargetType="DialTest:Dial">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DialTest:Dial">
<Grid x:Name="Knob" Background="Transparent" >
<ContentPresenter x:Name="Background" Content="{TemplateBinding KnobBackground}"/>
<ContentPresenter x:Name="DialKnob" Content="{TemplateBinding KnobFace}" RenderTransformOrigin="0.5,0.5" >
<ContentPresenter.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="DialAngle" Angle="0" />
</TransformGroup>
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

So from this template we can see that the control will have a wrapper grid to force content to be resized as set and two content presenters one for the background and one for the dial and further a rotate transform on the dial so we can make it turn. As noted these content presenters imply that we have two dependency properties for the dial face and background but we will also have DP's for setting the start or minimum or max angle setting of the dial (0 to 360 degrees).

In our constructor then we set our template and then OnApplyTemplate() we wire things together like so:

Knob = ((Grid)GetTemplateChild("Knob"));
DialAngle = ((RotateTransform)GetTemplateChild("DialAngle"));

Knob.MouseLeftButtonUp += new MouseButtonEventHandler(Knob_MouseLeftButtonUp);
Knob.MouseLeave += new MouseEventHandler(Knob_MouseLeave);
Knob.MouseLeftButtonDown += new MouseButtonEventHandler(Knob_MouseLeftButtonDown);
Knob.MouseMove += new MouseEventHandler(Knob_MouseMove);

base.OnApplyTemplate();

if (Minimum > 0 && Minimum < 360)
{
SetPosition(Minimum);
}

this wires our internal events we use to make the wiring work. What we are doing todo is on mouse down we will calculate the angle of that related to the control and then turn the dial to that position. we then fire off the angle changed event or custom event. The hard part turned out to the just figuring out the math and it turns out that this not the best method 'mathmatically' speaking but this works well. Once get a point from the mouse down we do this to get the relative angle:

double TheDiameter = Knob.ActualWidth;
double CurrentHeight = Knob.ActualHeight;

double Radius = TheDiameter / 2;

double AngleOfRotation = AngleOfRotationQuadrant(TheDiameter, CurrentHeight, NewPoint);

//int DialQuadrant = 1;
if ((NewPoint.X > Radius) && (NewPoint.Y <= Radius))
{
//DialQuadrant = 2;
AngleOfRotation = 90.0 + (90.0 - AngleOfRotation);
}
else if ((NewPoint.X > Radius) && (NewPoint.Y > Radius))
{
//DialQuadrant = 4;
AngleOfRotation = 180.0 + AngleOfRotation;
}
else if ((NewPoint.X < Radius) && (NewPoint.Y > Radius))
{
//DialQuadrant = 3;
AngleOfRotation = 270.0 + (90.0 - AngleOfRotation);
}
return AngleOfRotation;

Basically we calculate 90 degress of position for he dial face quadrant that the event was in and then add the relative additional quadrants as needed to get the correct angle. getting the quadrant goes like this:

double DialRadius = CurrentWidth / 2;

Point CenterPoint = new Point(DialRadius, CurrentHeight / 2);
Point StartPoint = new Point(0, CurrentHeight / 2);

double TriangleTop = Math.Sqrt(ToThePowerOfTwo(NewPoint.X - CenterPoint.X) + ToThePowerOfTwo(CenterPoint.Y - NewPoint.Y));

double TriangleHeight = (NewPoint.Y > CenterPoint.Y) ? NewPoint.Y - CenterPoint.Y : CenterPoint.Y - NewPoint.Y;

return ((TriangleHeight * Math.Sin(90.0)) / TriangleTop) * 100;

now we can set the angle in 'SetPosition(); like this:
if (Minimum > 0 && Max > 0 && Minimum < 360 && Max <= 360 )
{
if (AngleOfRotation < Minimum)
{
AngleOfRotation = Minimum;
}
if (AngleOfRotation > Max)
{
AngleOfRotation = Max;
}
}

DialAngle.Angle = AngleOfRotation;

OnPositionChanged(new DialEventArgs(AngleOfRotation));

the last line being our custom event. and poof it works... So in xaml using the control might look like this:

<cc:Dial x:Name="NewKnobControl" Height="100" Width="100" PositionChangedEvent="NewKnobControl_PositionChangedEvent" Minimum="45.0" Max="135" >
<cc:Dial.KnobFace>
<Grid >
<Ellipse Fill="Aquamarine" />
<Rectangle x:Name="Indicator" Height="10" Width="49" Fill="Blue" Margin="1,45,50,45" />
</Grid>
</cc:Dial.KnobFace>
</cc:Dial>

nice and simple, needs some design love but you get the point. The dial control code will be up on HackingSilverlight.codeplex.com some time this week.

Blend/Catalyst Smack Down?

noreply@blogger.com (david.kelley) — Tue, 22 Sep 2009 03:46:00 +0000

Designer and Developer Workflow

Is it a myth? Marketing lingo? Or could it be real with the help of powerful tools?

Listen in as Ryan Stewart from Adobe and Adam Kinney from Microsoft discuss the workflow concept from their respective point of views. Ryan will demonstrate how Flash Catalyst works within the Flash Platform development cycle. Adam will show how Expression Blend fits into the Silverlight development workflow.

Come join the fun with two of the best speakers in the world on Adobe/Blend at Interact

http://www.seattled2ig.org/?p=257

The Gu a Silveright firestarter

noreply@blogger.com (david.kelley) — Thu, 17 Sep 2009 16:15:00 +0000

if your paying attention and want to learn some Silverlight they are streaming the gu and more all star speakers free from the Silverlight firestarter at:

http://www.msdnevents.com/firestarter/online/index.html

Don't Forget about Silverlight Week

noreply@blogger.com (david.kelley) — Sat, 12 Sep 2009 13:34:00 +0000

So this coming week is really really exciting and I wanted to make sure no one forgot. The stars have aligned and 4 big events are all happening in Seattle:

Monday:
.NET Developer Association User Group Meeting - Featuring Jesse Liberty
http://www.dotnetda.com/Events/EventNewsletter.aspx?EventDate=9/14/2009

Tuesday
Silverlight Geek Dinner
http://adamkinney.com/Blog/silverlight-geek-dinner-sep-15th-seattleredmondbellevue

Wed
Interact Seattle - Featuring Tim Hueur
http://www.InteractSeattle.org/

Thur
Silverlight 3 Firestarter Event
http://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032422412&Culture=en-US