Silverlight Eval Function

So this is a huge hack and the only purpose really for me is to be able to say I can do it and YOU can too albeit don't do this... I know I would have a huge melt down if some one on one of my projects did this. But alas here it is. So I'm working on my new Silverlight 3 'Tools' class and I thought I would go ahead and add this little static member called 'eval' where you pass in some code and it gets executed. So as mentioned I have not been able to come up with a good reason todo this yet but anyway back to the topic. So the code looks like this:

Tools.eval([some code]);

So the 'some code' is any ECMA complaint code that can execute in the context of hte hosting page. and the source looks like this:


private static string ClientSideEvalName = string.Empty;
private static ScriptObject ClientSideEvalFunction = null;

public static ScriptObject eval(string ECMACode)
{
if (string.IsNullOrEmpty(ClientSideEvalName))
{
ClientSideEvalName = "eval" + (Guid.NewGuid().ToString().Replace('-', 'x'));
InsertECMAScript("function " + ClientSideEvalName + "(InputValue) { return eval(InputValue); }");
ClientSideEvalFunction = (ScriptObject)HtmlPage.Window.GetProperty(ClientSideEvalName);
}
return (ScriptObject)(ClientSideEvalFunction.InvokeSelf(ECMACode));
}

We start with two private static members The first one holds a string reference and the other will hold a reference to the external component of eval that makes it work. the eval function then basically checks to see if there is a client side element already that is ready to be called. If not then it will be created. Once it is created then the eval function invokes the reference and passing the input ECMA Code to execute it and return any results.

clean, no. dirty, yes, very. :)

Facebook and Microsoft demos facebook API's

something cool from facebook and microsoft

http://team.silverlight.net/announcements/microsoft-previews-great-wpf-and-silverlight-apps-with-facebook-openstreams-api/

Silverlight Simon v.old

Ariel posted a version of Silverlight Simon that runs in SL2. it looses the flip, pref button doesn't do anything and the out of browser experience goes a way but still very cool :) the coolest part was the process Ariel had to go through to make it work in Silverlight 2 after I sent her the Silverlight 3 version.

http://www.facingblend.com/SimonInSilverlight/index.html

and of course the SL3 version is at:

http://www.HackingSilverlight.net/Simon.html

Bitmap Effects Generic PixelShader Helper Class

Personally I'm into simple code. Code should be as simple as possible todo the job and no more complex then needed. Case in point. Unless there is a strong reason to write my own command structure in Silverlight I'm going to go MVP or pMVP until I can see in Silverlight that MVVM is not just extra work (ie as when they get it to work like it does in WPF). Keeping this in mind I have been playing with pixel shaders. I tried this kind of thing by hand from scratch in Silverlight 2 and using Stegmens editiable bitmap class I could 'kind of' make this work however it was WAY to complicated to be reasonable. However with Silverlight 3 we have PixelShader support so we are gold. I reviewed a number of samples and wrote a few of my own in Shazzam (very cool tool I might add) but the one thing that bugged me was having a zillion pixel shader class's for each '.ps' so I made this simple yet generic class to clean up my source tree.

this is what I want to be able todo:

<Image Source="../Img/kasiadavid.jpg" Grid.Column="1" >
<Image.Effect>
<hsl:Shader x:Name="TargetShader" SetEffect="Ripples" />
</Image.Effect>
</Image>

Here I want to set a dependency property, in this case 'SetEffect' to some key value that will case the control called 'Shader' from my HackingSilverlight library and based on that select some ps file designated.

Here is my class to implement my 'Shader':

public class Shader : ShaderEffect
{
public Shader() { }

public string SetEffect
{
get { return (string)GetValue(SetEffectProperty); }
set { SetValue(SetEffectProperty, value); }
}

public readonly DependencyProperty SetEffectProperty = DependencyProperty.Register("SetEffect", typeof(string), typeof(Shader), new PropertyMetadata(new PropertyChangedCallback(OnSetEffectChanged)));

private static void OnSetEffectChanged(DependencyObject DpObj, DependencyPropertyChangedEventArgs e)
{
ShaderEffect ThisElement = DpObj as ShaderEffect;

if (ThisElement != null)
{
((Shader)(ThisElement)).PixelShader = new PixelShader()
{
UriSource = new Uri("HackingSilverlightLibrary;component/PixelShaders/" + ((Shader)(ThisElement)).SetEffect + ".ps", UriKind.RelativeOrAbsolute)
};
}
}
}

as you can see this could break if there is not ps file with the key name but add a little error handling and your good. :)

Custom Text Runs, Data Binding and cheating...

Faisel sent posted a question:

'Hi,
I have a requirement of showing additional text in a TextBlock. I have a Class in my silverlight application. I want to bind two of the properties in a TextBlock in my main page and show text something like this : "You make me feel - BONFIRE ".
The first part of the text here is a song name and the second part here is artist name. I need to show artist name based on the song name. For example if song is by another artist. It will show song name - "Still loving you - SCORPIONS" .
I tried to bind the Text property of the run to bind the Artist property to show the additional text in the TextBlock. There's some example of WPF which binds the Text property of Run by creating a BindableRun Class which derives from Run. But the problem in Silverlight is Run Class is Sealed in Silverlight.
Is there anyone who can help me to get the desired result. Someone please help me.'

