We are really excited about our newest app! Now, the app is definitely targeted at the geekier users out there, but we think it’s really really cool!
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)
