Here’s the deal – you can use XAML  and Javascript to try out Windows Phone 7.5 development right on your phone or through a browser. Load the app, create a new sample (or edit an existing one) and play around with XAML and see it right on your phone. Instead of C#, you will be using Javascript, but otherwise, you can tinker and play with it.

If you want  to join the beta, email us (you will need to fix up the address)!

An entire sample is self contained inside one file. Here’s what a newly created sample looks like:

<UserControl xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    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"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    d:DesignHeight="480" d:DesignWidth="480">

  <!--
 Thanks for using the Javascript/Xaml app!
 Each XAML file has 3 major parts:
 1. The XAML itself - this describes the UI.
 2. The Javascript code - this controls what happens in the sample
 3. The manifest - gives the title of the sample + some more optional information
 -->
  <UserControl.Resources>
    <!-- 
 The manifest contains information about the sample 
 Title - contains the name of the sample
 IconUri - The URI for the icon of the sample.
 Under the Author element, you have 2 other elements
 Name - the name of the author of the sample
 WebSite - Uri for the web site of the author
 -->
    <sys:String x:Key="_manifest" xml:space="preserve">
      <![CDATA[
      <SnippetManifest>
        <Author>
          <Name>SocialEbola User</Name>
          <WebSite>http://socialebola.wordpress.com</WebSite>
        </Author>
        <EntryPoint>
          <Title>[Default Template]</Title>
          <!--<IconUri>http://server/something.png</IconUri> -->
        </EntryPoint>
      </SnippetManifest>
 ]]>
    </sys:String>
    <!-- The following code will be loaded and executed when the XAML is done loading. -->
    <sys:String x:Key="_code" xml:space="preserve">
      <![CDATA[
        // The hosting environment has an event called "Loaded". That event will fire when the sample starts.
        // The following shows how you hook the event and.
        host.add_Loaded(function()
        {
          // First thing we will do, is show an alert saying we are loaded.
          alert("loaded!");

          // Now, we will hook the other events we want to handle - namely, the button click event.
          // host.UI contains all the named controls in the XAML so you can easily access them:
          host.UI.button1.add_Click(function()
            {
              // Here, we wil change the text on the button when it's clicked.
              host.UI.button1.Content = "Hello XAML world!";
            });
          });
        });
      ]]>
    </sys:String>
  </UserControl.Resources>
  <Grid x:Name="LayoutRoot">
    <Button x:Name="button1" Content="Press me!"></Button>
  </Grid>
</UserControl>

Using the App

The JavaScript code is embedded within the XAML and will execute when the sample is loaded (more on that later)

The app comes with a few samples installed – you can see them on the main page of the application (tapping and holding a sample shows you various options available for you:

If you choose to edit the sample, you can actually do that on the phone (though it’s terribly inconvinient). Because of that, the app gives you a way of looking at your samples with the web-browser that makes for a slightly better editing environment.

Tapping the plus icon and the “create new” button will create a new ‘empty’ sample you can use to try things out in. Note that you can also point to any URL that contains XAML – you don’t have to use our servers.

After being created, you can choose to email yourself the web links so you can edit the XAML on a desktop (you can do the same thing – email the links – by going to the properties of a sample).

When editing a sample on the phone, you are presented with a pivot that contains the XAML and the JavasScript code (when saving, the code will be placed back inside the XAML):

If you use the edit link provided, you get a very simple text editing web page. Changing the XAML In that page and hitting “save” stores the sample back on the server. Refreshing the sample on the phone then pulls it down to the phone for testing.

What does the XAML looks like

The XAML has three main parts to it – the XAML itself that behaves as the container, the manifest (has some meta data about the sample) and the code. Both the code and the manifest are embedded as strings inside the Resources of the XAML file.

Here’s what the manifest looks like:

  <UserControl.Resources>
    <sys:String x:Key="_manifest" xml:space="preserve">
      <![CDATA[
      <SnippetManifest>
        <Author>
          <Name>SocialEbola User</Name>
          <WebSite>http://socialebola.wordpress.com</WebSite>
        </Author>
        <EntryPoint>
          <Title>[Default Template]</Title>
          <!--<IconUri>http://server/something.png</IconUri> -->
        </EntryPoint>
      </SnippetManifest>
 ]]>

The only really important bit is the <Title> element in there, which governs what you will see in the list of samples.

The code is similarly embedded – again, here’s the default JavaScript code that you get when starting a new sample:

    <sys:String x:Key="_code" xml:space="preserve">
      <![CDATA[
        // The hosting environment has an event called "Loaded". That event will fire when the sample starts.
        // The following shows how you hook the event and.
        host.add_Loaded(function()
        {
          // First thing we will do, is show an alert saying we are loaded.
          alert("loaded!");

          // Now, we will hook the other events we want to handle - namely, the button click event.
          // host.UI contains all the named controls in the XAML so you can easily access them:
          host.UI.button1.add_Click(function()
            {
              // Here, we wil change the text on the button when it's clicked.
              host.UI.button1.Content = "Hello XAML world!";
            });
          });
        });
      ]]>

