Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Learn XAML and Windows Phone Development Right On Your Phone by Writing and Trying Our Samples!

DZone's Guide to

Learn XAML and Windows Phone Development Right On Your Phone by Writing and Trying Our Samples!

· Mobile Zone
Free Resource

Originally Authored by Social Ebola

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:

image image


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.

image image


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):

image image


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)


Source: http://socialebola.wordpress.com/2012/02/23/learn-xaml-wp7-development-right-on-your-phone-by-writing-and-trying-out-samples/

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}