May 2007 - Posts

• Calculating Relative Perspective For Silverlight Xaml

  So I touched on this earlier when I when over the JavaScript class structure for Silverlight classes.  So usually when I get a comp from a designer they are usually designed for a certain size say 400 by 600.  say there is some element in the block is 45 pixels accross.  So now I make my class out put all these bits into the xaml on the fly so the functionality is better contained in a class for reuse.  I want me UI to be able to be set to different sizes and have it look correct.  Todo that I need to calculate the relative width.  So at a width of 400 for the UI and the element is at a width of 45 needs to be reset when the width changes to 240.  So what I want todo is take the width and multiply it times some value that gives me the correct number to replace the 45.  So what I do is divide 45 by 400 to find the factor I need to be able to take the width whether its 400, 500 or just 180 and then multiply it by the factor.  So in code I might have something like this: var ItemWidth = UIWidth * .1125; and poof a got my width and my UI can be set to anything size I want and it looks correct.   Posted May 30 2007, 04:30 PM by david.kelley with no comments Filed under: javascript, wpf/e, popfly, springfield, david kelley, silverlight

• Microsoft Surface

  Chad sent out a link to this and I see it showed up on a few other public places, I know we are envolved with this and it is just super cool.    http://www.microsoft.com/surface/    http://www.theregister.co.uk/2007/05/30/surface_computing/   http://www.msnbc.msn.com/id/18928656/   http://www.redorbit.com/news/technology/949868/microsoft_unveils_new_surface_computer/index.html    http://www.technologyreview.com/blog/editors/17612/   I'm sure we will be seeing more of this 'product'... :) Posted May 30 2007, 07:17 AM by david.kelley with no comments Filed under: david kelley, WPF, surface

• Popfly - Programming for the Everyday Person

  I remember going to a conference for developers a number of years ago and they talked about how programming one day would be more like using Visio then using Visual Studio.  Popfly in my mind is one step closer to that goal. Really it achieves this for every day users being able to create web mashup applications.   Well to make it easier I created a couple of shared blocks for doing actual logic.  One is called Eval and the other Math.  Both blocks are shared so anyone can use them.  They are fundamentally simple but provide the ability to add logic between blocks.  If you have a Popfly account just search for 'Eval' or 'Math' and you should be able to find these blocks. Posted May 29 2007, 08:00 AM by david.kelley with no comments Filed under: javascript, wpf/e, popfly, springfield, david kelley, silverlight

• WCF Patterns and Practices

  Some one sent me this cool link.   http://msdn.microsoft.com/msdnmag/issues/07/02/ServiceStation/default.aspx   I'm in the middle of doing a WCF project and for some reason had not see this before.  Its very very cool. Posted May 29 2007, 06:49 AM by david.kelley with no comments Filed under: david kelley, patterns and practices, WCF

• Silverlight.js 2.1

  alot of the Silverlight 1.0 samples using javascript include a library called 'Silverlight.js' and then another file that has a function called 'createSilverlight' that you have to hard code your Silverlight class name so that it is created and the xaml is pulled in dynamically sort of...  Anyway Javascript has this cool little function called 'eval' so I redid this function so that you only need to have one for all your Silverlight apps with creating a bunch of version of this.  So it made since to add it to the library so that all I need is my application code and this library and Im good. So the biggest change is really the first light of the function.  So instead of var scene = new HelloWorldSilverlightClass(); you just put in this line: var scene = eval( 'new ' + Id + '();'); and now it works for everyone for all the Silverlight classes. Posted May 23 2007, 09:32 AM by david.kelley with no comments Filed under: javascript, wpf/e, springfield, david kelley, silverlight

• Identitymine Silverlight and My man Jared

  Microsoft recently recognized us internally as an agency that can do 'Silverlight' development.  This is in part to the great Silverlight work Jared Potter did on the airline demo for MIX 07.  Good Job Jared. http://silverlight.net/GetStarted/  Posted May 22 2007, 11:46 AM by david.kelley with no comments Filed under: david kelley, silverlight, Jared Potter

