Part of my presentation spoke to me even more so after we delivered the talk.  Our(Glen and I) talk was on creating a good User Experience and prototyping.  The part that most interested me was on user registration.  We used sktechflow to create a prototype application  that let’s users post up events in their area, search events, and supply a forum to discuss each event. 

One of the design consideration we decided to use was a very small user registration.  We collected only the information we needed to register the user email, and password.  Our research indicated that sites using this type of registration had a much higher conversion rate.  When you create screens or prototypes try to keep this in mind.  We want to collect only the information we need.

Once a user is registered and they go to create an event, or post to the forum.  Then we can get more demographic information to flush out our user profile.  Keep in mind the additional information that you collect should be relevant to the the task the user is attempting to perform.  If the user wanted to create an event we can then collect the event name , date , and location information for both the user and the event.  Notice we are asking the user for additional profile information, but in this case the user will be more  likely ok supplying this information in exchange for hosting the event notification.  Psychologically as a user I would be much happier with the overall experience as well.

We also found in our research that you should try to avoid anything that removes the user from the experience of your site or application.  Using email validation ,is a perfect example, before allowing a user to proceed breaks the experience.  First the user has to wait, and then has to switch off the site or application to click a link in an email.  I am not saying email validation is bad just that maybe you should allow the user to continue on a probation account until next time they check their email.  This also puts the user back to the site or application at a later date which is never a bad thing.

Keeping the user engaged, and collecting only information needed to perform a specific task are key to a great User Experience. 

Happy Coding,

Bill Moore

A real quick blog post.  My mix demo made it onto CNET check me out.

http://news.cnet.com/2300-13860_3-10002830-3.html?tag=mncol;txt

Super excited about that one.

Code Happy,

Bill Moore

The best example I was able to ponder through involved windows explorer and dropping files from explorer to your Silverlight OOB application.  So along this note lets see what we have to do to make this work.  As a slight change of pace I will be doing the demo in Blend.

I thought I would show this feature of Blend 4 Preview.  Notice the Silverlight Project Options so you can create an OOB application inside of Blend.

This is not needed but I thought it would be beneficial to go through this process.  So first we set our application to be an OOB.  Here is a pop up you get when you run the application for the first time.  You need to install it before you can run it OOB.

Next add an image control, Name it imgDisplay.  This will be the display the image from the drag and drop.

You need to check AllowDrop for LayoutRoot.

Interesting effect here that I found the imgDisplay also has it's AllowDrop set because the parent is set.

Next we need to enable the drop event for LayoutRoot.  Clicking on the event icon will get you a list of events.

Double Click the Drop Handler.  It will auto create the event and wire it up.  Here is the code for the drop handler.

private void LayoutRoot_Drop(object sender, System.Windows.DragEventArgs e){   

if(e.Data!=null)   

 {        

	IDataObject dataobj = e.Data as IDataObject;        

	FileInfo[] i = dataobj.GetData(DataFormats.FileDrop) as FileInfo[];        

	using (var stream = i[0].OpenRead())            {               

		 var source = new BitmapImage();

	                source.SetSource(stream); 

	               imgDisplay.Source=source;            

		}        

	}    

	}

}

 

The first line verifies  that we have drop data to work with.  We then convert the data to the IDataObject Interface.  We get a list of FileInfo objects back as the data from our drop target.  We take the first drop item and set the source value for our imgDisplay container. The results returned are an array of FileInfo objects so you can work with multiple images and other files if you need to.

Here is screen shot of before and after OOB drop target:

 

 

Here is the source code for the project I hope you find it helpful.   I initially wanted to use a ListBox but ran into some issues so keep yours eyes posted I will be doing a follow up. 

Here is the source code

DropTarget.rar (137.10 kb)

Code Happy,

Bill Moore

Wow today at the PDC they announced the beta release of Siverlight 4.  I could feel something big was coming and I was not let down.  Here is a brief overview of the new features of Silverlight 4. 