I did the following response that I thought was interesting :) if it might make a few cringe... lol

one easy method would be to loose the binding. I know alot of people would be freaked out and this totally feeds into Dr. WPF's MVpoo design pattern but you could do something like this, so lets say we have this xaml that looks like this:

<stackpanel name="MyPanel" orientation="Vertical">
<button type="submit" content="add" click="Button_Click">
</stackpanel>

so the button doesn't need to be there and we could use a scroll panel or custom control but any element with a children collection would work. but in this case lets say we have this method button_click which contains this code:

TextBlock ThisBlock = new TextBlock();
//ThisBlock.Style = [whatever]...
ThisBlock.Text = Guid.NewGuid().ToString();
Run NewRun = new Run();
//Run.FontStyleProperty = ...
NewRun.Text = " ABC ";

ThisBlock.Inlines.Add(NewRun);
MyPanel.Children.Add(ThisBlock);

so each time you click the button you gets some text with a 'Run' at the end. to translate to the real solution when you load the page or get this data you need to parse it on your own in a loop and depending on some condition change the run context but you could also bind events and do other things at that time. of course you loose the whole data binding but really what it comes down to is does your code do the job?

the thread can be found at:

'http://dotnetslackers.com/Community/forums/showing-additional-text-in-a-textblock/t/3169.aspx '

anyway I know its a hacky way of doing things but hey, that is what 'hackingsilverlight' is all about :)

Silverlight Automated UI Testing

Working with alot of larger clients at IdentityMine we frequently work with teams that use automated testing and deployment systems. I did a post last year on deployment with msbuild and build environment deployments etc and today I'd like todo a quick post on wiring up a Silverlight application for automated UI testing. This is a great way to tied into existing test structures but keep in mind there is a Unit test framework off MSDN that is a great place to start.

http://code.msdn.microsoft.com/silverlightut/

and

http://weblogs.asp.net/scottgu/archive/2008/04/02/unit-testing-with-silverlight.aspx

So quick and dirty this method is kind of a hack to expose bits to existing web testing systems that can only talk to the DOM. with that... I'm going to focus on showing you alot of code...

To start with we have this simple application using this xaml keeping in mind I excluded the extrensous stuff...

<grid>
<grid.columndefinitions>
<columndefinition>
<columndefinition>
<columndefinition>
</Grid.ColumnDefinitions>
<textbox name="inputhere" height="30">
<button name="Btn1" content="process input" click="Button_Click" column="1" height="30">
<textbox name="Output" height="30" column="2">
</grid>

and in the code we add the following C#


private string ProcessString = "complete with [{0}]";

private void Button_Click(object sender, RoutedEventArgs e)
{
Output.Text = string.Format(ProcessString, inputhere.Text);
}

this works great but pretend it is much more complicated... So then we add the following code to our code behind...:

[ScriptableMember]
public void SetTextField(String InputValue)
{
inputhere.Text = InputValue;
}

[ScriptableMember]
public void ClickButton()
{
Button_Click(new object(), null);
}

[ScriptableMember]
public string GetValue()
{
return Output.Text;
}

and then we add the following to our page constructor:


HtmlPage.RegisterScriptableObject("MainPage", this);

and we add this #include er I mean 'using' statement:

using System.Windows.Browser;

from here we have exposed the key elements so any testing system that can talk to the Browser DOM can then wire up to what appear at JavaScript objects like this:

//simulates input:
top.document.getElementById('Silverlight1').content.MainPage.SetTextField("test");

// simulates a click
top.document.getElementById('Silverlight1').content.MainPage.ClickButton();


//gets a value.
alert( top.document.getElementById('Silverlight1').content.MainPage.GetValue() );

I know quick and dirty but now our automated UI web app infrastructure can 'test' our Silverlight application easily.

Dictionary Definition of Xaml (verb and noun)

A friend 'Ariel' from www.facingblend.com did a short post about Xaml being a verb. I've heard this a few times and thought this was cool to see it in print for the first time :)


Check the post out here:
Alternative uses for XAML