As you can see, the first thing the code does, is hook up the “Loaded” event on the host object – that event will be fired when the sample starts up (like the HTML body load event).

The code then alerts that it’s loaded.

Finally, the code hooks the Click event of the button that’s in the XAML by using the host.UI object (the UI object will have all of XAML named controls in it).

That’s it for now – we are going to post a few more blogs about what you can do, but if you get into the beta, we urge you to try it out and tell us what you think

Here are links to the two examples that come preinstalled:

http://www.socialebola.com/Wpjs/Blob.ashx/Sample.Fin

http://www.socialebola.com/Wpjs/Blob.ashx/Sample.Conv

This app would not have been possible w/o the following open source projects:

JINT project on CodePlex (http://jint.codeplex.com)

Joel Martinez’s JINT porting to WP7 (http://www.codecube.com)

Search won out by a large margin – so you will see it on the app in the next 24 hours or so.

The other options were having an Ad-free version and supporting twitter, which you clearly did not want.

Enjoy, and thanks for participating in the poll!

The three options you had were:

• Pin to start – this allows you to pin certain reminder types to the start-screen so that access is even faster.
• More quick-time options – in Two Tap Reminder, when you schedule a reminder, you can just click how long in the future you want it to fire (in 30 minutes, for example). This option would have given users more control over these options.
• Make custom time easier – When selecting to set a reminder to a specific time, you use the standard Windows Phone way of doing it (the “rolling” data/time option). This would make it easier (more tap, less rolling).

Most of those who voted wanted to get the ability to pin as the next feature.. And so, we give you:

The update should make it to your phone in the next few days – it’s going through certification right now.

We will be changing the name of the app to “Social Birthday Tile” instead and republish to the marketplace quickly.

Please be advised hat you will NOT need to reinstall or re-pay for the app – this is just a name change.

Integration

Integrating with their control (download after registering here) was pretty easy – we already have an extensible mechanism for ads and their SDK seemed to be well engineered (though it uses a different mechanism than others). It took all of 20 minutes to extend our clients and server to support them.

Instead of providing you with a control, they give you a class you call into with a parent Grid element as a parameter and the ad “takes over” that element. An interesting approach that’s easy enough to use.

Their Dashboard

Inneractive’s dashboard is much fancier than PubCenter and gives you much better/complete stats. It’s also purdy and works great on the Windows Phone browser (something PubCenter does not do as well on)

If you go to “Analytics” it gives you exact information regarding where the ads got requested from, how many requests etc. Nice stuff!

Pilot

We ran two pilots. In one (a week or so ago), we diverted 25% of all the traffic from Fail++ to the new ad. Today, we again changed the ads and diverted 100% of all traffic from Fail++ (except for people using the Nodo app) to use the new Ad.

We then compared the results to what PubCenter gave us.

Bottom line

Results may vary. Your apps are not the same as our apps. But for us the results were very disappointing.

PubCenter out-performs Inneractive by a large factor on Windows Phone 7. Not only was the eCPM far lower, so were the impressions. We are going to stop using their SDK altogether, until such time that we see other people getting better results from them.

Other than that, my communication with them was very positive and professional. They are prompt to answer emails for the most part and seem to be eager to have people try their new platform.

If you tried them out, let us know what you saw.

Warning

One warning if you decide to go register with them though.. Do NOT use a password you use on other sites – also, don’t use any password you would not want somebody to see. They store passwords in clear-text on their web site and will send them to you (clear text) in email.

Default is everything

For some very good reasons, this behavior is off by default. Developers need to opt-in to it.

That also means though, that 99% of the apps out there are just not using it. That’s not a big deal in most cases, but in some, it can make your app feel much snappier.

So where’s the crash?

In Visual Studio, if you try to use this property, under certain circumstances, the designer will crash (show an error on the designer surface):

System.Reflection.TargetInvocationException
Exception has been thrown by the target of an invocation.
   at System.RuntimeMethodHandle._InvokeMethodFast(IRuntimeMethodInfo method, Object target, Object[] arguments, SignatureStruct& sig, MethodAttributes methodAttributes, RuntimeType typeOwner)
   at System.RuntimeMethodHandle.InvokeMethodFast(IRuntimeMethodInfo method, Object target, Object[] arguments, Signature sig, MethodAttributes methodAttributes, RuntimeType typeOwner)
   at System.Reflection.RuntimeMethodInfo.Invoke(Object obj, BindingFlags invokeAttr, Binder binder, Object[] parameters, CultureInfo culture, Boolean skipVisibilityChecks)
   at System.Delegate.DynamicInvokeImpl(Object[] args)
   at System.Windows.Threading.ExceptionWrapper.InternalRealCall(Delegate callback, Object args, Int32 numArgs)
   at MS.Internal.Threading.ExceptionFilterHelper.TryCatchWhen(Object source, Delegate method, Object args, Int32 numArgs, Delegate catchHandler)

System.InvalidOperationException
Layout measurement override of element 'Microsoft.Windows.Design.Platform.SilverlightViewProducer+SilverlightContentHost' should not return PositiveInfinity as its DesiredSize, even if Infinity is passed in as available size.
   at System.Windows.UIElement.Measure(Size availableSize)
   at MS.Internal.Designer.DeviceSkinViewPresenter.DeviceDesignerBackground.MeasureOverride(Size constraint)
   at System.Windows.FrameworkElement.MeasureCore(Size availableSize)
   at System.Windows.UIElement.Measure(Size availableSize)
   at Microsoft.Windows.Design.Interaction.DesignerView.MeasureOverride(Size constraint)
   at System.Windows.FrameworkElement.MeasureCore(Size availableSize)
   at System.Windows.UIElement.Measure(Size availableSize)
   at MS.Internal.Designer.Viewport.MeasureOverride(Size availableSize)
   at System.Windows.FrameworkElement.MeasureCore(Size availableSize)
   at System.Windows.UIElement.Measure(Size availableSize)
   at MS.Internal.Helper.MeasureElementWithSingleChild(UIElement element, Size constraint)
   at System.Windows.Controls.ScrollContentPresenter.MeasureOverride(Size constraint)
   at System.Windows.FrameworkElement.MeasureCore(Size availableSize)
   at System.Windows.UIElement.Measure(Size availableSize)
   at System.Windows.Controls.Grid.MeasureCell(Int32 cell, Boolean forceInfinityV)
   at System.Windows.Controls.Grid.MeasureCellsGroup(Int32 cellsHead, Size referenceSize, Boolean ignoreDesiredSizeU, Boolean forceInfinityV)
   at System.Windows.Controls.Grid.MeasureOverride(Size constraint)
   at System.Windows.FrameworkElement.MeasureCore(Size availableSize)
   at System.Windows.UIElement.Measure(Size availableSize)
   at System.Windows.Controls.ScrollViewer.MeasureOverride(Size constraint)
   at System.Windows.FrameworkElement.MeasureCore(Size availableSize)
   at System.Windows.UIElement.Measure(Size availableSize)
   at System.Windows.Controls.Grid.MeasureOverride(Size constraint)
   at System.Windows.FrameworkElement.MeasureCore(Size availableSize)
   at System.Windows.UIElement.Measure(Size availableSize)
   at MS.Internal.Helper.MeasureElementWithSingleChild(UIElement element, Size constraint)
   at System.Windows.Controls.ContentPresenter.MeasureOverride(Size constraint)
   at System.Windows.FrameworkElement.MeasureCore(Size availableSize)
   at System.Windows.UIElement.Measure(Size availableSize)
   at System.Windows.Controls.Control.MeasureOverride(Size constraint)
   at System.Windows.FrameworkElement.MeasureCore(Size availableSize)
   at System.Windows.UIElement.Measure(Size availableSize)
   at System.Windows.Interop.HwndSource.SetLayoutSize()
   at System.Windows.Interop.HwndSource.set_RootVisualInternal(Visual value)
   at MS.Internal.DeferredHwndSource.ProcessQueue(Object sender, EventArgs e)

So what’s the problem?

The issue is with the runtime used in Visual Studio to display the WP7 XAML. Visual Studio 2010 uses the Silverlight engine for this and the Silverlight engine apparently does not have that enum value implemented – and so, if there’s a design time DataContext applied in XAML, Silverlight craps out and crashes, causing the error message you see.

How do you solve it?

There may be a bunch of ways of solving it, but mine involves a Converter. Use the <Image> XAML element as you usually would, but in the Binding of the Source, apply the attached converter with the relevant parameters:

<Image Source="{Binding Path=MyImage, Converter={StaticResource RuntimeImageLoaderConverter1}, ConverterParameter=bd}"/>

The converter obviously needs to be declared in the Resources of the page or control. The interesting bit is the use of the converter parameters:

ConverterParameter=bd

“b” will make sure the image gets loaded in the background (the aforementioned BackgroundCreation flag) and “d” will make sure that it’s delay loaded.

That’s it – once you use the designer, the system will load the image normally (no funky flags) when in the designer and with the relevant flags when actually running on the phone.

How does it work?

It’s pretty simple, the converter checks to see if it’s in the design environment and if it is, it will default-create the Image. Otherwise, it will use the relevant flags (it also makes sure it knows how to load string URIs and regular URIs):

public class RuntimeImageLoaderConverter : IValueConverter
{

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        Uri uri = null;
        if (value is Uri)
        {
            uri = (Uri)value;
        }
        else if (value is String)
        {
            string s = (string)value;
            if (s.StartsWith("/"))
            {
                Uri.TryCreate(s, UriKind.Relative, out uri);
            }
            else
            {
                Uri.TryCreate(s, UriKind.Absolute, out uri);
            }
        }

        BitmapCreateOptions options = BitmapCreateOptions.None;

        string p = parameter as string;
        if (p != null && GetIsInDesignMode())
        {
            if (p.Contains("b") || p.Contains("B"))
            {
                options |= BitmapCreateOptions.BackgroundCreation;
            }

            if (p.Contains("d") || p.Contains("D"))
            {
                options |= BitmapCreateOptions.DelayCreation;
            }
        }

        BitmapImage result = null;
        if (uri != null)
        {
            result = new BitmapImage();
            result.CreateOptions = options;
            result.UriSource = uri;
        }

        return result;
    }

That’s about it. Hope this helps someone.

Download

With that, here’s how you add a word to the WP7 dictionary:

1. I typed “ftfy” (Fixed That For Ya). As you can see, the word is not in the dictionary:

2. To add it, tap on it:

3. Tap on the “+ ftfy”. That’s it – the word is now added to your dictionary.

Bonus:

When WP autocorrects a word that it doesn’t know (and that you typed correctly), tap on the word, the original “wrong” word will appear at the left-most side of the auto-correct strip. Tap that word, the correction WP7 did will be replaced with the original word you tapped in. Now, tap the word again, and you will be able to add it to the dictionary.

Please email us by using the “Feedback” tile on the app, and we will enable it for you.

1. Sometimes, you don’t want the start screen to be too “noisy”

2. It’s impossible with the default emulator provided by Microsoft.

The issue is that the emulator does not come with full functionality – it instead comes with IE and Settings (and if you dig around, you can also pin Local Scout and specific contacts).

If you want to add more icons (phone, outlook, text, xbox etc) to your screenshots, use the following tool – it creates mock tiles on the emulator to make it look like you have more apps pinned:

The tool is pretty simple – it gives you a bunch of buttons to pin the wanted tiles:

To get the tool working, you will need to deploy it to your emulator using the Deployment tool. Enjoy!

Download

Does anyone know about something like that?