1. Tooling support for Silverlight 4 has been incorporated into Visual Studio 2010.  I still believe that blend plays a strong role in developing Silverlight application, but these changes are nice to see. 
2. RIA or WCF Services has been added into Visual Studo 2010.
3. Printing API
1. You create a PrintDocument Object and assign UIElements to the PageVIsual section and they will be printed.  Keep in mind you can generate your own you own UI just for printing.
4. Full Right Click support this is great think about using it with an existing asp.net application to hide the default menu.
5. Web CAM and Microphone support. nuff said.
6. MouseWheel support
7. RichTextArea Control
8. ICommand support
9. Clipboard API yes you too can use the clipboard.
10. HTML hosting control
11. Elevated Trust
1. Give access to the file system and making web calls without needing a client access policy file on the server.  This can only be used for Silverlight OOB application.
2. COM Interop
3. Access tot he notification area
12. You can use the Network Credentail information with ClientHttp requests.
13. Full keyboard access in Full Screen mode
14. Text Trimming
15. Silverlight now acts as a Drop Target
16. Binding to Dependancy objects.  String Format in bindings (no string converters).
1. TargetNull and Fallback value
17. MEF Support
18. DataGrid improvement
19. Google Chrome support

Master:  Have you learned the scrolls of animation?

Student:  Master, Yes studied them.

Master: Please tell me the what scrolls you consulted for your information?

Student:  I went to the library and found information here:

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

Master: Very good.  What is animation?

Student:  From the scroll above “Animation is a an illusion created by quickly cycling through a series of images.”

Master:  What can be animated?

Student:  You can animate properties of type Double , and Color.

Master:  You missed the Point type.

Master:  You have done well.  Now listen as I explain today's lesson.  Storyboards allow you to specify your animation sequence in XAML, and Blend  is the tool of choice to rapidly create your animations.  You can animate more properties than we can enumerate with these three types.   Let us looks at an example of a ghosting effect for an element.  Let us define a blue ball like so:

<Canvas Margin="216,126,305,235">
    <Ellipse Fill="#FF0017FF" Stroke="Black" Height="119" Width="119"/>
    <Ellipse Stroke="Black" Height="119" Width="119" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto">
        <Ellipse.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform Angle="-127.913"/>
                <TranslateTransform/>
            </TransformGroup>
        </Ellipse.RenderTransform>
        <Ellipse.Fill>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Offset="0"/>
                <GradientStop Color="White" Offset="1"/>
            </LinearGradientBrush>
        </Ellipse.Fill>
    </Ellipse>
</Canvas>

We end up with something like this

Add a new storyboard and name it ghost.  Create a copy of the. The XAML looks like this:

<Ellipse x:Name="blue_cp" Fill="#FF0017FF" Stroke="Black" Height="119" Width="119" />
<Ellipse x:Name="overlay_cp" Stroke="Black" Height="119" Width="119" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" Visibility="Collapsed">
    <Ellipse.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform Angle="-127.913"/>
            <TranslateTransform/>
        </TransformGroup>
    </Ellipse.RenderTransform>
    <Ellipse.Fill>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Offset="0"/>
            <GradientStop Color="White" Offset="1"/>
        </LinearGradientBrush>
    </Ellipse.Fill>
</Ellipse>

This is what we will use to create the ghosting effect.  Here is the storyboard we created to gives us the ghosting effect:

<Storyboard x:Name="Ghost">
            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="blue_cp" Storyboard.TargetProperty="(UIElement.Visibility)">
                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="00:00:01">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="overlay_cp" Storyboard.TargetProperty="(UIElement.Visibility)">
                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="00:00:01">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="blue_cp" Storyboard.TargetProperty="(UIElement.Opacity)">
                <EasingDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="overlay_cp" Storyboard.TargetProperty="(UIElement.Opacity)">
                <EasingDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="blue_cp" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                <EasingDoubleKeyFrame KeyTime="00:00:01" Value="3"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="overlay_cp" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                <EasingDoubleKeyFrame KeyTime="00:00:01" Value="3"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="blue_cp" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                <EasingDoubleKeyFrame KeyTime="00:00:01" Value="3"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="overlay_cp" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                <EasingDoubleKeyFrame KeyTime="00:00:01" Value="3"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