I also saw another post by a guy at MS Rob Relyea did a quick post references the first one. In Robs Post (http://blogs.windowsclient.net/rob_relyea/archive/2009/04/10/to-xaml-a-verb.aspx) he mentions a need for a definition so I'd like to offer a definition of Xaml including it as a verb and noun:



Xaml \Za - mul\

Etymology: Modern Technical Term English

Noun 1. Extensible Application Markup Language. Developed by Microsoft as a UI application Xml (Schema) based markup language designed to model application user interfaces suing a series or set of 'tags' as defined by the Xaml Schema of which there are a number of schemas depending on environment ie: WPF v.s. Silverlight.



Verb 1. The action or process of converting a visual asset or visualization into a Xaml(noun) based format for consumption in WPF/Silverlight related environements or tools. ex: I'm going to Xaml this image for you.

Indexablity for Search Engines in Silverlight

I saw a question as of late around the indexability of Silverlight for search engines much like an html based web site or web application. I know from my work with Microsoft and the Silverlight team that this has been taken into account and goes well with the toolablity story of microsoft. Compiled Silverlight is in a 'xap' file which is really a zip which is easily opened and any text based files, xml or xaml can be indexed and this was done with intent for this purpose. That being said that doesn't mean that all the of this is working up front as to my knowledge none of the spiders actually search zips yet but we expect that to happen at some point. Assumping that this happens then we want to make sure that our Xaml has logical names related to the content for all our x:name elements and that they are not only included in the application dll but as loose xaml in the xap.

Another thing to consider though is that as mentioned zips(xaps) are not indexed yet so it is a good idea to do the same kinds of things to our host files (actually is a good idea even if the zips are indexed) that you would do to optimized the page for search indexing. ie, meta tags, install experience code etc.

Happy Search indexing optimizationizing...

Silverlight Simon and New HackingSilverlight.net

So this is only for 'testing' certainly don't go check it out unless your doing it to test. It is certainly not ready for public consumption yet... So I'm working on a new version in SL 3 of the hackingsilverlight site that I uploaded today for testing. This includes Silverlight Simon (Ariel did the design for this)

http://www.hackingsilverlight.net/Simon.html

http://www.hackingsilverlight.net/

So check out the new design and I'll be adding the rest of the design over the next few months.

Silverlight 3 Fonts Loading or Not

Ariel (http://www.facingblend.com/) built this cool Simon says UI in Xaml (remember the electronic version that first came out I think in the early 80's) and asked me to add some brains for fun :) the game logic is pretty simple enough by C# standards. Ariel even got this cool electronic LED looking font. So I got it all working and I noticed that once the score got above 2 the cool font started being not so cool. I thought this might be a messed up or incomplete font or something bizarre but Ariel mentioned something about loading only the parts of the font needed on render or only the part of the font need is compiled into the xap... ??? hmmm... I could see a hack coming on.

I put this bit of xaml in the simon control:

<TextBlock Height="56" Width="60"
FontFamily="./Fonts/Fonts.zip#Digital Readout" Text="0 1 2 3 4 5 6 7 8 9"
Visibility="Collapsed" /$gt;

I compiled Simon and played a few turns until it got a bove 2 and poof my score board was working with all the font elements I need and still w/o the characters I'm not using. Its a hack but works great.

Silverlight 3 LOB Apps

I did this email interview about building LOB apps in Silverlight 3. I think its worth a read if your interested in the topic. My main point is/was 'yes' its ready :) so check it out.:

http://www.silverlightshow.net/items/David-Kelley-on-Is-Silverlight-3-ready-for-business.aspx

"Silverlight 3 is on its way with tons of new goodies. But each technology has to be well accepted from the business users in order to be successful. But what can help the business to take such a decision? We, at SilverlightShow.net, think that sharing experience is a good start.

This article is a part of our “Shared Experience” initiative that aims to give a place to every person or company that has experience in a commercial Silverlight product or project to share that knowledge. If you are one of them and you are willing to participate, download and answer our questions. In return, we will publish not only your answers, but a white paper of the Silverlight solution you have.

Let’s take a look at what David Kelley from IdentityMine has shared..."

Image Animations Problems in Silverlight 3

I was working on a new version of hacking silverlight (the sight) at mix using Silverlight 3 and one of the things I wanted todo was have more of a cloud sort of display of hightlights as opposed to a billboard and do this fakem up 3d using Faisels ViewPanel3D he sent me. it was all great but when the images animated to their new positions it was not smooth and no matter what I did I couldn't seem to be them to animation smoothly.

I talked to a few designers about this and some one mentioned pixel slitting or something like that so I did a bit of research (IE. paid attention to all the items in intellisence for images) and found a nifty setting that fix's the problem.

so it turns out there is not really pixel split or whatever it is they were saying or maybe there is under the covers but for pref reason it is turned off. So the magic setting that puts it back is:

UseLayoutRounding="False"

which seems to turn this thing off so what I think happens normally is that Silverlight is moving the image to the next pixel as opposed to pixel splitting and that can make slow moving images look like they are jerking a bit. So the images then look like:

<Image x:Name="CloudImageElement" Cursor="Hand" Stretch="UniformToFill" Opacity=".8" UseLayoutRounding="False"
MouseEnter="CloudImageElement_MouseEnter"
MouseLeave="CloudImageElement_MouseLeave"
MouseLeftButtonDown="CloudImageElement_MouseLeftButtonDown"
MouseLeftButtonUp="CloudImageElement_MouseLeftButtonUp" >
<Image.Effect>
<DropShadowEffect ShadowDepth="5" Opacity=".7"/>
</Image.Effect>
</Image>

and this seemed to work great. :)

Surface Everywhere

check out this TED conference demo doing multitouch sort of on any where. I can totally see this when I walk up to some one and then their shirt will suddending say this guy is an idiot so I know up front whom I am dealing with...

http://www.ted.com/index.php/talks/pattie_maes_demos_the_sixth_sense.html

I totally want a 'six' sense...