• Silverlight Links

  The main silverlight site: http://www.microsoft.com/SILVERLIGHT/ Getting Started With Silverlight (on MSDN): http://msdn2.microsoft.com/en-us/library/bb404300.aspx Popfly http://www.popfly.ms/ Silverlight .NET http://silverlight.net/    Posted May 22 2007, 09:50 AM by david.kelley with no comments Filed under: javascript, wpf/e, popfly, springfield, david kelley, silverlight

• Silverlight.js - Version 2.0

  Ok, now really MS has get some reviewing going of the Silverlight javascript stuff.  So I thought I would go through this library (Silverlight.js) and check it out and most of it was ok but I found of bunch of this sort of thing:  foo += something; foo += somemoresomthing; foo += somethingelse; foo += forbar; So I went through and 'upgraded' this core Silverlight clientside library.  so things like the above look more like foo = something + somemoresomthing + somethingelse + forbar; I also changed a few if statements to trinary's and cleaned up a few other bits. Posted May 21 2007, 09:42 AM by david.kelley with 1 comment(s) Filed under: javascript, wpf/e, david kelley

• Silverlight Primer - HelloWorld

  So lets take a closer look at that class I posted earlier.  So if you actually want to use it to see it working I thought it might be nice to fill in the rest.  See the attached zip but basically we have 5 files.  The first one is our web page or 'Default.html'; In here we see a script reference to our 3 javascript files.  and then there is a script block that calls a function createSilverlight and then there are three parameters.  The createSilverlight function is found HelloWorld.xaml.  This is what basically creates a reference to our Silverlight application class and gets everything rolling.  If you open this script file you can see the function definition and then where it creates the variable 'scene' you see that it is set to a new instance of our hello world class.        Back to the default.html page.  So of the 3 references to JavaScript files we have the Silverlight.js which is the library used for creating our silverlight controls.  (look for a new better version on our blog here shortly as after reviewing it... it needs some work)  anyway the next file is the HelloWorld.ext.js script which is what holds our createSilverLight function we talked about.  Then is our HelloWorld.xaml.js.  This is the script block that contains our HelloWorldClass (see earlier post or the attachment here).      Lets look at our call to 'createSilverlight' call again.  You note the version parameter is a reference to our xaml which is how it gets pulled in. Looking actually at the xaml it is straight forward enough, basically a canvas in a canvas with a canvas with some rectangles for a nice vancy background and a textblock with nothing in it.  Our constructor on our HelloWorld class sets the text to its message property and thus we get our hello world.       One last thing to point out is this method of declaring the class gets around the issue with using Silverlight in the context of an object tag.  When you use the object tag then you end up having to 'click' the control first before it works complete.  Using this dynamic script method using the Silverlight.js we can get around that issue and our stuff just works if a bit more cryptic.  Oh and one more thing is that we also then get access to the browser object model which is not the case if we wrap everything in an object tag and have the xaml pull in our script.  Oh and this uses the Beta Silverlight version 1.0     Posted May 18 2007, 01:38 PM by david.kelley with 1 comment(s) Filed under: javascript, david kelley, silverlight

• WPF/e, Silverlight or is it Springfield... wait 'Popfly'

  Ok, so this stuff is really cool and when I first started playing around with 'Springfield' and Silverlight I guess I was in heaven :)  But...  as a control vendor I think we will live in the Silverlight 1.1 world.  Silverlight with JavaScript is cool but the fact that it is not compiled and people get to see our code is less then a warm fuzzy...  But business asside, Popfly is really really cool and what this really does it provide awesome dev tools for the non dev/designer.  Now on some ones web site or blog or whatever and using Popfly they can slam together a mashup right quick.  For example if I'm a designer of say cloths and we have a blog we can take pictures of new designs each week and have some slide mashup show the latest and greatest from our photoshare place and no one has todo any fancy coding.   For the power user non dev time popfly is a godsend.  http://www.popfly.ms/Overview/ Posted May 18 2007, 12:28 PM by david.kelley with no comments Filed under: javascript, wpf/e, popfly, springfield, david kelley