What this does is in 1 second scale our copy objects by 3 and set the opacity to 0.  This gives the effect of of the object growing bigger then vanishing.  Lets attach an event handler to the first ellipse for MouseLeftButtonUP.  We also wan to set the IsHitTestVisible to false for all other objects so we can capture the event with the object we want.  IsHitTestVisible determines if an object participates in events to determine if an event has occurred on that object.  The new xaml is below this is the entire control

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    x:Class="animation.MainPage"
    Width="640" Height="480" mc:Ignorable="d">
    <UserControl.Resources>
        <Storyboard x:Name="Ghost">
            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="blue_cp" Storyboard.TargetProperty="(UIElement.Visibility)">
                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="00:00:01">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="overlay_cp" Storyboard.TargetProperty="(UIElement.Visibility)">
                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="00:00:01">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="blue_cp" Storyboard.TargetProperty="(UIElement.Opacity)">
                <EasingDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="overlay_cp" Storyboard.TargetProperty="(UIElement.Opacity)">
                <EasingDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="blue_cp" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                <EasingDoubleKeyFrame KeyTime="00:00:01" Value="3"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="overlay_cp" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                <EasingDoubleKeyFrame KeyTime="00:00:01" Value="3"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="blue_cp" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                <EasingDoubleKeyFrame KeyTime="00:00:01" Value="3"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="overlay_cp" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                <EasingDoubleKeyFrame KeyTime="00:00:01" Value="3"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <Canvas Margin="216,126,305,235">
            <Ellipse Fill="#FF0017FF" Stroke="Black" Height="119" Width="119" MouseLeftButtonUp="Ellipse_MouseLeftButtonUp" />
            <Ellipse Stroke="Black" Height="119" Width="119" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" IsHitTestVisible="False" >
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform Angle="-127.913"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
                <Ellipse.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Offset="0"/>
                        <GradientStop Color="White" Offset="1"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse x:Name="blue_cp" Fill="#FF0017FF" Stroke="Black" Height="119" Width="119" RenderTransformOrigin="0.5,0.5" IsHitTestVisible="False">
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse x:Name="overlay_cp" Stroke="Black" Height="119" Width="119" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" MouseLeftButtonUp="Ellipse_MouseLeftButtonUp" IsHitTestVisible="False">
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform Angle="-127.913"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
                <Ellipse.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Offset="0"/>
                        <GradientStop Color="White" Offset="1"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
        </Canvas>
    </Grid>
</UserControl>

The code behind looks like this

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace animation
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            // Required to initialize variables
            InitializeComponent();
        }

        private void Ellipse_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            // TODO: Add event handler implementation here.
            Ghost.Stop();
            Ghost.Begin();
        }
    }
}

The above code will create a ghosting effect for a group of controls.  So when the user clicks on the object it scales and animates to make it look like it gets bigger and the disappears.

I have two more blogs posts up and coming on is a how did they do that with particle clouds, and the other will be converting the ghosting storyboard to a behavior to attach to an UIElement.

Practice Hard and Happy Coding,

Master Bill Moore ;)

animation.rar (93.87 kb)

I have found these resources invaluable.  I wanted to put them out here some people could check them out.

http://www.safarionline.com 50 dollars a month

http://www.lynda.com  37 dollars a month

http://www.silverlight.net    free

After Effects (More fun than a program should be)

http://www.videocopilot.net/ free(buy their products if you need them)

I will update this list later with more as I come across them.

Code Happy,

Bill

The blog has been quite for a bit.  I have been focusing on brushing up my design skills with the adobe suite, maya , and 3ds max.  I will have some more later but here is a xaml ninja I made. I made it with adobe illustrator based off these instructions:

http://www.blog.spoongraphics.co.uk/tutorials/illustrator-tutorial-create-a-gang-of-vector-ninjas

