As I've mentioned, I've recently been playing with Microsoft's new "SilverLight" technology, and cooked up this little sample last night. Having been knee-deep in DHTML based web page development since the "golden age" ( the 1990's! ) of the Internet, I've been keenly interested in this technology, touted by some as a "Adobe Flash Killer". It has been somewhat challenging to move from the OOP mind-set of C#, to a more declarative programming model, and in that was it feels similar to DHTML. Obviously, because SilverLight uses JavaScript, incorporating XmlHttpRequests (or AJAX) does become very tempting, not mention very easy to add to the design equation. There seems to be a very loose overall design pattern present in most of the samples I've seen of SilverLight, and I look forward to seeing what those really creative types out there on the web can dream up. One idea that I have that keeps surfacing, would be the ability to simply use JavaScript/XmlHttp against an HttpHandler that return XAML. This may sound like a very "chatty" client, but if done right, could really embody the whole "Rich Internet Application" space. Can I assume that Flash probably is able of using that same design? Probably, otherwise why would Microsoft invest in such a product? I'm curious what security concerns may rear their ugly heads in the future, but it would seem that Adobe Flash is used quite heavily, especially in the "Web 2.0" world, and has clearly been met with a high level of success and popularity, and no glaring security issues.
[sample XAML]
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="javascript:root_Loaded" Background="Transparent" Canvas.Top="0" Canvas.Left="40" Height="300" Width="600" Name="ZillinoisNav">
<Canvas.Triggers>
<EventTrigger RoutedEvent="BtnBlog.Loaded">
<EventTrigger.Actions>
<TriggerActionCollection>
<BeginStoryboard>
<Storyboard BeginTime="0" Duration="1">
<DoubleAnimation Storyboard.TargetName="BtnBlog" Storyboard.TargetProperty="(Canvas.Top)" From="-20" To="5" AutoReverse="false" BeginTime="0:0:0" Duration="0:0:0.1" RepeatBehavior="1"/>
<DoubleAnimation Storyboard.TargetName="Btn1954" Storyboard.TargetProperty="(Canvas.Top)" From="-20" To="5" AutoReverse="false" BeginTime="0:0:0" Duration="0:0:0.2" RepeatBehavior="1"/>
<DoubleAnimation Storyboard.TargetName="BtnGuitars" Storyboard.TargetProperty="(Canvas.Top)" From="-20" To="5" AutoReverse="false" BeginTime="0:0:0" Duration="0:0:0.3" RepeatBehavior="1"/>
<DoubleAnimation Storyboard.TargetName="BtnOptions" Storyboard.TargetProperty="(Canvas.Top)" From="-20" To="5" AutoReverse="false" BeginTime="0:0:0" Duration="0:0:0.4" RepeatBehavior="1"/>
<DoubleAnimation Storyboard.TargetName="BtnLinks" Storyboard.TargetProperty="(Canvas.Top)" From="-20" To="5" AutoReverse="false" BeginTime="0:0:0" Duration="0:0:0.5" RepeatBehavior="1"/>
</Storyboard>
</BeginStoryboard>
</TriggerActionCollection>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>
<!-- First Button -->
<Canvas x:Name="BtnBlog" Canvas.Left="5" Canvas.Top="5" Background="Transparent" MouseEnter="javascript:handleMouseEnter" MouseLeave="javascript:handleMouseLeave" MouseLeftButtonUp="javascript:handleMouseUp" MouseLeftButtonDown="javascript:handleMouseDown">
<Rectangle x:Name="BtnBlogBorder" Stroke="#999999" StrokeThickness="1" RadiusX="1" RadiusY="1" Height="20" Width="75" Canvas.Left="0" Opacity="0.5" >
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.0,0.0" EndPoint="0.0,1.0" Name="BtnBlogLineGradBrush">
<GradientStop Color="Transparent" Offset="0"/>
<GradientStop Color="#CCCCCC" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock x:Name="BtnBlogText" Canvas.Top="3" Canvas.Left="13" FontSize="12" Foreground="#FFFFFF" Text="Web Log" Cursor="Hand" FontFamily="Tahoma" FontStyle="Normal" FontWeight="Normal" />
</Canvas>
<!-- Second Button -->
<Canvas x:Name="Btn1954" Canvas.Left="85" Canvas.Top="5" Background="Transparent" MouseEnter="javascript:handleMouseEnter" MouseLeave="javascript:handleMouseLeave" MouseLeftButtonUp="javascript:handleMouseUp" MouseLeftButtonDown="javascript:handleMouseDown">
<Rectangle x:Name="Btn1954Border" Stroke="#999999" StrokeThickness="1" RadiusX="1" RadiusY="1" Height="20" Width="95" Canvas.Left="0" Opacity="0.5" >
<Rectangle.Fill>
<LinearGradientBrush StartPoint