• Silverlight JavaScript Class Structure

  Silverlight is currently my favorite ms technology.  I guess when it comes down to it I love all things web and db related and well legos too…  But Silverlight is the coolest thing to come along for web UI in a while.  So after playing with all the samples I can see the all the old really ‘skilled’ js dev’s are probably in management now so I wanted to start by talking about class definitions in JavaScript as used with Silverlight.    One of the cool things about this methid is that it is compact and this method appears like class structures in similar to C# and JavaScript as used previously in other technologies (xHTML, or ASP) and is more familiar for other developers.  Besides this there are technical benefits by having all the method definitions internal to the class we now remove them all from the scripting engines global look up table.  Now lets take a closer look at the class below.  You will note that the class is defined as a function or with the key word ’function’.    Properties are declared using the this key word and then we have the constructor.                     The constructor of this class is actually defined as a virtual function and then assigned to the member name on the class.  This is the most efficient method as there is no separate definition for the method and the methods association to the class as might be seen else where using JavaScript.  This is by no means something new to Silverlight but after reviewing a lot of the Silverlight samples I think it is something we need to review…  function HelloWorldClass(sender, args) {   this.Control = null;   this.RootElement = null;   this.LabelElement = null;   this.Message = 'HelloWorld!';   this.Width = null;   this.Height = null;   this.LabelName = 'MyLabel';   this.BGRect1Name = 'BGRect1';   this.BGRect2Name = 'BGRect2';   this.BGRect1 = null;   this.BGRect2 = null;   this.handleLoad = function(control, userContext, rootElement)   {   this.Control   = control;    this.RootElement  = rootElement;       this.LabelElement  = this.RootElement.findName(this.LabelName);    this.BGRect1   = this.RootElement.findName(this.BGRect1Name);    this.BGRect2   = this.RootElement.findName(this.BGRect2Name);       this.Height   = this.RootElement.Height;    this.Width   = this.RootElement.Width;       this.BGRect1.SetValue( 'Width', this.Width );    this.BGRect1.SetValue( 'Height', this.Height );    this.BGRect2.SetValue( 'Width', this.Width );    this.BGRect2.SetValue( 'Height', this.Height );       this.LabelElement.SetValue( 'Width', this.Width * .108333 );    this.LabelElement.SetValue( 'Height', this.Height * .1225 );    this.LabelElement.SetValue( 'Canvas.Top', this.Height * .02625 );    this.LabelElement.SetValue( 'Text', this.Message); } }   In this sample we also see several some more important basics to a good constructor for a Silverlight class.  First we keep references to the key components in the class.  This allows us to easily reference the user interface anywhere in the class through the 'this' keyword.  'Control' is a reference to the aghost and RootElement is the root of the Xaml component of our Hello World class.  Once we have reference to the root element for our user interface we can now grab references to elements within our interface.  Here we only grab one reference but you get the idea.  Third we grab parent values and store the locally to the class for reference.                    So next we are setting values on our 'LabelElement' but we are calculating positions (ie, width, height, top etc).  Xaml certainly can set these values right on the tag but the reason we might want to do it here is allow the class to be used at different sizes and be able to calculate perspective dynamically and look good without having to reset anything.  From a design stand point you can then reuse the control and only set the root element properties and all the parts inside that will adapt based on the designed perspective relative to the rest of the control.  Generally the technique I use to get these values from starts with a well designed xaml comp.  So in this case Jared built this cool looking comp with a set size and width.  To determine the right numbers to use to get the proper perspective on say the width of a label was to take the coded width of the label, lets say 50 and then divide that by the control width which gives you a number like 0.9999... something.  So then we are able to calculate the width we want to maintain the relative look and feel regardless of the actual width of the control.  So then we have our class take the width times this point value we have and then no matter the size our xaml looks slick, just the way we like it.   Posted May 16 2007, 06:45 AM by david.kelley with no comments Filed under: david kelley, silverlight