I then cut and pasted it into expression design.  No problems there which is pretty neat.  Here is the copy as xaml from expression design.  It is all pretty much done using paths. 

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Layer_1_14" Width="1600" Height="1200" Canvas.Left="0" Canvas.Top="0">
    <Viewbox Width="246.982" Height="188.109" Canvas.Left="664.459" Canvas.Top="508.009">
        <Canvas Width="246.982" Height="188.109">
            <Path Width="235.668" Height="171.553" Canvas.Left="5.72064" Canvas.Top="8.18042" Stretch="Fill" Fill="#FF0F0F0F" Data="F1 M 173.533,179.733C 155.057,175.994 147.532,148.363 147.532,129.512L 100.198,129.512C 100.198,149.58 82.6263,185.377 64.09,177.687C 37.4576,166.637 47.8679,121.554 47.8679,92.7202C 34.2089,100.265 5.72064,87.9509 5.72064,72.3465C 5.72064,46.7564 47.8679,33.7705 47.8679,8.18042C 98.5336,8.18042 149.199,8.18042 199.865,8.18042C 199.865,29.7933 232.303,38.685 240.559,58.6586C 246.982,74.1959 214.445,96.8287 199.865,88.4566C 199.865,120.123 204.57,173.451 173.533,179.733 Z "/>
            <Path Width="241.53" Height="180.148" Canvas.Left="3.59545" Canvas.Top="1.15131" Stretch="Fill" Fill="#FF000000" Data="F1 M 177.816,6.48462C 184.361,7.49579 190.576,10.8466 197.198,10.8466C 197.198,12.623 196.032,14.8359 197.198,16.176C 208.27,28.8961 221.419,39.6633 232.972,51.9481C 241.854,61.3936 237.232,85.1108 225.253,90.0723C 222.498,91.2132 219.454,91.7808 216.472,91.7808C 213.49,91.7808 210.446,91.2132 207.692,90.0723C 204.838,88.8903 202.44,86.8044 199.972,84.9468C 198.927,84.1606 198.123,83.0979 197.198,82.1734C 197.198,106.028 198.08,129.912 196.865,153.736C 196.205,166.685 176.428,180.197 164.449,175.236C 148.915,168.801 150.198,143.661 150.198,126.847L 97.5331,126.847C 97.5331,146.261 83.0541,182.665 65.1174,175.236C 37.4301,163.767 50.5318,116.49 50.5318,86.521C 40.0484,97.0049 8.37231,87.1727 8.37231,72.3465C 8.37231,47.4921 50.5318,35.701 50.5318,10.8466C 92.9847,10.8466 135.861,12.9678 177.816,6.48462M 177.816,1.15131C 134.012,7.27655 89.4281,5.51324 45.1984,5.51324C 45.1984,28.4734 13.9224,40.3359 5.14825,61.5535C 0,74.0032 8.28241,93.6902 20.7289,98.8461C 28.2735,101.971 37.5787,100.593 45.1984,97.6558C 45.1984,120.082 39.1959,144.169 47.7894,164.883C 53.8635,179.524 83.2526,185.205 94.4608,173.997C 104.514,163.943 102.866,146.398 102.866,132.18L 144.865,132.18C 144.865,152.959 165.487,188.109 184.68,180.146C 211.914,168.847 202.532,122.997 202.532,93.512C 217.822,99.6431 245.126,84.9219 245.126,68.4482C 245.126,43.117 202.532,30.8445 202.532,5.51324C 194.166,5.51324 186.101,2.30975 177.816,1.15131 Z "/>
            <Path Width="229.229" Height="169.802" Canvas.Left="8.37231" Canvas.Top="6.48462" Stretch="Fill" Fill="#FF474747" Data="F1 M 177.816,6.48462C 184.361,7.49603 190.576,10.8466 197.198,10.8466C 197.198,12.623 196.032,14.8359 197.198,16.176C 208.27,28.8961 221.419,39.6633 232.972,51.9481C 241.854,61.3936 237.232,85.1108 225.253,90.0723C 222.498,91.2132 219.454,91.7808 216.472,91.7808C 213.49,91.7808 210.446,91.2132 207.692,90.0723C 204.838,88.8903 202.44,86.8044 199.972,84.9468C 198.927,84.1606 198.123,83.0979 197.198,82.1734C 197.198,106.028 198.08,129.912 196.865,153.736C 196.205,166.685 176.428,180.197 164.449,175.236C 148.915,168.801 150.198,143.661 150.198,126.847L 97.5331,126.847C 97.5331,146.261 83.0541,182.665 65.1174,175.236C 37.4301,163.767 50.5318,116.49 50.5318,86.521C 40.0484,97.0049 8.37231,87.1727 8.37231,72.3465C 8.37231,47.4921 50.5318,35.701 50.5318,10.8466C 92.9847,10.8466 135.861,12.9692 177.816,6.48462M 177.816,11.8179C 137.622,18.0674 96.5414,16.1799 55.8651,16.1799C 55.8651,37.5414 23.1918,45.8287 15.0301,65.5696C 11.2264,74.7696 21.7497,90.3472 31.705,90.3471C 41.4957,90.347 48.9424,80.5673 55.8651,73.644C 55.8651,104.638 39.5614,144.541 61.4776,166.458C 68.5153,173.496 86.9691,169.929 90.7831,160.736C 95.7963,148.652 92.1998,134.596 92.1998,121.513C 113.31,121.513 134.421,121.513 155.532,121.513C 155.532,139.792 163.648,177.324 180.531,170.319C 211.83,157.334 191.865,103.182 191.865,69.2969C 194.9,72.332 197.935,75.3669 200.969,78.4019C 209.205,86.6384 234.464,80.0952 234.464,68.4476C 234.464,41.7477 204.199,15.9193 177.816,11.8179 Z "/>
        </Canvas>
    </Viewbox>
    <Viewbox Width="252.724" Height="196" Canvas.Left="661.963" Canvas.Top="397.522">
        <Canvas Width="252.724" Height="196">
            <Path Width="184.385" Height="190.669" Canvas.Left="34.1687" Canvas.Top="2.66553" Stretch="Fill" Fill="#FF111111" Data="F1 M 126.361,193.335C 3.43677,193.335 3.43896,2.66577 126.361,2.66553C 249.284,2.66528 249.285,193.335 126.361,193.335 Z "/>
            <Path Width="189.542" Height="196" Canvas.Left="31.5905" Canvas.Top="0.00024414" Stretch="Fill" Fill="#FF000000" Data="F1 M 126.361,5.33362C 245.874,5.33362 245.874,190.667 126.361,190.667C 6.84894,190.667 6.84888,5.33362 126.361,5.33362M 126.361,0.000244141C 0,0.000488281 0.000488281,196 126.361,196C 252.721,196 252.724,0 126.361,0.000244141 Z "/>
            <Path Width="179.269" Height="185.333" Canvas.Left="36.727" Canvas.Top="5.33362" Stretch="Fill" Fill="#FF444444" Data="F1 M 126.361,5.33362C 245.874,5.33362 245.874,190.667 126.361,190.667C 6.84894,190.667 6.84888,5.33362 126.361,5.33362M 126.361,10.6669C 13.7515,10.6674 13.7563,185.333 126.361,185.334C 238.966,185.334 238.972,10.6664 126.361,10.6669 Z "/>
        </Canvas>
    </Viewbox>
    <Viewbox Width="141.33" Height="80.9617" Canvas.Left="720.455" Canvas.Top="466.878">
        <Canvas Width="141.33" Height="80.9617">
            <Path Width="114.167" Height="59.6284" Canvas.Left="10.6667" Canvas.Top="10.6667" Stretch="Fill" Fill="#FFF9D2A7" Data="F1 M 67.75,16.657C 46.824,16.657 27.2941,14.4604 10.7316,10.6667C 10.6938,11.5111 10.6667,12.3582 10.6667,13.2116C 10.6667,44.739 36.2251,70.295 67.75,70.295C 99.2759,70.295 124.833,44.739 124.833,13.2116C 124.833,12.3582 124.806,11.5111 124.768,10.6667C 108.206,14.4604 88.6756,16.657 67.75,16.657 Z "/>
            <Path Width="119.5" Height="64.9617" Canvas.Left="8.00002" Canvas.Top="8.00002" Stretch="Fill" StrokeThickness="5.33333" StrokeMiterLimit="2.75" Stroke="#FF000000" Data="F1 M 67.75,16.657C 46.824,16.657 27.2941,14.4604 10.7316,10.6667C 10.6938,11.5111 10.6667,12.3582 10.6667,13.2116C 10.6667,44.739 36.2251,70.295 67.75,70.295C 99.2759,70.295 124.833,44.739 124.833,13.2116C 124.833,12.3582 124.806,11.5111 124.768,10.6667C 108.206,14.4604 88.6756,16.657 67.75,16.657 Z "/>
            <Path Width="114.167" Height="59.6284" Canvas.Left="10.6667" Canvas.Top="10.6667" Stretch="Fill" Fill="#FFCEB49B" Data="F1 M 124.768,10.6667C 124.806,11.5111 124.833,12.3582 124.833,13.2116C 124.833,44.739 99.2759,70.295 67.75,70.295C 36.2251,70.295 10.6667,44.739 10.6667,13.2116C 10.6667,12.3582 10.6938,11.5111 10.7316,10.6667C 27.2941,14.4604 46.824,16.657 67.75,16.657C 88.6756,16.657 108.206,14.4604 124.768,10.6667M 119.342,17.2665C 103.474,20.364 85.7876,21.9904 67.75,21.9904C 49.7121,21.9904 32.0272,20.364 16.1574,17.2665C 18.2316,43.9149 40.5781,64.9617 67.75,64.9617C 94.9217,64.9617 117.268,43.9149 119.342,17.2665 Z "/>
            <Path Width="122.167" Height="68.5983" Canvas.Left="6.66669" Canvas.Top="5.69672" Stretch="Fill" Fill="#FF3F3F3F" Data="F1 M 124.768,10.6667C 124.806,11.5111 124.833,12.3582 124.833,13.2116C 124.833,44.739 99.2759,70.295 67.75,70.295C 36.2251,70.295 10.6667,44.739 10.6667,13.2116C 10.6667,12.3582 10.6938,11.5111 10.7316,10.6667C 27.2941,14.4604 46.824,16.657 67.75,16.657C 88.6756,16.657 108.206,14.4604 124.768,10.6667M 128.551,5.69672L 123.875,6.76758C 107.055,10.6205 87.6457,12.657 67.75,12.657C 47.854,12.657 28.4453,10.6205 11.6248,6.76758L 6.94904,5.69672L 6.73553,10.4885C 6.68866,11.5449 6.66669,12.4103 6.66669,13.2116C 6.66669,46.8934 34.0688,74.295 67.75,74.295C 101.431,74.295 128.833,46.8934 128.833,13.2116C 128.833,12.4103 128.811,11.5449 128.764,10.4885L 128.551,5.69672 Z "/>
        </Canvas>
    </Viewbox>
    <Path Width="1.33337" Height="5.17404" Canvas.Left="775.891" Canvas.Top="503.668" Stretch="Fill" StrokeThickness="1.33333" StrokeMiterLimit="2.75" Stroke="#FF000000" Fill="#FF000000" Data="F1 M 776.557,506.255C 776.557,512.907 776.557,499.603 776.557,506.255 Z "/>
    <Path Width="1.33337" Height="5.17404" Canvas.Left="803.023" Canvas.Top="503.801" Stretch="Fill" StrokeThickness="1.33333" StrokeMiterLimit="2.75" Stroke="#FF000000" Fill="#FF000000" Data="F1 M 803.69,506.388C 803.69,513.04 803.69,499.736 803.69,506.388 Z "/>
    <Path Width="396.367" Height="30.9775" Canvas.Left="608.142" Canvas.Top="575.512" Stretch="Fill" StrokeThickness="5.16455" StrokeMiterLimit="2.75" Stroke="#FF000000" Fill="#FF755637" Data="F1 M 611.138,603.907L 610.724,593.248L 1001.51,578.094L 1001.93,588.753L 611.138,603.907 Z "/>
</Canvas>

I am attempting to write an application that uses F# on the server and Silverlight on the client to visualize the Twitter API.  I am currently thinking of tracking trends in data.  I may also put something together to view friends of friends navigation.  The first step was to get approval from Twitter to write the application.  Having this approval raises your Twitter API request rate from 100 per hour to 20,000 per hour.

The first part of the application was exploring the Twitter API with F#.  Here is the external tool I am utilizing to parse the JSON data returned from Twitter. 

The link below is a free open source JSON parser for .Net.
http://james.newtonking.com/pages/json-net.aspx

I am actually considering consuming the data in xml as I am having some parsing issues with some of the JSON returned.

Lets discuss the file piece by piece.

#light
#r @"g:\Assets\TweetSharp\Newtonsoft.JSON.dll";;

// 0.  #light makes F# case sensitive.  #r brings in the Newtonsoft.JSON.dll so it can be used by the F# interactive compiler.

open System.IO
open System.Net
open Newtonsoft.Json
open Newtonsoft.Json.Linq

//1.  Brings in the various namespace we need to work with our program.
//Declares a function that take a string parameter
   let twitterhttp(url: string) =

//2.  Generates a web request object from the provided url
    let myWebRequest = HttpWebRequest.Create(url)

//2a.  To assign to a mutable variable you must use <- syntax I find this much clearer

//3. Set the method to post this is important because some twitter api methods require you to use

//3a.  GET
    myWebRequest.Method <- "POST"

//4.  Assign your network credentials so you can authenticate, I believe this method may change when they switch over to using only OAuth type Authentication
    myWebRequest.Credentials <- new NetworkCredential("username","password")

//5.  Get the webresponse
    let myWebResponse = myWebRequest.GetResponse()

//6.  Get the stream and apply read its contents
    let myStreamReader = new StreamReader(myWebResponse.GetResponseStream())
    let sResponse = myStreamReader.ReadToEnd()
    myStreamReader.Close()

//7.  A nice feature of F# is last line of the function automatically becomes the return  value
    sResponse

Here is the method without the comments

let twitterhttp(url: string) =
    let myWebRequest = HttpWebRequest.Create(url)
    myWebRequest.Method <- "POST"
    myWebRequest.Credentials <- new NetworkCredential("codenenterp","l3tm3in")
    let myWebResponse = myWebRequest.GetResponse()
    let myStreamReader = new StreamReader(myWebResponse.GetResponseStream())
    let sResponse = myStreamReader.ReadToEnd()
    myStreamReader.Close()
    sResponse

Here is the method using GET for the web request.  Note:  I could just pass this in as a parameter, but i wanted to keep them separate. 

let twitterhttpGet(url: string) =
    let myWebRequest = HttpWebRequest.Create(url)
    myWebRequest.Method <- "GET"
    myWebRequest.Credentials <- new NetworkCredential("username","password")
    let myWebResponse = myWebRequest.GetResponse()
    let myStreamReader = new StreamReader(myWebResponse.GetResponseStream())
    let sResponse = myStreamReader.ReadToEnd()
    myStreamReader.Close()
    sResponse

Here is the modified method.  The variable name : type is not needed in all cases.   I am using it here to make the code more readable.

let twitterhttp2(url: string method:string) =
    let myWebRequest = HttpWebRequest.Create(url)
    myWebRequest.Method <- method
    myWebRequest.Credentials <- new NetworkCredential("username","password")
    let myWebResponse = myWebRequest.GetResponse()
    let myStreamReader = new StreamReader(myWebResponse.GetResponseStream())
    let sResponse = myStreamReader.ReadToEnd()
    myStreamReader.Close()
    sResponse

Here is an example of calling to the Twitter F# functions. 

let twitter2 = twitterhttp(http://search.twitter.com/trends/current.json?q=codenenterp&rpp=100)

This will get you xml returned.  Notice where it is bolded.

let twitter2 = twitterhttp(http://search.twitter.com/trends/current.xml?q=codenenterp&rpp=100)

let twitter2 = twitterhttp(http://search.twitter.com/trends/current.rss?q=codenenterp&rpp=100)

let twitter2 = twitterhttp(http://search.twitter.com/trends/current.atom?q=codenenterp&rpp=100)

I will be providing a library for this in the near future.  You can also do this:

File.WriteAllText(@"C:\codenenterp.json",t8)

which will write out the file.  This is pretty cool when you are using F# interactive compiler to get a feel for what you are working with.

I hope this has been informative and helpful. 

Happy Coding!

Silverlight Samurai

Here is my first interactive attempt to work with the Netflix files.  I have attempted this before in C# , but ran out of free time.  Here is my F# code with comments on what I am attempting to do.

//We need to read files from disk

open System.IO

//Open the file and assign it to the file variable

let file = File.OpenText("c:\\SRC_Local\\SampleData\\download\\training_set\\training_set\\mv_0000001.txt")

//Read the whole file in a string

let contents = file.ReadToEnd()

//Here is where my functional side and imperative side start to battle a little

//first split the file by carriage return line feed

let data =
    contents.Split(System.Environment.NewLine.ToCharArray())

//Next split each line by ;

let data2 =
    data
    |>Seq.map(fun i -> i.Split([|';'|]))

//Skip the first item

let data3 =
    data
    |> Seq.skip(1) 

I am going to poke around some more and will post up part II when i get something interesting.

I wrote a quick application to see how it it was to call an F# lib from C#.  The hardest part was figuring out where the Microsoft.FSharp.Core lib was (It is in Program Files\FSharp directory).  Take a look at the sample a let me know what you think.

ConsoleApplication1.rar (43.27 kb)